Jelajahi Sumber

feat:修改浮动面板样式

wangsisi 2 minggu lalu
induk
melakukan
523d1a107a
1 mengubah file dengan 25 tambahan dan 10 penghapusan
  1. 25 10
      src/views/old_mini/home/components/homeFloatingPanel.vue

+ 25 - 10
src/views/old_mini/home/components/homeFloatingPanel.vue

@@ -9,7 +9,7 @@
             @height-change="handleHeightChange"
         >
             <template #header>
-                <div class="floating-panel-header" :style="{ borderRadius: activeTab === 0 ? '14px 14px 0 0' : '14px' }">
+                <div class="floating-panel-header" :class="{ 'file-header-active': activeTab === 0 }">
                     <div class="tabs">
                         <div
                             :class="['tab-item', activeTab === index ? 'active' : '']"
@@ -230,8 +230,12 @@ const handleExpandBtnClick = () => {
     .floating-panel-header {
         width: calc(100% - 24px);
         border-radius: 14px;
-        margin: 0 auto;
+        margin: 0 auto 10px;
         background: #fff;
+        &.file-header-active{
+            border-radius: 14px 14px 0 0;
+            margin-bottom: 0;
+        }
         .tabs {
             display: flex;
             .tab-item {
@@ -281,21 +285,33 @@ const handleExpandBtnClick = () => {
                     margin-right: 10px;
                 }
             }
+            ::v-deep{
+                .el-anchor{
+                    --el-anchor-line-height: auto;
+                }
+                .el-anchor__marker{
+                    height: 0;
+                }
+                .el-anchor.el-anchor--horizontal .el-anchor__list{
+                    width: 100%;
+                }
+                .el-anchor__link.is-active{
+                    background: rgba(33, 153, 248, 0.2);
+                }
+            }
             .tabs-content-group {
                 display: flex;
                 justify-content: space-evenly;
-                padding: 5px 0;
+                padding: 5px 8px;
+                background-color: transparent;
                 .tabs-content-item {
+                    flex: 1;
                     font-size: 14px;
                     color: rgba(0, 0, 0, 0.5);
                     font-weight: 500;
-                    padding: 4px 12px;
+                    padding: 1px 0;
                     border-radius: 14px;
                     text-align: center;
-                    &.active {
-                        color: #2199f8;
-                        background: rgba(33, 153, 248, 0.2);
-                    }
                 }
             }
         }
@@ -304,9 +320,8 @@ const handleExpandBtnClick = () => {
         width: calc(100% - 24px);
         height: 100%;
         margin: 0 auto;
-
         .card-content-group {
-            padding: 12px 0;
+            padding-bottom: 12px;
             height: 100%;
             box-sizing: border-box;
             overflow: auto;