فهرست منبع

feat:修改tabs样式

wangsisi 2 هفته پیش
والد
کامیت
64424c0ca5
2فایلهای تغییر یافته به همراه43 افزوده شده و 16 حذف شده
  1. 18 16
      src/views/old_mini/home/components/homeFloatingPanel.vue
  2. 25 0
      src/views/old_mini/home/index.vue

+ 18 - 16
src/views/old_mini/home/components/homeFloatingPanel.vue

@@ -18,13 +18,14 @@
                     </div>
                 </div>
                 <el-anchor
+                    class="tabs-content-group"
                     :container="containerRef"
                     direction="horizontal"
                     type="default"
                     :offset="0"
                     @click="handleClick"
                     >
-                    <el-anchor-link v-for="(tab,index) in tabsContent" :key="tab" @click="handleTabsContentClick(index)" :href="'#part' + (index + 1)" :title="tab"></el-anchor-link>
+                    <el-anchor-link class="tabs-content-item" v-for="(tab,index) in tabsContent" :key="tab" @click="handleTabsContentClick(index)" :href="'#part' + (index + 1)" :title="tab"></el-anchor-link>
                 </el-anchor>
             </div>
         </template>
@@ -172,20 +173,6 @@ const handleHeightChange = (data) => {
                 }
             }
         }
-    }
-    .floating-panel-content {
-        width: calc(100% - 24px);
-        height: 100%;
-        margin: 0 auto;
-        .select-group {
-            padding-top: 5px;
-            background: #fff;
-            .select-item {
-                .select-item-title {
-                    font-size: 16px;
-                }
-            }
-        }
         .tabs-content-group{
             display: flex;
             justify-content: space-evenly;
@@ -205,9 +192,24 @@ const handleHeightChange = (data) => {
                 }
             }
         }
+    }
+    .floating-panel-content {
+        width: calc(100% - 24px);
+        height: 100%;
+        margin: 0 auto;
+        .select-group {
+            padding-top: 5px;
+            background: #fff;
+            .select-item {
+                .select-item-title {
+                    font-size: 16px;
+                }
+            }
+        }
+        
         .card-content-group{
             padding: 12px 0;
-            height: 500px;
+            height: 800px;
             overflow-y: auto;
             .card-content-item{
                 margin-top: 10px;

+ 25 - 0
src/views/old_mini/home/index.vue

@@ -2,6 +2,11 @@
     <div class="home-index" :style="{ height: `calc(100vh - ${tabBarHeight}px)` }">
         <!-- 地图 -->
         <div class="map-container" ref="mapContainer"></div>
+        <!-- 按钮 -->
+         <div class="add-button">
+            <el-icon class="add-button-icon"><CircleCloseFilled /></el-icon>
+            <span>创建我的农场</span>
+         </div>
         <!-- 天气遮罩 -->
         <div class="weather-mask" v-show="isExpanded"></div>
         <!-- 天气 -->
@@ -54,6 +59,26 @@ const heightChange = (height) => {
         width: 100%;
         height: 100%;
     }
+    .add-button{
+        position: absolute;
+        bottom: 20px;
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: 2;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #fff;
+        background-image: linear-gradient(180deg, #70BFFE 0%, #2199F8 100%);
+        border-radius: 25px;
+        padding: 12px 0;
+        width: 187px;
+        .add-button-icon{
+            font-size: 20px;
+            margin-right: 5px;
+            transform: rotate(45deg);
+        }
+    }
     .weather-mask{
         position: absolute;
         top: 0;