src/assets/icon/index/eye-open.svg

@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="eye" clip-path="url(#clip0_96_7646)">
+<path id="Vector" d="M3.27489 8.70433C2.42496 9.80853 2 10.3606 2 12C2 13.6394 2.42496 14.1915 3.27489 15.2957C4.97196 17.5004 7.81811 20 12 20C16.1819 20 19.028 17.5004 20.7251 15.2957C21.575 14.1915 22 13.6394 22 12C22 10.3606 21.575 9.80853 20.7251 8.70433C19.028 6.49956 16.1819 4 12 4C7.81811 4 4.97196 6.49956 3.27489 8.70433Z" stroke="#1E1C27" stroke-width="1.5"/>
+<path id="Vector_2" d="M15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15C13.6569 15 15 13.6569 15 12Z" stroke="#1E1C27" stroke-width="1.5"/>
+</g>
+<defs>
+<clipPath id="clip0_96_7646">
+<rect width="24" height="24" fill="white" transform="matrix(1 0 0 -1 0 24)"/>
+</clipPath>
+</defs>
+</svg>

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

@@ -23,6 +23,9 @@
   import Buy from "./Buy.vue";
   import Sell from "./Sell.vue";
   import { ref, computed } from "vue";
+  import { useRoute, useRouter } from "vue-router";
+
+  const router = useRouter();
 
   const current = ref("all");
   const componentsMap = {
@@ -35,6 +38,10 @@
   const messageChange = (key) => {
     current.value = key;
   };
+
+  const toPath = () => {
+    router.back();
+  };
 </script>
 <style lang="less" scoped>
   .loan-header {

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

@@ -27,10 +27,13 @@
 </template>
 <script setup>
   import { ref, computed } from "vue";
+  import { useRoute, useRouter } from "vue-router";
   import C2C from "./C2C.vue";
   import Fast from "./Fast.vue";
   import Bulk from "./Bulk.vue";
 
+  const router = useRouter();
+
   const current = ref("c2c");
   const componentsMap = {
     c2c: C2C,
@@ -42,6 +45,10 @@
   const messageChange = (key) => {
     current.value = key;
   };
+
+  const toPath = () => {
+    router.back();
+  };
 </script>
 <style lang="less" scoped>
   .otc-header {

src/views/index/Index.vue

@@ -18,18 +18,28 @@
     <div class="asset-total">
       <div class="asset-title pf400 fs16 fc1F2937">
         理财总资产(USDT)
-        <img src="../../assets/icon/index/EyeClosed.svg" class="eye-close" alt="" />
+        <img :src="isHide ? eyeOpen : eyeClose" class="eye-close" @click="toggleEye" />
+      </div>
+      <div class="asset-number pf600 fs32 fc1F2937" :class="{ 'mask-style': isHide }">
+        {{ isHide ? "···········" : "1,125,158.00" }}
+      </div>
+      <div
+        class="asset-approximately pf400 fs16 fcDF384C"
+        :class="{ 'mask-style': isHide }">
+        {{ isHide ? "·········" : "≈35,458.00" }}
       </div>
-      <div class="asset-number pf600 fs32 fc1F2937">1,125,158.00</div>
-      <div class="asset-approximately pf400 fs16 fcDF384C">≈35,458.00</div>
       <div class="asset-revenue">
         <div class="asset-left">
           <div class="text pf400 fs12 fc6A7187">昨日收益(USDT)</div>
-          <div class="number pf400 fs16 fc061237">5,678.00</div>
+          <div class="number pf400 fs16 fc061237" :class="{ 'mask-style': isHide }">
+            {{ isHide ? "·········" : "5,678.00" }}
+          </div>
         </div>
         <div class="asset-right">
           <div class="text pf400 fs12 fc6A7187">累计收益(USDT)</div>
-          <div class="number pf400 fs16 fc061237">5,678.00</div>
+          <div class="number pf400 fs16 fc061237" :class="{ 'mask-style': isHide }">
+            {{ isHide ? "·········" : "5,678.00" }}
+          </div>
         </div>
       </div>
     </div>
@@ -52,11 +62,21 @@
 </template>
 <script setup>
   import { useRoute, useRouter } from "vue-router";
+  import { ref } from "vue";
   import HotCoin from "./components/HotCoin.vue";
   import HotFinancial from "./components/HotFinancial.vue";
 
   const router = useRouter();
 
+  const isHide = ref(false);
+
+  const toggleEye = () => {
+    isHide.value = !isHide.value;
+  };
+
+  const eyeClose = require("@/assets/icon/index/EyeClosed.svg");
+  const eyeOpen = require("@/assets/icon/index/eye-open.svg");
+
   const indexMenu = [
     {
       name: "秒合约",
@@ -223,6 +243,13 @@
       margin-top: 70px;
       width: 343px;
 
+      .mask-style {
+        font-size: 24px !important;
+        letter-spacing: -4px;
+        font-weight: 600;
+        opacity: 0.9;
+      }
+
       .asset-title {
         display: flex;
         flex-direction: row;

src/views/index/loan/Index.vue

@@ -172,7 +172,6 @@
       .info-right {
         width: 90px;
         height: 90px;
-        background: pink;
       }
     }
 

src/views/index/recharge/RechargeIndex.vue

@@ -83,7 +83,6 @@
         margin-top: 20px;
         width: 152px;
         height: 152px;
-        background: pink;
       }
 
       .save-code {