postcss.config.js

@@ -1,16 +1,14 @@
-
-
 module.exports = {
   plugins: {
-    'postcss-pxtorem': {
+    "postcss-pxtorem": {
       // 关键点：因为你的设计稿是 375px
       // 这里的数值必须是 37.5 (即 1rem = 37.5px)
       // 如果你这里写的是 75，页面元素会缩小一半；如果写的是 16，页面会变得巨大。
       rootValue: 37.5,
 
-      propList: ['*'], // 所有属性都转 rem
-      selectorBlackList: ['.norem'], // 过滤掉 .norem- 开头的 class，不进行 rem 转换
-      exclude: /node_modules/i // 可选：忽略 node_modules 里的库（如果你发现组件库变小了就加上这行）
+      propList: ["*"], // 所有属性都转 rem
+      selectorBlackList: [".norem"], // 过滤掉 .norem- 开头的 class，不进行 rem 转换
+      exclude: /node_modules/i, // 可选：忽略 node_modules 里的库（如果你发现组件库变小了就加上这行）
     },
   },
-};
+};

src/views/asset/UserAsset.vue

@@ -2,14 +2,51 @@
   <!-- 我的资产 -->
   <HeaderNav headerText="资产"></HeaderNav>
   <div class="user-asset">
-    <div class="notifi-classifi pf600 fs14">
-      <div class="fc121212" @click="messageChange('overview')">总览</div>
-      <div class="fcA8A8A8" @click="messageChange('balance')">余额</div>
-      <div class="fcA8A8A8" @click="messageChange('contract')">合约</div>
-      <div class="fcA8A8A8" @click="messageChange('financialManagement')">理财</div>
-      <div class="fcA8A8A8" @click="messageChange('option')">期权</div>
-      <div class="fcA8A8A8" @click="messageChange('miaoContract')">秒合约</div>
-      <div class="fcA8A8A8" @click="messageChange('lever')">币币</div>
+    <div class="notifi-classifi">
+      <div
+        class="classifi-item"
+        :class="current == 'overview' ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'"
+        @click="messageChange('overview')">
+        总览
+      </div>
+      <div
+        class="classifi-item"
+        :class="current == 'balance' ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'"
+        @click="messageChange('balance')">
+        余额
+      </div>
+      <div
+        class="classifi-item"
+        :class="current == 'contract' ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'"
+        @click="messageChange('contract')">
+        合约
+      </div>
+      <div
+        class="classifi-item"
+        :class="
+          current == 'financialManagement' ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'
+        "
+        @click="messageChange('financialManagement')">
+        理财
+      </div>
+      <div
+        class="classifi-item"
+        :class="current == 'option' ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'"
+        @click="messageChange('option')">
+        期权
+      </div>
+      <div
+        class="classifi-item"
+        :class="current == 'miaoContract' ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'"
+        @click="messageChange('miaoContract')">
+        秒合约
+      </div>
+      <div
+        class="classifi-item"
+        :class="current == 'lever' ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'"
+        @click="messageChange('lever')">
+        币币
+      </div>
     </div>
     <component :is="currentComponent" />
   </div>
@@ -54,9 +91,37 @@
       flex-direction: row;
       justify-content: space-between;
       align-items: flex-end;
-      margin-top: calc(48px);
+      margin-top: 48px;
       width: 345px;
       height: 24px;
+
+      .classifi-item {
+        position: relative;
+
+        .active-line {
+          position: absolute;
+          bottom: -6px;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 20px;
+          height: 3px;
+          background-color: #323233;
+          border-radius: 2px;
+        }
+
+        &:first-child {
+          margin-left: 0;
+        }
+      }
+
+      .current-classifi {
+        font-family: "PingFang SC";
+        font-style: normal;
+        font-weight: 600;
+        font-size: 14px;
+        color: #121212;
+        transition: color 0.3s, font-size 0.3s;
+      }
     }
   }
 </style>

src/views/asset/otc/transaction/Bulk.vue

@@ -1,5 +1,5 @@
 <template>
-  <img src="@/assets/icon/asset/dazong-sell-banner.svg" class="c2c" alt="" />
+  <!-- <img src="@/assets/icon/asset/dazong-sell-banner.svg" class="c2c" alt="" /> -->
   <div class="buy-sell">
     <div class="buy-left">
       <div class="buy-btn pf500 fs14 fcFFFFFF">购买</div>

src/views/asset/otc/transaction/C2C.vue

@@ -1,5 +1,5 @@
 <template>
-  <img src="@/assets/icon/asset/c2c.svg" class="c2c" alt="" />
+  <!-- <img src="@/assets/icon/asset/c2c.svg" class="c2c" alt="" /> -->
   <div class="buy-sell">
     <div class="buy-left">
       <div class="buy-btn pf500 fs14 fcFFFFFF">购买</div>

src/views/asset/otc/transaction/Fast.vue

@@ -41,7 +41,7 @@
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
-    margin-top: 15px;
+    margin-top: 13px;
     width: 345px;
     height: 35px;
 

src/views/asset/otc/transaction/Index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="otc-header">
-    <div class="header-content pf600 fs18 fc1F2937">
+    <div class="header-content pf600 fs16 fc1F2937">
       <img
         class="left-arrow-image"
         src="@/assets/icon/index/left-arrow.svg"
@@ -15,21 +15,21 @@
   <div class="index">
     <div class="notifi-classifi">
       <div
-        class="classifi-item pf600 fs18 fc121212"
+        class="classifi-item"
         :class="current == 'c2c' ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'"
         @click="messageChange('c2c')">
         C2C
         <div class="active-line" v-if="current == 'c2c'"></div>
       </div>
       <div
-        class="classifi-item pf600 fs14 fcA8A8A8"
+        class="classifi-item"
         :class="current == 'fast' ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'"
         @click="messageChange('fast')">
         快捷交易
         <div class="active-line" v-if="current == 'fast'"></div>
       </div>
       <div
-        class="classifi-item pf600 fs14 fcA8A8A8"
+        class="classifi-item"
         :class="current == 'bulk' ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'"
         @click="messageChange('bulk')">
         大宗交易
@@ -156,7 +156,7 @@
         font-family: "PingFang SC";
         font-style: normal;
         font-weight: 600;
-        font-size: 18px;
+        font-size: 14px;
         color: #121212;
         transition: color 0.3s, font-size 0.3s;
       }

src/views/index/User.vue

@@ -14,7 +14,7 @@
       </div>
     </div>
     <div class="unlock-vip">
-      <img src="../../assets/img/index/vip.svg" alt="" />
+      <img src="../../assets/img/index/vip.png" alt="" />
     </div>
     <div class="asset-management">
       <div class="asset-title pf600 fs18 fc333333">资产管理</div>
@@ -121,89 +121,89 @@
   const indexMenu = [
     {
       name: "充币",
-      image: require("@/assets/img/index/user/chongbi.svg"),
+      image: require("@/assets/icon/usercenter/chongbi.png"),
     },
     {
       name: "提币",
-      image: require("@/assets/img/index/user/tibi.svg"),
+      image: require("@/assets/icon/usercenter/tibi.png"),
     },
     {
       name: "划转",
-      image: require("@/assets/img/index/user/huazhuan.svg"),
+      image: require("@/assets/icon/usercenter/huazhuan.png"),
     },
     {
       name: "我的贷款",
-      image: require("@/assets/icon/index/Rectangle 4.png"),
+      image: require("@/assets/icon/usercenter/daikuan.png"),
     },
     {
       name: "我的资产",
-      image: require("@/assets/icon/index/zichan.png"),
+      image: require("@/assets/icon/usercenter/zichan.png"),
     },
     {
       name: "ICO",
-      image: require("@/assets/img/index/user/ico.svg"),
+      image: require("@/assets/icon/usercenter/ico.png"),
     },
   ];
 
   const transactionMenu = [
     {
       name: "秒合约",
-      image: require("@/assets/img/index/user/miaoheyue.svg"),
+      image: require("@/assets/icon/usercenter/chongbi.png"),
     },
     {
       name: "合约",
-      image: require("@/assets/img/index/user/heyue.svg"),
+      image: require("@/assets/icon/usercenter/heyue.png"),
     },
     {
       name: "期权",
-      image: require("@/assets/img/index/user/qiquan.svg"),
+      image: require("@/assets/icon/usercenter/qiquan.png"),
     },
     {
       name: "币币",
-      image: require("@/assets/icon/index/bibi.png"),
+      image: require("@/assets/icon/usercenter/bibi.png"),
     },
     {
       name: "质押理财",
-      image: require("@/assets/img/index/user/zhiya.svg"),
+      image: require("@/assets/icon/usercenter/licai.png"),
     },
     {
       name: "贷款",
-      image: require("@/assets/img/index/user/daikuan.svg"),
+      image: require("@/assets/icon/usercenter/daikuan2.png"),
     },
     {
-      name: "OTC交易",
-      image: require("@/assets/img/index/user/otc.svg"),
+      name: "OTC",
+      image: require("@/assets/icon/usercenter/otc.png"),
     },
   ];
 
   const commonFunctions = [
     {
       name: "邀请推广",
-      image: require("@/assets/img/index/user/tuiguang.svg"),
+      image: require("@/assets/icon/usercenter/tuiguang.png"),
     },
     {
       name: "客服",
-      image: require("@/assets/img/index/user/kefu.svg"),
+      image: require("@/assets/icon/usercenter/kefu.png"),
     },
     {
       name: "KYC认证",
-      image: require("@/assets/img/index/user/kyc.svg"),
+      image: require("@/assets/icon/usercenter/kyc.png"),
     },
     {
       name: "切换语言",
-      image: require("@/assets/icon/index/yuyan.png"),
+      image: require("@/assets/icon/usercenter/yuyan.png"),
     },
     {
       name: "帮助中心",
-      image: require("@/assets/img/index/user/help.svg"),
+      image: require("@/assets/icon/usercenter/bangzhu.png"),
     },
     {
       name: "安全设置",
-      image: require("@/assets/icon/index/anquanshezhi.png"),
+      image: require("@/assets/icon/usercenter/anquan.png"),
     },
     {
       name: "关于我们",
-      image: require("@/assets/icon/index/aboutus.png"),
+      image: require("@/assets/icon/usercenter/guanyu.png"),
     },
   ];
 </script>