今日工作11.28 1，云算力-套餐详情 完成 2，云算力-计算器 完成 3，云算力-购买矿机 完成 4，质押首页 完成 5，质押规则 完成 6，首页-热门理财 完成 7，OTC-Tabbar 30%

src/assets/icon/index/question.svg

@@ -0,0 +1,3 @@
+<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.25 9.75C7.25 9.89833 7.20601 10.0433 7.1236 10.1667C7.04119 10.29 6.92406 10.3861 6.78701 10.4429C6.64997 10.4997 6.49917 10.5145 6.35368 10.4856C6.2082 10.4566 6.07456 10.3852 5.96967 10.2803C5.86478 10.1754 5.79335 10.0418 5.76441 9.89632C5.73547 9.75083 5.75033 9.60003 5.80709 9.46299C5.86386 9.32594 5.95999 9.20881 6.08332 9.1264C6.20666 9.04399 6.35167 9 6.5 9C6.69891 9 6.88968 9.07902 7.03033 9.21967C7.17098 9.36032 7.25 9.55109 7.25 9.75ZM6.5 3C5.12125 3 4 4.00937 4 5.25V5.5C4 5.63261 4.05268 5.75978 4.14645 5.85355C4.24022 5.94732 4.36739 6 4.5 6C4.63261 6 4.75979 5.94732 4.85356 5.85355C4.94732 5.75978 5 5.63261 5 5.5V5.25C5 4.5625 5.67313 4 6.5 4C7.32688 4 8 4.5625 8 5.25C8 5.9375 7.32688 6.5 6.5 6.5C6.36739 6.5 6.24022 6.55268 6.14645 6.64644C6.05268 6.74021 6 6.86739 6 7V7.5C6 7.63261 6.05268 7.75978 6.14645 7.85355C6.24022 7.94732 6.36739 8 6.5 8C6.63261 8 6.75979 7.94732 6.85356 7.85355C6.94732 7.75978 7 7.63261 7 7.5V7.455C8.14 7.24562 9 6.33625 9 5.25C9 4.00937 7.87875 3 6.5 3ZM13 6.5C13 7.78558 12.6188 9.04228 11.9046 10.1112C11.1903 11.1801 10.1752 12.0132 8.98744 12.5052C7.79972 12.9972 6.49279 13.1259 5.23191 12.8751C3.97104 12.6243 2.81285 12.0052 1.90381 11.0962C0.994767 10.1872 0.375703 9.02896 0.124899 7.76809C-0.125905 6.50721 0.00281635 5.20028 0.494786 4.01256C0.986755 2.82484 1.81988 1.80968 2.8888 1.09545C3.95772 0.381218 5.21442 0 6.5 0C8.22335 0.00181989 9.87559 0.687223 11.0942 1.90582C12.3128 3.12441 12.9982 4.77665 13 6.5ZM12 6.5C12 5.4122 11.6774 4.34883 11.0731 3.44436C10.4687 2.53989 9.60975 1.83494 8.60476 1.41866C7.59977 1.00238 6.4939 0.893462 5.42701 1.10568C4.36011 1.3179 3.3801 1.84172 2.61092 2.61091C1.84173 3.3801 1.3179 4.36011 1.10568 5.427C0.893465 6.4939 1.00238 7.59976 1.41867 8.60476C1.83495 9.60975 2.5399 10.4687 3.44437 11.0731C4.34884 11.6774 5.4122 12 6.5 12C7.95818 11.9983 9.35617 11.4183 10.3873 10.3873C11.4184 9.35617 11.9983 7.95818 12 6.5Z" fill="#666666"/>
+</svg>

src/router/index.js

@@ -42,6 +42,11 @@ import ElectricityRecharge from "@/views/index/cloudComputingPower/ElectricityRe
 import ElectricitySetting from "@/views/index/cloudComputingPower/ElectricitySetting.vue";
 import ElectricityBill from "@/views/index/cloudComputingPower/ElectricityBill.vue";
 import CloudMyOrder from "@/views/index/cloudComputingPower/MyOrder.vue";
+import CloudCalculator from "@/views/index/cloudComputingPower/Calculator.vue";
+import StakingIndex from "@/views/index/staking/Index.vue";
+import StakingRules from "@/views/index/staking/Rules.vue";
+import StakingRecord from "@/views/index/staking/Record.vue";
+import OTCIndex from "@/views/asset/otc/Index.vue";
 
 import CommonFunctionsPopup from "@/views/bitcoin/CommonFunctionsPopup/CommonFunctionsPopup.vue"; // 子组件路径
 import TradeRules from "@/views/bitcoin/CommonFunctionsPopup/GeneralLevel2/TradeRules.vue"; // 新建
@@ -140,6 +145,11 @@ const routes = [
       },
     ],
   },
+  {
+    path: "/otcIndex",
+    name: "otcIndex",
+    component: OTCIndex,
+  },
   {
     path: "/applyPermission",
     name: "applyPermission",
@@ -405,6 +415,26 @@ const routes = [
     name: "cloudMyOrder",
     component: CloudMyOrder,
   },
+  {
+    path: "/cloudCalculator",
+    name: "cloudCalculator",
+    component: CloudCalculator,
+  },
+  {
+    path: "/stakingIndex",
+    name: "stakingIndex",
+    component: StakingIndex,
+  },
+  {
+    path: "/stakingRules",
+    name: "stakingRules",
+    component: StakingRules,
+  },
+  {
+    path: "/stakingRecord",
+    name: "stakingRecord",
+    component: StakingRecord,
+  },
 ];
 
 const router = createRouter({

src/views/asset/otc/Index.vue

@@ -0,0 +1,9 @@
+<template>
+  <!-- OTC-首页 -->
+  <div class="otc-index">1</div>
+</template>
+<script setup></script>
+<style lang="less" scoped>
+  .otc-index {
+  }
+</style>

src/views/index/Index.vue

@@ -47,11 +47,13 @@
       </div>
     </div>
     <HotCoin></HotCoin>
+    <HotFinancial></HotFinancial>
   </div>
 </template>
 <script setup>
   import { useRoute, useRouter } from "vue-router";
   import HotCoin from "./components/HotCoin.vue";
+  import HotFinancial from "./components/HotFinancial.vue";
 
   const router = useRouter();
 
@@ -122,7 +124,7 @@
     flex-direction: column;
     justify-content: flex-start;
     align-items: center;
-    margin-bottom: 100px;
+    margin-bottom: 40px;
     width: 100%;
 
     .index-func {

src/views/index/User.vue

@@ -28,7 +28,11 @@
     <div class="transaction">
       <div class="transaction-title pf600 fs18 fc333333">交易</div>
       <div class="index-menu">
-        <div class="menu-item" v-for="(item, index) in transactionMenu" :key="index">
+        <div
+          class="menu-item"
+          v-for="(item, index) in transactionMenu"
+          :key="index"
+          @click="goTransaction(index)">
           <img :src="item.image" alt="" />
           <div class="item-text pf400 fs14 fc666666">{{ item.name }}</div>
         </div>
@@ -55,6 +59,12 @@
     router.push("/userCenter");
   };
 
+  const goTransaction = (index) => {
+    if (index == 6) {
+      router.push("/otcIndex");
+    }
+  };
+
   const indexMenu = [
     {
       name: "ICO功能",

src/views/index/cloudComputingPower/Calculator.vue

@@ -0,0 +1,274 @@
+<template>
+  <!-- 计算器 -->
+  <HeaderNav headerText="计算器"></HeaderNav>
+  <div class="calculator">
+    <div class="type-select margin-top5 pf500 fs14 fc333333">
+      矿机产品名称
+      <img src="../../../assets/icon/market/bottom-arrow.svg" alt="" />
+    </div>
+    <div class="type-select margin-top10 pf500 fs14 fc333333">
+      <div>支付币种</div>
+      <div>USDT</div>
+    </div>
+    <div class="type-double margin-top10 pf500 fs14 fc333333">
+      <div class="type-item">
+        <div class="type-text">矿机算力</div>
+        <div class="type-result">
+          <div>1160</div>
+          <div>TH/S</div>
+        </div>
+      </div>
+      <div class="type-item">
+        <div class="type-text">单台价格</div>
+        <div class="type-result">
+          <div>1500.00</div>
+          <div>USDT</div>
+        </div>
+      </div>
+    </div>
+    <div class="card-type pf500 fs14 fc333333">
+      <div class="card-text">每日理论收益</div>
+      <div class="type-select">
+        <div>0.25481851</div>
+        <div>SPACE 每 TH/S</div>
+      </div>
+    </div>
+    <div class="type-double margin-top10 pf500 fs14 fc333333">
+      <div class="type-item">
+        <div class="type-text">矿机功耗</div>
+        <div class="type-result">
+          <div>1160</div>
+          <div>W</div>
+        </div>
+      </div>
+      <div class="type-item">
+        <div class="type-text">币价</div>
+        <div class="type-result">
+          <div>1500.00</div>
+          <div>$</div>
+        </div>
+      </div>
+    </div>
+    <div class="card-type pf500 fs14 fc333333">
+      <div class="card-text">电价</div>
+      <div class="type-select">
+        <div>0.0360</div>
+        <div>$/度</div>
+      </div>
+    </div>
+    <div class="func-btn pf600 fs14 fcFFFFFF">
+      <div class="reset">重置</div>
+      <div class="calculator-btn">计算</div>
+    </div>
+    <div class="estimated-revenue">
+      <div class="title pf600 fs18 fc333333">挖矿收益预估</div>
+      <div class="desc pf400 fs12 fc999999">
+        提示：此计算结果采用当前难度PPS模式下的挖矿，由于挖矿收益 <br />
+        受矿机和矿场电力等因素影响，计算结果仅供参考。
+      </div>
+    </div>
+    <div class="calculator-result">
+      <div class="result-item" v-for="(item, index) in calculatorResultData" :key="index">
+        <div class="item-top pf400 fs12 fc666666">{{ item.name }}</div>
+        <div class="item-bottom pf500 fs12 fc333333">{{ item.number }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+  import HeaderNav from "../components/HeaderNav.vue";
+  import { ref } from "vue";
+
+  const calculatorResultData = ref([
+    {
+      name: "每日产币数",
+      number: "11.4520",
+    },
+    {
+      name: "每日产值",
+      number: "57.73",
+    },
+    {
+      name: "每日耗电量",
+      number: "11.4520",
+    },
+    {
+      name: "每日电费",
+      number: "11.4520",
+    },
+    {
+      name: "每日净收益",
+      number: "11.4520",
+    },
+    {
+      name: "电费占比",
+      number: "11.4520",
+    },
+    {
+      name: "预计回本天数",
+      number: "11",
+    },
+  ]);
+</script>
+<style lang="less" scoped>
+  .calculator {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    margin-top: 48px;
+    width: 100%;
+
+    .margin-top5 {
+      margin-top: 5px;
+    }
+
+    .margin-top10 {
+      margin-top: 10px;
+    }
+
+    .type-select {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 11px;
+      width: 345px;
+      height: 45px;
+      border-radius: 6px;
+      background: #f5f5f5;
+      box-sizing: border-box;
+
+      img {
+        width: 12px;
+        height: 8px;
+      }
+    }
+
+    .type-double {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      width: 345px;
+      height: 63px;
+
+      .type-item {
+        width: 165px;
+        height: 100%;
+
+        .type-text {
+          height: 18px;
+          line-height: 18px;
+        }
+
+        .type-result {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          align-items: center;
+          padding: 0 11px;
+          margin-top: 7px;
+          width: 165px;
+          height: 38px;
+          border-radius: 6px;
+          background: #f5f5f5;
+          box-sizing: border-box;
+        }
+      }
+    }
+
+    .card-type {
+      margin-top: 10px;
+      width: 345px;
+
+      .type-select {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 5px;
+        padding: 0 11px;
+        width: 345px;
+        height: 45px;
+        border-radius: 6px;
+        background: #f5f5f5;
+        box-sizing: border-box;
+      }
+    }
+
+    .func-btn {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      margin-top: 29px;
+      width: 345px;
+      height: 40px;
+
+      .reset {
+        width: 167px;
+        height: 40px;
+        line-height: 40px;
+        text-align: center;
+        border-radius: 10px;
+        background: #a8a8a8;
+      }
+
+      .calculator-btn {
+        width: 167px;
+        height: 40px;
+        line-height: 40px;
+        text-align: center;
+        border-radius: 10px;
+        background: #df384c;
+      }
+    }
+
+    .estimated-revenue {
+      margin-top: 14px;
+      width: 345px;
+
+      .title {
+        height: 24px;
+        line-height: 24px;
+      }
+
+      .desc {
+        margin-top: 8px;
+        line-height: 18px;
+      }
+    }
+
+    .calculator-result {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      padding: 0 15px;
+      margin-top: 14px;
+      width: 345px;
+      height: 181px;
+      border-radius: 8px;
+      border: 1px solid #ebebeb;
+      box-sizing: border-box;
+
+      .result-item {
+        margin-top: 15px;
+        width: 80px;
+        height: 42px;
+
+        .item-top {
+          height: 18px;
+          line-height: 18px;
+          text-align: center;
+        }
+
+        .item-bottom {
+          margin-top: 4px;
+          height: 20px;
+          line-height: 20px;
+          text-align: center;
+        }
+      }
+    }
+  }
+</style>

src/views/index/cloudComputingPower/ComboDetails.vue

@@ -41,16 +41,62 @@
       <div>奖励周期</div>
       <div>每日</div>
     </div>
+    <div class="estimate">
+      <div class="estimate-left">
+        <div class="pf400 fs14 fc1F2937">预估每日成本</div>
+        <div class="pf600 fs18 fc1F2937">15158.00/T/天</div>
+      </div>
+      <div class="estimate-right">
+        <div class="pf400 fs14 fc1F2937">预估每日成本</div>
+        <div class="pf600 fs18 fc1F2937">15158.00/T/天</div>
+      </div>
+    </div>
+    <div class="cost">
+      <div class="cost-item">
+        <div class="pf400 fs12 fc666666">算力费</div>
+        <div class="pf500 fs12 fc333333">2580.2820/T/天</div>
+      </div>
+      <div class="cost-item">
+        <div class="pf400 fs12 fc666666">电力费</div>
+        <div class="pf500 fs12 fc333333">2580.2820/T/天</div>
+      </div>
+      <div class="cost-item">
+        <div class="pf400 fs12 fc666666">奖励</div>
+        <div class="pf500 fs12 fc333333">0.0002150 BTC</div>
+      </div>
+    </div>
+    <div class="calculator pf600 fs14 fcFFFFFF" @click="goCalculator">计算器</div>
+    <div class="desc pf400 fs12 fc999999">
+      提示：此计算结果采用当前难度PPS模式下的挖矿，由于挖矿收益 <br />
+      受矿机和矿场电力等因素影响，计算结果仅供参考。
+    </div>
+    <div class="sure-buy pf600 fs14 fcFFFFFF" @click="cloudPowerBuyFlag = true">
+      立即购买
+    </div>
+    <CloudPowerBuy
+      v-show="cloudPowerBuyFlag"
+      @cloudPowerBuyClose="cloudPowerBuyClose"></CloudPowerBuy>
   </div>
 </template>
 <script setup>
+  import { ref } from "vue";
   import { useRoute, useRouter } from "vue-router";
+  import CloudPowerBuy from "../dialog/CloudPowerBuy.vue";
 
   const router = useRouter();
 
+  const cloudPowerBuyFlag = ref(false);
+  const cloudPowerBuyClose = () => {
+    cloudPowerBuyFlag.value = false;
+  };
+
   const toPath = () => {
     router.back();
   };
+
+  const goCalculator = () => {
+    router.push("/cloudCalculator");
+  };
 </script>
 <style lang="less" scoped>
   .loan-header {
@@ -161,5 +207,78 @@
         }
       }
     }
+
+    .estimate {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 28px;
+      width: 308px;
+      height: 52px;
+
+      .estimate-left {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-evenly;
+        align-items: center;
+        width: 130px;
+        height: 100%;
+      }
+
+      .estimate-right {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-evenly;
+        align-items: center;
+        width: 130px;
+        height: 100%;
+      }
+    }
+
+    .cost {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 12px;
+      width: 345px;
+      height: 42px;
+
+      .cost-item {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-evenly;
+        align-items: center;
+        width: 33%;
+        height: 100%;
+      }
+    }
+
+    .calculator {
+      margin-top: 26px;
+      width: 167px;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      border-radius: 10px;
+      background: #df384c;
+    }
+
+    .desc {
+      margin-top: 12px;
+      width: 345px;
+      line-height: 18px;
+    }
+
+    .sure-buy {
+      margin-top: 26px;
+      width: 311px;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      border-radius: 100px;
+      background: #df384c;
+    }
   }
 </style>

src/views/index/components/HotFinancial.vue

@@ -0,0 +1,131 @@
+<template>
+  <!-- 热门理财 -->
+  <div class="hot-financial">
+    <div class="financial-title pf600 fs18 fc121212">热门理财</div>
+    <div class="financial-main">
+      <div class="financial-item" v-for="(item, index) in 2" :key="index">
+        <div class="item-name pf400 fs12 fc2C3131">
+          <img src="@/assets/icon/coin/bnb.svg" alt="" />理财产品名称
+        </div>
+        <div class="item-info">
+          <div class="info-left">
+            <div class="pf400 fs10 fcDF384C">0.23%</div>
+            <div class="margin-top2 pf400 fs10 fcA8A8A8">收益率</div>
+          </div>
+          <div class="info-right">
+            <div class="pf400 fs10 fcDF384C">10天</div>
+            <div class="margin-top2 pf400 fs10 fcA8A8A8">理财周期</div>
+          </div>
+        </div>
+        <div class="item-line"></div>
+        <div class="item-shouyi pf400 fs10 fcA8A8A8">
+          <div>预估每日收益</div>
+          <div>0.2150天</div>
+        </div>
+        <div class="item-buy pf500 fs10 fcFFFFFF">立即购买</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup></script>
+<style lang="less" scoped>
+  .hot-financial {
+    margin-top: 30px;
+    width: 100%;
+
+    .financial-title {
+      margin-left: 16px;
+      height: 24px;
+      line-height: 24px;
+    }
+
+    .financial-main {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      margin-top: 10px;
+      width: 100%;
+
+      .financial-item {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: center;
+        margin-left: 16px;
+        width: 148px;
+        height: 138px;
+        border-radius: 5px;
+        border: 1px solid #ebebeb;
+
+        .item-name {
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-start;
+          align-items: center;
+          margin-top: 7px;
+          width: 130px;
+          height: 27px;
+
+          img {
+            margin-right: 3px;
+            width: 27px;
+            height: 27px;
+          }
+        }
+
+        .item-info {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          margin-top: 10px;
+          width: 130px;
+
+          .margin-top2 {
+            margin-top: 2px;
+          }
+
+          .info-left {
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-start;
+            align-items: flex-start;
+          }
+
+          .info-right {
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-start;
+            align-items: flex-end;
+          }
+        }
+
+        .item-line {
+          margin-top: 5px;
+          width: 125px;
+          height: 1px;
+          background: #00000019;
+        }
+
+        .item-shouyi {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          align-items: center;
+          margin-top: 3px;
+          width: 130px;
+          height: 18px;
+        }
+
+        .item-buy {
+          margin-top: 6px;
+          width: 130px;
+          height: 25px;
+          line-height: 25px;
+          text-align: center;
+          border-radius: 5px;
+          background: #df384c;
+        }
+      }
+    }
+  }
+</style>

src/views/index/dialog/CloudPowerBuy.vue

@@ -0,0 +1,224 @@
+<template>
+  <!-- 等待审核 -->
+  <div class="cloud-power-buy">
+    <div class="apply-mask" @click="emits('cloudPowerBuyClose')"></div>
+    <div class="apply-content">
+      <div class="slide-line"></div>
+      <div class="apply-text pf600 fs18 fc121212">购买</div>
+      <div class="loan-price">
+        <input type="text" class="input pf500 fs14 fc333333" placeholder="输入算力" />
+        <div class="pf500 fs14 fc333333">T</div>
+      </div>
+      <div class="slide-choice"></div>
+      <div class="type-select pf500 fs14 fc333333">
+        <div>支付币种</div>
+        <div>USDT</div>
+      </div>
+      <div class="use-number pf400 fs12 fc333333">
+        可用&nbsp; 215.0508 USDT
+        <img src="@/assets/icon/bitcoin/qianbao1.svg" alt="" class="qianbao" />
+      </div>
+      <div class="loan-desc margin-top16 pf500 fs14 fc666666">
+        <div>套餐费用</div>
+        <div>0.1252/T/天</div>
+      </div>
+      <div class="loan-desc margin-top26 pf500 fs14 fc666666">
+        <div>套餐天数</div>
+        <div>100 天</div>
+      </div>
+      <div class="loan-desc margin-top26 pf500 fs14 fc666666">
+        <div>预付电费</div>
+        <div>2.52 USDT</div>
+      </div>
+      <div class="loan-desc margin-top26 pf500 fs14 fc666666">
+        <div>总计</div>
+        <div>100 USDT</div>
+      </div>
+      <div class="auto-electricity pf400 fs12 fc666666">
+        <input
+          type="checkbox"
+          class="checkbox"
+          v-model="autoBuyFlag" />同意开启电费自动续费
+      </div>
+      <div class="sure-btn pf600 fs14 fcFFFFFF">立即支付</div>
+    </div>
+  </div>
+</template>
+<script setup>
+  import { ref } from "vue";
+
+  const emits = defineEmits(["cloudPowerBuyClose"]);
+
+  const autoBuyFlag = ref(true);
+</script>
+<style lang="less" scoped>
+  .cloud-power-buy {
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    width: 100%;
+    min-height: 100vh;
+
+    .apply-mask {
+      position: fixed;
+      left: 0;
+      top: 0;
+      z-index: -1;
+      width: 100%;
+      min-height: 100vh;
+      background: rgba(0, 0, 0, 0.5);
+    }
+
+    .apply-content {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: center;
+      width: 375px;
+      height: 564px;
+      background: #ffffff;
+      border-radius: 24px 24px 0px 0px;
+
+      .slide-line {
+        margin-top: 12px;
+        width: 32px;
+        height: 4px;
+        border-radius: 2px;
+        opacity: 0.4;
+        background: rgba(0, 0, 0, 0.5);
+      }
+
+      .apply-text {
+        margin-top: 20px;
+        height: 24px;
+        line-height: 24px;
+        letter-spacing: 0.2px;
+      }
+
+      .loan-price {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 14px;
+        padding-right: 11px;
+        width: 345px;
+        height: 45px;
+        background: #f5f5f5;
+        box-sizing: border-box;
+
+        .input {
+          padding-left: 11px;
+          width: 80%;
+          height: 100%;
+          box-sizing: border-box;
+          outline: none;
+          border: none;
+          border-radius: 6px;
+          background: #f5f5f5;
+        }
+      }
+
+      .slide-choice {
+        margin-top: 15px;
+        width: 345px;
+        height: 54px;
+        background: pink;
+      }
+
+      .type-select {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 11px;
+        padding: 0 11px;
+        width: 345px;
+        height: 45px;
+        border-radius: 6px;
+        background: #f5f5f5;
+        box-sizing: border-box;
+      }
+
+      .use-number {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        margin-top: 7px;
+        width: 345px;
+        height: 18px;
+
+        .qianbao {
+          margin-left: 8px;
+          width: 14px;
+          height: 14px;
+        }
+      }
+
+      .margin-top16 {
+        margin-top: 16px;
+      }
+
+      .margin-top26 {
+        margin-top: 26px;
+      }
+
+      .loan-desc {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        width: 345px;
+        height: 20px;
+      }
+
+      .auto-electricity {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        margin-top: 13px;
+        width: 345px;
+        height: 18px;
+
+        .checkbox {
+          margin-right: 6px;
+          width: 16px;
+          height: 16px;
+          border-radius: 4px;
+          background: #ffffff;
+          border: 1px solid #a8a8a8;
+          appearance: none;
+          -webkit-appearance: none;
+          -moz-appearance: none;
+          cursor: pointer;
+          position: relative;
+        }
+
+        .checkbox:checked::after {
+          content: "✓";
+          font-size: 12px;
+          color: black; /* 默认对号颜色 */
+          position: absolute;
+          left: 2.5px;
+          top: 0.6px;
+        }
+      }
+
+      .sure-btn {
+        margin-top: 9px;
+        width: 311px;
+        height: 40px;
+        line-height: 40px;
+        text-align: center;
+        border-radius: 100px;
+        background: #df384c;
+      }
+    }
+  }
+</style>

src/views/index/dialog/RedemptionNot.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="update-info">
+    <div class="apply-mask" @click="emits('redemptionNotClose')"></div>
+    <div class="apply-content">
+      <div class="apply-text pf600 fs18 fc121212">温馨提示</div>
+      <img src="@/assets/img/index/Bank_transfer_2_.svg" alt="" />
+      <div class="desc pf500 fs14 fc4B5563">当前天数不足，无法赎回</div>
+      <div class="sure-btn pf600 fs14 fcFFFFFF">确认</div>
+    </div>
+  </div>
+</template>
+<script setup>
+  const emits = defineEmits(["redemptionNotClose"]);
+</script>
+<style lang="less" scoped>
+  .update-info {
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    min-height: 100vh;
+
+    .apply-mask {
+      position: fixed;
+      left: 0;
+      top: 0;
+      z-index: -1;
+      width: 100%;
+      min-height: 100vh;
+      background: rgba(0, 0, 0, 0.5);
+    }
+
+    .apply-content {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: center;
+      width: 303px;
+      height: 256px;
+      background: #ffffff;
+      border-radius: 15px;
+
+      .apply-text {
+        margin-top: 15px;
+        height: 24px;
+        line-height: 24px;
+        letter-spacing: 0.2px;
+      }
+
+      img {
+        margin-top: 19px;
+        width: 87px;
+        height: 74px;
+      }
+
+      .desc {
+        margin-top: 20px;
+      }
+
+      .sure-btn {
+        margin-top: 26px;
+        width: 256px;
+        height: 40px;
+        line-height: 40px;
+        text-align: center;
+        border-radius: 100px;
+        background: #df384c;
+      }
+    }
+  }
+</style>

src/views/index/dialog/Subscription.vue

@@ -0,0 +1,348 @@
+<template>
+  <!-- 申购和赎回 -->
+  <div class="subscription">
+    <div class="apply-mask" @click="emits('subscriptionClose')"></div>
+    <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>
+      <div class="subscription-area" v-if="currentTab == 0">
+        <div class="from">
+          <div class="text pf600 fs14 fc333333">从</div>
+          <div class="number-input">
+            <div class="text pf400 fs14 fc999999">合约账户申购</div>
+            <div class="all pf500 fs14 fc333333">
+              USDT <span class="fcDF384C">全部</span>
+            </div>
+          </div>
+          <div class="use-number pf400 fs12 fc333333">
+            可用余额&nbsp; 215.0508 USDT
+            <img src="@/assets/icon/bitcoin/qianbao1.svg" alt="" class="qianbao" />
+          </div>
+          <div class="use-number pf400 fs12 fc333333">剩余可够&nbsp; 215.0508 HXUSDT</div>
+        </div>
+        <div class="to margin-top25">
+          <div class="text pf600 fs14 fc333333">到</div>
+          <div class="number-input">
+            <div class="text pf400 fs14 fc999999">合约账户</div>
+            <div class="all pf500 fs14 fc333333">HXUSDT</div>
+          </div>
+        </div>
+        <div class="sure-btn pf600 fs14 fcFFFFFF">确认</div>
+      </div>
+      <div class="redemption-area" v-if="currentTab == 1">
+        <div class="from">
+          <div class="text pf600 fs14 fc333333">从</div>
+          <div class="number-input">
+            <div class="text pf400 fs14 fc999999">合约账户赎回</div>
+            <div class="all pf500 fs14 fc333333">
+              HXUSDT <span class="fcDF384C">全部</span>
+            </div>
+          </div>
+          <div class="use-number pf400 fs12 fc333333">
+            最大可赎回数量&nbsp; 215.0508 HXUSDT
+          </div>
+        </div>
+        <div class="to margin-top25">
+          <div class="text pf600 fs14 fc333333">到</div>
+          <div class="number-input">
+            <div class="text pf400 fs14 fc999999">合约账户</div>
+            <div class="all pf500 fs14 fc333333">USDT</div>
+          </div>
+        </div>
+        <div class="time pf600 fs14 fc333333">
+          <div>赎回周期</div>
+          <div>0天</div>
+        </div>
+        <div class="initiate-redemption">
+          <div class="redemption-left">
+            <div class="circle"></div>
+            <div class="line"></div>
+            <div class="circle"></div>
+          </div>
+          <div class="redemption-right">
+            <div class="faqi1 pf500 fs12 fc333333">
+              <div class="text1">发起赎回</div>
+              <div class="time2">2025-11-04, 16:30</div>
+            </div>
+            <div class="faqi1 margin-top12 pf500 fs12 fc333333">
+              <div class="text1">USDT到账日期</div>
+              <div class="time2">2025-11-04, 16:30</div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="sure-btn margin-top22 pf600 fs14 fcFFFFFF"
+          @click="redemptionNotFlag = true">
+          确认
+        </div>
+      </div>
+    </div>
+    <RedemptionNot
+      v-show="redemptionNotFlag"
+      @redemptionNotClose="redemptionNotClose"></RedemptionNot>
+  </div>
+</template>
+<script setup>
+  import RedemptionNot from "../dialog/RedemptionNot.vue";
+  import { ref } from "vue";
+
+  const emits = defineEmits(["subscriptionClose"]);
+
+  const currentTab = ref(0);
+
+  const redemptionNotFlag = ref(false);
+  const redemptionNotClose = () => {
+    redemptionNotFlag.value = false;
+  };
+</script>
+<style lang="less" scoped>
+  .subscription {
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    width: 100%;
+    min-height: 100vh;
+
+    .apply-mask {
+      position: fixed;
+      left: 0;
+      top: 0;
+      z-index: -1;
+      width: 100%;
+      min-height: 100vh;
+      background: rgba(0, 0, 0, 0.5);
+    }
+
+    .apply-content {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: center;
+      width: 375px;
+      height: 528px;
+      background: #ffffff;
+      border-radius: 24px 24px 0px 0px;
+
+      .slide-line {
+        margin-top: 12px;
+        width: 32px;
+        height: 4px;
+        border-radius: 2px;
+        opacity: 0.4;
+        background: rgba(0, 0, 0, 0.5);
+      }
+
+      .notifi-classifi {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: flex-end;
+        margin-top: 14px;
+        width: 345px;
+        height: 24px;
+
+        .sys-notifi {
+          margin-left: 34px;
+        }
+      }
+
+      .sure-btn {
+        margin: 0 auto;
+        margin-top: 69px;
+        width: 311px;
+        height: 40px;
+        line-height: 40px;
+        text-align: center;
+        border-radius: 100px;
+        background: #df384c;
+      }
+
+      .subscription-area {
+        margin-top: 14px;
+        width: 345px;
+
+        .margin-top25 {
+          margin-top: 25px;
+        }
+
+        .from,
+        .to {
+          width: 100%;
+
+          .text {
+            height: 24px;
+            line-height: 24px;
+          }
+
+          .number-input {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 11px;
+            margin-top: 5px;
+            width: 345px;
+            height: 45px;
+            border-radius: 6px;
+            background: #f5f5f5;
+            box-sizing: border-box;
+          }
+
+          .use-number {
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-start;
+            align-items: center;
+            margin-top: 7px;
+            width: 345px;
+            height: 18px;
+
+            .qianbao {
+              margin-left: 8px;
+              width: 14px;
+              height: 14px;
+            }
+          }
+        }
+      }
+
+      .redemption-area {
+        margin-top: 14px;
+        width: 345px;
+
+        .margin-top25 {
+          margin-top: 25px;
+        }
+
+        .from,
+        .to {
+          width: 100%;
+
+          .text {
+            height: 24px;
+            line-height: 24px;
+          }
+
+          .number-input {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 11px;
+            margin-top: 5px;
+            width: 345px;
+            height: 45px;
+            border-radius: 6px;
+            background: #f5f5f5;
+            box-sizing: border-box;
+          }
+
+          .use-number {
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-start;
+            align-items: center;
+            margin-top: 7px;
+            width: 345px;
+            height: 18px;
+
+            .qianbao {
+              margin-left: 8px;
+              width: 14px;
+              height: 14px;
+            }
+          }
+        }
+
+        .time {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          align-items: center;
+          margin-top: 9px;
+          width: 345px;
+          height: 24px;
+        }
+
+        .initiate-redemption {
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-start;
+          align-items: center;
+          margin-top: 16px;
+          width: 345px;
+          height: 112px;
+          border-radius: 8px;
+          border: 1px solid #ebebeb;
+
+          .redemption-left {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            margin-left: 17px;
+            width: 10px;
+            height: 65px;
+
+            .circle {
+              width: 10px;
+              height: 10px;
+              border-radius: 50%;
+              background: #df384c;
+            }
+
+            .line {
+              width: 1px;
+              height: 54px;
+              background: repeating-linear-gradient(
+                to bottom,
+                #df384c,
+                #df384c 1px,
+                transparent 2px,
+                transparent 3px
+              );
+            }
+          }
+
+          .redemption-right {
+            margin-left: 13px;
+
+            .margin-top12 {
+              margin-top: 12px;
+            }
+
+            .faqi1 {
+              .text1 {
+                height: 24px;
+                line-height: 24px;
+              }
+
+              .time2 {
+                height: 18px;
+                line-height: 18px;
+              }
+            }
+          }
+        }
+
+        .sure-btn {
+          margin: 0 auto;
+          margin-top: 22px;
+          width: 311px;
+          height: 40px;
+          line-height: 40px;
+          text-align: center;
+          border-radius: 100px;
+          background: #df384c;
+        }
+      }
+    }
+  }
+</style>

src/views/index/financial/Index.vue

@@ -76,6 +76,10 @@
   const goMenu = (index) => {
     if (index == 0) {
       router.push("/cloudComPowerIndex");
+    } else if (index == 1) {
+      router.push("/loanIndex");
+    } else if (index == 2) {
+      router.push("/stakingIndex");
     }
   };
 

src/views/index/staking/Index.vue

@@ -0,0 +1,307 @@
+<template>
+  <!-- 质押 -->
+  <div class="loan-header">
+    <div class="header-content pf600 fs16 fc1F2937">
+      <img
+        class="left-arrow-image"
+        src="../../../assets/icon/index/left-arrow.svg"
+        @click="toPath()" />
+      质押
+      <div class="save pf600 fs14 fc333333" @click="goRecord">质押记录</div>
+    </div>
+  </div>
+  <div class="staking">
+    <img src="@/assets/img/index/staking-banner.svg" class="staking-banner" alt="" />
+    <div class="user-staking">
+      <div class="user-staking-title pf500 fs14 fc2C3131">
+        我要质押
+        <img src="@/assets/icon/index/question.svg" @click="goRules" alt="" />
+      </div>
+      <div class="user-staking-number">
+        <input
+          type="text"
+          class="user-staking-number-input pf400 fs26 fc333333"
+          placeholder="0" />
+        <div class="user-staking-number-coin pf500 fs18 fc1F2937">
+          <img src="@/assets/icon/coin/bnb.svg" class="coin" alt="" />BTC
+          <img src="@/assets/icon/index/bottom-arrow.svg" class="bottom-arrow" alt="" />
+        </div>
+      </div>
+      <div class="user-staking-line"></div>
+    </div>
+    <div class="func-btn pf600 fs14 fcFFFFFF">
+      <div class="reset" @click="subscriptionFlag = true">申购</div>
+      <div class="calculator-btn" @click="subscriptionFlag = true">赎回</div>
+    </div>
+    <div class="estimate">
+      <div class="estimate-left">
+        <div class="pf500 fs14 fc1F2937">当前收益率</div>
+        <div class="pf600 fs18 fcDF384C">2.50%</div>
+      </div>
+      <div class="estimate-right">
+        <div class="pf500 fs14 fc1F2937">累计收益(USDT)</div>
+        <div class="pf600 fs18 fc1F2937">15158.00</div>
+      </div>
+    </div>
+    <div class="reward-record">
+      <div class="reward-record-title pf600 fs18 fc333333">奖励记录</div>
+      <div class="reward-record-item" v-for="(item, index) in 3" :key="index">
+        <div class="item-first">
+          <div class="pf500 fs16 fc2C3131">USDT</div>
+          <div class="pf500 fs14 fc333333">2025-11-04, 16:30</div>
+        </div>
+        <div class="item-second">
+          <div class="pf500 fs12 fc666666">质押收益</div>
+          <div class="pf500 fs12 fcDF384C">15.12 USDT</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <Subscription
+    v-show="subscriptionFlag"
+    @subscriptionClose="subscriptionClose"></Subscription>
+</template>
+<script setup>
+  import Subscription from "../dialog/Subscription.vue";
+  import { useRoute, useRouter } from "vue-router";
+  import { ref } from "vue";
+
+  const router = useRouter();
+
+  const subscriptionFlag = ref(false);
+  const subscriptionClose = () => {
+    subscriptionFlag.value = false;
+  };
+
+  const toPath = () => {
+    router.back();
+  };
+
+  const goRules = () => {
+    router.push("/stakingRules");
+  };
+
+  const goRecord = () => {
+    router.push("/stakingRecord");
+  };
+</script>
+<style lang="less" scoped>
+  .loan-header {
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 1;
+    width: 100%;
+    height: 48px;
+    background: #ffffff;
+    overflow: hidden;
+
+    .header-content {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      position: relative;
+      width: 100%;
+      height: 48px;
+
+      .left-arrow-image {
+        position: absolute;
+        left: 14px;
+        top: 16px;
+        width: 9px;
+        height: 16px;
+      }
+
+      .save {
+        position: absolute;
+        top: 16px;
+        right: 16px;
+        height: 24px;
+      }
+    }
+  }
+
+  .staking {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    margin-top: 48px;
+    width: 100%;
+
+    .staking-banner {
+      width: 345px;
+      height: 100px;
+    }
+
+    .user-staking {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: center;
+      margin-top: 25px;
+      width: 345px;
+
+      .user-staking-title {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        width: 345px;
+        height: 24px;
+
+        img {
+          margin-left: 6px;
+          width: 13px;
+          height: 13px;
+        }
+      }
+
+      .user-staking-number {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        width: 311px;
+        height: 40px;
+
+        .user-staking-number-input {
+          width: 191px;
+          height: 100%;
+          box-sizing: border-box;
+          border-radius: 6px;
+          border: none;
+          outline: none;
+        }
+
+        .user-staking-number-coin {
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-start;
+          align-items: center;
+          width: 105px;
+          height: 40px;
+          border-radius: 30px;
+          border: 1px solid #ebebeb;
+          box-sizing: border-box;
+
+          .coin {
+            margin-left: 8px;
+            margin-right: 6px;
+            width: 24px;
+            height: 24px;
+          }
+
+          .bottom-arrow {
+            margin-left: 6px;
+            width: 12px;
+            height: 12px;
+          }
+        }
+      }
+
+      .user-staking-line {
+        margin-top: 22px;
+        width: 311px;
+        height: 1px;
+        background: #e2e8f0;
+      }
+    }
+
+    .func-btn {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      margin-top: 17px;
+      width: 345px;
+      height: 40px;
+
+      .reset {
+        width: 167px;
+        height: 40px;
+        line-height: 40px;
+        text-align: center;
+        border-radius: 10px;
+        background: #45b26b;
+      }
+
+      .calculator-btn {
+        width: 167px;
+        height: 40px;
+        line-height: 40px;
+        text-align: center;
+        border-radius: 10px;
+        background: #df384c;
+      }
+    }
+
+    .estimate {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 19px;
+      width: 308px;
+      height: 52px;
+
+      .estimate-left {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-evenly;
+        align-items: center;
+        width: 130px;
+        height: 100%;
+      }
+
+      .estimate-right {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-evenly;
+        align-items: center;
+        width: 130px;
+        height: 100%;
+      }
+    }
+
+    .reward-record {
+      margin-top: 8px;
+      width: 345px;
+
+      .reward-record-title {
+        width: 345px;
+        height: 24px;
+        line-height: 24px;
+      }
+
+      .reward-record-item {
+        padding: 0 11px;
+        margin-top: 10px;
+        width: 345px;
+        height: 60px;
+        border-radius: 8px;
+        border: 1px solid #ebebeb;
+        box-sizing: border-box;
+
+        .item-first {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          align-items: center;
+          margin-top: 6px;
+          width: 100%;
+          height: 24px;
+        }
+
+        .item-second {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          align-items: center;
+          margin-top: 5px;
+          width: 100%;
+          height: 18px;
+        }
+      }
+    }
+  }
+</style>

src/views/index/staking/Record.vue

@@ -0,0 +1,75 @@
+<template>
+  <!-- 质押记录 -->
+  <HeaderNav headerText="质押记录"></HeaderNav>
+  <div class="staking-record">
+    <div class="flow-item" v-for="(item, index) in 2" :key="index">
+      <div class="item-first">
+        <div class="pf500 fs16 fc2C3131">USDT</div>
+        <div class="pf500 fs14 fc333333">2025-11-04, 16:30</div>
+      </div>
+      <div class="item-first">
+        <div class="pf500 fs12 fc666666">类型</div>
+        <div class="pf500 fs12 fc666666">申购</div>
+      </div>
+      <div class="item-first">
+        <div class="pf500 fs12 fc666666">数量</div>
+        <div class="pf500 fs12 fc45B26B">250.4008 USDT</div>
+      </div>
+      <div class="item-first">
+        <div class="pf500 fs12 fc666666">订单号</div>
+        <div class="order pf500 fs12 fc666666">
+          2508050505052008502060255
+          <img src="@/assets/icon/asset/CopySimple.svg" alt="" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+  import HeaderNav from "../components/HeaderNav.vue";
+</script>
+<style lang="less" scoped>
+  .staking-record {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    margin-top: 48px;
+
+    .flow-item {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: center;
+      margin-top: 10px;
+      width: 345px;
+      height: 108px;
+      border-radius: 8px;
+      border: 1px solid #ebebeb;
+
+      .item-first {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 5px;
+        width: 320px;
+        height: 24px;
+
+        .order {
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-start;
+          align-items: center;
+
+          img {
+            margin-left: 5px;
+            margin-top: -3px;
+            width: 13px;
+            height: 13px;
+          }
+        }
+      }
+    }
+  }
+</style>

src/views/index/staking/Rules.vue

@@ -0,0 +1,24 @@
+<template>
+  <!-- 质押-规则 -->
+  <HeaderNav headerText="质押规则"></HeaderNav>
+  <div class="rules pf400 fs14 fc666666">
+    质押所指的是上市公司股东将其所持有的股票作为质押标的物，再向银行申请贷款或为第三者的贷款提供保。
+    <br />
+    质押相对应的还有一个概念，那就是股票质押式回购，简单理解也就是符合条件的资金融入方以所持有的股票或其他证券质押，向符合条件的资金融出方融入资金，还会对接下来返还资金、解除质押的交易进行约定。<br />
+    根据《中华人民共和国民法典》第四百四十三条的规定，以基金份额、股权出质的，质权自办理出质登记时设立。<br />
+    基金份额、股权出质后，不得转让，但是出质人与质权人协商同意的除外。出质人转让基金份额、股权所得的价款，应当向质权人提前清偿债务或者提存。<br />
+    所以，上市公司股权质押设立后，债权人取得质权，也取得了在债务人按期未履行债务时，对质押股权具有优先受偿权<br />
+  </div>
+</template>
+<script setup>
+  import HeaderNav from "../components/HeaderNav.vue";
+</script>
+<style lang="less" scoped>
+  .rules {
+    margin: 0 auto;
+    margin-top: 48px;
+    width: 345px;
+    line-height: 24px;
+    letter-spacing: 0.2px;
+  }
+</style>