今日工作12.6 页面美化 1，电费充值 2，电费设置 3，云算力-套餐详情 4，我的算力-我的订单 5，提现 6，我的资产-交易历史 7，划转历史 8，个人中心 页面增加Tab选项动画 1，我的算力 2，申购赎回 3，个人中心 4，我的资产-交易历史 实现功能 1，用户中心所有路由添加 2，初步研究钱包登录，明天实现

src/views/asset/Index.vue

@@ -50,8 +50,20 @@
     <div class="asset-details">
       <div class="details-title">
         <div class="notifi-classifi">
-          <div class="pf600 fs18 fc121212">持仓明细</div>
-          <div class="sys-notifi pf600 fs14 fcA8A8A8">ICO明细</div>
+          <div
+            class="classifi-item"
+            :class="current == 0 ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'"
+            @click="current = 0">
+            持仓明细
+            <div class="active-line" v-if="current == 0"></div>
+          </div>
+          <div
+            class="classifi-item"
+            :class="current == 1 ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'"
+            @click="current = 1">
+            ICO明细
+            <div class="active-line" v-if="current == 1"></div>
+          </div>
         </div>
         <div class="history pf600 fs14 fcA8A8A8" @click="goHistory">
           <img src="../../assets/icon/asset/clock-rewind.svg" alt="" />
@@ -118,9 +130,12 @@
 </template>
 <script setup>
   import { useRouter } from "vue-router";
+  import { ref } from "vue";
 
   const router = useRouter();
 
+  const current = ref(0);
+
   const goHistory = () => {
     router.push("/historyIndex");
   };
@@ -147,7 +162,6 @@
     flex-direction: column;
     justify-content: flex-start;
     align-items: center;
-    margin-bottom: 100px;
     width: 100%;
 
     .asset-header {
@@ -275,6 +289,7 @@
 
     .asset-details {
       margin-top: 0.7px;
+      margin-bottom: 80px;
       width: 345px;
 
       .details-title {
@@ -292,8 +307,33 @@
           width: 345px;
           height: 24px;
 
-          .sys-notifi {
-            margin-left: 47px;
+          .classifi-item {
+            position: relative;
+            margin-left: 43px;
+
+            .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: 18px;
+            color: #121212;
+            transition: color 0.3s, font-size 0.3s;
           }
         }
 
@@ -314,7 +354,7 @@
       }
 
       .details-main {
-        margin-top: 10px;
+        margin-top: 15px;
         width: 100%;
 
         .details-item {

src/views/asset/history/Index.vue

@@ -2,31 +2,71 @@
   <HeaderNav headerText="交易历史"></HeaderNav>
   <div class="history-index">
     <div class="notifi-classifi">
-      <div class="pf600 fs18 fc121212">币币</div>
-      <div class="sys-notifi pf600 fs14 fcA8A8A8">合约</div>
-      <div class="sys-notifi pf600 fs14 fcA8A8A8">秒合约</div>
-      <div class="sys-notifi pf600 fs14 fcA8A8A8">期权</div>
+      <div
+        class="classifi-item"
+        :class="currentTitle == 0 ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'"
+        @click="currentTitle = 0">
+        币币
+        <div class="active-line" v-if="currentTitle == 0"></div>
+      </div>
+      <div
+        class="classifi-item"
+        :class="currentTitle == 1 ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'"
+        @click="currentTitle = 1">
+        合约
+        <div class="active-line" v-if="currentTitle == 1"></div>
+      </div>
+      <div
+        class="classifi-item"
+        :class="currentTitle == 2 ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'"
+        @click="currentTitle = 2">
+        秒合约
+        <div class="active-line" v-if="currentTitle == 2"></div>
+      </div>
+      <div
+        class="classifi-item"
+        :class="currentTitle == 3 ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'"
+        @click="currentTitle = 3">
+        期权
+        <div class="active-line" v-if="currentTitle == 3"></div>
+      </div>
     </div>
     <div class="history-menu">
-      <div class="pf600 fs14 fc121212" @click="messageChange('currentEntrustment')">
+      <div
+        :class="
+          current == 'currentEntrustment' ? 'pf600 fs14 #121212' : 'pf600 fs14 fcA8A8A8'
+        "
+        @click="messageChange('currentEntrustment')">
         当前委托
       </div>
       <div
-        class="sys-notifi pf600 fs14 fcA8A8A8"
+        :class="
+          current == 'historicalEntrustment'
+            ? 'pf600 fs14 #121212'
+            : 'pf600 fs14 fcA8A8A8'
+        "
         @click="messageChange('historicalEntrustment')">
         历史委托
       </div>
       <div
-        class="sys-notifi pf600 fs14 fcA8A8A8"
+        :class="
+          current == 'positionHistory' ? 'pf600 fs14 #121212' : 'pf600 fs14 fcA8A8A8'
+        "
         @click="messageChange('positionHistory')">
         仓位历史
       </div>
       <div
-        class="sys-notifi pf600 fs14 fcA8A8A8"
+        :class="
+          current == 'historicalTransactions'
+            ? 'pf600 fs14 #121212'
+            : 'pf600 fs14 fcA8A8A8'
+        "
         @click="messageChange('historicalTransactions')">
         历史成交
       </div>
-      <div class="sys-notifi pf600 fs14 fcA8A8A8" @click="messageChange('fundFlow')">
+      <div
+        :class="current == 'fundFlow' ? 'pf600 fs14 #121212' : 'pf600 fs14 fcA8A8A8'"
+        @click="messageChange('fundFlow')">
         资金流水
       </div>
     </div>
@@ -42,6 +82,7 @@
   import PositionHistory from "./PositionHistory.vue";
   import { ref, computed } from "vue";
 
+  const currentTitle = ref(0);
   const current = ref("currentEntrustment");
   const componentsMap = {
     currentEntrustment: CurrentEntrustment,
@@ -73,8 +114,33 @@
       width: 349px;
       height: 24px;
 
-      .sys-notifi {
-        margin-left: 31px;
+      .classifi-item {
+        position: relative;
+        margin-left: 43px;
+
+        .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: 18px;
+        color: #121212;
+        transition: color 0.3s, font-size 0.3s;
       }
     }
 

src/views/index/User.vue

@@ -19,7 +19,11 @@
     <div class="asset-management">
       <div class="asset-title pf600 fs18 fc333333">资产管理</div>
       <div class="index-menu">
-        <div class="menu-item" v-for="(item, index) in indexMenu" :key="index">
+        <div
+          class="menu-item"
+          v-for="(item, index) in indexMenu"
+          :key="index"
+          @click="goIndexMenu(index)">
           <img :src="item.image" alt="" />
           <div class="item-text pf400 fs14 fc666666">{{ item.name }}</div>
         </div>
@@ -41,7 +45,11 @@
     <div class="common-functions">
       <div class="asset-title pf600 fs18 fc333333">常用功能</div>
       <div class="index-menu">
-        <div class="menu-item" v-for="(item, index) in commonFunctions" :key="index">
+        <div
+          class="menu-item"
+          v-for="(item, index) in commonFunctions"
+          :key="index"
+          @click="goCommonFunc(index)">
           <img :src="item.image" alt="" />
           <div class="item-text pf400 fs14 fc666666">{{ item.name }}</div>
         </div>
@@ -59,17 +67,58 @@
     router.push("/userCenter");
   };
 
+  const goIndexMenu = (index) => {
+    if (index == 0) {
+      router.push("/rechargeIndex");
+    } else if (index == 1) {
+      router.push("/withdrawIndex");
+    } else if (index == 2) {
+      router.push("/transfer");
+    } else if (index == 3) {
+      router.push("/loanIndex");
+    } else if (index == 4) {
+      router.push("/userAsset");
+    } else if (index == 5) {
+      router.push("/icoIndex");
+    }
+  };
+
   const goTransaction = (index) => {
-    if (index == 6) {
+    if (index == 0) {
+      router.push("/bitcoin/seconds");
+    } else if (index == 1) {
+      router.push("/bitcoin/contract");
+    } else if (index == 2) {
+      router.push("/bitcoin/options");
+    } else if (index == 3) {
+      router.push("/bitcoin/CryptocurrencyTrading");
+    } else if (index == 4) {
+      router.push("/financialIndex");
+    } else if (index == 5) {
+      router.push("/loanIndex");
+    } else if (index == 6) {
       router.push("/otcIndex");
     }
   };
 
+  const goCommonFunc = (index) => {
+    if (index == 0) {
+      router.push("/invite");
+    } else if (index == 1) {
+    } else if (index == 2) {
+      router.push("/kyc/step1");
+    } else if (index == 3) {
+      router.push("/language");
+    } else if (index == 4) {
+      router.push("/detail");
+    } else if (index == 5) {
+      router.push("/userCenter");
+    } else if (index == 6) {
+      router.push("/about");
+    }
+  };
+
   const indexMenu = [
-    {
-      name: "ICO功能",
-      image: require("@/assets/img/index/user/ico.svg"),
-    },
     {
       name: "充币",
       image: require("@/assets/img/index/user/chongbi.svg"),
@@ -90,6 +139,10 @@
       name: "我的资产",
       image: require("@/assets/icon/index/zichan.png"),
     },
+    {
+      name: "ICO",
+      image: require("@/assets/img/index/user/ico.svg"),
+    },
   ];
 
   const transactionMenu = [
@@ -348,6 +401,7 @@
       justify-content: flex-start;
       align-items: center;
       margin-top: 23px;
+      margin-bottom: 40px;
       width: 345px;
 
       .asset-title {

src/views/index/UserCenter.vue

@@ -12,18 +12,30 @@
         编辑
       </div>
     </div>
-    <div class="notifi-index">
-      <div class="notifi-classifi">
-        <div class="pf600 fs18 fc121212" @click="messageChange('userInfo')">个人资料</div>
-        <div class="sys-notifi pf600 fs14 fcA8A8A8" @click="messageChange('safetySet')">
-          安全设置
-        </div>
-        <div class="sys-notifi pf600 fs14 fcA8A8A8" @click="messageChange('hobbySet')">
-          偏好设置
-        </div>
+    <div class="notifi-classifi">
+      <div
+        class="classifi-item"
+        :class="current == 'userInfo' ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'"
+        @click="messageChange('userInfo')">
+        个人资料
+        <div class="active-line" v-if="current == 'userInfo'"></div>
+      </div>
+      <div
+        class="classifi-item"
+        :class="current == 'safetySet' ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'"
+        @click="messageChange('safetySet')">
+        <div class="active-line" v-if="current == 'safetySet'"></div>
+        安全设置
+      </div>
+      <div
+        class="classifi-item"
+        :class="current == 'hobbySet' ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'"
+        @click="messageChange('hobbySet')">
+        <div class="active-line" v-if="current == 'hobbySet'"></div>
+        偏好设置
       </div>
-      <component :is="currentComponent" />
     </div>
+    <component :is="currentComponent" />
   </div>
   <UpdateInfo v-show="updateInfoFlag" @updateInfoClose="updateInfoClose"></UpdateInfo>
 </template>
@@ -108,8 +120,33 @@
       width: 349px;
       height: 24px;
 
-      .sys-notifi {
+      .classifi-item {
+        position: relative;
         margin-left: 43px;
+
+        .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: 18px;
+        color: #121212;
+        transition: color 0.3s, font-size 0.3s;
       }
     }
   }

src/views/index/cloudComputingPower/ComboDetails.vue

@@ -273,6 +273,7 @@
 
     .sure-buy {
       margin-top: 26px;
+      margin-bottom: 50px;
       width: 311px;
       height: 40px;
       line-height: 40px;

src/views/index/cloudComputingPower/ElectricityRecharge.vue

@@ -77,7 +77,6 @@
 
       .number-input {
         position: relative;
-        margin-top: 5px;
         width: 345px;
         height: 45px;
 
@@ -94,7 +93,7 @@
 
         .all {
           position: absolute;
-          top: 13px;
+          top: 27px;
           right: 11px;
         }
       }
@@ -105,7 +104,7 @@
       flex-direction: row;
       justify-content: flex-start;
       align-items: center;
-      margin-top: 7px;
+      margin-top: 20px;
       width: 345px;
       height: 18px;
 

src/views/index/cloudComputingPower/ElectricitySetting.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- 电费设置 -->
   <HeaderNav headerText="电费设置"></HeaderNav>
-  <div class="electricity-setting">
+  <div class="electricity-setting pf400 fs14 fc1F2937">
     电费自动续费
     <Switch v-model="electricityFlag"></Switch>
   </div>

src/views/index/cloudComputingPower/MyOrder.vue

@@ -10,7 +10,7 @@
             <div>0.0176/T/天</div>
           </div>
           <div class="info-bottom">
-            <div class="pf500 fs10 fc121212">
+            <div class="name pf500 fs10 fc121212">
               <img src="@/assets/icon/coin/bnb.svg" alt="" />
               BTC
             </div>
@@ -103,6 +103,17 @@
             width: 100%;
             height: 15px;
 
+            .name {
+              display: flex;
+              flex-direction: row;
+              justify-content: flex-start;
+              align-items: center;
+
+              img {
+                margin-right: 3px;
+              }
+            }
+
             .start-time {
               display: flex;
               flex-direction: row;

src/views/index/cloudComputingPower/MyPower.vue

@@ -25,8 +25,20 @@
       </div>
     </div>
     <div class="notifi-classifi">
-      <div class="pf600 fs14 fc121212" @click="currentTab = 0">BTC</div>
-      <div class="sys-notifi pf600 fs14 fcA8A8A8" @click="currentTab = 1">USDT</div>
+      <div
+        class="classifi-item"
+        :class="currentTab == 0 ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'"
+        @click="currentTab = 0">
+        BTC
+        <div class="active-line" v-if="currentTab == 0"></div>
+      </div>
+      <div
+        class="classifi-item"
+        :class="currentTab == 1 ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'"
+        @click="currentTab = 1">
+        USDT
+        <div class="active-line" v-if="currentTab == 1"></div>
+      </div>
     </div>
     <div class="class-first pf600 fs18 fc121212" v-if="currentTab == 0">
       <div class="title">
@@ -237,8 +249,33 @@
       width: 345px;
       height: 24px;
 
-      .sys-notifi {
-        margin-left: 33px;
+      .classifi-item {
+        position: relative;
+        margin-left: 43px;
+
+        .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: 18px;
+        color: #121212;
+        transition: color 0.3s, font-size 0.3s;
       }
     }
 
@@ -247,7 +284,7 @@
       display: flex;
       flex-direction: column;
       justify-content: flex-start;
-      margin-top: 11px;
+      margin-top: 15px;
       width: 345px;
 
       .title {

src/views/index/dialog/Subscription.vue

@@ -5,8 +5,20 @@
     <div class="apply-content">
       <div class="slide-line"></div>
       <div class="notifi-classifi">
-        <div class="pf600 fs18 fc121212" @click="currentTab = 0">申购</div>
-        <div class="sys-notifi pf600 fs14 fcA8A8A8" @click="currentTab = 1">赎回</div>
+        <div
+          class="classifi-item"
+          :class="currentTab == 0 ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'"
+          @click="currentTab = 0">
+          申购
+          <div class="active-line" v-if="currentTab == 0"></div>
+        </div>
+        <div
+          class="classifi-item"
+          :class="currentTab == 1 ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'"
+          @click="currentTab = 1">
+          赎回
+          <div class="active-line" v-if="currentTab == 1"></div>
+        </div>
       </div>
       <div class="subscription-area" v-if="currentTab == 0">
         <div class="from">
@@ -148,8 +160,33 @@
         width: 345px;
         height: 24px;
 
-        .sys-notifi {
-          margin-left: 34px;
+        .classifi-item {
+          position: relative;
+          margin-left: 43px;
+
+          .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: 18px;
+          color: #121212;
+          transition: color 0.3s, font-size 0.3s;
         }
       }
 

src/views/index/recharge/TransferHistory.vue

@@ -136,6 +136,10 @@
         height: 24px;
 
         .flag-left {
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-start;
+          align-items: center;
           height: 24px;
 
           .coin-first {

src/views/index/recharge/WithdrawIndex.vue

@@ -34,7 +34,7 @@
       </div>
     </div>
     <div class="card-number">
-      <div class="card-text pf500 fs14 fc333333">提现金额</div>
+      <div class="card-text1 pf500 fs14 fc333333">提现金额</div>
       <div class="number-input">
         <input
           type="text"
@@ -142,9 +142,13 @@
       margin-top: 10px;
       width: 345px;
 
+      .card-text1 {
+        margin-top: 10px;
+      }
+
       .number-input {
         position: relative;
-        margin-top: 5px;
+        margin-top: -5px;
         width: 345px;
         height: 45px;
 
@@ -161,14 +165,14 @@
 
         .all {
           position: absolute;
-          top: 13px;
+          top: 27px;
           right: 11px;
         }
       }
     }
 
     .use-money {
-      margin-top: 7px;
+      margin-top: 20px;
       width: 345px;
       height: 18px;
       line-height: 18px;

src/views/index/user/SafetySet.vue

@@ -140,6 +140,7 @@
       display: flex;
       flex-direction: row;
       justify-content: space-between;
+      margin: 0 auto;
       margin-top: 14px;
       width: 327px;
       height: 106px;

src/views/notification/Index.vue

@@ -10,7 +10,7 @@
         <div class="active-line" v-if="current == 'insite'"></div>
       </div>
       <div
-        class="classifi-item pf600 fs14 fcA8A8A8"
+        class="classifi-item"
         :class="current == 'sys' ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'"
         @click="messageChange('sys')">
         系统通知