22

src/router/router.guards.js

@@ -2,18 +2,31 @@ import { useSystemStore } from "@/stores/modules/systemStore";
 import { useWalletStore } from "@/stores/modules/walletStore";
 
 import { whitelistRoutes } from "@/router/whitelist";
-
+import { systemRoutes } from "@/router/system";
 
 
 const paths = whitelistRoutes.map(item =>{
   return item.path
 });
 
+const mainPath = systemRoutes[0].children.filter(item =>{
+  return item.meta?.tabbar || false
+}).map(cItem =>{
+  return cItem.path
+});
+
+
 export function createRouterGuards(router) {
   const systemStore = useSystemStore();
   const walletStore = useWalletStore();
   // 路由拦截
-  router.beforeEach(async (to, from, next) => {
+  router.beforeEach(async (to, from, next) => { 
+    if(mainPath.includes(from.path) && paths.includes(to.path) && to.path != '/login'){
+      // 停止跳转
+      next(false)
+      return
+    }
+
     if (paths.includes(to.path)) {
       return next();
     }

src/router/system.js

@@ -8,211 +8,383 @@ export const systemRoutes = [
     component: LAYOUT,
     children: [
       {
-        path: "im",
+        path: "/im",
         name: "im",
-        meta: { title: "router.Social", keepAlive: true, navbar: false, tabbar:true }, // 社交
+        meta: {
+          title: "router.Social",
+          keepAlive: true,
+          navbar: false,
+          tabbar: true,
+        }, // 社交
         component: () => import("@/views/im/index.vue"),
       },
       {
-        path: "transaction",
+        path: "/transaction",
         name: "transaction",
-        meta: { title: "router.Transaction", keepAlive: true, navbar: true, tabbar:true }, // 交易
+        meta: {
+          title: "router.Transaction",
+          keepAlive: true,
+          navbar: true,
+          tabbar: true,
+        }, // 交易
         component: () => import("@/views/transaction/index.vue"),
       },
       {
-        path: "wallet",
+        path: "/wallet",
         name: "wallet",
-        meta: { title: "router.Wallet", keepAlive: true, navbar: false, tabbar:true }, // 钱包
-        component: () => import("@/views/wallet/index.vue"),
+        meta: {
+          title: "router.Wallet",
+          keepAlive: true,
+          navbar: false,
+          tabbar: true,
+        }, // 钱包
+        component: () => import("@/views/wallet/index.vue"), 
       },
       {
-        path: "dapp",
+        path: "/dapp",
         name: "dapp",
-        meta: { title: "router.Dapp", keepAlive: true, navbar: false, tabbar:true }, // DAPP
+        meta: {
+          title: "router.Dapp",
+          keepAlive: true,
+          navbar: false,
+          tabbar: true,
+        }, // DAPP
         component: () => import("@/views/dapp/index.vue"),
       },
       {
-        path: "me",
+        path: "/me",
         name: "me",
-        meta: { title: "router.Me", keepAlive: true, navbar: false, tabbar:true }, // 我的
+        meta: {
+          title: "router.Me",
+          keepAlive: true,
+          navbar: false,
+          tabbar: true,
+        }, // 我的
         component: () => import("@/views/me/index.vue"),
       },
       {
         path: "personalInformation",
         name: "personalInformation",
-        meta: { title: "router.PersonalInformation", keepAlive: false, navbar: true, leftArrow: true }, // 个人资料
+        meta: {
+          title: "router.PersonalInformation",
+          keepAlive: false,
+          navbar: true,
+          leftArrow: true,
+        }, // 个人资料
         component: () => import("@/views/me/personalInformation/index.vue"),
       },
       {
         path: "walletManagement",
         name: "walletManagement",
-        meta: { title: "router.WalletManagement", keepAlive: false, navbar: true, leftArrow: true }, // 钱包管理
+        meta: {
+          title: "router.WalletManagement",
+          keepAlive: false,
+          navbar: true,
+          leftArrow: true,
+        }, // 钱包管理
         component: () => import("@/views/me/walletManagement/index.vue"),
       },
       {
         path: "nodeDividend",
         name: "nodeDividend",
-        meta: { title: "router.receiptOfRecord", keepAlive: false, navbar: true, leftArrow: true }, // 节点分红
+        meta: {
+          title: "router.receiptOfRecord",
+          keepAlive: false,
+          navbar: true,
+          leftArrow: true,
+        }, // 节点分红
         component: () => import("@/views/me/nodeDividend/index.vue"),
       },
       {
         path: "walletDetail",
         name: "walletDetail",
-        meta: { title: "router.walletDetail", keepAlive: false, navbar: true, leftArrow: true }, // 钱包详情
+        meta: {
+          title: "router.walletDetail",
+          keepAlive: false,
+          navbar: true,
+          leftArrow: true,
+        }, // 钱包详情
         component: () => import("@/views/wallet/walletDetail/index.vue"),
       },
       {
         path: "transferDetail",
         name: "transferDetail",
-        meta: { title: "router.transfer", keepAlive: false, navbar: true, leftArrow: true, to:"wallet" }, // 转账详情
+        meta: {
+          title: "router.transfer",
+          keepAlive: false,
+          navbar: true,
+          leftArrow: true,
+          to: "wallet",
+        }, // 转账详情
         component: () => import("@/views/wallet/transferDetail/index.vue"),
       },
       {
         path: "transferAddressManagement",
         name: "transferAddressManagement",
-        meta: { title: "router.addressBook", keepAlive: false, navbar: true, leftArrow: true, to: "transferDetail" }, // 地址管理
+        meta: {
+          title: "router.addressBook",
+          keepAlive: false,
+          navbar: true,
+          leftArrow: true,
+          to: "transferDetail",
+        }, // 地址管理
         component: () => import("@/views/me/addressManagement/index.vue"),
       },
       {
         path: "meAddressManagement",
         name: "meAddressManagement",
-        meta: { title: "router.addressBook", keepAlive: false, navbar: true, leftArrow: true, to: "me" }, // 地址管理
+        meta: {
+          title: "router.addressBook",
+          keepAlive: false,
+          navbar: true,
+          leftArrow: true,
+          to: "me",
+        }, // 地址管理
         component: () => import("@/views/me/addressManagement/index.vue"),
       },
       {
         path: "addAddress",
         name: "addAddress",
-        meta: { title: "router.addAddress", keepAlive: false, navbar: true, leftArrow: true }, // 添加地址
+        meta: {
+          title: "router.addAddress",
+          keepAlive: false,
+          navbar: true,
+          leftArrow: true,
+        }, // 添加地址
         component: () => import("@/views/me/addAddress/index.vue"),
       },
       {
         path: "proceeds",
         name: "proceeds",
-        meta: { title: "router.collectionPayment", keepAlive: false, navbar: true, leftArrow: true }, // 收款
+        meta: {
+          title: "router.collectionPayment",
+          keepAlive: false,
+          navbar: true,
+          leftArrow: true,
+        }, // 收款
         component: () => import("@/views/wallet/proceeds/index.vue"),
       },
       {
         path: "exchange",
         name: "exchange",
-        meta: { title: "router.exchange", keepAlive: false, navbar: true, leftArrow: true }, // 元宝兑换
+        meta: {
+          title: "router.exchange",
+          keepAlive: false,
+          navbar: true,
+          leftArrow: true,
+        }, // 元宝兑换
         component: () => import("@/views/wallet/ybExchange/index.vue"),
       },
       {
         path: "jysExchange",
         name: "jysExchange",
-        meta: { title: "router.Transaction", keepAlive: false, navbar: true, leftArrow: true }, // 交易所
+        meta: {
+          title: "router.Transaction",
+          keepAlive: false,
+          navbar: true,
+          leftArrow: true,
+        }, // 交易所
         component: () => import("@/views/transaction/jys/index.vue"),
       },
       {
         path: "aboutUs",
         name: "aboutUs",
-        meta: { title: "router.AboutUs", keepAlive: false, navbar: true, leftArrow: true }, // 關於我們
+        meta: {
+          title: "router.AboutUs",
+          keepAlive: false,
+          navbar: true,
+          leftArrow: true,
+        }, // 關於我們
         component: () => import("@/views/settings/aboutUs/index.vue"),
       },
 
-
       {
         path: "systemSettings",
         name: "systemSettings",
-        meta: { title: "router.SystemSettings", keepAlive: false, navbar: true, leftArrow: true }, //  系統設置
+        meta: {
+          title: "router.SystemSettings",
+          keepAlive: false,
+          navbar: true,
+          leftArrow: true,
+        }, //  系統設置
         component: () => import("@/views/settings/systemSettings/index.vue"),
       },
       {
         path: "languageSettings",
         name: "languageSettings",
-        meta: { title: "router.LanguageSettings", keepAlive: false, navbar: true, leftArrow: true }, //  系統設置
+        meta: {
+          title: "router.LanguageSettings",
+          keepAlive: false,
+          navbar: true,
+          leftArrow: true,
+        }, //  系統設置
         component: () => import("@/views/settings/languageSettings/index.vue"),
       },
       {
         path: "administratorSettings",
         name: "administratorSettings",
-        meta: { title: "router.AdministratorSettings", keepAlive: false, navbar: true, leftArrow: true }, //  管理员设置
+        meta: {
+          title: "router.AdministratorSettings",
+          keepAlive: false,
+          navbar: true,
+          leftArrow: true,
+        }, //  管理员设置
         component: () => import("@/views/me/administratorSettings/index.vue"),
       },
       {
         path: "download",
         name: "download",
-        meta: { title: "router.Download", keepAlive: false, navbar: true, leftArrow: true }, //  下载链接
+        meta: {
+          title: "router.Download",
+          keepAlive: false,
+          navbar: true,
+          leftArrow: true,
+        }, //  下载链接
         component: () => import("@/views/me/download/index.vue"),
       },
       {
         path: "chat",
         name: "chat",
-        meta: { title: "router.Social", keepAlive: false, navbar: false, leftArrow: true }, //  chat界面
+        meta: {
+          title: "router.Social",
+          keepAlive: false,
+          navbar: false,
+          leftArrow: true,
+        }, //  chat界面
         component: () => import("@/views/im/chat/index.vue"),
       },
       {
         path: "detail",
         name: "detail",
-        meta: { title: "router.ChatMessage", keepAlive: false, navbar: true, leftArrow: true }, //  chat详情
+        meta: {
+          title: "router.ChatMessage",
+          keepAlive: false,
+          navbar: true,
+          leftArrow: true,
+        }, //  chat详情
         component: () => import("@/views/im/detail/index.vue"),
       },
       {
         path: "qrcode",
         name: "qrcode",
-        meta: { title: "router.GroupQRCode", keepAlive: false, navbar: true, leftArrow: true }, //  二维码详情
+        meta: {
+          title: "router.GroupQRCode",
+          keepAlive: false,
+          navbar: true,
+          leftArrow: true,
+        }, //  二维码详情
         component: () => import("@/views/im/detail/qrcode/index.vue"),
       },
       {
         path: "chatLog",
         name: "chatLog",
-        meta: { title: "router.ChatMessage", keepAlive: false, navbar: true, leftArrow: true }, //  聊天记录
+        meta: {
+          title: "router.ChatMessage",
+          keepAlive: false,
+          navbar: true,
+          leftArrow: true,
+        }, //  聊天记录
         component: () => import("@/views/im/detail/chatLog/index.vue"),
       },
       {
         path: "addMember",
         name: "addMember",
-        meta: { title: "router.AddMember", keepAlive: false, navbar: true, leftArrow: true }, //  添加成员
+        meta: {
+          title: "router.AddMember",
+          keepAlive: false,
+          navbar: true,
+          leftArrow: true,
+        }, //  添加成员
         component: () => import("@/views/im/detail/addMember/index.vue"),
       },
       {
         path: "createGroupChat",
         name: "createGroupChat",
-        meta: { title: "router.CreateGroupChat", keepAlive: false, navbar: true, leftArrow: true }, //  创建群聊
+        meta: {
+          title: "router.CreateGroupChat",
+          keepAlive: false,
+          navbar: true,
+          leftArrow: true,
+        }, //  创建群聊
         component: () => import("@/views/im/detail/addMember/index.vue"),
       },
       {
         path: "checkMember",
         name: "checkMember",
-        meta: { title: "router.GroupMembers", keepAlive: false, navbar: true, leftArrow: true }, //  查看成员
+        meta: {
+          title: "router.GroupMembers",
+          keepAlive: false,
+          navbar: true,
+          leftArrow: true,
+        }, //  查看成员
         component: () => import("@/views/im/detail/checkMember/index.vue"),
       },
       {
         path: "contact",
         name: "contact",
-        meta: { title: "router.ContactList", keepAlive: false, navbar: true, leftArrow: true }, //  通讯录
+        meta: {
+          title: "router.ContactList",
+          keepAlive: false,
+          navbar: true,
+          leftArrow: true,
+        }, //  通讯录
         component: () => import("@/views/im/contactList/index.vue"),
       },
       {
         path: "invitation",
         name: "invitation",
-        meta: { title: "router.NewInvitation", keepAlive: false, navbar: true, leftArrow: true }, //  新邀请
+        meta: {
+          title: "router.NewInvitation",
+          keepAlive: false,
+          navbar: true,
+          leftArrow: true,
+        }, //  新邀请
         component: () => import("@/views/im/contactList/invitation/index.vue"),
       },
       {
         path: "group",
         name: "group",
-        meta: { title: "router.GroupChatList", keepAlive: false, navbar: true, leftArrow: true }, //  群聊列表
+        meta: {
+          title: "router.GroupChatList",
+          keepAlive: false,
+          navbar: true,
+          leftArrow: true,
+        }, //  群聊列表
         component: () => import("@/views/im/contactList/groupList/index.vue"),
       },
       {
         path: "record",
         name: "record",
-        meta: { title: "router.ReleaseRecord", keepAlive: false, navbar: true, leftArrow: true }, //  发布记录
+        meta: {
+          title: "router.ReleaseRecord",
+          keepAlive: false,
+          navbar: true,
+          leftArrow: true,
+        }, //  发布记录
         component: () => import("@/views/im/releaseRecord/index.vue"),
       },
       {
         path: "personal",
         name: "personal",
-        meta: { title: "router.PersonalInformation", keepAlive: false, navbar: true, leftArrow: true }, //  个人信息
+        meta: {
+          title: "router.PersonalInformation",
+          keepAlive: false,
+          navbar: true,
+          leftArrow: true,
+        }, //  个人信息
         component: () => import("@/views/im/personal/index.vue"),
       },
       {
         path: "search",
         name: "search",
-        meta: { title: "router.Search", keepAlive: false, navbar: true, leftArrow: true }, //  搜索页面
+        meta: {
+          title: "router.Search",
+          keepAlive: false,
+          navbar: true,
+          leftArrow: true,
+        }, //  搜索页面
         component: () => import("@/views/im/search/index.vue"),
       },
     ],
   },
-]
+];

src/views/wallet/index.vue

@@ -1,741 +1,879 @@
 <template>
-    <div class="container">
-      <svg-icon name="wallet-bg" class="bg-img" />
-      <div class="user-info-body">
-        <div class="user-info-lf">
-          <van-image
-            width="28px"
-            height="28px"
-            round
-            :src="walletStore.avatar"
-          />
-          <div class="user-info">
-            <div class="user-info-name" @click="showWallet = true">
-              <div>{{ walletStore.username }}</div>
-              <svg-icon style="width: 16px; height: 16px;margin-left: 3px;" name="down" />
-            </div>
-            <div class="user-info-key-body">
-              <span class="user-info-key-body-text">{{ formatAddress(walletStore.account) }}</span>
-              <svg-icon class="im-copy-btn" style="width: 16px; height: 16px;" name="copy" :data-clipboard-text="walletStore.account"/>
-            </div>
+  <div class="container">
+    <svg-icon name="wallet-bg" class="bg-img" />
+    <div class="user-info-body">
+      <div class="user-info-lf">
+        <van-image width="28px" height="28px" round :src="walletStore.avatar" />
+        <div class="user-info">
+          <div class="user-info-name" @click="showWallet = true">
+            <div>{{ walletStore.username }}</div>
+            <svg-icon
+              style="width: 16px; height: 16px; margin-left: 3px"
+              name="down"
+            />
+          </div>
+          <div class="user-info-key-body">
+            <span class="user-info-key-body-text">{{
+              formatAddress(walletStore.account)
+            }}</span>
+            <svg-icon
+              class="im-copy-btn"
+              style="width: 16px; height: 16px"
+              name="copy"
+              :data-clipboard-text="walletStore.account"
+            />
           </div>
-        </div>
-        <div class="network">
-          <van-image width="20px" height="20px" round :src="walletStore.accountIcon"/>
-          <div class="network-name">{{ walletStore.accountName  }}</div>
         </div>
       </div>
-      <div class="amount">
-        <div class="amount-item-box">
-          <div>Total assets</div>
-          <div class="amount-item">
-            <div class="item-text">
-              <svg-icon class="my" style="width: 28px; height: 28px;" name="my" />
-              <div>{{isShow?totalMoney:'****'}}</div>
-            </div>
-            <svg-icon  style="width: 16px; height: 16px;" :name="isShow?'eyes':'seyes'" @click="isShow = !isShow"/>
+      <div class="network">
+        <van-image
+          width="20px"
+          height="20px"
+          round
+          :src="walletStore.accountIcon"
+        />
+        <div class="network-name">{{ walletStore.accountName }}</div>
+      </div>
+    </div>
+    <div class="amount">
+      <div class="amount-item-box">
+        <div>Total assets</div>
+        <div class="amount-item">
+          <div class="item-text">
+            <svg-icon class="my" style="width: 28px; height: 28px" name="my" />
+            <div>{{ isShow ? totalMoney : "****" }}</div>
           </div>
+          <svg-icon
+            style="width: 16px; height: 16px"
+            :name="isShow ? 'eyes' : 'seyes'"
+            @click="isShow = !isShow"
+          />
         </div>
-        <svg-icon style="width: 24px; height: 24px; margin-right: 27px;" name="right" @click="goToPageDetail"/>
       </div>
-      <div class="card-box">
-        <div class="box-cont" @click="goToPage('exchange')">
-          <svg-icon class="box-cont-icon" style="width: 30px; height: 30px;" name="1" />
-          <div>{{ $t('wallet.GoldCoinExchange') }}</div>
-        </div>
-        <div class="box-cont" @click="goToPage('proceeds')">
-          <svg-icon class="box-cont-icon" style="width: 30px; height: 30px;" name="2" />
-          <div>{{ $t('wallet.Collection') }}</div>
-        </div>
-        <div class="box-cont" @click="goToPage('transferDetail')">
-          <svg-icon class="box-cont-icon" style="width: 30px; height: 30px;" name="3" />
-          <div>{{ $t('wallet.Transfer') }}</div>
-        </div>
-        <div class="box-cont" @click="goToDapp">
-          <svg-icon class="box-cont-icon" style="width: 30px; height: 30px;" name="4" />
-          <div>{{ $t('wallet.Competition') }}</div>
-        </div>
-        <div class="box-cont">
-          <svg-icon class="box-cont-icon" style="width: 30px; height: 30px;" name="5" />
-          <div>{{ $t('wallet.BlockBrowser') }}</div>
-        </div>
+      <svg-icon
+        style="width: 24px; height: 24px; margin-right: 27px"
+        name="right"
+        @click="goToPageDetail"
+      />
+    </div>
+    <div class="card-box">
+      <div class="box-cont" @click="goToPage('exchange')">
+        <svg-icon
+          class="box-cont-icon"
+          style="width: 30px; height: 30px"
+          name="1"
+        />
+        <div>{{ $t("wallet.GoldCoinExchange") }}</div>
       </div>
-      <div class="list-box">
-        <div class="list-title">
-          <div>{{ $t('wallet.Token') }}</div>
-          <svg-icon style="width: 24px; height: 24px;" name="add" @click="changePop(1)"/>
-        </div>
-        <div class="list-ul">
-          <template v-for="(item,i) in walletStore.tokenList" :key="i">
-            <div class="list-li" v-if="item.name == 'ACC' || !item.show" @click="changePop(2,item)">
-              <div class="list-li-lf">
-                <van-image width="30px" height="30px" round :src="item.logo"/>
-                <div style="margin-left: 8px;">{{item.name}}</div>
-              </div>
-              <div class="list-li-ri">
-                <div>{{item.balance}}</div>
-                <div class="list-li-ri-num">${{item.money}}</div>
-              </div>
+      <div class="box-cont" @click="goToPage('proceeds')">
+        <svg-icon
+          class="box-cont-icon"
+          style="width: 30px; height: 30px"
+          name="2"
+        />
+        <div>{{ $t("wallet.Collection") }}</div>
+      </div>
+      <div class="box-cont" @click="goToPage('transferDetail')">
+        <svg-icon
+          class="box-cont-icon"
+          style="width: 30px; height: 30px"
+          name="3"
+        />
+        <div>{{ $t("wallet.Transfer") }}</div>
+      </div>
+      <div class="box-cont" @click="goToDapp">
+        <svg-icon
+          class="box-cont-icon"
+          style="width: 30px; height: 30px"
+          name="4"
+        />
+        <div>{{ $t("wallet.Competition") }}</div>
+      </div>
+      <div class="box-cont">
+        <svg-icon
+          class="box-cont-icon"
+          style="width: 30px; height: 30px"
+          name="5"
+        />
+        <div>{{ $t("wallet.BlockBrowser") }}</div>
+      </div>
+    </div>
+    <div class="list-box">
+      <div class="list-title">
+        <div>{{ $t("wallet.Token") }}</div>
+        <svg-icon
+          style="width: 24px; height: 24px"
+          name="add"
+          @click="changePop(1)"
+        />
+      </div>
+      <div class="list-ul">
+        <template v-for="(item, i) in walletStore.tokenList" :key="i">
+          <div
+            class="list-li"
+            v-if="item.name == 'ACC' || !item.show"
+            @click="changePop(2, item)"
+          >
+            <div class="list-li-lf">
+              <van-image width="30px" height="30px" round :src="item.logo" />
+              <div style="margin-left: 8px">{{ item.name }}</div>
             </div>
-          </template>
-        </div>
+            <div class="list-li-ri">
+              <div>{{ item.balance }}</div>
+              <div class="list-li-ri-num">${{ item.money }}</div>
+            </div>
+          </div>
+        </template>
       </div>
-      <van-popup v-model:show="showWallet" position="bottom" round>
-        <div class="pop-content">
-          <div class="pop-title">
-            <svg-icon style="width: 24px; height: 24px;" name="left-arrow" @click="showWallet = false"/>
-            <div class="title">{{ $t('wallet.SelectWallet') }}</div>
+    </div>
+    <van-popup v-model:show="showWallet" position="bottom" round>
+      <div class="pop-content">
+        <div class="pop-title">
+          <svg-icon
+            style="width: 24px; height: 24px"
+            name="left-arrow"
+            @click="showWallet = false"
+          />
+          <div class="title">{{ $t("wallet.SelectWallet") }}</div>
+        </div>
+        <div class="tree">
+          <div class="tree-lf">
+            <div
+              class="tree-lf-icon"
+              v-for="(item, i) in networkList"
+              :class="netWorkIndex == i ? 'active-bg' : ''"
+              @click="changeNetwork(i)"
+            >
+              <van-image lazy-load class="network-item-icon" :src="item.icon" />
+            </div>
           </div>
-          <div class="tree">
-            <div class="tree-lf">
-              <div class="tree-lf-icon" v-for="(item,i) in networkList" :class="netWorkIndex == i?'active-bg':''" @click="changeNetwork(i)">
-                <van-image lazy-load class="network-item-icon" :src="item.icon" />
-              </div>
+          <div class="tree-ri">
+            <div class="tree-ri-title">
+              {{ networkList[netWorkIndex]?.name }}
             </div>
-            <div class="tree-ri">
-              <div class="tree-ri-title">{{networkList[netWorkIndex]?.name}}</div>
-              <div class="tree-ul">
-                <div class="tree-li" 
-                  v-for="(item,i) in currentWallets" 
-                  :class="item.id == walletStore.id?'tree-active':''" @click="changeWallet(item)">
-                  <van-image
-                    width="37px"
-                    height="37px"
-                    round
-                    :src="item.avatar"
-                  />
-                  <div class="tree-li-cont">
-                    <div class="tree-li-text">{{ item.username }}</div>
-                    <div class="tree-li-address">
-                      <span>{{ formatAddress(item.account) }}</span>
-                      <svg-icon 
-                        class="im-copy-btn" 
-                        style="width: 16px; height: 16px;margin-left: 2px;" 
-                        name="copy" :data-clipboard-text="item.account"
-                      />
-                    </div>
+            <div class="tree-ul">
+              <div
+                class="tree-li"
+                v-for="(item, i) in currentWallets"
+                :class="item.id == walletStore.id ? 'tree-active' : ''"
+                @click="changeWallet(item)"
+              >
+                <van-image
+                  width="37px"
+                  height="37px"
+                  round
+                  :src="item.avatar"
+                />
+                <div class="tree-li-cont">
+                  <div class="tree-li-text">{{ item.username }}</div>
+                  <div class="tree-li-address">
+                    <span>{{ formatAddress(item.account) }}</span>
+                    <svg-icon
+                      class="im-copy-btn"
+                      style="width: 16px; height: 16px; margin-left: 2px"
+                      name="copy"
+                      :data-clipboard-text="item.account"
+                    />
                   </div>
                 </div>
               </div>
             </div>
           </div>
-          <div class="pop-btn" @click="addWallet">
-            <van-button class="btn" type="primary" size="large" color="#4765DD"> 
-              <svg-icon style="width: 24px; height: 24px;margin-right: 4px;" name="add1" />{{ $t('wallet.AddWallet') }}
-            </van-button>
-          </div>
         </div>
-      </van-popup>
-      <van-popup v-model:show="showHistory" position="bottom" round style="height:500px">
-        <div class="pop-content" style="height:500px">
-          <div class="pop-title">
-            <svg-icon style="width: 24px; height: 24px;" name="left-arrow" @click="showHistory = false"/>
-            <div class="title">{{ type == 1?$t('wallet.AddTokens'):$t('wallet.HistoricalRecords') }}</div>
+        <div class="pop-btn" @click="addWallet">
+          <van-button class="btn" type="primary" size="large" color="#4765DD">
+            <svg-icon
+              style="width: 24px; height: 24px; margin-right: 4px"
+              name="add1"
+            />{{ $t("wallet.AddWallet") }}
+          </van-button>
+        </div>
+      </div>
+    </van-popup>
+    <van-popup
+      v-model:show="showHistory"
+      position="bottom"
+      round
+      style="height: 500px"
+    >
+      <div class="pop-content" style="height: 500px">
+        <div class="pop-title">
+          <svg-icon
+            style="width: 24px; height: 24px"
+            name="left-arrow"
+            @click="showHistory = false"
+          />
+          <div class="title">
+            {{
+              type == 1
+                ? $t("wallet.AddTokens")
+                : $t("wallet.HistoricalRecords")
+            }}
           </div>
-          <!-- 1 -->
-          <div class="pop-ul" v-if="type == 1">
-            <div class="pop-li" v-for="(item,i) in walletStore.tokenList">
-              <div class="pop-li-lf" v-if="item.name != 'ACC'">
-                <van-image
-                  width="32px"
-                  height="32px"
-                  round
-                  :src="item.logo"
-                />
-                <div style="margin-left: 6px;">
-                  <div>{{item.name}}</div>
-                  <div class="pop-address">{{ formatAddress(item.address) }}</div>
-                </div>
+        </div>
+        <!-- 1 -->
+        <div class="pop-ul" v-if="type == 1">
+          <div class="pop-li" v-for="(item, i) in walletStore.tokenList">
+            <div class="pop-li-lf" v-if="item.name != 'ACC'">
+              <van-image width="32px" height="32px" round :src="item.logo" />
+              <div style="margin-left: 6px">
+                <div>{{ item.name }}</div>
+                <div class="pop-address">{{ formatAddress(item.address) }}</div>
               </div>
-              <svg-icon v-if="item.name != 'ACC'" style="width: 20px; height: 20px;" :name="item.show?'add-icon':'del-icon'" @click="tokensHandle(item)"/>
             </div>
+            <svg-icon
+              v-if="item.name != 'ACC'"
+              style="width: 20px; height: 20px"
+              :name="item.show ? 'add-icon' : 'del-icon'"
+              @click="tokensHandle(item)"
+            />
           </div>
-          <!-- 2 -->
-          <div class="pop-list" v-if="type == 2">
-            <div class="pop-list-box" v-for="(item,i) in historyList">
-              <svg-icon style="width: 24px; height: 24px;color: #fff;" :name="item.from?.hash == walletStore.account?'fs':'js'" />
-              <div class="pop-list-ul">
-                <div class="pop-list-li">
-                  <div class="pop-list-li-title">{{item.from?.hash == walletStore.account?$t('wallet.Send'):$t('wallet.Receive')}}</div>
-                  <div class="pop-list-li-status">{{ $t('wallet.Success') }}</div>
-                </div>
-                <div class="pop-list-li">
-                  <div>{{ $t('wallet.TransferAmount') }}</div>
-                  <div>{{item.value}}{{selectUrl.name}}</div>
-                </div>
-                <div class="pop-list-li">
-                  <div>{{item.from?.hash == walletStore.account?$t('wallet.Send'):$t('wallet.Receive')}}{{ $t('wallet.Time') }}</div>
-                  <div>{{item.timestamp}}</div>
+        </div>
+        <!-- 2 -->
+        <div class="pop-list" v-if="type == 2">
+          <div class="pop-list-box" v-for="(item, i) in historyList">
+            <svg-icon
+              style="width: 24px; height: 24px; color: #fff"
+              :name="item.from?.hash == walletStore.account ? 'fs' : 'js'"
+            />
+            <div class="pop-list-ul">
+              <div class="pop-list-li">
+                <div class="pop-list-li-title">
+                  {{
+                    item.from?.hash == walletStore.account
+                      ? $t("wallet.Send")
+                      : $t("wallet.Receive")
+                  }}
                 </div>
-                <div class="pop-list-li">
-                  <div>{{ $t('wallet.ReceivingAddress') }}</div>
-                  <div>{{formatAddress(item.to?.hash)}}
-                    <svg-icon class="im-copy-btn" style="width: 16px; height: 16px;" name="copy" :data-clipboard-text="item.to?.hash"/>
-                  </div>
+                <div class="pop-list-li-status">{{ $t("wallet.Success") }}</div>
+              </div>
+              <div class="pop-list-li">
+                <div>{{ $t("wallet.TransferAmount") }}</div>
+                <div>{{ item.value }}{{ selectUrl.name }}</div>
+              </div>
+              <div class="pop-list-li">
+                <div>
+                  {{
+                    item.from?.hash == walletStore.account
+                      ? $t("wallet.Send")
+                      : $t("wallet.Receive")
+                  }}{{ $t("wallet.Time") }}
                 </div>
-                <div class="pop-list-li">
-                  <div>hash</div>
-                  <div>{{formatAddress(item.hash)}}
-                    <svg-icon class="im-copy-btn" style="width: 16px; height: 16px;" name="copy" :data-clipboard-text="item.hash"/>
-                  </div>
+                <div>{{ item.timestamp }}</div>
+              </div>
+              <div class="pop-list-li">
+                <div>{{ $t("wallet.ReceivingAddress") }}</div>
+                <div>
+                  {{ formatAddress(item.to?.hash) }}
+                  <svg-icon
+                    class="im-copy-btn"
+                    style="width: 16px; height: 16px"
+                    name="copy"
+                    :data-clipboard-text="item.to?.hash"
+                  />
                 </div>
-                <div class="pop-list-li" v-if="selectUrl.name == 'ACC'">
-                  <div>{{ $t('wallet.MinerIsFee') }}</div>
-                  <div>{{item.gas_price}}ACC</div>
+              </div>
+              <div class="pop-list-li">
+                <div>hash</div>
+                <div>
+                  {{ formatAddress(item.hash) }}
+                  <svg-icon
+                    class="im-copy-btn"
+                    style="width: 16px; height: 16px"
+                    name="copy"
+                    :data-clipboard-text="item.hash"
+                  />
                 </div>
               </div>
+              <div class="pop-list-li" v-if="selectUrl.name == 'ACC'">
+                <div>{{ $t("wallet.MinerIsFee") }}</div>
+                <div>{{ item.gas_price }}ACC</div>
+              </div>
             </div>
           </div>
         </div>
-      </van-popup>
-    </div>
-  </template>
-  
-  <script setup>
-  import { useRouter } from 'vue-router'
-  import { getNetwork } from '@/api/path/login.api'
-  import { useWalletStore } from "@/stores/modules/walletStore";
-  import { useSystemStore } from "@/stores/modules/systemStore";
-  import {  transactions, tokenTransfers } from "@/api/path/backend.api";
-  import { openDapp } from "@/composables/dAppView";
-  import { cryptoEncode } from "@/utils/crypto";
-  import { useCopy } from "@/hooks/use-copy.js";
-  import { Device } from '@capacitor/device';
-  useCopy();
+      </div>
+    </van-popup>
+  </div>
+</template>
 
-  const router = useRouter();
-  const walletStore = useWalletStore();
-  const systemStore = useSystemStore();
+<script setup>
+import { getNetwork } from "@/api/path/login.api";
+import { useWalletStore } from "@/stores/modules/walletStore";
+import { useSystemStore } from "@/stores/modules/systemStore";
+import { transactions, tokenTransfers } from "@/api/path/backend.api";
+import { openDapp } from "@/composables/dAppView";
+import { cryptoEncode } from "@/utils/crypto";
+import { useCopy } from "@/hooks/use-copy.js";
+import { Device } from "@capacitor/device";
+useCopy();
 
-  const isShow = ref(true);
-  const showWallet = ref(false);
-  const showHistory = ref(false);
-  const networkList = ref([]);
-  const netWorkIndex = ref(0);
-  const type = ref('');
-  const historyList = ref([]);
-  const selectUrl = ref({});
-  const goToPage = (url) => {
-    router.push(url)
-  }
-  // 跳转详情
-  const goToPageDetail = () => {
-    router.push({
-      path: 'walletDetail',
-      query:{
-        id:walletStore.id
-      }
-    })
+const router = useRouter();
+const walletStore = useWalletStore();
+const systemStore = useSystemStore();
+
+const isShow = ref(true);
+const showWallet = ref(false);
+const showHistory = ref(false);
+const networkList = ref([]);
+const netWorkIndex = ref(0);
+const type = ref("");
+const historyList = ref([]);
+const selectUrl = ref({});
+const goToPage = (url) => {
+  router.push(url);
+};
+// 跳转详情
+const goToPageDetail = () => {
+  router.push({
+    path: "walletDetail",
+    query: {
+      id: walletStore.id,
+    },
+  });
+};
+const changePop = (val, item) => {
+  type.value = val;
+  if (val == 2) {
+    getDetail(item);
+    selectUrl.value = item;
+    return;
   }
-  const changePop = (val,item) => {
-    type.value = val;
-    if(val == 2){
-      getDetail(item);
-      selectUrl.value = item;
-      return;
-    };
-    showHistory.value = true;
+  showHistory.value = true;
+};
+// 查看历史记录
+const getDetail = (item) => {
+  if (item.name == "ACC") {
+    getList();
+  } else {
+    getDBList(item.address);
   }
-   // 查看历史记录
-  const getDetail = (item) => {
-    if(item.name == 'ACC'){
-      getList();
-    }else{
-      getDBList(item.address);
-    }
-    showHistory.value = true;
+  showHistory.value = true;
+};
+const getList = async () => {
+  const res = await transactions(walletStore.account);
+  const items = res.items || [];
+  if (items.length > 0) {
+    items.forEach((val) => {
+      val.timestamp = getDateTime(val.timestamp);
+      val.gas_price = getPrice(val.fee.value).toFixed(9);
+      if (val.value !== "0") {
+        val.value = getPrice(val.value).toFixed(6);
+      }
+    });
+    historyList.value = items;
   }
-  const getList = async () => {
-    const res = await transactions(walletStore.account);
-    const items = res.items || []
-    if (items.length > 0) {
-      items.forEach(val => {
-        val.timestamp = getDateTime(val.timestamp)
-        val.gas_price = getPrice(val.fee.value).toFixed(9)
-        if (val.value !== '0') {
-          val.value = getPrice(val.value).toFixed(6)
-        }
-      })
-      historyList.value = items
-    }
+};
+const getDBList = async (DBaddress) => {
+  const res = await tokenTransfers(walletStore.account, {
+    params: {
+      type: "ERC-20,ERC-721,ERC-1155",
+      filter: "to | from",
+      token: DBaddress,
+    },
+  });
+  const items = res.items || [];
+  if (items.length > 0) {
+    items.forEach((val) => {
+      val.timestamp = getDateTime(val.timestamp);
+      val.value = getPrice(val.total.value).toFixed(6);
+      val.hash = val.transaction_hash;
+    });
+    historyList.value = items;
   }
-  const getDBList = async (DBaddress) => {
-    const res = await tokenTransfers(walletStore.account,{
-      params: {
-        type: 'ERC-20,ERC-721,ERC-1155',
-        filter: 'to | from',
-        token: DBaddress
-      }
-    })
-    const items = res.items || []
-    if (items.length > 0) {
-      items.forEach(val => {
-        val.timestamp = getDateTime(val.timestamp)
-        val.value = getPrice(val.total.value).toFixed(6)
-        val.hash = val.transaction_hash
-      })
-      historyList.value = items
+};
+// 计算总和
+const totalMoney = computed(() => {
+  const list = walletStore.tokenList;
+  if (!Array.isArray(list) || list.length === 0) return 0;
+  let total = Number(list[0].money || 0);
+  for (let i = 1; i < list.length; i++) {
+    if (!list[i].show) {
+      total += Number(list[i].money || 0);
     }
   }
-  // 计算总和
-  const totalMoney = computed(() => {
-    const list = walletStore.tokenList
-    if (!Array.isArray(list) || list.length === 0) return 0
-    let total = Number(list[0].money || 0)
-    for (let i = 1; i < list.length; i++) {
-      if (!list[i].show) {
-        total += Number(list[i].money || 0)
-      }
-    }
-    return Number(total.toFixed(4))
-  })
+  return Number(total.toFixed(4));
+});
 
-  // 添加钱包
-  const addWallet = () => {
-    walletStore.accountName = networkList.value[netWorkIndex.value].name
-    walletStore.accountIcon = networkList.value[netWorkIndex.value].icon
-    walletStore.rpcUrl = networkList.value[netWorkIndex.value].url
-    router.push({
-      path: '/login',
-      query:{
-        isFirst:false
-      }
+// 添加钱包
+const addWallet = () => {
+  walletStore.accountName = networkList.value[netWorkIndex.value].name;
+  walletStore.accountIcon = networkList.value[netWorkIndex.value].icon;
+  walletStore.rpcUrl = networkList.value[netWorkIndex.value].url;
+  router.push({
+    path: "/login",
+    query: {
+      isFirst: false,
+    },
+  });
+};
+// 网络数据
+const initNetwork = async () => {
+  const { data } = await getNetwork({});
+  networkList.value = data;
+};
+const currentChainName = computed(
+  () => networkList.value[netWorkIndex.value]?.name
+);
+
+// 当前链对应的钱包数组
+const currentWallets = computed(() => {
+  return walletStore.walletList.filter(
+    (w) => w.accountName === currentChainName.value
+  );
+});
+// 切换网络
+const changeNetwork = (i) => {
+  netWorkIndex.value = i;
+};
+// 切换钱包
+const changeWallet = (item) => {
+  walletStore.switchWallet(item.id, item.account);
+  showWallet.value = false;
+};
+// 代币显示隐藏
+const tokensHandle = (item) => {
+  walletStore.changeToten(item.name);
+};
+// 更新代币信息
+const gethotTokens = async () => {
+  await walletStore.updateTokenVal();
+};
+// 跳转竞赛
+const goToDapp = () => {
+  const dapp = cryptoEncode(
+    JSON.stringify({
+      address: walletStore.account,
+      privateKey: walletStore.privateKey,
     })
-  }
-  // 网络数据
-  const initNetwork =  async () => {
-    const { data } = await getNetwork({})
-    networkList.value = data
-  }
-  const currentChainName = computed(() => networkList.value[netWorkIndex.value]?.name)
+  );
+  openDapp("https://accgame.angeltokens.io/", { dapp });
+};
 
-  // 当前链对应的钱包数组
-  const currentWallets = computed(() => {
-    return walletStore.walletList.filter(w => w.accountName === currentChainName.value)
-  })
-  // 切换网络
-  const changeNetwork = (i) => {
-    netWorkIndex.value = i;
-  }
-  // 切换钱包
-  const changeWallet = (item) => {
-    walletStore.switchWallet(item.id,item.account);
-    showWallet.value = false;
-  }
-   // 代币显示隐藏
-   const tokensHandle  = (item)=>{
-    walletStore.changeToten(item.name)
-  }
-  // 更新代币信息
-  const gethotTokens = async () => {
-    await walletStore.updateTokenVal();
-  }
-  // 跳转竞赛
-  const goToDapp = () => {
-    const dapp = cryptoEncode(
-      JSON.stringify({
-        address: walletStore.account,
-        privateKey: walletStore.privateKey,
-      })
-    );
-    openDapp('https://accgame.angeltokens.io/', { dapp });
-  }
+const formatAddress = (address) => {
+  if (!address) return "";
+  return address.slice(0, 8) + "..." + address.slice(-6);
+};
+const getPrice = (price) => {
+  const num = parseFloat(price) / Math.pow(10, 18);
+  return num;
+};
+const getDateTime = (isoString) => {
+  const date = new Date(isoString);
+  const formattedDate = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")} ${String(date.getHours()).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}:${String(date.getSeconds()).padStart(2, "0")}`;
+  return formattedDate;
+};
+onMounted(async () => {
+  initNetwork();
+  gethotTokens();
+  const deviceId = await Device.getId();
+  systemStore.DeviceId = deviceId.identifier;
+});
+</script>
 
-  const formatAddress = (address) => {
-    if (!address) return '';
-    return address.slice(0, 8) + '...' + address.slice(-6);
-  };
-  const getPrice = (price)=>{
-		const num = (parseFloat(price) / Math.pow(10, 18));
-		return num
-	}
-	const getDateTime=(isoString)=>{
-		const date = new Date(isoString);
-		const formattedDate = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`;
-		return formattedDate;
-	}
-  onMounted(async ()=>{
-    initNetwork();
-    gethotTokens();
-    const deviceId = await Device.getId();
-    systemStore.DeviceId = deviceId.identifier;
-  })
-  </script>
-  
-  <style lang="less" scoped>
-  .container{
-    position: relative;
+<style lang="less" scoped>
+.container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 50px);
+  .bg-img {
+    height: 18.8rem;
+    min-width: 100%;
+    width: 100vw;
+    position: absolute;
+    top: -0.8rem;
+    left: 0;
+    z-index: -1;
+  }
+  .user-info-body {
+    padding: 60px 17px 25px;
     display: flex;
-    flex-direction: column;
-    height: calc(100vh - 50px);
-    .bg-img{ 
-      height: 18.8rem; 
-      min-width: 100%;        
-      width: 100vw;
-      position: absolute;
-      top: -0.8rem;
-      left: 0;
-      z-index: -1;
-    }
-    .user-info-body{
-      padding: 60px 17px 25px;
+    align-items: center;
+    justify-content: space-between;
+    .user-info-lf {
       display: flex;
       align-items: center;
-      justify-content: space-between;
-      .user-info-lf{
-        display: flex;
-        align-items: center;
-        .user-info{
-          margin-left: 11px;
-          font-family: PingFang SC, PingFang SC;
-          font-size: 10px;
-          .user-info-name{
-            font-weight: 500;
-            color: #FFFFFF;
-            display: flex;
-            align-items: center;
-            margin-bottom: 2px;
-          }
-          .user-info-key-body{
-            font-weight: 400;
-            color: rgba(255,255,255,0.6);
-            display: flex;
-            align-items: center;
-            .user-info-key-body-text{
-              margin-right: 4px;
-            }
-          }
+      .user-info {
+        margin-left: 11px;
+        font-family:
+          PingFang SC,
+          PingFang SC;
+        font-size: 10px;
+        .user-info-name {
+          font-weight: 500;
+          color: #ffffff;
+          display: flex;
+          align-items: center;
+          margin-bottom: 2px;
         }
-      }
-      .network{
-        display: flex;
-        align-items: center;
-        border-radius: 27px;
-        border: 1px solid rgba(255,255,255,0.6);
-        padding: 0 5px;
-        font-family: PingFang SC, PingFang SC;
-        font-weight: 400;
-        font-size: 15px;
-        color: #FFFFFF;
-        height: 25px;
-        line-height: 25px;
-        box-sizing: border-box;
-        .network-name{
-          margin-left: 5px;
+        .user-info-key-body {
+          font-weight: 400;
+          color: rgba(255, 255, 255, 0.6);
+          display: flex;
+          align-items: center;
+          .user-info-key-body-text {
+            margin-right: 4px;
+          }
         }
       }
     }
-    .amount{ 
-      height: 102px;
-      background-color: rgba(242, 242, 242, 0.2);
-      backdrop-filter: blur(3px);  
-      -webkit-backdrop-filter: blur(3px);  
-      border-radius: 15px;
-      margin: 0 17px 20px 17px;
-      box-shadow:0 7px 10px #15277031;
-      box-sizing: border-box;
+    .network {
       display: flex;
       align-items: center;
-      justify-content: space-between;
-      font-family: PingFang SC, PingFang SC;
+      border-radius: 27px;
+      border: 1px solid rgba(255, 255, 255, 0.6);
+      padding: 0 5px;
+      font-family:
+        PingFang SC,
+        PingFang SC;
       font-weight: 400;
       font-size: 15px;
-      color: #FFFFFF;
-      &:before { 
-        height: calc(100% - 4px);
-        width: calc(100% - 4px);
-        content: "";
-        position: absolute;
-        inset: 0;
-        z-index: -1;
-        padding: 2px; /* 边框宽度 */
-        background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.1) 50%,  rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0.6) 100%);//linear-gradient(135deg, #ffffff64, #ffffff2e); /* 渐变方向可调 */
-        -webkit-mask: 
-          linear-gradient(#fff 0 0) content-box, 
-          linear-gradient(#fff 0 0);
-        -webkit-mask-composite: xor;
-        mask-composite: exclude;
-        border-radius: 15px; /* 必须和父元素一致 */
-        pointer-events: none; /* 避免遮挡点击 */
-
-      }
-      .amount-item-box{
-        margin: 21px 21px 27px 27px;
+      color: #ffffff;
+      height: 25px;
+      line-height: 25px;
+      box-sizing: border-box;
+      .network-name {
+        margin-left: 5px;
       }
-      .amount-item{
-        margin-top: 7px;
-        font-weight: 600;
-        font-size: 25px;
+    }
+  }
+  .amount {
+    height: 102px;
+    background-color: rgba(242, 242, 242, 0.2);
+    backdrop-filter: blur(3px);
+    -webkit-backdrop-filter: blur(3px);
+    border-radius: 15px;
+    margin: 0 17px 20px 17px;
+    box-shadow: 0 7px 10px #15277031;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-family:
+      PingFang SC,
+      PingFang SC;
+    font-weight: 400;
+    font-size: 15px;
+    color: #ffffff;
+    &:before {
+      height: calc(100% - 4px);
+      width: calc(100% - 4px);
+      content: "";
+      position: absolute;
+      inset: 0;
+      z-index: -1;
+      padding: 2px; /* 边框宽度 */
+      background: linear-gradient(
+        135deg,
+        rgba(255, 255, 255, 0.6) 0%,
+        rgba(255, 255, 255, 0.2) 25%,
+        rgba(255, 255, 255, 0.1) 50%,
+        rgba(255, 255, 255, 0.2) 75%,
+        rgba(255, 255, 255, 0.6) 100%
+      ); //linear-gradient(135deg, #ffffff64, #ffffff2e); /* 渐变方向可调 */
+      -webkit-mask:
+        linear-gradient(#fff 0 0) content-box,
+        linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor;
+      mask-composite: exclude;
+      border-radius: 15px; /* 必须和父元素一致 */
+      pointer-events: none; /* 避免遮挡点击 */
+    }
+    .amount-item-box {
+      margin: 21px 21px 27px 27px;
+    }
+    .amount-item {
+      margin-top: 7px;
+      font-weight: 600;
+      font-size: 25px;
+      display: flex;
+      position: relative;
+      .item-text {
         display: flex;
-        position: relative;
-        .item-text{
-          display: flex;
-          align-items: center;
-          margin-right: 2px;
-          .my{
-            position: relative;
-            top:1px;
-          }
+        align-items: center;
+        margin-right: 2px;
+        .my {
+          position: relative;
+          top: 1px;
         }
       }
     }
+  }
 
-  
-    .card-box{
-      background: #FFFFFF;
-      box-shadow: 0px 4px 8px -2px rgba(25,75,137,0.25);
-      border-radius: 17px;
-      height: 78px;
-      margin: 0 17px;
-      padding: 15px 10px;
-      box-sizing: border-box;
+  .card-box {
+    background: #ffffff;
+    box-shadow: 0px 4px 8px -2px rgba(25, 75, 137, 0.25);
+    border-radius: 17px;
+    height: 78px;
+    margin: 0 17px;
+    padding: 15px 10px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    font-family:
+      PingFang SC,
+      PingFang SC;
+    font-weight: 400;
+    font-size: 12px;
+    color: #000000;
+    .box-cont {
+      width: calc(100% / 5);
       display: flex;
+      flex-direction: column;
       align-items: center;
-      font-family: PingFang SC, PingFang SC;
-      font-weight: 400;
-      font-size: 12px;
-      color: #000000;
-      .box-cont{
-        width: calc(100% / 5);
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        .box-cont-icon{
-          margin-bottom: 4px;
-          color: #fff;
-        }
+      .box-cont-icon {
+        margin-bottom: 4px;
+        color: #fff;
       }
     }
-    .list-box{
-      background: #FFFFFF;
-      border-radius: 12px;
-      margin: 25px 17px;
-      padding: 16px;
-      box-sizing: border-box;
+  }
+  .list-box {
+    background: #ffffff;
+    border-radius: 12px;
+    margin: 25px 17px;
+    padding: 16px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow: hidden;
+    .list-title {
       display: flex;
-      flex-direction: column;
+      justify-content: space-between;
+      align-items: center;
+      font-family:
+        PingFang SC,
+        PingFang SC;
+      font-weight: 500;
+      font-size: 17px;
+      color: #000000;
+      margin-bottom: 23px;
+    }
+    .list-ul {
       flex: 1;
-      overflow: hidden;
-      .list-title{
+      display: flex;
+      flex-direction: column;
+      overflow: auto;
+      .list-li {
         display: flex;
-        justify-content: space-between;
         align-items: center;
-        font-family: PingFang SC, PingFang SC;
+        justify-content: space-between;
+        font-family:
+          PingFang SC,
+          PingFang SC;
         font-weight: 500;
-        font-size: 17px;
-        color: #000000;
-        margin-bottom: 23px;
-      }
-      .list-ul{
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        overflow: auto;
-        .list-li{
+        margin-bottom: 12px;
+        .list-li-lf {
           display: flex;
           align-items: center;
-          justify-content: space-between;
-          font-family: PingFang SC, PingFang SC;
-          font-weight: 500;
-          margin-bottom: 12px;
-          .list-li-lf{
-            display: flex;
-            align-items: center;
-            font-size: 15px;
-            color: #000000;
-          }
-          .list-li-ri{
-            font-size: 12px;
-            color: @font-color2;
-            text-align: right;
-            .list-li-ri-num{
-              font-weight: 400;
-              font-size: 10px;
-              color: #8D8D8D;
-            }
-          }
+          font-size: 15px;
+          color: #000000;
         }
-        .list-li:last-child{
-          margin-bottom: 0;
+        .list-li-ri {
+          font-size: 12px;
+          color: @font-color2;
+          text-align: right;
+          .list-li-ri-num {
+            font-weight: 400;
+            font-size: 10px;
+            color: #8d8d8d;
+          }
         }
       }
-      .list-ul::-webkit-scrollbar{
-          width: 0;
+      .list-li:last-child {
+        margin-bottom: 0;
       }
     }
-    .pop-content{
+    .list-ul::-webkit-scrollbar {
+      width: 0;
+    }
+  }
+  .pop-content {
+    display: flex;
+    flex-direction: column;
+    .pop-title {
+      padding: 17px;
+      border-bottom: 1px solid #f2f2f2;
       display: flex;
-      flex-direction: column;
-      .pop-title{
-        padding: 17px;
-        border-bottom: 1px solid #F2F2F2;
+      align-items: center;
+      font-family:
+        PingFang SC,
+        PingFang SC;
+      font-weight: 500;
+      font-size: 17px;
+      color: #000000;
+      .title {
+        flex: 1;
         display: flex;
-        align-items: center;
-        font-family: PingFang SC, PingFang SC;
-        font-weight: 500;
-        font-size: 17px;
-        color: #000000;
-        .title{
-          flex: 1;
-          display: flex;
-          justify-content: center;
-        }
+        justify-content: center;
       }
-      .tree{
+    }
+    .tree {
+      display: flex;
+      height: 300px;
+      overflow: hidden;
+      .tree-lf {
         display: flex;
-        height: 300px;
-        overflow: hidden;
-        .tree-lf{
+        flex-direction: column;
+        width: 67px;
+        overflow: auto;
+        .tree-lf-icon {
+          height: 67px;
+          padding: 16px;
+          box-sizing: border-box;
           display: flex;
-          flex-direction: column;
-          width: 67px;
-          overflow: auto;
-          .tree-lf-icon{
-            height: 67px;
-            padding: 16px;
-            box-sizing: border-box;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-          }
-          .active-bg{
-            background: #ECEFFC;
-          }
-        }
-        .tree-lf::-webkit-scrollbar{
-          width: 0;
-        }
-        .tree-ri{
-          margin-left: 10px;
-          margin-right: 17px;
-          flex: 1;
-          overflow: auto;
-          .tree-ri-title{
-            margin: 10px 0 4px;
-            font-family: PingFang SC, PingFang SC;
-            font-weight: 500;
-            font-size: 15px;
-            color: #000000;
-          }
-          .tree-ul{
-            .tree-li{
-              background: #F2F2F2;
-              border-radius: 8px;
-              border: 1px solid #F2F2F2;
-              padding: 14px 16px;
-              display: flex;
-              align-items: center;
-              margin-bottom: 12px;
-              .tree-li-cont{
-                margin-left: 12px;
-                font-family: PingFang SC, PingFang SC;
-                font-weight: 400;
-                font-size: 12px;
-                color: #8D8D8D;
-                .tree-li-text{
-                  font-weight: 500;
-                  font-size: 15px;
-                  color: @theme-color1;
-                }
-                .tree-li-address{
-                  display: flex;
-                  align-items: center;
-                }
-              }
-            }
-            .tree-active{
-              background: #FAFBFF;
-              border: 1px solid @theme-color1;
-            }
-          }
+          align-items: center;
+          justify-content: center;
         }
-        .tree-ri::-webkit-scrollbar{
-          width: 0;
+        .active-bg {
+          background: #eceffc;
         }
       }
-      .pop-btn{
-        margin: 17px;
-        .btn{
-          height: 40px;
-          border-radius: 50px;
-          font-family: PingFang SC, PingFang SC;
-          font-weight: 500;
-          font-size: 15px;
-          color: #FFFFFF;
-        }
-        :deep(.van-button__text) {
-          display: flex;
-          align-items: center;
-        }
+      .tree-lf::-webkit-scrollbar {
+        width: 0;
       }
-      .pop-list{
+      .tree-ri {
+        margin-left: 10px;
+        margin-right: 17px;
         flex: 1;
-        display: flex;
-        flex-direction: column;
         overflow: auto;
-        .pop-list-box{
-          display: flex;
-          padding: 17px 17px 0;
-          .pop-list-ul{
-            padding-bottom: 12px;
-            flex: 1;
-            margin-left: 8px;
-            border-bottom: 1px solid #F2F2F2;
-            box-sizing: border-box;
-            .pop-list-li{
-              display: flex;
-              align-items: center;
-              justify-content: space-between;
-              font-family: PingFang SC, PingFang SC;
-              margin-bottom: 4px;
+        .tree-ri-title {
+          margin: 10px 0 4px;
+          font-family:
+            PingFang SC,
+            PingFang SC;
+          font-weight: 500;
+          font-size: 15px;
+          color: #000000;
+        }
+        .tree-ul {
+          .tree-li {
+            background: #f2f2f2;
+            border-radius: 8px;
+            border: 1px solid #f2f2f2;
+            padding: 14px 16px;
+            display: flex;
+            align-items: center;
+            margin-bottom: 12px;
+            .tree-li-cont {
+              margin-left: 12px;
+              font-family:
+                PingFang SC,
+                PingFang SC;
               font-weight: 400;
               font-size: 12px;
-              color: @font-color2;
-              .pop-list-li-title{
+              color: #8d8d8d;
+              .tree-li-text {
                 font-weight: 500;
                 font-size: 15px;
-                color: #000000;
+                color: @theme-color1;
               }
-              .pop-list-li-status{
-                font-weight: 500;
-                font-size: 15px;
-                color: @theme-color1 !important;
+              .tree-li-address {
+                display: flex;
+                align-items: center;
               }
             }
-            .pop-list-li div:last-child{
-              color: #8D8D8D;
-            }
+          }
+          .tree-active {
+            background: #fafbff;
+            border: 1px solid @theme-color1;
           }
         }
       }
-      .pop-list::-webkit-scrollbar{
+      .tree-ri::-webkit-scrollbar {
         width: 0;
       }
-      .pop-ul{
-        flex: 1;
+    }
+    .pop-btn {
+      margin: 17px;
+      .btn {
+        height: 40px;
+        border-radius: 50px;
+        font-family:
+          PingFang SC,
+          PingFang SC;
+        font-weight: 500;
+        font-size: 15px;
+        color: #ffffff;
+      }
+      :deep(.van-button__text) {
         display: flex;
-        flex-direction: column;
-        overflow: auto;
-        margin: 16px 16px 0;
-        .pop-li{
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          margin-bottom: 16px;
-          .pop-li-lf{
+        align-items: center;
+      }
+    }
+    .pop-list {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow: auto;
+      .pop-list-box {
+        display: flex;
+        padding: 17px 17px 0;
+        .pop-list-ul {
+          padding-bottom: 12px;
+          flex: 1;
+          margin-left: 8px;
+          border-bottom: 1px solid #f2f2f2;
+          box-sizing: border-box;
+          .pop-list-li {
             display: flex;
             align-items: center;
-            font-family: PingFang SC, PingFang SC;
+            justify-content: space-between;
+            font-family:
+              PingFang SC,
+              PingFang SC;
+            margin-bottom: 4px;
             font-weight: 400;
-            font-size: 15px;
-            color: #4F4F4F;
-            .pop-address{
-              font-size: 12px;
-              color: #8D8D8D;
+            font-size: 12px;
+            color: @font-color2;
+            .pop-list-li-title {
+              font-weight: 500;
+              font-size: 15px;
+              color: #000000;
             }
+            .pop-list-li-status {
+              font-weight: 500;
+              font-size: 15px;
+              color: @theme-color1 !important;
+            }
+          }
+          .pop-list-li div:last-child {
+            color: #8d8d8d;
+          }
+        }
+      }
+    }
+    .pop-list::-webkit-scrollbar {
+      width: 0;
+    }
+    .pop-ul {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow: auto;
+      margin: 16px 16px 0;
+      .pop-li {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 16px;
+        .pop-li-lf {
+          display: flex;
+          align-items: center;
+          font-family:
+            PingFang SC,
+            PingFang SC;
+          font-weight: 400;
+          font-size: 15px;
+          color: #4f4f4f;
+          .pop-address {
+            font-size: 12px;
+            color: #8d8d8d;
           }
         }
       }
     }
   }
-  </style>
+}
+</style>