样式修改

package.json

@@ -32,6 +32,7 @@
     "postcss-px-to-viewport": "^1.1.1",
     "sass": "^1.44.0",
     "unplugin-vue-components": "^0.24.1",
-    "vite": "^4.2.0"
+    "vite": "^4.2.0",
+    "vite-plugin-vue-setup-extend": "^0.4.0"
   }
 }

src/views/myETA/Index.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup name="MyETAIndex">
 import MobileClassifyWrap from './components/MobileClassifyWrap.vue'
 import PadClasssifyWrap from './components/PadClasssifyWrap.vue'
 

src/views/myETA/components/MobileClassifyWrap.vue

@@ -160,23 +160,33 @@ function goChooseChart(){
 }
 .classify-type-box{
     padding: $page-padding;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08);
     .item{
         display: inline-block;
-        width: 172px;
-        height: 64px;
-        line-height: 64px;
-        text-align: center;
-        border: 1px solid $theme-color;
-        color: $theme-color;
+        font-size: 32px;
+        color: $font-grey_999;
+        margin-right: 40px;
+        position: relative;
     }
     .active{
-        background-color: $theme-color;
-        color: #fff;
+        color: #333;
+        &::after{
+            content: '';
+            position: absolute;
+            bottom: -$page-padding;
+            left: 50%;
+            transform: translateX(-50%);
+            display: block;
+            width: 50px;
+            height: 6px;
+            background-color: $theme-color;
+            border-radius: 3px;
+        }
     }
 }
 .list-box{
     padding: $page-padding;
-    padding-bottom: 110px;
+    padding-bottom: 130px;
     .item{
         padding: 20px 0;
         display: flex;
@@ -206,26 +216,27 @@ function goChooseChart(){
     left: 0;
     right: 0;
     bottom: 0;
-    height: 100px;
+    height: 120px;
     background-color: #fff;
     display: flex;
     justify-content: space-around;
     align-items: center;
     z-index: 99;
     .item{
-        width: 300px;
-        height: 76px;
+        width: 304px;
+        height: 80px;
         display: flex;
         align-items: center;
         justify-content: center;
-        color: $theme-color;
+        color: #fff;
         font-size: 32px;
-        border: 1px solid $theme-color;
-        border-radius: 80px;
+        box-shadow: 0px 3px 14px 2px rgba(0, 0, 0, 0.05), 0px 8px 10px 1px rgba(0, 0, 0, 0.06), 0px 5px 5px -3px rgba(0, 0, 0, 0.1);
+        border-radius: 12px;
+        background-color: $theme-color;
         .icon{
-            width: 32px;
-            height: 32px;
-            margin-right: 20px;
+            width: 40px;
+            height: 40px;
+            margin-right: 10px;
         }
     }
 }

vite.config.js

@@ -3,6 +3,7 @@ import vue from "@vitejs/plugin-vue";
 import path from "path";
 import Components from "unplugin-vue-components/vite";
 import { VantResolver } from "unplugin-vue-components/resolvers";
+import VueSetupExtend from 'vite-plugin-vue-setup-extend'
 
 // https://vitejs.dev/config/
 export default ({ mode }) =>
@@ -13,6 +14,7 @@ export default ({ mode }) =>
       Components({
         resolvers: [VantResolver()],
       }),
+      VueSetupExtend()
     ],
     css: {
       // css预处理器