.

src/assets/tabbar_icon_home.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>tabbar_icon_01</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill-rule="evenodd">
+        <g id="我的" transform="translate(-80.000000, -734.000000)">
+            <g id="编组-3" transform="translate(0.000000, 729.000000)">
+                <g id="标签一" transform="translate(66.000000, 5.000000)">
+                    <g id="编组" transform="translate(14.000000, 0.000000)">
+                        <path d="M24.8,10.8012197 L14.0270926,3.01382419 L3.2,10.8002507 L3.2,18 C3.2,21.7555363 6.2444637,24.8 10,24.8 L24.8,24.8 L24.8,10.8012197 Z M23.2,11.619 L23.2,23.199 L10,23.2 L9.78018869,23.1954381 C7.01025922,23.0802518 4.8,20.7982427 4.8,18 L4.8,11.62 L14.024,4.986 L23.2,11.619 Z" id="路径" fill-rule="nonzero" transform="translate(14.000000, 13.906912) scale(-1, 1) translate(-14.000000, -13.906912) "></path>
+                        <rect id="矩形" x="9" y="14" width="1.6" height="6"></rect>
+                        <rect id="矩形备份" x="17" y="14" width="1.6" height="6"></rect>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/tabbar_icon_home_pre.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>tabbar_icon_01</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill-rule="evenodd">
+        <g id="首页" transform="translate(-80.000000, -1348.000000)" fill-rule="nonzero">
+            <g id="编组-3备份" transform="translate(0.000000, 1343.000000)">
+                <g id="标签一" transform="translate(66.000000, 5.000000)">
+                    <g id="编组" transform="translate(14.000000, 0.000000)">
+                        <path d="M13.9741102,4.00008433 L24,11.2103168 L24,18 C24,21.3137085 21.3137085,24 18,24 L4,24 L4,11.2100545 L13.9741102,4.00008433 Z M10.6,14 L9,14 L9,20 L10.6,20 L10.6,14 Z M18.6,14 L17,14 L17,20 L18.6,20 L18.6,14 Z" id="形状结合"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/tabbar_icon_mine.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>tabbar_icon_01</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill-rule="evenodd">
+        <g id="首页" transform="translate(-266.000000, -1348.000000)">
+            <g id="编组-3备份" transform="translate(0.000000, 1343.000000)">
+                <g id="标签二" transform="translate(252.000000, 5.000000)">
+                    <g id="编组" transform="translate(14.000000, 0.000000)">
+                        <path d="M14.5,3.2 L3.2,3.2 L3.2,14.5 C3.2,20.7408177 8.25918233,25.8 14.5,25.8 C20.7408177,25.8 25.8,20.7408177 25.8,14.5 C25.8,8.25918233 20.7408177,3.2 14.5,3.2 Z M4.8,14.5 L4.8,4.8 L14.5,4.8 C19.8571621,4.8 24.2,9.14283793 24.2,14.5 C24.2,19.8571621 19.8571621,24.2 14.5,24.2 C9.14283793,24.2 4.8,19.8571621 4.8,14.5 Z" id="矩形" fill-rule="nonzero"></path>
+                        <rect id="矩形备份" transform="translate(14.800000, 18.000000) rotate(-270.000000) translate(-14.800000, -18.000000) " x="14" y="15" width="1.6" height="6"></rect>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/tabbar_icon_mine_pre.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>tabbar_icon_01</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill-rule="evenodd">
+        <g id="我的" transform="translate(-266.000000, -734.000000)">
+            <g id="编组-3" transform="translate(0.000000, 729.000000)">
+                <g id="标签二" transform="translate(252.000000, 5.000000)">
+                    <g id="编组" transform="translate(14.000000, 0.000000)">
+                        <path d="M14.5,4 C20.2989899,4 25,8.70101013 25,14.5 C25,20.2989899 20.2989899,25 14.5,25 C8.70101013,25 4,20.2989899 4,14.5 L4,4 L14.5,4 Z M11.8,17.2 L11.8,18.8 L17.8,18.8 L17.8,17.2 L11.8,17.2 Z" id="形状结合"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/components/OrderInfo.vue

@@ -474,7 +474,7 @@ export default {
 .order-content {
     display: flex;
     padding-top: 10px;
-    border-top: 1px sold #f2f4f5;
+    border-top: 1px solid #f2f4f5;
 
     .order-text {
         margin-left: 10px;
@@ -513,7 +513,7 @@ export default {
     display: flex;
     justify-content: flex-end;
     align-items: center;
-    border-top: 1px sold #f2f4f5;
+    border-top: 1px solid #f2f4f5;
     margin-top: 15px;
 
     .van-button {

src/components/OrderItem.vue

@@ -1,8 +1,8 @@
 <template>
     <div class="order-info">
         <div class="order-top">
-            <div class="order-no">订单编号:{{ info.id }}</div>
-            <div class="order-staus">
+            <div class="order-no">{{ $t('order.id') }}:{{ info.id }}</div>
+            <div class="order-staus" :class="info.status">
                 {{ info.locked && info.status === 'SELLING' ? '暂停出售' : orderStatus[info.status] }}
             </div>
         </div>
@@ -24,7 +24,7 @@
 
         <div class="order-price">
             <div class="price">
-                <span>实际支付:</span>
+                <span>{{ $t('order.totalPayment') }}:</span>
                 <span>¥{{ info.totalPrice }}</span>
             </div>
 
@@ -34,73 +34,75 @@
         <div class="order-button">
             <span class="problem" @click="problem">遇到问题?</span>
             <template v-if="info.status == 'NOT_PAID'">
-                <!-- <van-button color="#FF8F00" round plain size="small" @click="confirmPayment">我已付款</van-button> -->
-                <van-button type="primary" round size="small" @click="pay">立即支付</van-button>
+                <!-- <van-button color="#FF8F00"plain size="small" @click="confirmPayment">我已付款</van-button> -->
+                <van-button type="primary" size="small" @click="pay">立即支付</van-button>
             </template>
 
             <template v-else-if="info.status == 'NOT_CONFIRMED'">
-                <van-button color="#AAACAD" round plain size="small" @click="goDetail">查看订单</van-button>
+                <van-button color="#AAACAD" plain size="small" @click="goDetail">查看订单</van-button>
             </template>
 
             <template v-else-if="info.status == 'SOLD_NOT_CONFIRMED'">
-                <!-- <van-button color="#AAACAD" round plain size="small" @click="confirmPayment">未收到款</van-button> -->
-                <!-- <van-button type="primary" round size="small" @click="confirmReceipt">确认收款</van-button> -->
+                <!-- <van-button color="#AAACAD"plain size="small" @click="confirmPayment">未收到款</van-button> -->
+                <!-- <van-button type="primary"size="small" @click="confirmReceipt">确认收款</van-button> -->
             </template>
 
             <template v-else-if="info.status == 'SELLING'">
-                <!-- <van-button color="#AAACAD" round plain size="small" @click="confirmPayment">未收到款</van-button> -->
-                <!-- <van-button type="primary" round size="small" @click="confirmReceipt">确认收款</van-button> -->
-                <van-button color="#AAACAD" round plain size="small" @click="applyShip">申请发货</van-button>
-                <van-button color="#AAACAD" round plain size="small" @click="goDetail">查看订单</van-button>
+                <!-- <van-button color="#AAACAD"plain size="small" @click="confirmPayment">未收到款</van-button> -->
+                <!-- <van-button type="primary"size="small" @click="confirmReceipt">确认收款</van-button> -->
+                <!-- <van-button color="#AAACAD" plain size="small" @click="applyShip">申请发货</van-button> -->
+                <van-button color="#AAACAD" plain size="small" @click="goDetail">查看订单</van-button>
             </template>
 
             <template v-else-if="info.status == 'CONFIRMED'">
-                <van-button color="#AAACAD" round plain size="small" @click="applyShip">申请发货</van-button>
-                <van-button type="primary" round size="small" @click="show = true" v-if="delegationActive">
+                <van-button color="#AAACAD" plain size="small" @click="applyShip">申请发货</van-button>
+                <van-button type="primary" size="small" @click="show = true" v-if="delegationActive">
                     委托代卖</van-button
                 >
-                <van-button color="#aaacad" round @click="showTip" v-else>委托代卖 </van-button>
+                <van-button color="#aaacad" @click="showTip" v-else>委托代卖 </van-button>
             </template>
 
             <template v-else-if="info.status == 'SOLD'">
-                <van-button color="#AAACAD" round plain size="small" @click="goDetail">查看订单</van-button>
+                <van-button color="#AAACAD" plain size="small" @click="goDetail">查看订单</van-button>
             </template>
             <template v-else-if="info.status == 'NOT_SHIPPED'">
-                <van-button color="#AAACAD" round plain size="small" @click="goDetail">查看订单</van-button>
+                <van-button color="#AAACAD" plain size="small" @click="goDetail">查看订单</van-button>
             </template>
             <template v-else-if="info.status == 'RECEIVED'">
-                <van-button color="#AAACAD" round plain size="small" @click="goDetail">查看订单</van-button>
+                <van-button color="#AAACAD" plain size="small" @click="goDetail">查看订单</van-button>
             </template>
             <template v-else-if="info.status == 'SHIPPED'">
-                <van-button type="primary" round size="small" @click="receive"> 确认收货</van-button>
+                <van-button type="primary" size="small" @click="receive"> 确认收货</van-button>
             </template>
         </div>
-        <van-popup v-model="show" class="getsold">
-            <div class="title">委托代卖</div>
-            <div class="sold-list">
-                <div class="sold-item">
-                    <div class="name">原价</div>
-                    <div class="val">¥{{ info.totalPrice }}</div>
+        <ion-modal id="delegate" ref="modal" v-model:is-open="show" @didDismiss="show = false">
+            <div class="getsold">
+                <div class="title">{{ $t('delegate.title') }}</div>
+                <div class="sold-list">
+                    <div class="sold-item">
+                        <div class="name">原价</div>
+                        <div class="val">¥{{ info.totalPrice }}</div>
+                    </div>
+                    <div class="sold-item">
+                        <div class="name">加价</div>
+                        <van-stepper v-model="value" input-width="60px" step="1" integer min="1" :max="maxRiseRate" />
+                    </div>
+                    <div class="sold-item">
+                        <div class="name">卖价</div>
+                        <div class="val bold">¥{{ soldValue }}</div>
+                    </div>
                 </div>
-                <div class="sold-item">
-                    <div class="name">加价</div>
-                    <van-stepper v-model="value" input-width="60px" step="1" integer min="1" :max="maxRiseRate" />
+                <div class="tips">
+                    注：委托平台代卖服务，每次最高可将商品价格提高{{ maxRiseRate }}%，平台会收取{{
+                        serviceValue
+                    }}%的托管服务费用
                 </div>
-                <div class="sold-item">
-                    <div class="name">卖价</div>
-                    <div class="val bold">¥{{ soldValue }}</div>
-                </div>
-            </div>
-            <div class="tips">
-                注：委托平台代卖服务，每次最高可将商品价格提高{{ maxRiseRate }}%，平台会收取{{
-                    serviceValue
-                }}%的托管服务费用
-            </div>
 
-            <van-button class="button" block type="primary" :disabled="loading" round @click="sale">
-                支付手续费 ¥{{ serviceCharge }}
-            </van-button>
-        </van-popup>
+                <van-button class="button" block type="primary" :disabled="loading" @click="sale">
+                    支付手续费 ¥{{ serviceCharge }}
+                </van-button>
+            </div>
+        </ion-modal>
     </div>
 </template>
 <script>
@@ -430,11 +432,23 @@ export default {
     justify-content: space-between;
     height: 43px;
     align-items: center;
-
+    font-size: 13px;
+    color: var(--ion-text-color);
     .order-staus {
         color: #ff8f00;
         font-size: 13px;
         font-weight: bold;
+        &.NOT_PAID {
+            color: var(--ion-color-danger);
+        }
+        &.CANCELED,
+        &.SOLD {
+            color: var(--ion-color-step-300);
+        }
+        &.CONFIRMED,
+        &.SELLING {
+            .gt();
+        }
     }
 }
 
@@ -446,10 +460,9 @@ export default {
 
 .text2 {
     font-size: 12px;
-    color: rgba(255, 143, 0, 1);
     line-height: 22px;
     height: 22px;
-    background: rgba(255, 143, 0, 0.12);
+    background: var(--ion-color-step-50);
     border-radius: 2px 100px 100px 100px;
     padding: 0 8px;
     margin-top: 5px;
@@ -465,20 +478,19 @@ export default {
     .price {
         font-size: 14px;
         font-weight: bold;
-        color: rgba(0, 0, 0, 1);
         line-height: 20px;
     }
 
     .num {
         font-size: 14px;
-        color: rgba(170, 172, 173, 1);
+        color: var(--ion-color-step-300);
         line-height: 20px;
     }
 }
 .order-content {
     display: flex;
     padding-top: 10px;
-    border-top: 1px sold #f2f4f5;
+    border-top: 1px solid var(--ion-color-step-50);
 
     .order-text {
         margin-left: 10px;
@@ -492,21 +504,21 @@ export default {
 
     .price {
         font-size: 12px;
-        color: rgba(102, 102, 102, 1);
+        color: var(--ion-color-step-300);
         line-height: 17px;
         margin-top: 18px;
         span {
             &:last-child {
                 font-size: 16px;
                 font-weight: bold;
-                color: rgba(255, 59, 48, 1);
+                color: var(--ion-color-danger);
                 line-height: 22px;
             }
         }
     }
     .order-tips {
         font-size: 12px;
-        color: rgba(255, 143, 0, 1);
+        color: var(--ion-color-danger);
         line-height: 17px;
         margin-top: 8px;
     }
@@ -517,26 +529,24 @@ export default {
     display: flex;
     justify-content: flex-end;
     align-items: center;
-    border-top: 1px sold #f2f4f5;
+    border-top: 1px solid var(--ion-color-step-50);
     margin-top: 15px;
 
     .van-button {
         margin-left: 10px;
         height: 28px;
+        border-radius: 4px;
     }
     .problem {
         flex-grow: 1;
         text-align: left;
         font-size: 12px;
         font-weight: 400;
-        color: rgba(170, 172, 173, 1);
+        color: var(--ion-color-step-300);
     }
 }
 .getsold {
-    width: 300px;
-    height: 405px;
-    background: rgba(255, 255, 255, 1);
-    border-radius: 4px;
+    width: calc(100vw - 60px);
     padding: 15px 20px;
     box-sizing: border-box;
     .title {
@@ -550,11 +560,10 @@ export default {
     .sold-item {
         display: flex;
         align-items: center;
-        height: 28px;
         padding: 22px 0 10px;
-        border-bottom: 1px solid #f2f4f5;
+        border-bottom: 1px solid var(--ion-color-step-50);
         .name {
-            font-size: 18px;
+            font-size: 14px;
             font-weight: bold;
             color: rgba(0, 0, 0, 1);
             line-height: 25px;
@@ -590,4 +599,12 @@ export default {
         margin: 50px auto 0;
     }
 }
+
+ion-modal#delegate {
+    --width: fit-content;
+    --min-width: 250px;
+    --height: fit-content;
+    --border-radius: 6px;
+    --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
+}
 </style>

src/locales/zh.json

@@ -3,9 +3,12 @@
     "login": "登录",
     "common": {
         "pullRefresh": "下拉刷新",
-        "loadFinish": "加载完成"
+        "loadFinish": "加载完成",
+        "home": "首页",
+        "mine": "我的"
     },
     "order": {
+        "id": "订单编号",
         "my": "我的订单",
         "detail": "订单详情",
         "payMethod": "支付方式",

src/views/OrderDetailPage.vue

@@ -20,11 +20,11 @@
                     <ion-icon :icon="icons.timeOutline" v-if="orderInfo.status == 'SELLING'"></ion-icon>
                     <ion-icon :icon="icons.walletOutline" v-if="orderInfo.status == 'SOLD_NOT_PAID'"></ion-icon>
                     <ion-icon :icon="icons.checkmarkCircleOutline" v-if="orderInfo.status == 'SOLD'"></ion-icon>
-                    <div class="status">
+                    <div class="status" v-if="orderInfo.status">
                         {{ $t('order.status.' + orderInfo.status) }}
                     </div>
                 </div>
-                <div class="status-desc">
+                <div class="status-desc" v-if="orderInfo.status">
                     {{ $t('order.statusDesc.' + orderInfo.status) }}
                 </div>
             </div>
@@ -86,16 +86,9 @@
                     </div>
                 </div>
             </div>
-            <ion-modal ref="modal" :is-open="show" :presentingElement="presentingElement">
-                <ion-header>
-                    <ion-toolbar>
-                        <ion-title>{{ $t('delegate.title') }}</ion-title>
-                        <ion-buttons slot="end">
-                            <ion-button @click="show = false">{{ $t('cancel') }}</ion-button>
-                        </ion-buttons>
-                    </ion-toolbar>
-                </ion-header>
+            <ion-modal id="delegate" ref="modal" :is-open="show" @didDismiss="show = false">
                 <div v-if="show" class="getsold">
+                    <div class="title">{{ $t('delegate.title') }}</div>
                     <div class="sold-list">
                         <div class="sold-item">
                             <div class="name">原价</div>
@@ -224,7 +217,7 @@ export default {
         this.$http
             .get('/order/get/' + this.$route.query.id)
             .then(res => {
-                this.orderInfo = { ...res, status: 'CONFIRMED' }
+                this.orderInfo = { ...res }
                 if (res.productId) {
                     return this.$http.get('/product/get/' + res.productId)
                 }
@@ -515,8 +508,11 @@ export default {
     z-index: 1;
     padding: 22px 16px 0 16px;
     color: var(--ion-color-dark-contrast);
+    min-height: 76px;
     .status {
         .f();
+        height: 24px;
+        line-height: 24px;
         font-size: 18px;
         ion-icon {
             font-size: 24px;
@@ -526,6 +522,8 @@ export default {
     .status-desc {
         margin-top: 6px;
         font-size: 14px;
+        height: 24px;
+        line-height: 24px;
     }
 }
 .addresss {
@@ -575,10 +573,9 @@ export default {
 
             .text2 {
                 font-size: 12px;
-                color: rgba(255, 143, 0, 1);
                 line-height: 22px;
                 height: 22px;
-                background: rgba(255, 143, 0, 0.12);
+                background: var(--ion-color-step-50);
                 border-radius: 2px 100px 100px 100px;
                 padding: 0 8px;
                 margin-top: 5px;
@@ -721,8 +718,7 @@ ion-backdrop {
     background: var(--ion-color-step-950);
 }
 .getsold {
-    // width: 300px;
-    // height: 405px;
+    width: calc(100vw - 60px);
     background: var(--ion-background-color);
     border-radius: 4px;
     padding: 15px 20px;
@@ -777,4 +773,11 @@ ion-backdrop {
         margin: 50px auto 0;
     }
 }
+ion-modal#delegate {
+    --width: fit-content;
+    --min-width: 250px;
+    --height: fit-content;
+    --border-radius: 6px;
+    --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
+}
 </style>

src/views/OrderPage.vue

@@ -1,5 +1,5 @@
 <template>
-    <ion-page>
+    <ion-page ref="page">
         <ion-header>
             <ion-toolbar>
                 <ion-buttons slot="start">
@@ -26,6 +26,7 @@
                 </div>
             </ion-item-divider>
             <div class="tabs-placeholder"></div>
+            <van-empty v-if="finished && list.length === 0" :image="emptyImg"></van-empty>
             <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="loadmore">
                 <order-item v-for="item in list" :key="item.id" :info="item"></order-item>
             </van-list>
@@ -38,7 +39,7 @@ import { useUserStore } from '@/stores/user'
 import OrderItem from '@/components/OrderItem.vue'
 import { parse } from 'date-fns'
 import { useWindowSize } from '@vueuse/core'
-
+import emptyImg from '@/assets/img_empty_order.png'
 export default {
     name: 'OrderPage',
     components: { OrderItem },
@@ -59,7 +60,8 @@ export default {
             status: 'ALL',
             page: 0,
             size: 20,
-            windowSize: useWindowSize()
+            windowSize: useWindowSize(),
+            emptyImg
         }
     },
     computed: {
@@ -103,6 +105,7 @@ export default {
         refresh() {
             this.loading = true
             this.page = 0
+            this.finished = false
             this.getData()
         },
         loadmore() {

src/views/TabsPage.vue

@@ -4,63 +4,66 @@
             <ion-router-outlet></ion-router-outlet>
             <ion-tab-bar slot="bottom">
                 <ion-tab-button tab="home" href="/home">
-                    <img class="icon" src="../assets/tabbar_icon_01_pre.png" v-if="activeTab === 'home'" alt="" />
-                    <img class="icon" src="../assets/tabbar_icon_01.png" v-else alt="" />
-                    <ion-label>首页</ion-label>
+                    <ion-icon :icon="activeTab === 'home' ? tabIconHomePre : tabIconHome" />
+                    <ion-label>{{ $t('common.home') }}</ion-label>
                 </ion-tab-button>
 
-                <ion-tab-button tab="mine" icon="icon-tabbar_02" icon-on="icon-tabbar_02_pre" href="/mine">
-                    <img class="icon" src="../assets/tabbar_icon_02_pre.png" v-if="activeTab === 'mine'" alt="" />
-                    <img class="icon" src="../assets/tabbar_icon_02.png" v-else alt="" />
-                    <ion-label>我的</ion-label>
+                <ion-tab-button tab="mine" href="/mine">
+                    <ion-icon :icon="activeTab === 'mine' ? tabIconMinePre : tabIconMine" />
+                    <ion-label>{{ $t('common.mine') }}</ion-label>
                 </ion-tab-button>
             </ion-tab-bar>
         </ion-tabs>
     </ion-page>
 </template>
-
-<script setup>
-import { ref, onMounted } from 'vue'
-const activeTab = ref(null)
-const tabChange = tabInfo => {
-    if (tabInfo.tab === 'home') {
-        activeTab.value = 'home'
-    }
-    if (tabInfo.tab === 'mine') {
-        activeTab.value = 'mine'
-    }
-}
-</script>
-
 <script>
-import { defineComponent, onMounted, ref } from 'vue'
-import { IonTabBar, IonTabButton, IonTabs, IonLabel, IonIcon, IonPage, IonRouterOutlet } from '@ionic/vue'
-import { ellipse, square, triangle } from 'ionicons/icons'
-
+import { defineComponent, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import tabIconHome from '@/assets/tabbar_icon_home.svg'
+import tabIconHomePre from '@/assets/tabbar_icon_home_pre.svg'
+import tabIconMine from '@/assets/tabbar_icon_mine.svg'
+import tabIconMinePre from '@/assets/tabbar_icon_mine_pre.svg'
 export default defineComponent({
     name: 'TabsPage',
-    components: { IonLabel, IonTabs, IonTabBar, IonTabButton, IonIcon, IonPage, IonRouterOutlet },
     setup() {
+        const route = useRoute()
+        const activeTab = ref(null)
+        if (route.path === '/home') {
+            activeTab.value = 'home'
+        } else {
+            activeTab.value = 'mine'
+        }
+        const tabChange = tabInfo => {
+            if (tabInfo.tab === 'home') {
+                activeTab.value = 'home'
+            }
+            if (tabInfo.tab === 'mine') {
+                activeTab.value = 'mine'
+            }
+        }
         return {
-            ellipse,
-            square,
-            triangle
+            tabChange,
+            activeTab,
+            tabIconHome,
+            tabIconHomePre,
+            tabIconMine,
+            tabIconMinePre
         }
     }
 })
 </script>
 
 <style lang="less" scoped>
-.tabs {
-    --ion-tab-bar-background: #fff;
-    --color: #939599;
-    --ion-tab-bar-color-selected: #000;
-    --ion-tab-bar-border-color: #fff;
+ion-tab-bar {
+    --background: var(--ion-color-step-0);
+    --border: none;
 }
-
-.icon {
+ion-tab-button {
+    --color: var(--ion-color-step-400);
+    --color-selected: var(--ion-color-step-850);
+}
+ion-icon {
     width: 28px;
     height: 28px;
-    display: block;
 }
 </style>