修改tababr

src/views/tabbar/Index.vue

@@ -1,8 +1,10 @@
 <script setup>
-import {ref} from 'vue'
 import {getStaticImg} from '@/hooks/common.js'
+import { useRouter } from 'vue-router'
 
-const tabbarList=ref([
+const router=useRouter()
+
+const tabbarList=[
     {
         name:"home",
         icon:getStaticImg('tabbar/home.png'),
@@ -17,33 +19,88 @@ const tabbarList=ref([
         text:'我的',
         path:"/tabbar/user"
     }
-])
-const active = ref('home');
+]
+
+function goPage(item){
+    router.replace(item.path)
+}
 
 </script>
 
 <template>
     <div class="tabbar-page">
         <router-view></router-view>
-        <van-tabbar class="tabbar-box" v-model="active" z-index='99' route>
-            <van-tabbar-item 
-                :name="item.name" 
-                :icon="item.icon"
-                :to="item.path"
-                replace
+        <div class="tabbar-box">
+            <div 
+                :class="['tabbar-item',$route.path==item.path?'tabbar-item_active':'']"
                 v-for="item in tabbarList"
                 :key="item.name"
-            >
-                <span>{{item.text}}</span>
-                <template #icon="props">
-                    <img :src="props.active ? item.iconActive : item.icon" />
-                </template>
-            </van-tabbar-item>
-        </van-tabbar>
+                @click="goPage(item)"
+            >   
+                <div class="tabbar-item-con">
+                    <img class="icon" :src="$route.path==item.path?item.iconActive:item.icon" />
+                    <div class="text">{{item.text}}</div>
+                </div>
+            </div>
+        </div>
     </div>
 </template>
 
 <style lang="scss" scoped>
+.tabbar-box{
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 99;
+    background: #FFFFFF;
+    box-shadow: 0px -1px 12px rgba(0, 0, 0, 0.08);
+    height: 112px;
+    display: flex;
+    align-items: center;
+    .tabbar-item{
+        flex: 1;
+        padding: 16px;
+        height: 100%;
+        position: relative;
+        &::after{
+            content: '';
+            width: 1px;
+            height: calc(100% - 32px);
+            background-color: $border-color;
+            position: absolute;
+            top: 16px;
+            right: 0;
+        }
+        .tabbar-item-con{
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            height: 100%;
+            .icon{
+                width: 40px;
+                height: 40px;
+            }
+            .text{
+                font-size: 20px;
+                margin-top: 5px;
+            }
+        }
+        &:last-child::after{
+            display: none;
+        }
+    }
+    .tabbar-item_active{
+        .tabbar-item-con{
+            background-color: #F2F3FF;
+            border-radius: 112px;
+            .text{
+                color: $theme-color;
+            }
+        }
+    }
+}
 @media screen and (min-width:$media-width){
     .tabbar-box{
         display: none;