feat:"订单增加税费"

src/assets/language/en.json

@@ -768,7 +768,7 @@
     "dataOverview": "Dashboard",
     "orderData": "Orders",
     "totalIncome": "Revenue",
-    "productNum": "Sales",
+    "productNum": "Volume",
     "numberOfOrders": "Orders",
     "salesAmount": "Sales",
     "commonTools": "Tools",
@@ -1002,6 +1002,7 @@
     "equipmentName": "Machine Name",
     "tradeName": "Product",
     "dividingDomesticService": "Commission",
+    "tax": "Taxes & Fees",
     "business": "Merchant",
     "orderNo": "Order No",
     "commodity": "Item",

src/assets/language/es.json

@@ -1002,6 +1002,7 @@
         "equipmentName": "Equipo",
         "tradeName": "Producto",
         "dividingDomesticService": "Comisión",
+        "tax": "Impuestos",
         "business": "Comercio",
         "orderNo": "N° pedido",
         "commodity": "Artículo",

src/assets/language/fr.json

@@ -1002,6 +1002,7 @@
         "equipmentName": "Appareil",
         "tradeName": "Produit",
         "dividingDomesticService": "Commission",
+        "tax": "Taxes",
         "business": "Marchand",
         "orderNo": "N° commande",
         "commodity": "Article",

src/assets/language/ja.json

@@ -991,6 +991,7 @@
         "equipmentName": "機器名",
         "tradeName": "商品名",
         "dividingDomesticService": "コミッション分配",
+        "tax": "税金",
         "business": "ビジネス",
         "orderNo": "注文番号",
         "commodity": "商品",

src/assets/language/pt.json

@@ -1002,6 +1002,7 @@
         "equipmentName": "Equipamento",
         "tradeName": "Produto",
         "dividingDomesticService": "Comissão",
+        "tax": "Tributos e Taxas",
         "business": "Comerciante",
         "orderNo": "Nº do Pedido",
         "commodity": "Item",

src/assets/language/ru.json

@@ -1002,6 +1002,7 @@
         "equipmentName": "Устройство",
         "tradeName": "Товар",
         "dividingDomesticService": "Комиссия",
+        "tax": "Налоги и сборы",
         "business": "Мерчант",
         "orderNo": "№ заказа",
         "commodity": "Товар",

src/assets/language/uk.json

@@ -1002,6 +1002,7 @@
         "equipmentName": "Пристрій",
         "tradeName": "Товар",
         "dividingDomesticService": "Розподіл комісій",
+        "tax": "Податки та збори",
         "business": "Продавець",
         "orderNo": "Номер замовлення",
         "commodity": "Товар",

src/assets/language/zh.json

@@ -1002,6 +1002,7 @@
     "equipmentName": "设备名称",
     "tradeName": "商品名称",
     "dividingDomesticService": "分佣",
+    "tax": "税费",
     "business": "商家",
     "orderNo": "订单编号",
     "commodity": "商品",

src/service/device/index.js

@@ -249,7 +249,7 @@ export function updateAlarmCleanStatus(params) {
 
 // 日志上传
 export function uploadLog(params) {
-    return axios.get(`/SZWL-SERVER/tEquipment/newUploadLog?${stringToUrl(params)}`);
+    return axios.get(`/SZWL-SERVER/tEquipment/uploadLog?${stringToUrl(params)}`);
 }
 
 // 查询日志

src/styles/robotRanking/index.less

@@ -1,376 +0,0 @@
-.robotRanking * {
-    box-sizing: border-box;
-    flex-shrink: 0;
-}
-
-body {
-    font-family: PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma,
-        Arial, PingFang SC-Light, Microsoft YaHei;
-}
-
-button {
-    margin: 0;
-    padding: 0;
-    border: 1px solid transparent;
-    outline: none;
-    background-color: transparent;
-}
-
-button:active {
-    opacity: 0.6;
-}
-
-.flex-col {
-    display: flex;
-    flex-direction: column;
-}
-
-.flex-row {
-    display: flex;
-    flex-direction: row;
-}
-
-.justify-start {
-    display: flex;
-    justify-content: flex-start;
-}
-
-.justify-center {
-    display: flex;
-    justify-content: center;
-}
-
-.justify-end {
-    display: flex;
-    justify-content: flex-end;
-}
-
-.justify-evenly {
-    display: flex;
-    justify-content: space-evenly;
-}
-
-.justify-around {
-    display: flex;
-    justify-content: space-around;
-}
-
-.justify-between {
-    display: flex;
-    justify-content: space-between;
-}
-
-.align-start {
-    display: flex;
-    align-items: flex-start;
-}
-
-.align-center {
-    display: flex;
-    align-items: center;
-}
-
-.align-end {
-    display: flex;
-    align-items: flex-end;
-}
-
-.group5 {
-    width: 15%;
-    height: 16px;
-    margin-right: 50px;
-
-    .icon2 {
-        width: 18px;
-        height: 18px;
-        margin-right: 5px;
-    }
-
-    .TextGroup2 {
-        height: 16px;
-        width: 22px;
-
-        .txt3 {
-            width: 22px;
-            height: 16px;
-            overflow-wrap: break-word;
-            color: rgba(64, 77, 116, 1);
-            font-size: 14px;
-            font-family: PingFangSC-Semibold;
-            text-align: center;
-            white-space: nowrap;
-            line-height: 16px;
-            display: block;
-        }
-    }
-}
-
-.robotRanking {
-    background-color: #fff;
-    width: 100%;
-
-
-    .box1 {
-        height: 100%;
-        width: 100%;
-        height: calc(100% - 50px);
-        padding-bottom: 10px;
-        overflow: auto;
-        overflow-x: hidden;
-
-        .van-tabs__line {
-            background-color: #4d6add !important;
-        }
-
-        .van-tabs__nav--line {
-            
-            height: 40px;
-        }
-
-        .van-tab--active .van-tab__text--ellipsis {
-            color: #4d6add;
-        }
-
-        .box2 {
-            height: 64px;
-            background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPnged210ff8540d1e20d828b0758e650612a9ea018b41f720bede87fea0f933d8d8) 100% no-repeat;
-            width: 100%;
-
-            .layer1 {
-                width: 364px;
-                height: 20px;
-                margin: 1px 0 0 7px;
-
-                .group1 {
-                    width: 34px;
-                    height: 6px;
-                    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPnga64b2ae35561e96115c75cc6dfc235eedb108ecf95df957be1ef364417a9806e) 100% no-repeat;
-                    margin-top: 7px;
-                }
-
-                .word1 {
-                    width: 38px;
-                    height: 17px;
-                    overflow-wrap: break-word;
-                    color: rgba(81, 84, 106, 1);
-                    font-size: 12px;
-                    font-family: PingFangSC-Semibold;
-                    text-align: right;
-                    white-space: nowrap;
-                    line-height: 17px;
-                    margin-left: 21px;
-                    display: block;
-                }
-
-                .group2 {
-                    width: 30px;
-                    height: 17px;
-                    overflow-wrap: break-word;
-                    font-size: 0;
-                    font-family: PingFangSC-Semibold;
-                    text-align: right;
-                    white-space: nowrap;
-                    line-height: 17px;
-                    margin: 3px 0 0 73px;
-
-                    .info1 {
-                        width: 30px;
-                        height: 17px;
-                        overflow-wrap: break-word;
-                        color: rgba(81, 84, 106, 1);
-                        font-size: 12px;
-                        font-family: PingFangSC-Semibold;
-                        text-align: left;
-                        white-space: nowrap;
-                        line-height: 17px;
-                    }
-
-                    .word2 {
-                        width: 30px;
-                        height: 17px;
-                        overflow-wrap: break-word;
-                        color: rgba(81, 84, 106, 1);
-                        font-size: 12px;
-                        font-family: PingFangSC-Medium;
-                        text-align: left;
-                        white-space: nowrap;
-                        line-height: 17px;
-                    }
-                }
-
-                .group3 {
-                    width: 26px;
-                    height: 10px;
-                    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng2e68dee6e62554db0f6ac40572f41b7be9cc24d35fc06b24c556fed2b7b18626) 100% no-repeat;
-                    margin: 5px 0 0 142px;
-                }
-            }
-
-            .layer2 {
-                width: 218px;
-                height: 22px;
-                margin: 9px 0 12px 10px;
-
-                .label1 {
-                    width: 10px;
-                    height: 18px;
-                    margin-top: 4px;
-                }
-
-                .txt1 {
-                    width: 80px;
-                    height: 22px;
-                    overflow-wrap: break-word;
-                    color: rgba(64, 77, 116, 1);
-                    font-size: 16px;
-                    font-family: PingFangSC-Medium;
-                    text-align: center;
-                    white-space: nowrap;
-                    line-height: 22px;
-                    display: block;
-                }
-            }
-        }
-
-        .box3 {
-            background-color: rgba(255, 255, 255, 1);
-            height: 100%;
-            margin-top: 1px;
-            width: 100%;
-
-            .main1 {
-                width: 100%;
-                height: 100%;
-
-                .groove {
-                    height: 10px;
-                    width: 100%;
-                    background-color: #f5f5f5;
-                }
-
-                .mod1 {
-
-                    .section1 {
-                        margin: 0.5rem 0.5rem;
-
-                        .ImageText1 {
-                            // height: 16px;
-                            // margin-top: 1px;
-                            // width: 55%;
-
-                            .group4 {
-                                // width: 2.2rem;
-                                // height: 16px;
-
-                                .layer3 {
-                                    width: 15px;
-                                    height: 15px;
-                                    margin-right: 5px;
-                                    background: url("../../assets/home/titleIcon.png") top center no-repeat;
-                                    background-size: 100%;
-                                }
-
-                                .word3 {
-                                    // width: auto;
-                                    // height: 14px;
-                                    overflow-wrap: break-word;
-                                    color: rgba(64, 77, 116, 1);
-                                    font-size: 15px;
-                                    font-family: PingFangSC-Semibold;
-                                    text-align: left;
-                                    white-space: nowrap;
-                                    line-height: 15px;
-                                    display: block;
-                                }
-                            }
-                        }
-
-                        .main5 {
-                            width: auto;
-                            cursor: pointer;
-
-                            .label2 {
-                                width: 17px;
-                                height: 17px;
-                                // margin-right: 5px;
-                            }
-                        }
-                    }
-                }
-
-                .robotLabelName {
-                    width: 25%;
-                }
-
-                .mod3 {
-                    background-color: rgba(255, 255, 255, 1);
-                    z-index: 24;
-                    height: 350px;
-                    width: 100%;
-                    position: relative;
-                }
-
-                .mod5 {
-                    background-color: rgba(255, 255, 255, 1);
-                    z-index: 84;
-                    height: 350px;
-                    width: 100%;
-                    position: relative;
-                }
-
-                .mod9 {
-                    background-color: rgba(255, 255, 255, 1);
-                    z-index: 156;
-                    height: 350px;
-                    width: 100%;
-                    position: relative;
-                }
-
-                .mod11 {
-                    background-color: rgba(255, 255, 255, 1);
-                    z-index: 217;
-                    height: 350px;
-                    width: 100%;
-                    position: relative;
-                }
-            }
-        }
-    }
-
-    .van-field__label {
-        width: auto;
-    }
-
-    .van-field__control {
-        width: 70%;
-    }
-
-    .van-field__body {
-        width: 100%;
-    }
-
-    .van-calendar__day--start-end {
-        background-color: #4d6add;
-    }
-
-    .van-calendar__selected-day {
-        background-color: #4d6add;
-    }
-
-    .van-calendar__day--start {
-        background-color: #4d6add;
-    }
-
-    .van-calendar__day--middle {
-        color: #4d6add;
-    }
-
-    .van-calendar__day--end {
-        background-color: #4d6add;
-    }
-
-    .van-calendar__confirm {
-        border-color: #4d6add;
-        background-color: #4d6add;
-    }
-}

src/styles/user/index.less

@@ -1,336 +0,0 @@
-.userPage {
-    width: 100%;
-    background: url(../../assets/user/bg.png) top center no-repeat;
-    background-size: 100%;
-    // height: calc(100vh - 50px);
-    // padding-bottom: 50px;
-
-
-    .van-nav-bar {
-        background: transparent;
-    }
-
-    .userPageBox {
-        height: 100%;
-        width: 100%;
-        height: calc(100% - 50px);
-        // padding-bottom: 10px;
-        overflow: auto;
-        overflow-x: hidden;
-    }
-
-    .userBaseBox {
-        width: 100%;
-    }
-
-    .baseRow {
-        // width: 100%;
-        // height: 20px;
-        // margin-left: 15px;
-        margin: 10px 10px;
-        // justify-content: flex-start;
-
-        .group2 {
-            background-color: #8096ec;
-            border-radius: 2px;
-            width: 4px;
-            height: 16px;
-            // margin-top: 4px;
-        }
-
-        .baseText {
-            width: 150px;
-            // height: 20px;
-            // margin-top: 2px;
-            overflow-wrap: break-word;
-            color: rgba(64, 77, 116, 1);
-            font-size: 13px;
-            font-family: PingFangSC-Medium;
-            text-align: left;
-            white-space: nowrap;
-            line-height: 13px;
-            display: block;
-            margin-left: 8px;
-        }
-    }
-
-    .userMessage {
-        text-align: center;
-        width: 80%;
-        margin: 0 auto;
-        margin-top: 30px;
-        // line-height: 1.7;
-
-        .userText {
-            font-size: 0.35rem;
-            font-family: PingFangSC-Medium;
-            line-height: 0.6rem;
-            margin: 0;
-        }
-
-        .userLine {
-            width: 1px;
-            height: 3.5em;
-            font-size: 14px;
-            background: #bdc9ff6c;
-        }
-    }
-
-    .userInfoBox {
-        // margin-top: 25px;
-        padding: 0px 10px 15px;
-
-        .userInfo {
-            // width: 87%;
-            margin: 0 3px;
-            justify-content: flex-start;
-            margin-top: 15px;
-            position: relative;
-
-            .filedInpPad {
-                .van-cell {
-                    padding: 0 !important;
-                }
-            }
-
-            .editIcon {
-                position: absolute;
-                right: 0;
-                font-size: 18px;
-                color: #4d6add;
-            }
-
-            .userInfoLeft {
-                // width: 80px;
-                padding-right: 10px;
-            }
-
-            .van-cell {
-                padding: 0;
-            }
-
-            .relationClass {
-                // padding: 0;
-
-
-                .van-field__control {
-                    // height: 38px;
-                    line-height: 0.5rem;
-                    padding: 5px;
-                    border-radius: 2px;
-                    background: #fff;
-                    border: 1px solid #dddde8;
-                    width: 140px;
-                    margin-left: 4px;
-                }
-
-                .van-field__button {
-                    background-color: #4d6add;
-                    color: #fff;
-                    padding: 0 10px;
-                    margin-left: 15px;
-                    border-radius: 10px;
-                }
-            }
-        }
-    }
-
-    .van-cell {
-        background: none;
-    }
-
-    .lineBox {
-        width: 100%;
-        height: 10px;
-        background-color: #f6f7fc;
-    }
-
-    .commonOperBox {
-        width: 100%;
-        background: #fff;
-
-        .operListBox {
-            // margin-top: 5px;
-
-            .taskListRow {
-                width: 100%;
-                height: 50px;
-                flex-wrap: wrap;
-                margin: 5px 10px;
-
-                .taskIcon {
-                    width: 10%;
-                    height: 100%;
-                    position: relative;
-
-                    &.commonToolsIcon::after {
-                        content: "";
-                        position: absolute;
-                        background: #fff url("../../assets/home/commonTools.png") top center no-repeat;
-                        background-size: 100%;
-                        width: 0.55rem;
-                        height: 0.55rem;
-                        right: 0.2rem;
-                        top: 0.45rem;
-                    }
-
-                    &.taskMessageIcon::after {
-                        content: "";
-                        position: absolute;
-                        background: #fff url("../../assets/user/taskMessageIcon.png") top center no-repeat;
-                        background-size: 100%;
-                        width: 0.55rem;
-                        height: 0.55rem;
-                        right: 0.2rem;
-                        top: 0.45rem;
-                    }
-
-                    &.joinPayMchIcon::after {
-                        content: "";
-                        position: absolute;
-                        background: #fff url("../../assets/user/joinPayMchIcon.png") top center no-repeat;
-                        background-size: 100%;
-                        width: 0.55rem;
-                        height: 0.55rem;
-                        right: 0.2rem;
-                        top: 0.4rem;
-                    }
-
-                    &.announcementIcon::after {
-                        content: "";
-                        position: absolute;
-                        background: #fff url("../../assets/user/announcementIcon.png") top center no-repeat;
-                        background-size: 100%;
-                        width: 0.55rem;
-                        height: 0.55rem;
-                        right: 0.2rem;
-                        top: 0.4rem;
-                    }
-
-
-                    &.airwallexIcon::after {
-                        content: "";
-                        position: absolute;
-                        background: #fff url("../../assets/user/airwallexIcon.png") top center no-repeat;
-                        background-size: 100%;
-                        width: 0.55rem;
-                        height: 0.55rem;
-                        right: 0.2rem;
-                        top: 0.4rem;
-                    }
-
-                    &.shandeMchIcon::after {
-                        content: "";
-                        position: absolute;
-                        background: #fff url("../../assets/user/shandeMchIcon.png") top center no-repeat;
-                        background-size: 100%;
-                        width: 0.55rem;
-                        height: 0.55rem;
-                        right: 0.2rem;
-                        top: 0.4rem;
-                    }
-
-                    &.bindWechatIcon::after {
-                        content: "";
-                        position: absolute;
-                        background: #fff url("../../assets/user/bindWechatIcon.png") top center no-repeat;
-                        background-size: 100%;
-                        width: 0.55rem;
-                        height: 0.55rem;
-                        right: 0.2rem;
-                        top: 0.4rem;
-                    }
-
-                    &.modifyLocIcon::after {
-                        content: "";
-                        position: absolute;
-                        background: #fff url("../../assets/user/modifyLocIcon.png") top center no-repeat;
-                        background-size: 100%;
-                        width: 0.55rem;
-                        height: 0.55rem;
-                        right: 0.2rem;
-                        top: 0.4rem;
-                    }
-
-                    &.syncOldDataIcon::after {
-                        content: "";
-                        position: absolute;
-                        background: #fff url("../../assets/user/syncOldDataIcon.png") top center no-repeat;
-                        background-size: 100%;
-                        width: 0.55rem;
-                        height: 0.55rem;
-                        right: 0.2rem;
-                        top: 0.4rem;
-                    }
-
-                    &.changePasswordIcon::after {
-                        content: "";
-                        position: absolute;
-                        background: #fff url("../../assets/user/changePasswordIcon.png") top center no-repeat;
-                        background-size: 100%;
-                        width: 0.55rem;
-                        height: 0.55rem;
-                        right: 0.2rem;
-                        top: 0.4rem;
-                    }
-
-                    &.selfPayIcon::after {
-                        content: "";
-                        position: absolute;
-                        background: #fff url("../../assets/user/self.png") top center no-repeat;
-                        background-size: 100%;
-                        width: 0.55rem;
-                        height: 0.55rem;
-                        right: 0.2rem;
-                        top: 0.4rem;
-                    }
-
-                    &.feedbackIcon::after {
-                        content: "";
-                        position: absolute;
-                        background: #fff url("../../assets/user/feedback.png") top center no-repeat;
-                        background-size: 100%;
-                        width: 0.6rem;
-                        height: 0.6rem;
-                        right: 0.2rem;
-                        top: 0.4rem;
-                    }
-
-                    &.loginOutIcon::after {
-                        content: "";
-                        position: absolute;
-                        background: #fff url("../../assets/user/loginOut.png") top center no-repeat;
-                        background-size: 100%;
-                        width: 0.55rem;
-                        height: 0.55rem;
-                        right: 0.2rem;
-                        top: 0.4rem;
-                    }
-                }
-
-                .taskRight {
-                    width: 87%;
-                    // height: 100%;
-                    position: relative;
-                    border-bottom: 1px solid #e7eaf7;
-
-                    &::after {
-                        content: "";
-                        position: absolute;
-                        width: 6px;
-                        height: 12px;
-                        background: url('../../assets/right.png') top center no-repeat;
-                        background-size: 100%;
-                        right: 0.55rem;
-                        top: 0.5rem;
-                    }
-
-                    .taskTitle {
-                        line-height: 1.5rem;
-                        font-size: 0.375rem;
-                    }
-                }
-            }
-        }
-    }
-}

src/views/device/tax/index.vue

@@ -115,6 +115,9 @@ export default {
           });
           if (data.code === "00000") {
             taxStatus.value = !taxStatus.value;
+            if (taxStatus.value) {
+              taxRate.value = deviceDetal.value.taxRate;
+            }
           }
         })
         .catch(() => {
@@ -128,7 +131,6 @@ export default {
         message: t("device.pleaseConfirmAgainWhetherToOperate"),
       })
         .then(async () => {
-          console.log("taxRate", taxRate.value);
           const { data } = await updateTaxRate({
             equipmentId: deviceId.value,
             taxRate: taxRate.value,

src/views/home/index copy.vue

@@ -1,766 +0,0 @@
-<template>
-  <!-- 主页 -->
-  <div class="homePage flex-col">
-    <div class="homeBox">
-      <s-header :name="sys ? sys.title : (sysTitle == 'AETI GLOBAL' ? sysTitle : $t('public.sysName'))" :noback="true"
-        :isFixed="false"></s-header>
-      <!-- 留言滚动条 -->
-      <template v-if="noticeContent.title">
-        <van-notice-bar @click="noticeClk" mode="link" :scrollable="true" color="rgba(64,77,116,1)" background="#fff"
-          style="font-size: 0.375rem;" left-icon="volume-o" :text="noticeContent.title" />
-      </template>
-      <div class="intervalRow"></div>
-      <div class="nameDeviceRow flex-col">
-        <span class="txt3">{{ userName }}</span>
-        <div class="l-flex-RC">
-          <span class="info3" style="color: #4d6add;">{{ $t("home.totalEquipment") }} : {{ equipStatus.machineTotalNum
-            }}</span>
-          <div class="lineCon o-mlr-6"></div>
-          <span class="word2" style="color: #07c160;">{{ $t("home.running") }} : {{ equipStatus.machineUseNum }}</span>
-        </div>
-      </div>
-      <!-- 没有数据概览M14权限的人看不到数据概览和ECharts -->
-      <!-- 数据概览 -->
-      <!-- 时间选择 -->
-      <dateSelectList v-if="showDataDiv" @update="update($event)"></dateSelectList>
-      <typeDownMenu v-if="showDataDiv" :isHome="true" @upselectdata="upselectdata($event)"></typeDownMenu>
-      <!-- 订单数据 -->
-      <div v-if="showDataDiv" class="o-plr-8 o-pt-10">
-        <div class="salesData flex-col" @click="pushOrderCenter">
-          <div class="topTitle flex-row justify-end" v-if="isOrderData">
-            <span class="txt10">{{ $t("home.orderData") }}</span>
-            <div class="layer4 flex-col"></div>
-          </div>
-          <div class="salesDataBox flex-row">
-            <div class="dataGroup flex-col">
-              <div class="dataGroupBox l-flex-RC justify-center">
-                <!-- 首页 - 订单数据 - 收入总额￥ -->
-                <span class="currencySymbol o-pr-2">{{ currencySymbol }}</span>
-                <span class="dataNum">{{ salesVolume.toFixed(2) }}</span>
-              </div>
-              <span class="dataText">{{ $t("home.totalIncome") }}</span>
-            </div>
-            <div class="dataGroup flex-col">
-              <div class="dataGroupBox flex-col justify-between">
-                <span class="dataNum">{{ salesNumber }}</span>
-                <span class="dataText">{{ $t("home.productNum") }}</span>
-              </div>
-            </div>
-            <div class="dataGroup flex-col">
-              <div class="dataGroupBox flex-col justify-between">
-                <span class="dataNum">{{ orderNumber }}</span>
-                <span class="dataText">{{ $t("home.numberOfOrders") }}</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <!-- 时间 -->
-      <div v-if="showDataDiv" class="c-text-c" style="font-size: 18px; margin-top: 5px;">
-        {{ Format_time(dateSelect.startDate, 'YYYY/MM/DD') }}-{{ Format_time(dateSelect.endDate, 'YYYY/MM/DD') }}
-      </div>
-      <div v-if="showDataDiv && !noData(salesVolume, salesNumber)">
-        <div ref="chartBox" class="Chart1 flex-col"></div>
-      </div>
-      <kNoData v-else></kNoData>
-      <!-- 常用工具 -->
-      <div v-if="user.type === 0 || user.type === 4">
-        <div class="outer9 flex-col justify-center">
-          <div class="main24 flex-col ">
-            <div class="ImageText10 flex-col">
-              <div class="wrap2 flex-row l-flex-RC">
-                <div class="outer10 flex-col"></div>
-                <div class="TextGroup13 flex-col">
-                  <span class="txt13">{{ $t("home.commonTools") }}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="outer11 flex-row">
-          <div class="main25 flex-col" v-for="(item, index) in pushToolList" :key="index"
-            @click="pushToolPage(item)">
-            <img class="mod7 flex-col" :src="showLogo(item)" />
-            <div class="TextGroup14 flex-col">
-              <span class="info15">{{ $t("permission." + item) }}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div v-if="showDataDiv && user.ifForeign === '1'">
-        <!-- 机器销售额 -->
-        <div class="outer9 flex-col justify-center">
-          <div class="main24 flex-col">
-            <div class="ImageText10 flex-col">
-              <div class="wrap2 flex-row l-flex-RC">
-                <div class="outer10 flex-col"></div>
-                <div class="TextGroup13 flex-col">
-                  <span class="txt13">{{ $t("home.machineSales") }}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <!-- 各支付方式总额 -->
-        <van-list offset="100" :immediate-check="false">
-          <div v-for="item in combinedList" :key="item" class="o-ptb-10">
-            <div>
-              <van-cell-group inset class="machineSaleBox">
-                <!-- 设备名称 -->
-                <div class="contentWord kBordBott">{{ item.machineName }}
-                </div>
-                <van-row class="layer5" justify="space-between">
-                  <van-col span="12">{{ $t("home.coinsBills") }}: {{ item.coinsBills !== undefined ? item.coinsBills :
-        '0'
-                    }}</van-col>
-                  <!-- 信用卡 -->
-                  <van-col span="12">{{ $t("home.creditCard") }}: {{ item.creditCard !== undefined ? item.creditCard :
-        '0'
-                    }}</van-col>
-                  <van-col span="12">{{ $t("home.allPayTypeTotal") }}: {{ calculateTotal(item) }}</van-col>
-                </van-row>
-              </van-cell-group>
-            </div>
-          </div>
-        </van-list>
-      </div>
-
-    </div>
-    
-    <!-- 通知弹窗 -->
-    <kDialog :dialogTitle="$t('home.notificationPop.notification')" :cancelBtnTxt="$t('home.notificationPop.nextTime')"
-      :confirmBtnTxt="$t('home.notificationPop.roger')" ref="kDialogRef" @confirmclk="confirmClk">
-      <template #content>
-        <div class="o-w" style="max-height: 50vh; overflow-y: auto" v-html="noticeContent.note"></div>
-      </template>
-    </kDialog>
-    <van-dialog v-model:show="showAlarm" :title="$t('home.alarmTitle')" @confirm="confirmAlarm">
-      <div style="max-height: 30vh; overflow-y: auto;">
-        <div v-for="(item, index) in alarmList" :key="index" style="padding: 2px 5px;">
-          <van-cell
-            :title="$t('home.alarmDevice') + (item.name ? item.name : item.clientId.slice(-6)) + $t('home.alarmContent') + item.alarmContent" />
-        </div>
-      </div>
-    </van-dialog>
-  </div>
-</template>
-
-<script>
-// 导入无数据组件
-import kNoData from "../../components/commom/kNoData/index.vue";
-import kDialog from "../../components/commom/kDialog/index.vue";
-import { onMounted, ref, nextTick } from "vue";
-import sHeader from "../../components/SimpleHeader";
-import dateSelectList from "../../components/dateSelectList";
-import typeDownMenu from "../../components/typeDownMenu";
-import { getLoginUser, Format_time, styleUrl } from "../../common/js/utils";
-import { useRouter } from "vue-router";
-import {
-  getStatistics,
-  Api_getNotice,
-  Api_postMachineNum,
-  Api_getUpdateNotice,
-  getIsAlarm,
-  Api_getEquipmentPageStatistics,
-} from "../../service/home";
-import { getAdminRole } from "@/service/user";
-import dateUtil from "../../utils/dateUtil";
-import { useI18n } from "vue-i18n";
-import { showFailToast, showToast } from "vant";
-import RobotIcon from '@/assets/home/robot.png';
-import { getLocal, setLocal, navigatorLanguage } from "@/common/js/utils";
-
-export default {
-  name: "home",
-  components: {
-    sHeader,
-    dateSelectList,
-    typeDownMenu,
-    kDialog,
-    kNoData,
-  },
-  setup() {
-    // 是否显示机器人
-    const isShowRobot = ref(false);
-    // 设备状况
-    const equipStatus = ref({});
-    // 获取设备情况
-    const getMachineNum = () => {
-      Api_postMachineNum({ adminId: user.id }).then((res) => {
-        equipStatus.value = res.data.data || {};
-      });
-    };
-    const noticeContent = ref({});
-    // 获取公告
-    const getNotice = () => {
-      Api_getNotice({ adminId: user.id }).then((res) => {
-        noticeContent.value = res.data.data || {};
-      });
-    };
-    const { t } = useI18n();
-    // 通知弹窗
-    const kDialogRef = ref(null);
-    // 点击通知栏
-    const noticeClk = () => {
-      kDialogRef.value.openDialog();
-    };
-    // 点击右侧按钮
-    const confirmClk = () => {
-      Api_getUpdateNotice({
-        adminId: user.id,
-      }).then((res) => {
-        showToast(res.data.message);
-        setTimeout(() => {
-          getNotice();
-        }, 500);
-      });
-    };
-    const firstLogin = ref(true);
-    const user = getLoginUser();
-    const router = useRouter();
-    const userName = ref(user.name);
-    const sys = ref(null);
-    const sysTitle = ref(''); // 页头标题
-    const pic1 = ref([
-      { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg', isImage: true },
-      // Uploader 根据文件后缀来判断是否为图片文件
-      // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
-    ]);
-    // 自定义货币符号
-    const currencySymbol = ref("￥");
-    if (user.currencySymbol) {
-      currencySymbol.value = user.currencySymbol;
-    } else {
-      currencySymbol.value = "￥";
-    }
-
-    // 图表对象
-    const chartBox = ref();
-    let chartObj = null;
-    // 跳转订单中心
-    const pushOrderCenter = () => {
-      router.push({ path: "/orderCenter" });
-    };
-    const dateSelect = ref({});
-    const update = (uDate) => {
-      dateSelect.value = uDate;
-      getStatisticsFun();
-      getMachineNameListFunc()
-    };
-    let typeSelectData = {};
-    const upselectdata = (uSData) => {
-      typeSelectData = uSData;
-      getStatisticsFun();
-      getMachineNameListFunc()
-    };
-    const salesVolume = ref(0);
-    const salesNumber = ref(0);
-    const orderNumber = ref(0);
-    // 查询图表
-    const getStatisticsFun = async () => {
-      const params = {
-        ...dateSelect.value,
-        adminId: typeSelectData.adminId === null ? user.id : typeSelectData.adminId,
-        ifForeign: typeSelectData.ifForeign === '' ? user.ifForeign : typeSelectData.ifForeign,
-        payType: typeSelectData.payType,
-        clientId: typeSelectData.clientId,
-        username: typeSelectData.userName, // 商家
-        companyType: typeSelectData.companyType, // 公司平台
-        machineType: typeSelectData.machineType, // 设备类型
-        equipmentId:
-          typeSelectData.equipmentId === "" ? null : typeSelectData.equipmentId,
-      };
-      const { data } = await getStatistics(params);
-      if (data.code && data.data) {
-        salesVolume.value = 0;
-        salesNumber.value = 0;
-        orderNumber.value = 0;
-        data.data.series[0].data.forEach((item) => {
-          salesNumber.value = parseInt(salesNumber.value + item);
-        });
-        data.data.series[1].data.forEach((item) => {
-          salesVolume.value = parseFloat(salesVolume.value) + parseFloat(item);
-        });
-        data.data.series[2].data.forEach((item) => {
-          orderNumber.value = parseInt(orderNumber.value + item);
-        });
-        data.data.categories.forEach((item, index) => {
-          if (item == "周1") {
-            data.data.categories[index] = t("home.week.mon");
-          }
-          if (item == "周2") {
-            data.data.categories[index] = t("home.week.tue");
-          }
-          if (item == "周3") {
-            data.data.categories[index] = t("home.week.wed");
-          }
-          if (item == "周4") {
-            data.data.categories[index] = t("home.week.thu");
-          }
-          if (item == "周5") {
-            data.data.categories[index] = t("home.week.fri");
-          }
-          if (item == "周6") {
-            data.data.categories[index] = t("home.week.sat");
-          }
-          if (item == "周日") {
-            data.data.categories[index] = t("home.week.sun");
-          }
-        })
-        // 解决eacharts与v-if的渲染问题
-        await nextTick();
-        if (chartBox.value) {
-          chartObj = window.echarts.init(chartBox.value, null, {
-            renderer: "canvas",
-            useDirtyRect: false,
-          });
-          const option = {
-            tooltip: {
-              trigger: "axis",
-              axisPointer: {
-                type: "shadow",
-              },
-            },
-            grid: {
-              top: '10%',
-              left: "3%",
-              right: "4%",
-              bottom: "10%",
-              containLabel: true,
-              height: 'auto',
-            },
-            legend: {
-              bottom: 0,
-              right: 10,
-              itemWidth: 10,
-              itemHeight: 10,
-              icon: "rect",
-            },
-            // 固定屏幕显示多少个，其余的滑动
-            dataZoom: [
-              // {
-              // 	type: 'slider',
-              // 	xAxisIndex: 0,
-              // 	filterMode: 'none',
-              // 	// 开始的值
-              // 	startValue: null,
-              // 	// 结束的值
-              // 	endValue: null,
-              // 	// 锁定滑动的区域
-              // 	// zoomLock:true,
-              // },
-              {
-                type: "inside",
-                xAxisIndex: 0,
-                filterMode: "none",
-                startValue: 0,
-                endValue: 50,
-                zoomLock: true,
-              },
-            ],
-            xAxis: {
-              type: "category",
-              axisLabel: {
-                rotate: 35,
-              },
-              data: data.data.categories,
-            },
-            yAxis: {
-              type: "value",
-            },
-            series: [
-              {
-                ...data.data.series[0],
-                type: "bar",
-                itemStyle: { color: "#e59a6d" },
-                name: t("home.productNum"),
-                label: {
-                  show: true,
-                  position: "top",
-                },
-              },
-              {
-                ...data.data.series[1],
-                type: "bar",
-                itemStyle: { color: "#4d6add" },
-                name: t("home.salesAmount"),
-                label: {
-                  show: true,
-                  position: "top",
-                },
-              },
-            ],
-          };
-
-          option.dataZoom[0]["startValue"] =
-            data.data.categories[data.data.categories.length - 4];
-          option.dataZoom[0]["endValue"] =
-            data.data.categories[data.data.categories.length - 1];
-          // option.dataZoom[0].start =
-          //   (data.data.categories.length - 5) * 10;
-          // option.dataZoom[0].end =
-          //   (data.data.categories.length - 1) * 10;
-          chartObj && chartObj.setOption(option);
-          //图形宽度随屏幕宽度改变而改变
-          window.onresize = chartObj.resize;
-        }
-      }
-    };
-    const pushToolList = ref([]);
-    // 是否有报警
-    const showAlarm = ref(false);
-    const alarmList = ref([]);
-    // 页面初始化
-    onMounted(async () => {
-      // 加载样式
-      styleUrl('home');
-      // 检测语言是否有缓存
-      if (!getLocal("curLang")) {
-        //  根据浏览器语言重新缓存到localstorage
-        setLocal("curLang", navigatorLanguage());
-      }
-      if (localStorage.getItem("loginSys")) {
-        const loginSysString = localStorage.getItem("loginSys");
-        sys.value = JSON.parse(loginSysString);
-      }
-      firstLogin.value = localStorage.getItem('firstLogin');
-      // 设置菜单权限
-      // menuSet();
-      // 设置菜单权限, 只执行一次
-      // once(menuSet);
-      dateSelect.value = {
-        chartType: "day",
-        startDate: dateUtil.formateDate(
-          new Date(new Date(new Date().getTime()).setHours(0, 0, 0, 0)),
-          "yyyy-MM-dd hh:mm:ss"
-        ),
-        endDate: dateUtil.formateDate(
-          new Date(new Date(new Date().getTime()).setHours(23, 59, 59, 59)),
-          "yyyy-MM-dd hh:mm:ss"
-        ),
-      };
-      // 获取账号权限
-      getAccountPer();
-      typeSelectData = {
-        userName: user.username,
-        clientId: null,
-        adminId: null,
-      };
-      getStatisticsFun();
-      // 获取首页公告
-      getNotice();
-      // 获取设备情况
-      getMachineNum();
-      if (user.type > 1) {
-        // 查询设备是否有报警
-        const queryParams = {
-          adminId: user.id,
-          todayDate: dateUtil.formateDate(new Date(), "yyyy-MM-dd"), // 当天时间
-        };
-        const { data } = await getIsAlarm(queryParams);
-        if (data.data != null) {
-          if (firstLogin.value == 'true') {
-            showAlarm.value = true;
-          }
-          alarmList.value = data.data;
-        }
-      }
-
-      if (localStorage.getItem('curLang') == 'zh') { // 机器人仅在中文环境下使用
-        isShowRobot.value = true;
-      }
-
-      getTitleFunc();
-
-      if (user) {
-        getMachineNameListFunc();
-      }
-
-    });
-
-    const finished = ref(false);
-    const loading = ref(true);
-
-
-    // 设备销售数据 
-    const combinedList = ref([]); // 设备销额集合
-    const calculateTotal = (item) => {
-      let total = 0;
-      if (typeof item.coinsBills === 'number' && !isNaN(item.coinsBills)) {
-        total += item.coinsBills;
-      }
-
-      if (typeof item.creditCard === 'number' && !isNaN(item.creditCard)) {
-        total += item.creditCard;
-      }
-      return total;
-    }
-
-    const getMachineNameListFunc = async () => {
-
-      combinedList.value = [];
-      const searchParams = {
-        adminId: user.id,
-        ...dateSelect.value,
-      }
-      try {
-        const { data } = await Api_getEquipmentPageStatistics(Object.assign({}, searchParams));
-        if (data.code === "00000" && data.data) {
-
-          for (let i = 0; i < data.data.categories.length; i++) {
-            const machineNameVal = data.data.categories[i];  // 设备名称
-            const coinsVal = data.data.series[0].data[i];  // 硬币销额
-            const billsVal = data.data.series[1].data[i];  // 纸币销额
-            const coinsBillsVal = data.data.series[2].data[i];  // 硬币+纸币销额
-            const creditCardVal = data.data.series[3].data[i];  // 信用卡销额
-            const electronicPaymentVal = data.data.series[4].data[i];  // 电子支付销额
-
-
-            const machineSalesData = {
-              machineName: machineNameVal,
-              coins: coinsVal,
-              bills: billsVal,
-              coinsBills: coinsBillsVal,
-              creditCard: creditCardVal,
-              electronicPayment: electronicPaymentVal
-            }
-
-            combinedList.value.push(machineSalesData);
-          }
-
-        } else {
-          showFailToast(data.message);
-        }
-      } catch (error) {
-        console.error("Error", error)
-      }
-    }
-
-    const getTitleFunc = async () => {
-      const currentDomain = window.location.href;
-      switch (true) {
-        case currentDomain.includes('/aeti/'):
-          sysTitle.value = 'AETI GLOBAL';
-          break;
-        default:
-          sysTitle.value = t('public.sysName');
-      }
-    }
-
-    const confirmAlarm = () => {
-      localStorage.setItem('firstLogin', false);
-    }
-
-    const menuList = [];
-
-    const showDataDiv = ref(true);
-
-    const isOrderData = ref(true);
-
-    // 获取账号权限
-    const getAccountPer = async () => {
-      const { data } = await getAdminRole({ adminId: user.id });
-      if (data.code === '00000') {
-        if (data.data.menuCodesJson !== null) {
-          menuList.value = sortedArray(data.data.menuCodesJson);
-        }
-        // 子商家以上级别，默认可以看到订单详情
-        if (user.type === 3 && !menuList.value.includes("M4")) {
-          // 如果有数据概览权限 和 订单数据权限
-          if (!menuList.value.includes("M4")) {
-            showDataDiv.value = false;
-          }
-          if (!menuList.value.includes("M14")) {
-            isOrderData.value = false;
-          }
-        }
-        // 组合菜单权限
-        menuList.value.forEach((item) => {
-          // 设备管理M1，设备查看M2，订单数据M4，任务消息M6，销售排行M11，数据概览M14，订单退款M16，系统脱机M17 这些图标不用加载到底部菜单上
-          if (
-            item !== "M1" &&
-            item !== "M2" && // M2本身就无logo
-            item !== "M4" &&
-            item !== "M6" &&
-            item !== "M8" &&
-            item !== "M11" &&
-            item !== "M12" &&
-            item !== "M13" &&
-            item !== "M18" &&
-            item !== "M14" &&
-            item !== "M16" &&
-            item !== "M17" &&
-            item !== "M20"
-          ) {
-            pushToolList.value.push(item);
-          }
-        });
-      }
-    }
-
-    // 解析 + 排序计算属性
-    const sortedArray = (value) => {
-      try {
-        // 1. 安全解析JSON
-        const parsed = JSON.parse(value)
-        if (!Array.isArray(parsed)) return []
-
-        // 2. 自定义排序函数
-        const getNumber = str => parseInt(str.match(/\d+/)?.[0] || 0)
-
-        // 3. 执行排序（数字从小到大）
-        return [...parsed].sort((a, b) => {
-          return getNumber(a) - getNumber(b)
-        })
-
-      } catch (error) {
-        console.error('解析失败:', error)
-        return []
-      }
-    };
-
-    // 常用操作跳转页面
-    const pushToolPage = (index) => {
-      switch (index) {
-        case "M1":
-          router.push({ path: "/device" }); // 设备管理
-          break;
-        case "M3":
-          router.push({ path: "/accountOperation" }); // 账户操作
-          break;
-        case "M4":
-          router.push({ path: "/orderCenter" }); // 订单数据
-          break;
-        case "M5":
-          router.push({ path: "/advertManage" }); // 广告管理
-          break;
-        case "M6":
-          router.push({ path: "/taskMessage" });
-          break;
-        case "M7":
-          router.push({ path: "/discountCode" });
-          break;
-        case "M8":
-          router.push({ path: "/accountPer" });
-          break;
-        case "M9":
-          router.push({ path: "/orderExport" });
-          break;
-        case "M10":
-          router.push({ path: "/subLedgerManage" });
-          break;
-        case "M11":
-          router.push({ path: "/robotranking" });
-          break;
-        case "M12":
-          router.push({ path: "/joinpayMch" });
-          break;
-        case "M13":
-          router.push({ path: "/shandeMch" });
-          break;
-        case "M15":
-          router.push({ path: "/alarmHistory" }); // 报警历史
-          break;
-        case "M18":
-          router.push({ path: "/labelMan" });
-          break;
-        case "M19":
-          router.push({ path: "/apkManage" });
-          break;
-        case "M20":
-          router.push({ path: "/merchantManage" });
-          break;
-        case "M21":
-          router.push({ path: "/mqtt" });
-          break;
-        case "M22":
-          router.push({ path: "/terminal" });
-          break;
-      }
-    };
-
-
-    // 如果是空数据
-    const noData = (volumes, nums) => {
-      if (!volumes && !nums) {
-        return true;
-      }
-      return false;
-    };
-    // 显示logo
-    const showLogo = (url) => {
-      return require(`../../assets/home/${url}.png`);
-    };
-
-    // const aiDialog = showDialog();
-    const offset = ref({ x: Math.floor(window.innerWidth * 0.8), y: Math.floor(window.innerHeight * 0.75) });
-
-    const popupVisible = ref(false);
-    const aiUrl = "https://chatbot.weixin.qq.com/webapp/c3thmydLGYWDugrgtfAj5I0Ng3sniv?robotName=Cotton%20Candy%20Robot"; // 阿里云智能对话机器人-ccbot
-
-    // AI小助手
-    const onClickBot = () => {
-      popupVisible.value = true;
-    }
-
-    const onOffsetChange = (offset) => {
-      offset.value = offset;
-    }
-
-    const onClose = () => {
-      popupVisible.value = false;
-    }
-
-    return {
-      user,
-      userName,
-      update,
-      upselectdata,
-      chartBox,
-      pushOrderCenter,
-      pushToolList,
-      pushToolPage,
-      salesVolume,
-      salesNumber,
-      orderNumber,
-      sys,
-      noticeClk,
-      confirmClk,
-      kDialogRef,
-      noData,
-      equipStatus,
-      noticeContent,
-      showLogo,
-      dateSelect,
-      Format_time,
-      showDataDiv,
-      currencySymbol,
-      firstLogin,
-      pic1,
-      showAlarm,
-      alarmList,
-      confirmAlarm,
-      onOffsetChange,
-      robotIcon: RobotIcon,
-      aiUrl,
-      popupVisible,
-      onClose,
-      onClickBot,
-      offset,
-      isShowRobot,
-      sysTitle,
-      finished,
-      loading,
-      combinedList,
-      isOrderData,
-      calculateTotal
-    };
-  },
-
-};
-</script>
-
-<style lang="less" scoped>
-@import "../../common/style/common";
-</style>

src/views/home/index.vue

@@ -101,9 +101,9 @@
                 <van-icon name="setting" class="machine-icon" />
                 {{ item.machineName }}
               </div>
-              <van-cell :title="$t('home.coinsBills')" :value="item.coinsBills || '0'" class="sale-cell" />
-              <van-cell :title="$t('home.creditCard')" :value="item.creditCard || '0'" class="sale-cell" />
-              <van-cell :title="$t('home.allPayTypeTotal')" :value="calculateTotal(item)" class="total-cell" />
+              <van-cell :title="$t('home.coinsBills')" :value="currencySymbol + (item.coinsBills || '0')" class="sale-cell" />
+              <van-cell :title="$t('home.creditCard')" :value="currencySymbol + item.creditCard || '0'" class="sale-cell" />
+              <van-cell :title="$t('home.allPayTypeTotal')" :value="currencySymbol + calculateTotal(item)" class="total-cell" />
             </van-cell-group>
           </div>
         </div>

src/views/orderCenter/index.vue

@@ -146,6 +146,15 @@
                     >{{ currencySymbol }}{{ showSubcom(item) }}</span
                   >
                 </div>
+                <div
+                  class="commission-display" 
+                  v-if="user.ifForeign === '1' && item.tax != null"
+                >
+                  <span class="label">{{ $t("orderCenter.tax") }}</span>
+                  <span class="value"
+                    >{{ currencySymbol }}{{ item.tax != null ? item.tax.toFixed(2) : '0.00' }}</span
+                  >
+                </div>
               </template>
             </van-card>
           </div>
@@ -218,6 +227,13 @@
           <span class="title">{{ $t("orderCenter.distribution") }}</span>
           <span class="content">{{ showSubcom(refundObject) }}</span>
         </div>
+        <div
+        v-if="user.ifForeign === '1' && refundObject.tax != null"
+          class="orderDetailBox flex-row justify-between"
+        >
+          <span class="title">{{ $t("orderCenter.tax") }}</span>
+          <span class="content">{{ refundObject.tax != null ? refundObject.tax.toFixed(2) : '0.00' }}</span>
+        </div>
         <div class="orderDetailBox flex-row justify-between">
           <span class="title">{{ $t("orderCenter.equipmentNo") }}</span>
           <van-text-ellipsis
@@ -1585,17 +1601,18 @@ export default {
           display: flex;
           align-items: baseline;
           gap: 4px;
+          margin-top: 5px;
 
 
           .currency {
             color: #4dc193;
-            font-size: 12px;
+            font-size: 16px;
           }
 
           .amount {
             font-weight: 600;
             color: #4dc193;
-            font-size: 12px;
+            font-size: 15px;
           }
 
           .quantity {
@@ -1611,7 +1628,7 @@ export default {
 
           .label {
             color: #e59a6d;
-            font-size: 12px;
+            font-size: 11px;
           }
 
           .value {

src/views/robotRanking.vue

@@ -1,104 +1,130 @@
 <template>
-  <div class="robotRanking flex-col" v-if="showRobotRankingDiv">
-    <div class="box1 flex-col">
-      <s-header :name="$t('robotRanking.machineSalesRanking')" :noback="true" :isFixed="false"></s-header>
-      <div class="box3 flex-col">
-        <div class="main1 flex-col">
-          <div class="mod1 flex-col">
-            <div class="section1 flex-row justify-between">
-              <div class="ImageText1 flex-col">
-                <div class="group4 flex-row justify-between">
-                  <div class="layer3 flex-col"></div>
-                  <span class="word3 flex-col">
-                    {{ $t("robotRanking.machineSalesRanking") }}
-                  </span>
-                </div>
-              </div>
-              <div class="flex-col">
-                <div @click="noticeClk" class="main5 flex-row justify-between">
-                  <img class="label2" src="@/assets/device/searchIcon.png" />
-                </div>
-              </div>
-            </div>
-          </div>
-          <img class="img1" referrerpolicy="no-referrer" src="../assets/line.png" />
-          <!-- 日销售排行 -->
-          <div class="l-f l-flex-e o-plr-15">
-            <span class="robotLabelName l-in c-text-13" style="color: #404d74">{{ $t("robotRanking.dailySalesRanking")
-            }}:</span>
-            <kTabs @tabclk="(e) => tabclk(e, 'day')" :tabList="tabDayList"></kTabs>
-          </div>
-          <div v-if="!totalNoData('day')" ref="dayChartBox" class="mod3 flex-col"></div>
-          <kNoData v-else></kNoData>
-          <div class="groove"></div>
-          <!-- 周销售排行 -->
-          <div class="l-f l-flex-e o-plr-15">
-            <span class="robotLabelName l-in o-mr-6 c-text-13" style="color: #404d74">{{
-              $t("robotRanking.salesRankingThisWeek") }}:</span>
-            <kTabs @tabclk="(e) => tabclk(e, 'week')" :tabList="tabWeekList"></kTabs>
+  <div class="robotRanking">
+    <div class="sales-rank-view">
+      <!-- 头部 -->
+      <s-header
+        :name="$t('robotRanking.machineSalesRanking')"
+        :noback="true"
+        class="modern-header"
+      />
+
+      <!-- 主体内容 -->
+      <main class="rank-container">
+        <!-- 筛选栏 -->
+        <div class="filter-card">
+          <div class="card-header">
+            <h3 class="card-title">
+              <span class="title-accent"></span>
+              {{ $t("robotRanking.machineSalesRanking") }}
+            </h3>
+            <van-icon name="filter-o" class="filter-icon" @click="noticeClk" />
           </div>
-          <div v-if="!totalNoData('week')" ref="weekChartBox" class="mod5 flex-col"></div>
-          <kNoData v-else></kNoData>
-          <div class="groove"></div>
-          <!-- 月销售排行 -->
-          <div class="l-f l-flex-e o-plr-15">
-            <span class="robotLabelName l-in o-mr-6 c-text-13" style="color: #404d74">{{
-              $t("robotRanking.salesRankingThisMonth") }}:</span>
-            <kTabs @tabclk="(e) => tabclk(e, 'month')" :tabList="tabMonthList"></kTabs>
+        </div>
+
+        <!-- 时间维度卡片 -->
+        <div
+          v-for="(period, index) in timePeriods"
+          :key="index"
+          class="rank-card"
+        >
+          <div class="period-header">
+            <h3 class="period-title">
+              <span class="period-icon"></span>
+              {{ $t(`robotRanking.${period.titleKey}`) }}
+            </h3>
+            <kTabs
+              :tabList="period.tabList"
+              @tabclk="(e) => tabclk(e, period.type)"
+              class="type-tabs"
+            />
           </div>
-          <div v-if="!totalNoData('month')" ref="monthChartBox" class="mod9 flex-col"></div>
-          <kNoData v-else></kNoData>
-          <div class="groove"></div>
-          <!-- 年销售排行 -->
-          <div class="l-f l-flex-e o-plr-15">
-            <span class="robotLabelName l-in o-mr-6 c-text-13" style="color: #404d74">{{
-              $t("robotRanking.salesRankingThisYear") }}:</span>
-            <kTabs @tabclk="(e) => tabclk(e, 'year')" :tabList="tabYearList"></kTabs>
+
+          <div class="chart-wrapper">
+            <div
+              v-if="!totalNoData(period.type)"
+              :ref="(el) => setChartRef(el, period.type)"
+              class="chart-box"
+            ></div>
+            <kNoData v-else class="no-data-tip" />
           </div>
-          <div v-if="!totalNoData('year')" ref="yearChartBox" class="mod11 flex-col"></div>
-          <kNoData v-else></kNoData>
-          <div class="groove"></div>
         </div>
-      </div>
+      </main>
     </div>
     <!-- 筛选弹窗 -->
-    <kDialog :dialogTitle="$t('orderExport.searchPop.title')" :confirmBtnTxt="$t('orderExport.searchPop.filter')"
-      ref="kDialogRef" @confirmclk="confirmClk">
+    <kDialog
+      :dialogTitle="$t('orderExport.searchPop.title')"
+      :confirmBtnTxt="$t('orderExport.searchPop.filter')"
+      ref="kDialogRef"
+      @confirmclk="confirmClk"
+    >
       <template #content>
         <div class="cust_vantBorder">
-          <van-field @click-input="changeTypeInpClk" readonly clearable v-model="searchForm.changeTypeName"
-            :placeholder="$t('robotRanking.changeTypePlace')" :label="$t('robotRanking.changeType')">
+          <van-field
+            @click-input="changeTypeInpClk"
+            readonly
+            clearable
+            v-model="searchForm.changeTypeName"
+            :placeholder="$t('robotRanking.changeTypePlace')"
+            :label="$t('robotRanking.changeType')"
+          >
             <template #right-icon>
               <div class="l-flex-RC">
-                <van-icon v-if="searchForm.changeTypeName" @click="
-                  searchForm.changeTypeName = '';
-                searchForm.changeType = '';
-                " class="o-mr-6" name="clear" />
+                <van-icon
+                  v-if="searchForm.changeTypeName"
+                  @click="
+                    searchForm.changeTypeName = '';
+                    searchForm.changeType = '';
+                  "
+                  class="o-mr-6"
+                  name="clear"
+                />
                 <van-icon @click="changeTypeInpClk" name="arrow-down" />
               </div>
             </template>
           </van-field>
-          <van-field @click-input="machineTypeInpClk" readonly clearable v-model="searchForm.machineTypeName"
-            :placeholder="$t('robotRanking.machineTypePlace')" :label="$t('robotRanking.machineType')">
+          <van-field
+            @click-input="machineTypeInpClk"
+            readonly
+            clearable
+            v-model="searchForm.machineTypeName"
+            :placeholder="$t('robotRanking.machineTypePlace')"
+            :label="$t('robotRanking.machineType')"
+          >
             <template #right-icon>
               <div class="l-flex-RC">
-                <van-icon v-if="searchForm.machineTypeName" @click="
-                  searchForm.machineTypeName = '';
-                searchForm.machineType = '';
-                " class="o-mr-6" name="clear" />
+                <van-icon
+                  v-if="searchForm.machineTypeName"
+                  @click="
+                    searchForm.machineTypeName = '';
+                    searchForm.machineType = '';
+                  "
+                  class="o-mr-6"
+                  name="clear"
+                />
                 <van-icon @click="machineTypeInpClk" name="arrow-down" />
               </div>
             </template>
           </van-field>
-          <van-field v-if="isAdmin()" @click-input="companyTypeInpClk" readonly clearable
-            v-model="searchForm.companyTypeName" :placeholder="$t('robotRanking.companyTypePlaceholder')"
-            :label="$t('robotRanking.companyTypeLabel')">
+          <van-field
+            v-if="isAdmin()"
+            @click-input="companyTypeInpClk"
+            readonly
+            clearable
+            v-model="searchForm.companyTypeName"
+            :placeholder="$t('robotRanking.companyTypePlaceholder')"
+            :label="$t('robotRanking.companyTypeLabel')"
+          >
             <template #right-icon>
               <div class="l-flex-RC">
-                <van-icon v-if="searchForm.companyTypeName" @click="
-                  searchForm.companyTypeName = '';
-                searchForm.companyType = '';
-                " class="o-mr-6" name="clear" />
+                <van-icon
+                  v-if="searchForm.companyTypeName"
+                  @click="
+                    searchForm.companyTypeName = '';
+                    searchForm.companyType = '';
+                  "
+                  class="o-mr-6"
+                  name="clear"
+                />
                 <van-icon @click="companyTypeInpClk" name="arrow-down" />
               </div>
             </template>
@@ -106,56 +132,88 @@
         </div>
       </template>
     </kDialog>
-    <!-- 商家选择框 -->
-    <van-popup v-model:show="busiPopShow" position="bottom">
-      <van-picker :title="$t('subLedgerManage.search.busiPlaceholder')" :columns="busiPopList"
-        :columns-field-names="busiPopFieldName" @confirm="busiPopConfirm" @cancel="busiPopShow = false" />
-    </van-popup>
     <!-- 统计方式弹窗 -->
     <van-popup v-model:show="changeTypeShow" position="bottom">
-      <van-picker :default-index="chgTypeDefaIdx" :title="$t('robotRanking.changeTypePlace')" :columns="changeTypePopList"
-        :columns-field-names="yearPopFieldName" @confirm="changeTypePopConfirm" @cancel="changeTypeShow = false" />
+      <van-picker
+        :default-index="chgTypeDefaIdx"
+        :title="$t('robotRanking.changeTypePlace')"
+        :columns="changeTypePopList"
+        :columns-field-names="yearPopFieldName"
+        @confirm="changeTypePopConfirm"
+        @cancel="changeTypeShow = false"
+      />
     </van-popup>
     <!-- 设备类型弹窗 -->
     <van-popup v-model:show="machineTypeShow" position="bottom">
-      <van-picker :default-index="maTypeDefaIdx" :title="$t('robotRanking.machineTypePlace')"
-        :columns="machineTypePopList" :columns-field-names="yearPopFieldName" @confirm="machineTypePopConfirm"
-        @cancel="machineTypeShow = false" />
+      <van-picker
+        :default-index="maTypeDefaIdx"
+        :title="$t('robotRanking.machineTypePlace')"
+        :columns="machineTypePopList"
+        :columns-field-names="yearPopFieldName"
+        @confirm="machineTypePopConfirm"
+        @cancel="machineTypeShow = false"
+      />
     </van-popup>
     <!-- 公司平台弹窗 -->
     <van-popup v-model:show="companyTypeShow" position="bottom">
-      <van-picker :default-index="maTypeDefaIdx" :title="$t('robotRanking.companyTypePlaceholder')"
-        :columns="companyTypePopList" :columns-field-names="yearPopFieldName" @confirm="companyTypePopConfirm"
-        @cancel="companyTypeShow = false" />
+      <van-picker
+        :default-index="maTypeDefaIdx"
+        :title="$t('robotRanking.companyTypePlaceholder')"
+        :columns="companyTypePopList"
+        :columns-field-names="yearPopFieldName"
+        @confirm="companyTypePopConfirm"
+        @cancel="companyTypeShow = false"
+      />
     </van-popup>
     <!-- 日的日期选择弹窗 -->
-    <van-calendar @confirm="calendarDayConfirm" v-model:show="dayShow" color="#4d6add" :min-date="minDate" :max-date="maxDate"
-      :show-confirm="false" />
+    <van-calendar
+      @confirm="calendarDayConfirm"
+      v-model:show="dayShow"
+      color="#4d6add"
+      :min-date="minDate"
+      :max-date="maxDate"
+      :show-confirm="false"
+    />
     <!-- 周的日期选择弹窗 -->
-    <van-calendar @confirm="(e) => {
-      calendarWeekOrMonConfirm(e, 1);
-    }
-      " v-model:show="weekShow" :allow-same-day="true" color="#4d6add" :min-date="minDate" :max-date="maxDate" type="range" :max-range="7" />
+    <van-calendar
+      @confirm="
+        (e) => {
+          calendarWeekOrMonConfirm(e, 1);
+        }
+      "
+      v-model:show="weekShow"
+      :allow-same-day="true"
+      color="#4d6add"
+      :min-date="minDate"
+      :max-date="maxDate"
+      type="range"
+      :max-range="7"
+    />
     <!-- 月的日期选择弹窗 -->
-    <van-calendar @confirm="(e) => {
-      calendarWeekOrMonConfirm(e, 2);
-    }
-      " v-model:show="monthShow" :allow-same-day="true" color="#4d6add" :min-date="minDate" :max-date="maxDate" type="range" :max-range="31" />
+    <van-calendar
+      @confirm="
+        (e) => {
+          calendarWeekOrMonConfirm(e, 2);
+        }
+      "
+      v-model:show="monthShow"
+      :allow-same-day="true"
+      color="#4d6add"
+      :min-date="minDate"
+      :max-date="maxDate"
+      type="range"
+      :max-range="31"
+    />
     <!-- 年的日期选择弹窗 -->
     <van-popup v-model:show="yearShow" position="bottom">
-      <van-picker :title="$t('robotRanking.yearPopTitle')" :columns="yearPopList" :columns-field-names="yearPopFieldName"
-        @confirm="yearPopConfirm" @cancel="yearShow = false" />
+      <van-picker
+        :title="$t('robotRanking.yearPopTitle')"
+        :columns="yearPopList"
+        :columns-field-names="yearPopFieldName"
+        @confirm="yearPopConfirm"
+        @cancel="yearShow = false"
+      />
     </van-popup>
-    <!-- <nav-bar></nav-bar> -->
-  </div>
-  <div v-else class="noPermission" style="justify-content: center;">
-    <div class="box1 flex-col" style="text-align: center;">
-      <s-header :name="$t('robotRanking.machineSalesRanking')" :noback="true" :isFixed="false"></s-header>
-      <view>
-        <br />
-      </view>
-      <view>{{ $t('robotRanking.noPermission') }}</view>
-    </div>
   </div>
 </template>
 
@@ -166,7 +224,7 @@ import { onMounted, ref, reactive, computed, nextTick } from "vue";
 import sHeader from "../components/SimpleHeader";
 // import navBar from "../components/NavBar";
 import { getRankingList } from "../service/robotRanking";
-import { getLoginUser, styleUrl } from "../common/js/utils";
+import { getLoginUser } from "../common/js/utils";
 import kTabs from "../components/commom/kTabs/index.vue";
 import kDialog from "../components/commom/kDialog/index.vue";
 import moment from "moment";
@@ -210,7 +268,9 @@ export default {
       changeTypeShow.value = true;
     };
     // 是否管理员
-    const isAdmin = () => { return (user && user.type === 0); }
+    const isAdmin = () => {
+      return user && user.type === 0;
+    };
     // 公司平台弹窗
     const companyTypeInpClk = () => {
       companyTypeShow.value = true;
@@ -416,6 +476,29 @@ export default {
         id: 3,
       },
     ]);
+
+    const timePeriods = ref([
+      {
+        type: "day",
+        titleKey: "dailySalesRanking",
+        tabList: tabDayList.value,
+      },
+      {
+        type: "week",
+        titleKey: "salesRankingThisWeek",
+        tabList: tabWeekList.value,
+      },
+      {
+        type: "month",
+        titleKey: "salesRankingThisMonth",
+        tabList: tabMonthList.value,
+      },
+      {
+        type: "year",
+        titleKey: "salesRankingThisYear",
+        tabList: tabYearList.value,
+      },
+    ]);
     // 默认进来的时间
     const defaultTime = reactive({
       // 今日
@@ -434,17 +517,18 @@ export default {
       weekStart: moment().weekday(1).format("YYYY-MM-DD") + " 00:00:00",
       weekEnd: moment().weekday(7).format("YYYY-MM-DD") + " 23:59:59",
       // 上周
-      lastWeekStart: moment().week(moment().week() - 1).startOf('week').add(1, 'days').format("YYYY-MM-DD") + " 00:00:00",
-      // moment()
-      //   .week(moment().week() - 1)
-      //   .startOf("week")
-      //   .format("YYYY-MM-DD") + " 00:00:00",
-
-      lastWeekEnd: moment().week(moment().week() - 1).endOf('week').add(1, 'days').format("YYYY-MM-DD") + " 23:59:59",
-      // moment()
-      //   .week(moment().week() - 1)
-      //   .endOf("week")
-      //   .format("YYYY-MM-DD") + " 23:59:59",
+      lastWeekStart:
+        moment()
+          .week(moment().week() - 1)
+          .startOf("week")
+          .add(1, "days")
+          .format("YYYY-MM-DD") + " 00:00:00",
+      lastWeekEnd:
+        moment()
+          .week(moment().week() - 1)
+          .endOf("week")
+          .add(1, "days")
+          .format("YYYY-MM-DD") + " 23:59:59",
 
       // 这个月
       monthStart: moment().startOf("month").format("YYYY-MM-DD") + " 00:00:00",
@@ -598,9 +682,9 @@ export default {
                 type: "shadow",
               },
               borderWidth: 1,
-              textStyle:{
-                fontSize : 12
-              }
+              textStyle: {
+                fontSize: 12,
+              },
             },
             // 固定屏幕显示多少个，其余的滑动
             dataZoom: [
@@ -688,10 +772,8 @@ export default {
                 },
               },
             ];
-            dayChartOption.dataZoom[0]["startValue"] =
-              data.data.categories[0];
-            dayChartOption.dataZoom[0]["endValue"] =
-              data.data.categories[3];
+            dayChartOption.dataZoom[0]["startValue"] = data.data.categories[0];
+            dayChartOption.dataZoom[0]["endValue"] = data.data.categories[3];
             // 解决resize不起作用，配合onMounted里的方法使用
             switch (chartType) {
               case "day":
@@ -728,9 +810,6 @@ export default {
       });
     };
     const user = getLoginUser();
-    // 默认能看到机器排行
-    const showRobotRankingDiv = ref(true);
-    const isM11Included = user.menuCodeList.some((item) => item === "M11");
 
     // 日、周、月、年的图表
     const dayChartBox = ref();
@@ -739,28 +818,12 @@ export default {
     const yearChartBox = ref();
     // 初始化页面获取列表
     onMounted(async () => {
-      // 加载样式
-      styleUrl('robotRanking');
       // 默认筛选选中
       searchForm.changeTypeName = t("robotRanking.salesStatistics");
       searchForm.changeType = 0;
       searchForm.companyTypeName = t("robotRanking.whole");
       searchForm.machineTypeName = t("robotRanking.whole");
-      // 查询是否有订单数据权限
-      // const isOrderData = user.menuCodeList.some((item) => {
-      //   return item === "M4";
-      // })
-      // 子商家type=3和公司人员type=1，默认看不到 
-      if ((user.type > 2 || user.type === 1) && !isM11Included) {
-        showRobotRankingDiv.value = false;
-      }
-      // 如果是type为admin或者商家或者是有订单数据权限M4的子商家才可以查看
-      // if (user.type === 0 || user.type === 2 || isOrderData) {
-      //   init();
-      // }
-      if (user.type === 0 || user.type === 2 || isM11Included) {
-        init();
-      }
+      init();
 
       window.addEventListener("resize", () => {
         chartObj.day && chartObj.day.resize();
@@ -787,7 +850,7 @@ export default {
       machineTypeName: "",
       machineType: "",
       companyTypeName: "",
-      companyType: ""
+      companyType: "",
     });
     const kDialogRef = ref(null);
     const busiPopShow = ref(false);
@@ -832,6 +895,25 @@ export default {
     const busiPopCancel = () => {
       busiPopShow.value = false;
     };
+
+    const setChartRef = (el, type) => {
+      if (el) {
+        switch (type) {
+          case "day":
+            dayChartBox.value = el;
+            break;
+          case "week":
+            weekChartBox.value = el;
+            break;
+          case "month":
+            monthChartBox.value = el;
+            break;
+          case "year":
+            yearChartBox.value = el;
+            break;
+        }
+      }
+    };
     return {
       dayChartBox,
       weekChartBox,
@@ -884,8 +966,8 @@ export default {
       maTypeDefaIdx,
       chgTypeDefaIdx,
       isAdmin,
-
-      showRobotRankingDiv,
+      timePeriods,
+      setChartRef,
     };
   },
   components: { sHeader, kTabs, kDialog, kNoData },
@@ -893,5 +975,160 @@ export default {
 </script>
 
 <style lang="less" scoped>
-@import "../styles/robotRanking/index";
+@primary-color: #4d6add;
+@text-primary: #2d3542;
+@text-secondary: #64748b;
+@border-color: #e4e7ec;
+@card-bg: #ffffff;
+
+.sales-rank-view {
+  background: #f8f9fb;
+  height: calc(100% - 50px);
+  overflow: auto;
+  overflow-x: hidden;
+}
+
+.modern-header {
+  box-shadow: 0 2px 12px rgba(@primary-color, 0.1);
+}
+
+.rank-container {
+  padding: 0 10px;
+}
+
+.filter-card {
+  background: @card-bg;
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+  margin: 10px 0;
+}
+
+.card-header {
+  padding: 16px 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.card-title {
+  display: flex;
+  align-items: center;
+  margin: 0;
+  font-size: 16px;
+  color: @text-primary;
+  font-weight: 600;
+
+  .title-accent {
+    width: 4px;
+    height: 18px;
+    background: @primary-color;
+    border-radius: 2px;
+    margin-right: 12px;
+  }
+}
+
+.filter-icon {
+  font-size: 22px;
+  color: @text-primary;
+  transition: all 0.3s ease;
+  padding: 8px;
+  cursor: pointer;
+
+  &:hover {
+    color: @primary-color;
+    transform: rotate(90deg) scale(1.1);
+  }
+
+  &:active {
+    transform: rotate(90deg) scale(0.9);
+  }
+}
+
+@media (max-width: 768px) {
+  .card-header {
+    padding: 12px 16px;
+  }
+
+  .filter-icon {
+    font-size: 18px;
+    padding: 6px;
+  }
+}
+
+.rank-card {
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
+  margin-bottom: 10px;
+  height: 400px;
+  overflow: hidden;
+
+  .period-header {
+    padding: 16px;
+
+    .period-title {
+      display: flex;
+      align-items: center;
+      margin: 0 0 12px;
+      font-size: 16px;
+      color: @text-primary;
+
+      .period-icon {
+        width: 6px;
+        height: 6px;
+        background: @primary-color;
+        border-radius: 50%;
+        margin-right: 10px;
+      }
+    }
+
+    .type-tabs {
+      width: 100% !important;
+    }
+  }
+
+  .chart-wrapper {
+    padding: 0 16px 16px;
+    height: 400px;
+
+    .chart-box {
+      height: 300px;
+      width: 100%;
+      border-radius: 8px;
+      overflow: hidden;
+    }
+
+    .no-data-tip {
+      height: 300px;
+    }
+  }
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .rank-container {
+    padding: 0 10px;
+  }
+
+  .rank-card {
+    margin-bottom: 10px;
+
+    .chart-wrapper {
+      height: 250px;
+      padding: 0 12px 12px;
+    }
+  }
+
+  .filter-container {
+    .rank-title {
+      font-size: 16px;
+    }
+
+    .filter-btn {
+      padding: 6px 16px;
+      font-size: 13px;
+    }
+  }
+}
 </style>

src/views/user.vue

@@ -11,13 +11,13 @@
           <div class="group2"></div>
           <span class="baseText">{{ $t("user.essentialInformation") }}</span>
         </div>
-        <div class="userMessage flex-row justify-between">
-          <div class="userId leftBox">
+        <div class="userMessage">
+          <div class="userId leftCol">
             <p class="infoValue">{{ accountDetail.managerId }}</p>
             <p class="infoLabel">{{ $t("user.systemId") }}</p>
           </div>
           <div class="verticalDivider"></div>
-          <div class="userId rightBox">
+          <div class="userId rightCol">
             <p class="infoValue">{{ accountDetail.username }}</p>
             <p class="infoLabel">{{ $t("user.myAccount") }}</p>
           </div>
@@ -1272,8 +1272,6 @@ export default {
 </script>
 
 <style lang="less" scoped>
-@import "../common/style/mixin";
-
 @blue: #4d6add;
 @primary-color: #4d6add;
 @text-secondary: #666;
@@ -1303,9 +1301,10 @@ export default {
         margin-bottom: 20px;
         .group2 {
           width: 4px;
-          height: 16px;
-          background: @blue;
-          margin-right: 8px;
+          height: 18px;
+          background: @primary-color;
+          border-radius: 2px;
+          margin-right: 12px;
         }
         .baseText {
           font-size: 16px;
@@ -1316,22 +1315,25 @@ export default {
 
       .userMessage {
         position: relative;
-        padding: 20px 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
         background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f5 100%);
         border-radius: 8px;
-        margin: 16px 0;
+        margin: 10px 0;
 
         .userId {
-          flex: 1;
+          flex: 0 0 45%; // 控制两侧宽度
           text-align: center;
           padding: 0 5px;
+          white-space: nowrap;
 
           .infoValue {
-            font-size: 18px;
-            font-weight: 500;
+            font-size: 15px;
+            font-weight: 600;
             color: @primary-color;
             margin-bottom: 6px;
-            word-break: break-all;
+            
           }
 
           .infoLabel {