1，我的算力 完成 2，挖矿产出 完成 3，电费充值 完成 4，电费设置 完成 5，电费账单 完成 6，我的订单 完成 7，质押首页 30%

src/router/index.js

@@ -36,6 +36,12 @@ import FinancialBuy from "../views/index/financial/Buy.vue";
 import MyFinancial from "../views/index/financial/MyFinancial.vue";
 import CloudComPowerIndex from "@/views/index/cloudComputingPower/Index.vue";
 import ComboDetails from "@/views/index/cloudComputingPower/ComboDetails.vue";
+import MyPower from "@/views/index/cloudComputingPower/MyPower.vue";
+import MiningOutput from "@/views/index/cloudComputingPower/MiningOutput.vue";
+import ElectricityRecharge from "@/views/index/cloudComputingPower/ElectricityRecharge.vue";
+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 CommonFunctionsPopup from "@/views/bitcoin/CommonFunctionsPopup/CommonFunctionsPopup.vue"; // 子组件路径
 import TradeRules from "@/views/bitcoin/CommonFunctionsPopup/GeneralLevel2/TradeRules.vue"; // 新建
@@ -369,6 +375,36 @@ const routes = [
     name: "comboDetails",
     component: ComboDetails,
   },
+  {
+    path: "/myPower",
+    name: "myPower",
+    component: MyPower,
+  },
+  {
+    path: "/miningOutput",
+    name: "miningOutput",
+    component: MiningOutput,
+  },
+  {
+    path: "/electricityRecharge",
+    name: "electricityRecharge",
+    component: ElectricityRecharge,
+  },
+  {
+    path: "/electricitySetting",
+    name: "electricitySetting",
+    component: ElectricitySetting,
+  },
+  {
+    path: "/electricityBill",
+    name: "electricityBill",
+    component: ElectricityBill,
+  },
+  {
+    path: "/cloudMyOrder",
+    name: "cloudMyOrder",
+    component: CloudMyOrder,
+  },
 ];
 
 const router = createRouter({

src/views/index/cloudComputingPower/ComboDetails.vue

@@ -14,6 +14,33 @@
   </div>
   <div class="combo-details">
     <img src="@/assets/img/index/kuangji.svg" class="kuangji" alt="" />
+    <div class="combo-name">
+      <div class="name-left pf500 fs22 fc2C3131">算力套餐名称</div>
+      <div class="name-right pf500 fs18 fc2C3131">15/天</div>
+    </div>
+    <div class="combo-day">
+      <div class="pf500 fs18 fcDF384C">0.0176/T/天</div>
+      <div class="pf500 fs14 fc999999">套餐天数</div>
+    </div>
+    <div class="combo-line"></div>
+    <div class="combo-info margin-top17">
+      <div class="pf500 fs14 fc666666">挖矿奖励</div>
+      <div class="info-right pf500 fs14 fc666666">
+        <img src="@/assets/icon/coin/bnb.svg" alt="" />BTC
+      </div>
+    </div>
+    <div class="combo-info margin-top28 pf500 fs14 fc666666">
+      <div>矿机类型</div>
+      <div>类型名称</div>
+    </div>
+    <div class="combo-info margin-top28 pf500 fs14 fc666666">
+      <div>开始挖矿时间</div>
+      <div>24小时内</div>
+    </div>
+    <div class="combo-info margin-top28 pf500 fs14 fc666666">
+      <div>奖励周期</div>
+      <div>每日</div>
+    </div>
   </div>
 </template>
 <script setup>
@@ -76,5 +103,63 @@
       width: 278px;
       height: 214px;
     }
+
+    .combo-name {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 28px;
+      width: 345px;
+      height: 31px;
+    }
+
+    .combo-day {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 3px;
+      width: 345px;
+      height: 24px;
+    }
+
+    .combo-line {
+      margin-top: 15px;
+      width: 310px;
+      height: 1px;
+      background: #e9e9e9;
+    }
+
+    .margin-top28 {
+      margin-top: 28px;
+    }
+
+    .margin-top17 {
+      margin-top: 17px;
+    }
+
+    .combo-info {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      width: 345px;
+      height: 18px;
+
+      .info-right {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        height: 18px;
+
+        img {
+          margin-right: 6px;
+          width: 18px;
+          height: 18px;
+        }
+      }
+    }
   }
 </style>

src/views/index/cloudComputingPower/ElectricityBill.vue

@@ -0,0 +1,117 @@
+<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 fcA8A8A8">
+        <img src="../../../assets/icon/index/CalendarDots.svg" alt="" />
+      </div>
+    </div>
+  </div>
+  <div class="electricit-bill">
+    <div class="bill-item" v-for="(item, index) in 3" :key="index">
+      <div class="item-balance">
+        <div class="pf500 fs14 fc666666">缴费金额</div>
+        <div class="pf500 fs12 fc666666">1000.05 USDT</div>
+      </div>
+      <div class="item-time">
+        <div class="pf500 fs14 fc666666">缴费时间</div>
+        <div class="pf500 fs12 fc666666">2025-11-07 12:25:12</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+  import { useRoute, useRouter } from "vue-router";
+
+  const router = useRouter();
+
+  const toPath = () => {
+    router.back();
+  };
+</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 {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        position: absolute;
+        top: 12.3px;
+        right: 16px;
+        height: 24px;
+
+        img {
+          margin-right: 4px;
+        }
+      }
+    }
+  }
+
+  .electricit-bill {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    margin-top: 48px;
+
+    .bill-item {
+      margin-top: 10px;
+      padding: 0 10px;
+      width: 345px;
+      height: 75px;
+      border-radius: 8px;
+      border: 1px solid #ebebeb;
+      box-sizing: border-box;
+
+      .item-balance {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 15px;
+        height: 18px;
+      }
+
+      .item-time {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 11px;
+        height: 18px;
+      }
+    }
+  }
+</style>

src/views/index/cloudComputingPower/ElectricityRecharge.vue

@@ -0,0 +1,130 @@
+<template>
+  <!-- 电费充值 -->
+  <HeaderNav headerText="电费充值"></HeaderNav>
+  <div class="electricity-recharge">
+    <div class="electricity-balance">
+      <div class="text pf400 fs16 fc1F2937">电费余额(USDT)</div>
+      <div class="number pf600 fs26 fc1F2937">1,125,158.00</div>
+      <div class="about pf400 fs12 fc6A7187">预估日电费(USDT)</div>
+      <div class="balance pf500 fs16 fc1F2937">5,678.00</div>
+    </div>
+    <div class="card-number">
+      <div class="card-text pf500 fs14 fc333333">充值金额</div>
+      <div class="number-input">
+        <input
+          type="text"
+          class="input pf400 fs14 fc333333"
+          placeholder="请输入充值金额" />
+        <div class="all pf500 fs14 fc333333">USDT <span class="fcDF384C">全部</span></div>
+      </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="conduct-btn pf600 fs14 fcFFFFFF" @click="goComboDetails">立即支付</div>
+  </div>
+</template>
+<script setup>
+  import HeaderNav from "../components/HeaderNav.vue";
+</script>
+<style lang="less" scoped>
+  .electricity-recharge {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    margin-top: 48px;
+    width: 100%;
+
+    .electricity-balance {
+      padding-left: 23px;
+      margin-top: 10px;
+      width: 345px;
+      height: 154px;
+      border-radius: 8px;
+      border: 1px solid #ebebeb;
+      box-sizing: border-box;
+
+      .text {
+        margin-top: 18px;
+        height: 22px;
+        line-height: 22px;
+      }
+
+      .number {
+        margin-top: 3px;
+        height: 44px;
+        line-height: 44px;
+      }
+
+      .about {
+        margin-top: 8px;
+        height: 20px;
+        line-height: 20px;
+      }
+
+      .balance {
+        margin-top: 3px;
+        height: 24px;
+        line-height: 24px;
+      }
+    }
+
+    .card-number {
+      margin-top: 15px;
+      width: 345px;
+
+      .number-input {
+        position: relative;
+        margin-top: 5px;
+        width: 345px;
+        height: 45px;
+
+        .input {
+          padding-left: 11px;
+          width: 100%;
+          height: 100%;
+          box-sizing: border-box;
+          border-radius: 6px;
+          border: none;
+          outline: none;
+          background: #f5f5f5;
+        }
+
+        .all {
+          position: absolute;
+          top: 13px;
+          right: 11px;
+        }
+      }
+    }
+
+    .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;
+      }
+    }
+
+    .conduct-btn {
+      margin-top: 300px;
+      width: 311px;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      border-radius: 100px;
+      background: #df384c;
+      letter-spacing: 0.2px;
+    }
+  }
+</style>

src/views/index/cloudComputingPower/ElectricitySetting.vue

@@ -0,0 +1,26 @@
+<template>
+  <!-- 电费设置 -->
+  <HeaderNav headerText="电费设置"></HeaderNav>
+  <div class="electricity-setting">
+    电费自动续费
+    <Switch v-model="electricityFlag"></Switch>
+  </div>
+</template>
+<script setup>
+  import HeaderNav from "../components/HeaderNav.vue";
+  import Switch from "@/components/ui/Switch.vue";
+  import { ref } from "vue";
+
+  const electricityFlag = ref(true);
+</script>
+<style lang="less" scoped>
+  .electricity-setting {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    margin: 0 auto;
+    margin-top: 60px;
+    width: 345px;
+  }
+</style>

src/views/index/cloudComputingPower/Index.vue

@@ -7,7 +7,7 @@
         src="../../../assets/icon/index/left-arrow.svg"
         @click="toPath()" />
       云算力
-      <div class="save pf600 fs14 fc333333">我的算力</div>
+      <div class="save pf600 fs14 fc333333" @click="goMyPower">我的算力</div>
     </div>
   </div>
   <div class="cloud-power-index">
@@ -71,6 +71,10 @@
   const goComboDetails = () => {
     router.push("/comboDetails");
   };
+
+  const goMyPower = () => {
+    router.push("/myPower");
+  };
 </script>
 <style lang="less" scoped>
   .loan-header {

src/views/index/cloudComputingPower/MiningOutput.vue

@@ -0,0 +1,54 @@
+<template>
+  <!-- 挖矿产出 -->
+  <HeaderNav headerText="挖矿产出"></HeaderNav>
+  <div class="mining-output">
+    <div class="output-item pf500 fs14 fc2C3131" v-for="(item, index) in 3" :key="index">
+      <div class="item-left"><img src="@/assets/icon/coin/bnb.svg" alt="" />BTC</div>
+      <div class="item-right">0.2525 USDT</div>
+    </div>
+  </div>
+</template>
+<script setup>
+  import HeaderNav from "../components/HeaderNav.vue";
+</script>
+<style lang="less" scoped>
+  .mining-output {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    margin-top: 48px;
+    width: 100%;
+
+    .output-item {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 14px;
+      width: 345px;
+      height: 30px;
+
+      &:first-child {
+        margin-top: 0;
+      }
+
+      .item-left {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        height: 30px;
+
+        img {
+          margin-right: 10px;
+          width: 30px;
+          height: 30px;
+        }
+      }
+
+      .item-right {
+      }
+    }
+  }
+</style>

src/views/index/cloudComputingPower/MyOrder.vue

@@ -0,0 +1,158 @@
+<template>
+  <!-- 我的订单 -->
+  <HeaderNav headerText="我的订单"></HeaderNav>
+  <div class="my-order">
+    <div class="coin-item" v-for="(item, index) in 2" :key="index">
+      <div class="item-name">
+        <div class="item-info">
+          <div class="info-top pf500 fs14 fc1F2937">
+            <div>算力套餐名称</div>
+            <div>0.0176/T/天</div>
+          </div>
+          <div class="info-bottom">
+            <div class="pf500 fs10 fc121212">
+              <img src="@/assets/icon/coin/bnb.svg" alt="" />
+              BTC
+            </div>
+            <div class="start-time pf500 fs10 fc999999">
+              <img src="@/assets/icon/index/time.svg" class="time" alt="" />
+              开始挖矿 24小时内
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="item-line"></div>
+      <div class="item-use pf500 fs12 margin-top10">
+        <div class="fcA8A8A8">套餐天数</div>
+        <div class="fcDF384C">15 天</div>
+      </div>
+      <div class="item-use pf500 fs12 margin-top4">
+        <div class="fcA8A8A8">预估每日收益</div>
+        <div class="fc767676">0.015/T天</div>
+      </div>
+      <div class="item-use pf500 fs12 margin-top4">
+        <div class="fcA8A8A8">预估每日成本</div>
+        <div class="fc767676">0.00215/T天</div>
+      </div>
+      <div class="item-use pf500 fs12 margin-top4">
+        <div class="fcA8A8A8">预期收益率</div>
+        <div class="fc767676">152.16%</div>
+      </div>
+      <div class="conduct-btn pf600 fs14 fcFFFFFF">进行中</div>
+    </div>
+  </div>
+</template>
+<script setup>
+  import HeaderNav from "../components/HeaderNav.vue";
+
+  import { useRoute, useRouter } from "vue-router";
+
+  const router = useRouter();
+</script>
+<style lang="less" scoped>
+  .my-order {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    margin-top: 48px;
+    width: 100%;
+
+    .coin-item {
+      padding-left: 19px;
+      padding-right: 11px;
+      margin-top: 10px;
+      width: 345px;
+      height: 209px;
+      border-radius: 8px;
+      border: 1px solid #ebebeb;
+      box-sizing: border-box;
+
+      .item-name {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        margin-top: 11px;
+        width: 100%;
+        height: 34px;
+
+        img {
+          width: 15px;
+          height: 15px;
+        }
+
+        .item-info {
+          width: calc(345px);
+          height: 34px;
+
+          .info-top {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+            width: 100%;
+            height: 20px;
+          }
+
+          .info-bottom {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+            margin-top: 2px;
+            width: 100%;
+            height: 15px;
+
+            .start-time {
+              display: flex;
+              flex-direction: row;
+              justify-content: flex-start;
+              align-items: center;
+            }
+
+            .time {
+              margin-right: 2px;
+              width: 12px;
+              height: 12px;
+            }
+          }
+        }
+      }
+
+      .item-line {
+        margin-top: 10px;
+        width: 100%;
+        height: 1px;
+        background: #e9e9e9;
+      }
+
+      .margin-top10 {
+        margin-top: 10px;
+      }
+
+      .margin-top4 {
+        margin-top: 4px;
+      }
+
+      .item-use {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+        height: 18px;
+      }
+
+      .conduct-btn {
+        margin-top: 8px;
+        width: 311px;
+        height: 40px;
+        line-height: 40px;
+        text-align: center;
+        border-radius: 100px;
+        background: #df384c;
+        letter-spacing: 0.2px;
+      }
+    }
+  }
+</style>

src/views/index/cloudComputingPower/MyPower.vue

@@ -0,0 +1,303 @@
+<template>
+  <!-- 我的算力 -->
+  <HeaderNav headerText="我的算力"></HeaderNav>
+  <div class="my-power">
+    <div class="my-asset">
+      <div class="total-left">
+        <div class="asset-title pf400 fs16 fc1F2937">总收益(USDT)</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>
+      <div class="total-right pf500 fs12 fcFFFFFF" @click="goMyOrder">我的订单</div>
+    </div>
+    <div class="electricity-bill pf400 fs12 fc6A7187">
+      电费余额(USDT) <span class="fcDF384C">自动续费中</span>
+    </div>
+    <div class="electricity-banlance pf500 fs16 fc1F2937">5,678.00</div>
+    <div class="index-menu">
+      <div
+        class="menu-item"
+        v-for="(item, index) in indexMenu"
+        :key="index"
+        @click="goMenu(index)">
+        <img :src="item.image" alt="" />
+        <div class="item-text pf400 fs14 fc666666">{{ item.name }}</div>
+      </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>
+    <div class="class-first pf600 fs18 fc121212" v-if="currentTab == 0">
+      <div class="title">
+        我的挖矿收益
+        <img src="@/assets/icon/index/CalendarDots.svg" alt="" />
+      </div>
+      <div class="rate pf400 fs10 fc121212">
+        <img src="@/assets/icon/coin/bnb.svg" alt="" />
+        <div class="first pf500 fs14 fc121212">0.2050878500 BTC</div>
+        ≈35,458.00 USDT
+      </div>
+      <div class="info-item pf500 fs14 fc666666 margin-top15">
+        <div>挖矿中算力</div>
+        <div>5020.5050 T</div>
+      </div>
+      <div class="info-item pf500 fs14 fc666666 margin-top26">
+        <div>预购算力</div>
+        <div>0.1215 T</div>
+      </div>
+      <div class="info-item pf500 fs14 fc666666 margin-top26">
+        <div>总成本</div>
+        <div>20 USDT</div>
+      </div>
+      <div class="info-item pf500 fs14 fc666666 margin-top26">
+        <div>回本天数</div>
+        <div>10天</div>
+      </div>
+    </div>
+    <div class="class-second pf600 fs18 fc121212" v-if="currentTab == 1">
+      <div class="title">
+        我的挖矿收益1
+        <img src="@/assets/icon/index/CalendarDots.svg" alt="" />
+      </div>
+      <div class="rate pf400 fs10 fc121212">
+        <img src="@/assets/icon/coin/bnb.svg" alt="" />
+        <div class="first pf500 fs14 fc121212">0.2050878500 BTC</div>
+        ≈35,458.00 USDT
+      </div>
+      <div class="info-item pf500 fs14 fc666666 margin-top15">
+        <div>挖矿中算力</div>
+        <div>5020.5050 T</div>
+      </div>
+      <div class="info-item pf500 fs14 fc666666 margin-top26">
+        <div>预购算力</div>
+        <div>0.1215 T</div>
+      </div>
+      <div class="info-item pf500 fs14 fc666666 margin-top26">
+        <div>总成本</div>
+        <div>20 USDT</div>
+      </div>
+      <div class="info-item pf500 fs14 fc666666 margin-top26">
+        <div>回本天数</div>
+        <div>10天</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+  import HeaderNav from "../components/HeaderNav.vue";
+  import { ref } from "vue";
+  import { useRouter } from "vue-router";
+
+  const router = useRouter();
+
+  const currentTab = ref(0);
+
+  const goMenu = (index) => {
+    if (index == 0) {
+      router.push("/miningOutput");
+    } else if (index == 1) {
+      router.push("/electricityBill");
+    } else if (index == 2) {
+      router.push("/electricityRecharge");
+    } else if (index == 3) {
+      router.push("/electricitySetting");
+    }
+  };
+
+  const goMyOrder = () => {
+    router.push("/cloudMyOrder");
+  };
+
+  const indexMenu = [
+    {
+      name: "挖矿产出",
+      image: require("@/assets/icon/index/kuang-chanchu.svg"),
+    },
+    {
+      name: "电费账单",
+      image: require("@/assets/icon/index/dian-zhangdan.svg"),
+    },
+    {
+      name: "电费充值",
+      image: require("@/assets/icon/index/dian-chongzhi.svg"),
+    },
+    {
+      name: "电费设置",
+      image: require("@/assets/icon/index/dian-shezhi.svg"),
+    },
+  ];
+</script>
+<style lang="less" scoped>
+  .my-power {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    margin-top: 48px;
+    width: 100%;
+
+    .my-asset {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      width: 345px;
+      align-items: center;
+
+      .total-left {
+        .asset-title {
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-start;
+          align-items: center;
+          height: 22px;
+
+          .eye-close {
+            margin-left: 5px;
+            width: 16px;
+            height: 16px;
+          }
+        }
+
+        .asset-number {
+          margin-top: 3px;
+          height: 44px;
+          line-height: 44px;
+        }
+
+        .asset-approximately {
+          margin-top: 1px;
+          height: 22px;
+          line-height: 22px;
+        }
+      }
+
+      .total-right {
+        width: 76px;
+        height: 24px;
+        line-height: 24px;
+        text-align: center;
+        border-radius: 5px;
+        background: #df384c;
+      }
+    }
+
+    .electricity-bill {
+      margin-top: 6px;
+      width: 345px;
+      height: 20px;
+      line-height: 20px;
+      text-align: left;
+    }
+
+    .electricity-banlance {
+      margin-top: 3px;
+      width: 345px;
+      height: 24px;
+      line-height: 24px;
+      text-align: left;
+    }
+
+    .index-menu {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      margin-top: 15px;
+      width: calc(345px - 26px);
+      height: 57px;
+
+      .menu-item {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: center;
+        width: 57px;
+        height: 57px;
+
+        img {
+          width: 32px;
+          height: 32px;
+        }
+
+        .item-text {
+          margin-top: 1px;
+          height: 24px;
+          line-height: 24px;
+          letter-spacing: 0.2px;
+        }
+      }
+    }
+
+    .notifi-classifi {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: flex-end;
+      margin-top: 11px;
+      width: 345px;
+      height: 24px;
+
+      .sys-notifi {
+        margin-left: 33px;
+      }
+    }
+
+    .class-first,
+    .class-second {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      margin-top: 11px;
+      width: 345px;
+
+      .title {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        height: 24px;
+
+        img {
+          width: 20px;
+          height: 20px;
+        }
+      }
+
+      .rate {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        margin-top: 14px;
+        height: 30px;
+
+        img {
+          width: 30px;
+          height: 30px;
+        }
+
+        .first {
+          margin-left: 10px;
+          margin-right: 2px;
+        }
+      }
+
+      .margin-top15 {
+        margin-top: 15px;
+      }
+
+      .margin-top26 {
+        margin-top: 26px;
+      }
+
+      .info-item {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        width: 345px;
+        height: 20px;
+      }
+    }
+  }
+</style>