Merge branch 'main' of http://47.76.177.38:48976/Benita/Bit_Wise_World

# Conflicts:
#	src/router/index.js

src/assets/icon/asset/otcTabbar/fourth-clicked.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21" stroke="#DF384C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z" stroke="#DF384C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/icon/asset/otcTabbar/fourth.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21" stroke="#A8A8A8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z" stroke="#A8A8A8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/icon/asset/otcTabbar/second-clicked.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 0C3.95344 0 0 2.30625 0 5.25V14.25C0 17.1938 3.95344 19.5 9 19.5C14.0466 19.5 18 17.1938 18 14.25V5.25C18 2.30625 14.0466 0 9 0ZM16.5 9.75C16.5 10.6519 15.7612 11.5716 14.4741 12.2738C13.0247 13.0641 11.0803 13.5 9 13.5C6.91969 13.5 4.97531 13.0641 3.52594 12.2738C2.23875 11.5716 1.5 10.6519 1.5 9.75V8.19C3.09938 9.59625 5.83406 10.5 9 10.5C12.1659 10.5 14.9006 9.5925 16.5 8.19V9.75ZM3.52594 2.72625C4.97531 1.93594 6.91969 1.5 9 1.5C11.0803 1.5 13.0247 1.93594 14.4741 2.72625C15.7612 3.42844 16.5 4.34812 16.5 5.25C16.5 6.15188 15.7612 7.07156 14.4741 7.77375C13.0247 8.56406 11.0803 9 9 9C6.91969 9 4.97531 8.56406 3.52594 7.77375C2.23875 7.07156 1.5 6.15188 1.5 5.25C1.5 4.34812 2.23875 3.42844 3.52594 2.72625ZM14.4741 16.7738C13.0247 17.5641 11.0803 18 9 18C6.91969 18 4.97531 17.5641 3.52594 16.7738C2.23875 16.0716 1.5 15.1519 1.5 14.25V12.69C3.09938 14.0963 5.83406 15 9 15C12.1659 15 14.9006 14.0925 16.5 12.69V14.25C16.5 15.1519 15.7612 16.0716 14.4741 16.7738Z" fill="#DF384C"/>
+</svg>

src/assets/icon/asset/otcTabbar/second.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 0C3.95344 0 0 2.30625 0 5.25V14.25C0 17.1938 3.95344 19.5 9 19.5C14.0466 19.5 18 17.1938 18 14.25V5.25C18 2.30625 14.0466 0 9 0ZM16.5 9.75C16.5 10.6519 15.7612 11.5716 14.4741 12.2738C13.0247 13.0641 11.0803 13.5 9 13.5C6.91969 13.5 4.97531 13.0641 3.52594 12.2738C2.23875 11.5716 1.5 10.6519 1.5 9.75V8.19C3.09938 9.59625 5.83406 10.5 9 10.5C12.1659 10.5 14.9006 9.5925 16.5 8.19V9.75ZM3.52594 2.72625C4.97531 1.93594 6.91969 1.5 9 1.5C11.0803 1.5 13.0247 1.93594 14.4741 2.72625C15.7612 3.42844 16.5 4.34812 16.5 5.25C16.5 6.15188 15.7612 7.07156 14.4741 7.77375C13.0247 8.56406 11.0803 9 9 9C6.91969 9 4.97531 8.56406 3.52594 7.77375C2.23875 7.07156 1.5 6.15188 1.5 5.25C1.5 4.34812 2.23875 3.42844 3.52594 2.72625ZM14.4741 16.7738C13.0247 17.5641 11.0803 18 9 18C6.91969 18 4.97531 17.5641 3.52594 16.7738C2.23875 16.0716 1.5 15.1519 1.5 14.25V12.69C3.09938 14.0963 5.83406 15 9 15C12.1659 15 14.9006 14.0925 16.5 12.69V14.25C16.5 15.1519 15.7612 16.0716 14.4741 16.7738Z" fill="#A8A8A8"/>
+</svg>

src/assets/icon/asset/search-black.svg

@@ -0,0 +1,3 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.6165 15.29L12.9064 11.5783C14.0188 10.1286 14.5382 8.31013 14.3591 6.49165C14.1801 4.67318 13.316 2.99089 11.9422 1.78607C10.5684 0.581238 8.78776 -0.0559155 6.96147 0.00385482C5.13517 0.0636252 3.4 0.815844 2.10792 2.10792C0.815844 3.4 0.0636252 5.13517 0.00385482 6.96147C-0.0559155 8.78776 0.581238 10.5684 1.78607 11.9422C2.99089 13.316 4.67318 14.1801 6.49165 14.3591C8.31013 14.5382 10.1286 14.0188 11.5783 12.9064L15.2915 16.6204C15.3787 16.7077 15.4823 16.7768 15.5962 16.824C15.7102 16.8712 15.8323 16.8955 15.9556 16.8955C16.0789 16.8955 16.2011 16.8712 16.315 16.824C16.4289 16.7768 16.5325 16.7077 16.6197 16.6204C16.7069 16.5332 16.7761 16.4297 16.8232 16.3158C16.8704 16.2018 16.8947 16.0797 16.8947 15.9564C16.8947 15.8331 16.8704 15.7109 16.8232 15.597C16.7761 15.4831 16.7069 15.3795 16.6197 15.2923L16.6165 15.29ZM1.89076 7.20326C1.89076 6.15255 2.20233 5.12543 2.78608 4.2518C3.36982 3.37816 4.19952 2.69724 5.17026 2.29515C6.14099 1.89306 7.20916 1.78786 8.23968 1.99284C9.2702 2.19782 10.2168 2.70379 10.9598 3.44676C11.7027 4.18972 12.2087 5.13632 12.4137 6.16684C12.6187 7.19737 12.5135 8.26554 12.1114 9.23627C11.7093 10.207 11.0284 11.0367 10.1547 11.6204C9.28109 12.2042 8.25398 12.5158 7.20326 12.5158C5.79474 12.5143 4.44433 11.9541 3.44836 10.9582C2.45238 9.96219 1.89221 8.61178 1.89076 7.20326Z" fill="#333333"/>
+</svg>

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/assets/icon/tabbar/bitcoin-circle-clicked.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.911 9.25H8.79599V7.08997H10.911C11.494 7.08997 11.969 7.57404 11.969 8.17004C11.969 8.76604 11.494 9.25 10.911 9.25ZM11.427 10.75H10.91H8.79501V12.91H11.426C12.009 12.91 12.484 12.426 12.484 11.83C12.484 11.234 12.011 10.75 11.427 10.75ZM20 10C20 15.523 15.523 20 10 20C4.477 20 0 15.523 0 10C0 4.477 4.477 0 10 0C15.523 0 20 4.477 20 10ZM13.985 11.83C13.985 10.971 13.563 10.215 12.921 9.745C13.259 9.30799 13.468 8.76604 13.468 8.17004C13.468 6.92004 12.582 5.87599 11.409 5.64099V5C11.409 4.586 11.073 4.25 10.659 4.25C10.245 4.25 9.909 4.586 9.909 5V5.58997H9.31799V5C9.31799 4.586 8.98199 4.25 8.56799 4.25C8.15399 4.25 7.81799 4.586 7.81799 5V5.58997H6.76401C6.35001 5.58997 6.01401 5.92597 6.01401 6.33997C6.01401 6.75397 6.35001 7.08997 6.76401 7.08997H7.29501V12.91H6.76401C6.35001 12.91 6.01401 13.246 6.01401 13.66C6.01401 14.074 6.35001 14.41 6.76401 14.41H7.81799V15C7.81799 15.414 8.15399 15.75 8.56799 15.75C8.98199 15.75 9.31799 15.414 9.31799 15V14.41H9.909V15C9.909 15.414 10.245 15.75 10.659 15.75C11.073 15.75 11.409 15.414 11.409 15V14.41H11.426C12.838 14.41 13.985 13.253 13.985 11.83Z" fill="#DF384C"/>
+</svg>

src/assets/icon/tabbar/bitcoin-circle.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.75 0C4.822 0 0 4.822 0 10.75C0 16.678 4.822 21.5 10.75 21.5C16.678 21.5 21.5 16.678 21.5 10.75C21.5 4.822 16.678 0 10.75 0ZM10.75 20C5.649 20 1.5 15.851 1.5 10.75C1.5 5.649 5.649 1.5 10.75 1.5C15.851 1.5 20 5.649 20 10.75C20 15.851 15.851 20 10.75 20ZM13.672 10.495C14.01 10.058 14.219 9.51604 14.219 8.92004C14.219 7.67004 13.333 6.62599 12.16 6.39099V5.75C12.16 5.336 11.824 5 11.41 5C10.996 5 10.66 5.336 10.66 5.75V6.33997H10.069V5.75C10.069 5.336 9.733 5 9.319 5C8.905 5 8.569 5.336 8.569 5.75V6.33997H7.51501C7.10101 6.33997 6.76501 6.67597 6.76501 7.08997C6.76501 7.50397 7.10101 7.83997 7.51501 7.83997H8.04599V13.66H7.51501C7.10101 13.66 6.76501 13.996 6.76501 14.41C6.76501 14.824 7.10101 15.16 7.51501 15.16H8.569V15.75C8.569 16.164 8.905 16.5 9.319 16.5C9.733 16.5 10.069 16.164 10.069 15.75V15.16H10.66V15.75C10.66 16.164 10.996 16.5 11.41 16.5C11.824 16.5 12.16 16.164 12.16 15.75V15.16H12.177C13.588 15.16 14.735 14.003 14.735 12.58C14.735 11.721 14.313 10.965 13.672 10.495ZM12.719 8.92004C12.719 9.51604 12.244 10 11.661 10H9.54599V7.83997H11.661C12.244 7.83997 12.719 8.32404 12.719 8.92004ZM12.177 13.66H9.54599V11.5H11.661H12.178C12.761 11.5 13.236 11.984 13.236 12.58C13.236 13.176 12.761 13.66 12.177 13.66Z" fill="#A8A8A8"/>
+</svg>

src/assets/icon/tabbar/chart-2-clicked.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.19 0H5.81C2.17 0 0 2.17 0 5.81V14.18C0 17.83 2.17 20 5.81 20H14.18C17.82 20 19.99 17.83 19.99 14.19V5.81C20 2.17 17.83 0 14.19 0ZM7.91 14.19C7.91 14.83 7.39 15.35 6.74 15.35C6.1 15.35 5.58 14.83 5.58 14.19V10.93C5.58 10.29 6.1 9.77 6.74 9.77C7.39 9.77 7.91 10.29 7.91 10.93V14.19ZM14.42 14.19C14.42 14.83 13.9 15.35 13.26 15.35C12.61 15.35 12.09 14.83 12.09 14.19V5.81C12.09 5.17 12.61 4.65 13.26 4.65C13.9 4.65 14.42 5.17 14.42 5.81V14.19Z" fill="#DF384C"/>
+</svg>

src/assets/icon/tabbar/chart-2.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z" stroke="#A9A9A9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.5 18.5C16.6 18.5 17.5 17.6 17.5 16.5V7.5C17.5 6.4 16.6 5.5 15.5 5.5C14.4 5.5 13.5 6.4 13.5 7.5V16.5C13.5 17.6 14.39 18.5 15.5 18.5Z" stroke="#A9A9A9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.5 18.5C9.6 18.5 10.5 17.6 10.5 16.5V13C10.5 11.9 9.6 11 8.5 11C7.4 11 6.5 11.9 6.5 13V16.5C6.5 17.6 7.39 18.5 8.5 18.5Z" stroke="#A9A9A9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/icon/tabbar/home-clicked.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 17.9993H11.8C11.634 17.9993 11.5 17.8652 11.5 17.6992V13.4993C11.5 12.1183 10.381 10.9993 9 10.9993C7.619 10.9993 6.5 12.1183 6.5 13.4993V17.6992C6.5 17.8652 6.36595 17.9993 6.19995 17.9993H3C1 17.9993 0 16.9993 0 14.9993V8.65029C0 6.65229 0.523054 6.34535 1.43005 5.58535L7.39404 0.58425C8.32304 -0.19475 9.67806 -0.19475 10.6071 0.58425L16.571 5.58535C17.477 6.34535 18.001 6.65229 18.001 8.65029V14.9993C18 16.9993 17 17.9993 15 17.9993Z" fill="#DF384C"/>
+</svg>

src/assets/icon/tabbar/home.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.75 19.5012H11.5V14.2512C11.5 13.2862 10.715 12.5012 9.75 12.5012C8.785 12.5012 8 13.2862 8 14.2512V19.5012H3.75C1.332 19.5012 0 18.1692 0 15.7512V9.40126C0 7.27826 0.585992 6.68523 1.54199 5.89223L7.66199 0.76125C8.87099 -0.25375 10.629 -0.25375 11.838 0.76125L17.958 5.89223C18.914 6.68523 19.5 7.27926 19.5 9.40126V15.7512C19.5 18.1692 18.168 19.5012 15.75 19.5012ZM13 18.0012H15.75C17.327 18.0012 18 17.3282 18 15.7512V9.40126C18 7.87526 17.748 7.66628 17.001 7.04628L10.875 1.9103C10.223 1.3643 9.277 1.3643 8.625 1.9103L2.49902 7.04628C1.75202 7.66628 1.5 7.87526 1.5 9.40126V15.7512C1.5 17.3282 2.173 18.0012 3.75 18.0012H6.5V14.2512C6.5 12.4592 7.958 11.0012 9.75 11.0012C11.542 11.0012 13 12.4592 13 14.2512V18.0012Z" fill="#A8A8A8"/>
+</svg>

src/assets/icon/tabbar/user-circle-clicked.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 0C4.477 0 0 4.477 0 10C0 15.523 4.477 20 10 20C15.523 20 20 15.523 20 10C20 4.477 15.523 0 10 0ZM10.0081 5C11.6651 5 13.0081 6.343 13.0081 8C13.0081 9.657 11.6651 11 10.0081 11C8.35106 11 7.00806 9.657 7.00806 8C7.00806 6.343 8.35106 5 10.0081 5ZM10 18.5C7.79 18.5 5.77001 17.65 4.26001 16.26C4.70001 14.88 5.84004 13.5699 8.29004 13.5699H11.71C14.15 13.5699 15.29 14.89 15.74 16.26C14.23 17.65 12.21 18.5 10 18.5Z" fill="#DF384C"/>
+</svg>

src/assets/icon/tabbar/user-circle.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.5 10.75C21.5 4.822 16.678 0 10.75 0C4.822 0 0 4.822 0 10.75C0 14.22 1.65899 17.302 4.21899 19.269C4.22299 19.273 4.22903 19.2751 4.23303 19.2791C6.04403 20.6661 8.29898 21.5 10.751 21.5C13.203 21.5 15.458 20.6661 17.269 19.2791C17.273 19.2751 17.279 19.273 17.283 19.269C19.841 17.302 21.5 14.22 21.5 10.75ZM1.5 10.75C1.5 5.649 5.649 1.5 10.75 1.5C15.851 1.5 20 5.649 20 10.75C20 13.273 18.982 15.5621 17.338 17.2321C16.889 15.3311 15.452 13.5699 12.46 13.5699H9.04004C6.04804 13.5699 4.60999 15.3311 4.16199 17.2321C2.51799 15.5621 1.5 13.273 1.5 10.75ZM5.50903 18.364C5.56703 17.338 6.03604 15.0699 9.04004 15.0699H12.46C15.464 15.0699 15.933 17.338 15.991 18.364C14.5 19.394 12.695 20 10.75 20C8.805 20 7.00003 19.393 5.50903 18.364ZM10.7581 12.5C12.8251 12.5 14.5081 10.818 14.5081 8.75C14.5081 6.682 12.8251 5 10.7581 5C8.69106 5 7.00806 6.682 7.00806 8.75C7.00806 10.818 8.69006 12.5 10.7581 12.5ZM10.7581 6.5C11.9981 6.5 13.0081 7.509 13.0081 8.75C13.0081 9.991 11.9981 11 10.7581 11C9.51806 11 8.50806 9.991 8.50806 8.75C8.50806 7.509 9.51806 6.5 10.7581 6.5Z" fill="#A8A8A8"/>
+</svg>

src/assets/icon/tabbar/wallet-clicked.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.25 11C10.25 12.79 11.71 14.25 13.5 14.25H18V15C18 17 17 18 15 18H3C1 18 0 17 0 15V2C0 3.1 0.9 4 2 4H15C17 4 18 5 18 7V7.75H13.5C11.71 7.75 10.25 9.21 10.25 11ZM13.5 9.25C12.54 9.25 11.75 10.04 11.75 11C11.75 11.96 12.54 12.75 13.5 12.75H18V9.25H13.5ZM14.02 12C13.47 12 13.01 11.55 13.01 11C13.01 10.45 13.46 10 14.01 10H14.02C14.57 10 15.02 10.45 15.02 11C15.02 11.55 14.57 12 14.02 12ZM12 0H2.75C2.06 0 1.5 0.56 1.5 1.25C1.5 1.94 2.06 2.5 2.75 2.5H14.97C14.82 0.83 13.83 0 12 0Z" fill="#DF384C"/>
+</svg>

src/assets/icon/tabbar/wallet.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.5 4.047V3.75C16.5 1.332 15.168 0 12.75 0H2.75C1.233 0 0 1.233 0 2.75V15.75C0 18.168 1.332 19.5 3.75 19.5H15.75C18.168 19.5 19.5 18.168 19.5 15.75V7.75C19.5 5.595 18.442 4.303 16.5 4.047ZM18 13.5H14.25C13.285 13.5 12.5 12.715 12.5 11.75C12.5 10.785 13.285 10 14.25 10H18V13.5ZM2.75 1.5H12.75C14.327 1.5 15 2.173 15 3.75V4H2.75C2.061 4 1.5 3.439 1.5 2.75C1.5 2.061 2.061 1.5 2.75 1.5ZM15.75 18H3.75C2.173 18 1.5 17.327 1.5 15.75V5.19897C1.875 5.39097 2.3 5.5 2.75 5.5H15.75C17.327 5.5 18 6.173 18 7.75V8.5H14.25C12.458 8.5 11 9.958 11 11.75C11 13.542 12.458 15 14.25 15H18V15.75C18 17.327 17.327 18 15.75 18ZM14.76 10.75H14.77C15.323 10.75 15.77 11.198 15.77 11.75C15.77 12.302 15.323 12.75 14.77 12.75C14.218 12.75 13.765 12.302 13.765 11.75C13.765 11.198 14.208 10.75 14.76 10.75Z" fill="#A8A8A8"/>
+</svg>

src/router/index.js

@@ -1,4 +1,4 @@
-import { createRouter, createWebHistory } from "vue-router";
+import {createRouter, createWebHistory} from "vue-router";
 import HomeIndex from "../views/HomeIndex.vue";
 import AppIndex from "../views/index/Index.vue";
 import MarketIndex from "../views/market/Index.vue";
@@ -29,17 +29,39 @@ import RechargeChangeCoin from "../views/index/recharge/ChangeCoin.vue";
 import Transfer from "../views/index/recharge/Transfer.vue";
 import TransferHistory from "../views/index/recharge/TransferHistory.vue";
 import UserAsset from "../views/asset/UserAsset.vue";
+import RechargeHistory from "../views/index/recharge/RechargeHistory.vue";
+import WithdrawHistory from "../views/index/recharge/WithdrawHistory.vue";
+import FinancialIndex from "../views/index/financial/Index.vue";
+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 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 OTCMessageIndex from "@/views/asset/otc/message/Index.vue";
+import OTCOrderIndex from "@/views/asset/otc/order/Index.vue";
+import OTCTransactionIndex from "@/views/asset/otc/transaction/Index.vue";
+import OTCUserIndex from "@/views/asset/otc/user/Index.vue";
 
-
-import TradeLayout from '@/views/bitcoin/TradeLayout.vue'; // 新建的公共父组件
-import TradeFutures from '@/views/bitcoin/TradeFutures.vue'; // （合约）
-import TradeSeconds from '@/views/bitcoin/lever/TradeSeconds.vue'; // 秒合约（占位）
-import TradeOptions from '@/views/bitcoin/lever/TradeOptions.vue'; // 期权（占位）
-import TradeMargin from '@/views/bitcoin/lever/TradeMargin.vue';
-import Calculator from '../views/bitcoin/Calculator.vue' // 新建的计算器页面
-import TradeSettings from '@/views/bitcoin/CommonFunctionsPopup/GeneralLevel2/TradeSettings.vue'// 新建
-import OptionTrading from '@/views/bitcoin/lever/OptionTrading.vue'
-
+import CommonFunctionsPopup from "@/views/bitcoin/CommonFunctionsPopup/CommonFunctionsPopup.vue"; // 子组件路径
+import TradeRules from "@/views/bitcoin/CommonFunctionsPopup/GeneralLevel2/TradeRules.vue"; // 新建
+import TradeLayout from "@/views/bitcoin/TradeLayout.vue"; // 新建的公共父组件
+import TradeFutures from "@/views/bitcoin/TradeFutures.vue"; // （合约）
+import TradeSeconds from "@/views/bitcoin/lever/TradeSeconds.vue"; // 秒合约（占位）
+import TradeOptions from "@/views/bitcoin/lever/TradeOptions.vue"; // 期权（占位）
+import TradeMargin from "@/views/bitcoin/lever/TradeMargin.vue";
+import Calculator from "../views/bitcoin/Calculator.vue"; // 新建的计算器页面
+import TradeSettings from "@/views/bitcoin/CommonFunctionsPopup/GeneralLevel2/TradeSettings.vue"; // 新建
+import OptionTrading from "@/views/bitcoin/lever/OptionTrading.vue";
 
 const routes = [
   {
@@ -49,7 +71,7 @@ const routes = [
     children: [
       {
         path: "",
-        name: "",
+        name: "appIndex",
         component: AppIndex,
       },
       {
@@ -61,57 +83,60 @@ const routes = [
         path: "/bitcoin",
         component: TradeLayout, // 而是布局组件
         // 当访问 /bitcoin 时，自动重定向到 /bitcoin/contract
-        redirect: '/bitcoin/contract',
+        redirect: "/bitcoin/contract",
         children: [
           // 1. 核心交易子路由
           {
-            path: 'contract',
-            name: 'TradeContract',
+            path: "contract",
+            name: "TradeContract",
             component: TradeFutures, // 核心交易逻辑
-            meta: { title: '合约' }
-              },
+            meta: { title: "合约" },
+          },
           {
-            path: 'seconds',
-            name: 'TradeSeconds',
+            path: "seconds",
+            name: "TradeSeconds",
             component: TradeSeconds,
-            meta: { title: '秒合约' }
+            meta: { title: "秒合约" },
           },
           {
-            path: 'options',
-            name: 'TradeOptions',
+            path: "options",
+            name: "TradeOptions",
             component: TradeOptions,
-            meta: { title: '期权' },
+            meta: { title: "期权" },
           },
 
-            {
-                path: "margin",
-                name: "TradeMargin",
-                component: TradeMargin,
-                meta: {title: "杠杆"},
-            },
-            {
-                path: 'settings',
-                name: 'TradeSettings',
-                component: TradeSettings
-            },
-
-         ]
-        },
-        {
-            path: 'PnLAnalysis',
-            name: 'PnLAnalysis.vue',
-            component: () => import('@/views/bitcoin/lever/PnLAnalysis.vue'),
-            meta: { title: '' }
-         },
-         { path: 'calculator',
-            name: 'calculator',
-            component: Calculator },
-        {
-            path: 'OptionTrading',
-            name: 'OptionTrading',
-            component: OptionTrading,
-            meta: { title: '' }
-         },
+          {
+            path: "margin",
+            name: "TradeMargin",
+            component: TradeMargin,
+            meta: { title: "杠杆" },
+          },
+          {
+            path: "settings",
+            name: "TradeSettings",
+            component: TradeSettings,
+          },
+        ],
+      },
+      {
+        path: "PnLAnalysis",
+        name: "PnLAnalysis.vue",
+        component: () => import("@/views/bitcoin/lever/PnLAnalysis.vue"),
+        meta: { title: "" },
+      },
+      {
+        path: "calculator",
+        name: "calculator",
+        component: Calculator,
+      },
+      {
+        path: "OptionTrading",
+        name: "OptionTrading",
+        component: OptionTrading,
+        meta: { title: "" },
+      },
+      { path: "settings", name: "TradeSettings", component: TradeSettings },
+      { path: "calculator", name: "calculator", component: Calculator },
       {
         path: "/assetIndex",
         name: "assetIndex",
@@ -124,6 +149,33 @@ const routes = [
       },
     ],
   },
+  {
+    path: "/otcIndex",
+    name: "otcIndex",
+    component: OTCIndex,
+    children: [
+      {
+        path: "",
+        name: "otcTransactionIndex",
+        component: OTCTransactionIndex,
+      },
+      {
+        path: "/otcMessageIndex",
+        name: "otcMessageIndex",
+        component: OTCMessageIndex,
+      },
+      {
+        path: "/otcOrderIndex",
+        name: "otcOrderIndex",
+        component: OTCOrderIndex,
+      },
+      {
+        path: "/otcUserIndex",
+        name: "otcUserIndex",
+        component: OTCUserIndex,
+      },
+    ],
+  },
   {
     path: "/applyPermission",
     name: "applyPermission",
@@ -249,107 +301,166 @@ const routes = [
     name: "userAsset",
     component: UserAsset,
   },
-
-    {
-        path: "/applyPermission",
-        name: "applyPermission",
-        component: ApplyPermission,
-    },
-    {
-        path: "/splashScreen",
-        name: "splashScreen",
-        component: SplashScreen,
-    },
-    {
-        path: "/riskTips",
-        name: "riskTips",
-        component: RiskTips,
-    },
-    {
-        path: "/searchIcon",
-        name: "searchIcon",
-        component: SearchIcon,
-    },
-    {
-        path: "/notification",
-        name: "notification",
-        component: Notification,
-    },
-    {
-        path: "/indexUser",
-        name: "indexUser",
-        component: IndexUser,
-    },
-    {
-        path: "/userCenter",
-        name: "userCenter",
-        component: UserCenter,
-    },
-    {
-        path: "/marketDetails",
-        name: "marketDetails",
-        component: MarketDetails,
-    },
-    {
-        path: "/historyIndex",
-        name: "historyIndex",
-        component: HistoryIndex,
-    },
-    {
-        path: "/entrustDetails",
-        name: "entrustDetails",
-        component: EntrustDetails,
-    },
-    {
-        path: "/positionDetails",
-        name: "positionDetails",
-        component: PositionDetails,
-    },
-    {
-        path: "/icoIndex",
-        name: "icoIndex",
-        component: IcoIndex,
-    },
-    {
-        path: "/loanIndex",
-        name: "loanIndex",
-        component: LoanIndex,
-    },
-    {
-        path: "/loanRules",
-        name: "loanRules",
-        component: LoanRules,
-    },
-    {
-        path: "/userLoanIndex",
-        name: "userLoanIndex",
-        component: UserLoanIndex,
-    },
-    {
-        path: "/rechargeHistory",
-        name: "rechargeHistory",
-        component: RechargeHistory,
-    },
-    {
-        path: "/withdrawHistory",
-        name: "withdrawHistory",
-        component: WithdrawHistory,
-    },
-    {
-        path: "/financialIndex",
-        name: "financialIndex",
-        component: FinancialIndex,
-    },
-    {
-        path: "/financialBuy",
-        name: "financialBuy",
-        component: FinancialBuy,
-    },
-    {
-        path: "/myFinancial",
-        name: "myFinancial",
-        component: MyFinancial,
-    },
+  {
+    path: "/applyPermission",
+    name: "applyPermission",
+    component: ApplyPermission,
+  },
+  {
+    path: "/splashScreen",
+    name: "splashScreen",
+    component: SplashScreen,
+  },
+  {
+    path: "/riskTips",
+    name: "riskTips",
+    component: RiskTips,
+  },
+  {
+    path: "/searchIcon",
+    name: "searchIcon",
+    component: SearchIcon,
+  },
+  {
+    path: "/notification",
+    name: "notification",
+    component: Notification,
+  },
+  {
+    path: "/indexUser",
+    name: "indexUser",
+    component: IndexUser,
+  },
+  {
+    path: "/userCenter",
+    name: "userCenter",
+    component: UserCenter,
+  },
+  {
+    path: "/marketDetails",
+    name: "marketDetails",
+    component: MarketDetails,
+  },
+  {
+    path: "/historyIndex",
+    name: "historyIndex",
+    component: HistoryIndex,
+  },
+  {
+    path: "/entrustDetails",
+    name: "entrustDetails",
+    component: EntrustDetails,
+  },
+  {
+    path: "/positionDetails",
+    name: "positionDetails",
+    component: PositionDetails,
+  },
+  {
+    path: "/icoIndex",
+    name: "icoIndex",
+    component: IcoIndex,
+  },
+  {
+    path: "/loanIndex",
+    name: "loanIndex",
+    component: LoanIndex,
+  },
+  {
+    path: "/loanRules",
+    name: "loanRules",
+    component: LoanRules,
+  },
+  {
+    path: "/userLoanIndex",
+    name: "userLoanIndex",
+    component: UserLoanIndex,
+  },
+  {
+    path: "/rechargeHistory",
+    name: "rechargeHistory",
+    component: RechargeHistory,
+  },
+  {
+    path: "/withdrawHistory",
+    name: "withdrawHistory",
+    component: WithdrawHistory,
+  },
+  {
+    path: "/financialIndex",
+    name: "financialIndex",
+    component: FinancialIndex,
+  },
+  {
+    path: "/financialBuy",
+    name: "financialBuy",
+    component: FinancialBuy,
+  },
+  {
+    path: "/myFinancial",
+    name: "myFinancial",
+    component: MyFinancial,
+  },
+  {
+    path: "/cloudComPowerIndex",
+    name: "cloudComPowerIndex",
+    component: CloudComPowerIndex,
+  },
+  {
+    path: "/comboDetails",
+    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,
+  },
+  {
+    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/HomeIndex.vue

@@ -35,36 +35,36 @@
     {
       key: "index",
       path: "/",
-      image: require("@/assets/icon/tabbar/home-clicked.png"),
-      selectedImage: require("@/assets/icon/tabbar/home-clicked.png"),
+      image: require("@/assets/icon/tabbar/home.svg"),
+      selectedImage: require("@/assets/icon/tabbar/home-clicked.svg"),
       text: "首页",
     },
     {
       key: "market",
       path: "/marketIndex",
-      image: require("@/assets/icon/tabbar/bitcoin-circle.png"),
-      selectedImage: require("@/assets/icon/tabbar/bitcoin-circle.png"),
+      image: require("@/assets/icon/tabbar/chart-2.svg"),
+      selectedImage: require("@/assets/icon/tabbar/chart-2-clicked.svg"),
       text: "行情",
     },
     {
       key: "bitcoin",
       path: "/bitcoin",
-      image: require("@/assets/icon/tabbar/bitcoin-circle.png"),
-      selectedImage: require("@/assets/icon/tabbar/bitcoin-circle.png"),
+      image: require("@/assets/icon/tabbar/bitcoin-circle.svg"),
+      selectedImage: require("@/assets/icon/tabbar/bitcoin-circle-clicked.svg"),
       text: "交易",
     },
     {
       key: "asset",
       path: "/assetIndex",
-      image: require("@/assets/icon/tabbar/wallet.png"),
-      selectedImage: require("@/assets/icon/tabbar/wallet.png"),
+      image: require("@/assets/icon/tabbar/wallet.svg"),
+      selectedImage: require("@/assets/icon/tabbar/wallet-clicked.svg"),
       text: "资产",
     },
     {
       key: "user",
       path: "/userIndex",
-      image: require("@/assets/icon/tabbar/user-circle.png"),
-      selectedImage: require("@/assets/icon/tabbar/user-circle.png"),
+      image: require("@/assets/icon/tabbar/user-circle.svg"),
+      selectedImage: require("@/assets/icon/tabbar/user-circle-clicked.svg"),
       text: "我的",
     },
   ];

src/views/asset/otc/Index.vue

@@ -0,0 +1,91 @@
+<template>
+  <!-- OTC-首页 -->
+  <div class="otc-index">
+    <router-view />
+    <div class="footer-tabbar">
+      <div
+        class="tabbar-item"
+        v-for="(item, index) in tabbarList"
+        :key="index"
+        @click="tabbarChange(item.key, item.path)">
+        <img
+          class="item-image"
+          :src="current === item.key ? item.selectedImage : item.image"
+          alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+  import { useRoute, useRouter } from "vue-router";
+  import { ref } from "vue";
+
+  const router = useRouter();
+
+  const current = ref("otcIndex");
+
+  const tabbarChange = (key, path) => {
+    current.value = key;
+    router.push(path);
+  };
+
+  const tabbarList = [
+    {
+      key: "otcIndex",
+      path: "/otcIndex",
+      image: require("@/assets/icon/asset/otcTabbar/first.svg"),
+      selectedImage: require("@/assets/icon/asset/otcTabbar/first-clicked.svg"),
+    },
+    {
+      key: "otcOrderIndex",
+      path: "/otcOrderIndex",
+      image: require("@/assets/icon/asset/otcTabbar/second.svg"),
+      selectedImage: require("@/assets/icon/asset/otcTabbar/second-clicked.svg"),
+    },
+    {
+      key: "otcMessageIndex",
+      path: "/otcMessageIndex",
+      image: require("@/assets/icon/asset/otcTabbar/third.svg"),
+      selectedImage: require("@/assets/icon/asset/otcTabbar/third-clicked.svg"),
+    },
+    {
+      key: "otcUserIndex",
+      path: "/otcUserIndex",
+      image: require("@/assets/icon/asset/otcTabbar/fourth.svg"),
+      selectedImage: require("@/assets/icon/asset/otcTabbar/fourth-clicked.svg"),
+    },
+  ];
+</script>
+<style lang="less" scoped>
+  .otc-index {
+    width: 100%;
+
+    .footer-tabbar {
+      position: fixed;
+      left: 15px;
+      bottom: 37px;
+      z-index: 99;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      width: 345px;
+      height: 57px;
+      background: #fff;
+      border: 1px solid #ebebeb;
+      border-radius: 16px;
+
+      .tabbar-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        flex: 1;
+
+        .item-image {
+          width: 19px;
+          height: 19px;
+        }
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,74 @@
+<template>
+  <!-- 消息-首页 -->
+  <HeaderNav headerText="消息"></HeaderNav>
+  <div class="message-index">
+    <div class="platform-service">
+      <div class="service-left">
+        <img src="@/assets/img/asset/platform-service.svg" class="platform-head" alt="" />
+        <div class="left-info">
+          <div class="info-name pf500 fs18 fc061237">平台客服</div>
+          <div class="info-message pf500 fs12 fc999999">消息内容文本显示</div>
+        </div>
+      </div>
+      <div class="service-right pf500 fs12 fc999999">11/07 22:55:50</div>
+    </div>
+    <div class="merchant-service margin-top17" v-for="(item, index) in 3" :key="index">
+      <div class="service-left">
+        <img src="@/assets/img/asset/Avatar.svg" class="platform-head" alt="" />
+        <div class="left-info">
+          <div class="info-name pf500 fs18 fc061237">商家昵称</div>
+          <div class="info-message pf500 fs12 fc999999">消息内容文本显示</div>
+        </div>
+      </div>
+      <div class="service-right pf500 fs12 fc999999">11/07 22:55:50</div>
+    </div>
+  </div>
+</template>
+<script setup>
+  import HeaderNav from "../../../index/components/HeaderNav.vue";
+</script>
+<style lang="less" scoped>
+  .message-index {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    margin-top: 48px;
+    width: 100%;
+
+    .margin-top17 {
+      margin-top: 17px;
+    }
+
+    .platform-service,
+    .merchant-service {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      width: 345px;
+      height: 56px;
+
+      .service-left {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        height: 56px;
+
+        .platform-head {
+          width: 56px;
+          height: 56px;
+        }
+
+        .left-info {
+          margin-left: 15px;
+
+          .info-message {
+            margin-top: 3px;
+          }
+        }
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,5 @@
+<template>
+  <div>2</div>
+</template>
+<script setup></script>
+<style lang="less" scoped></style>

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

@@ -0,0 +1,5 @@
+<template>
+  <div>3</div>
+</template>
+<script setup></script>
+<style lang="less" scoped></style>

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

@@ -0,0 +1,11 @@
+<template>
+  <img src="@/assets/icon/asset/c2c.svg" class="c2c" alt="" />
+</template>
+<script setup></script>
+<style lang="less" scoped>
+  .c2c {
+    margin-top: 13px;
+    width: 345px;
+    height: 100px;
+  }
+</style>

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

@@ -0,0 +1,5 @@
+<template>
+  <div>2</div>
+</template>
+<script setup></script>
+<style lang="less" scoped></style>

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

@@ -0,0 +1,119 @@
+<template>
+  <div class="otc-header">
+    <div class="header-content pf600 fs18 fc1F2937">
+      <img
+        class="left-arrow-image"
+        src="@/assets/icon/index/left-arrow.svg"
+        @click="toPath()" />
+      OTC交易
+      <div class="save pf500 fs14 fcDF384C">
+        <img src="@/assets/icon/index/Headphones.svg" class="service" alt="" />
+        <img src="@/assets/icon/asset/search-black.svg" class="search" alt="" />
+      </div>
+    </div>
+  </div>
+  <div class="index">
+    <div class="notifi-classifi">
+      <div class="pf600 fs18 fc121212" @click="messageChange('c2c')">C2C</div>
+      <div class="sys-notifi pf600 fs14 fcA8A8A8" @click="messageChange('fast')">
+        快捷交易
+      </div>
+      <div class="sys-notifi pf600 fs14 fcA8A8A8" @click="messageChange('bulk')">
+        大宗交易
+      </div>
+    </div>
+    <component :is="currentComponent" />
+  </div>
+</template>
+<script setup>
+  import { ref, computed } from "vue";
+  import C2C from "./C2C.vue";
+  import Fast from "./Fast.vue";
+  import Bulk from "./Bulk.vue";
+
+  const current = ref("c2c");
+  const componentsMap = {
+    c2c: C2C,
+    fast: Fast,
+    bulk: Bulk,
+  };
+  const currentComponent = computed(() => componentsMap[current.value]);
+
+  const messageChange = (key) => {
+    current.value = key;
+  };
+</script>
+<style lang="less" scoped>
+  .otc-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: 12px;
+        right: 16px;
+        height: 24px;
+
+        .search {
+          margin-left: 20px;
+          width: 17px;
+          height: 17px;
+        }
+
+        .service {
+          margin-top: 2px;
+        }
+      }
+    }
+  }
+
+  .index {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    margin-top: 48px;
+    width: 100%;
+
+    .notifi-classifi {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: flex-end;
+      margin-top: 10px;
+      width: 349px;
+      height: 24px;
+
+      .sys-notifi {
+        margin-left: 42px;
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,5 @@
+<template>
+  <div>4</div>
+</template>
+<script setup></script>
+<style lang="less" scoped></style>

src/views/index/ApplyPermission.vue

@@ -9,12 +9,17 @@
         <div>正在申请访问你的钱包地址，</div>
         <div>你确认将钱包地址公开给此网站吗?</div>
       </div>
-      <div class="sure-btn pf600 fs14 fcFFFFFF">确认</div>
+      <div class="sure-btn pf600 fs14 fcFFFFFF" @click="sure">确认</div>
       <div class="cancel-btn pf400 fs14 fcDF384C">取消</div>
     </div>
   </div>
 </template>
-<script setup></script>
+<script setup>
+  const sure = async () => {
+    const accounts = await ethereum.request({ method: "eth_requestAccounts" });
+    console.log(1, accounts);
+  };
+</script>
 <style lang="less" scoped>
   .apply-permission {
     position: fixed;

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();
 
@@ -85,8 +87,8 @@
       image: require("@/assets/img/index/Rectangle 8.svg"),
     },
     {
-      name: "提币",
-      image: require("@/assets/img/index/Rectangle 9.svg"),
+      name: "OTC交易",
+      image: require("@/assets/img/index/user/otc.svg"),
     },
   ];
 
@@ -100,7 +102,7 @@
     } else if (index == 6) {
       router.push("/rechargeIndex");
     } else if (index == 7) {
-      router.push("/withdrawIndex");
+      router.push("/otcIndex");
     }
   };
 
@@ -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

@@ -0,0 +1,284 @@
+<template>
+  <!-- 套餐详情 -->
+  <div class="loan-header">
+    <div class="header-content pf600 fs18 fc1F2937">
+      <img
+        class="left-arrow-image"
+        src="../../../assets/icon/index/left-arrow.svg"
+        @click="toPath()" />
+      套餐名称
+      <div class="save pf500 fs14 fcDF384C">
+        <img src="../../../assets/icon/index/Headphones.svg" alt="" />
+      </div>
+    </div>
+  </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 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 {
+    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: 15px;
+        width: 9px;
+        height: 16px;
+      }
+
+      .save {
+        position: absolute;
+        top: 12px;
+        right: 16px;
+        width: 24px;
+        height: 24px;
+      }
+    }
+  }
+
+  .combo-details {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    margin-top: 48px;
+    width: 100%;
+
+    .kuangji {
+      margin-top: 20px;
+      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;
+        }
+      }
+    }
+
+    .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/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

@@ -0,0 +1,240 @@
+<template>
+  <!-- 云算力-首页 -->
+  <div class="loan-header">
+    <div class="header-content pf600 fs18 fc121212">
+      <img
+        class="left-arrow-image"
+        src="../../../assets/icon/index/left-arrow.svg"
+        @click="toPath()" />
+      云算力
+      <div class="save pf600 fs14 fc333333" @click="goMyPower">我的算力</div>
+    </div>
+  </div>
+  <div class="cloud-power-index">
+    <img src="@/assets/img/index/yunsuanli-banner.svg" class="yunsuanli-banner" alt="" />
+    <div class="cloud-combo">
+      <div class="title pf600 fs18 fc121212">算力套餐</div>
+      <div class="combo-main">
+        <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" @click="goComboDetails">
+            立即购买
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+  import { useRoute, useRouter } from "vue-router";
+
+  const router = useRouter();
+
+  const toPath = () => {
+    router.back();
+  };
+
+  const goComboDetails = () => {
+    router.push("/comboDetails");
+  };
+
+  const goMyPower = () => {
+    router.push("/myPower");
+  };
+</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: 15px;
+        right: 16px;
+        height: 24px;
+      }
+    }
+  }
+
+  .cloud-power-index {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    margin-top: 48px;
+    width: 100%;
+
+    .yunsuanli-banner {
+      width: 345px;
+      height: 100px;
+    }
+
+    .cloud-combo {
+      margin-top: 10px;
+      width: 345px;
+
+      .title {
+        height: 24px;
+        line-height: 24px;
+      }
+
+      .combo-main {
+        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/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>

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/Buy.vue

@@ -25,7 +25,10 @@
       <input type="text" class="input pf400 fs14 fc333333" placeholder="最少1000.00" />
       <div class="all pf400 fs14 fc333333">USDT <span class="fcDF384C">全部</span></div>
     </div>
-    <div class="use-number pf400 fs12 fc333333">可用&nbsp; 215.0508 USDT</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="message margin-top20 pf500 fs14 fc666666">
       <div>理财周期</div>
       <div>30天</div>
@@ -218,6 +221,12 @@
       margin-top: 7px;
       width: 345px;
       height: 18px;
+
+      .qianbao {
+        margin-left: 8px;
+        width: 14px;
+        height: 14px;
+      }
     }
 
     .message {

src/views/index/financial/Index.vue

@@ -26,7 +26,11 @@
       <img src="@/assets/img/index/Rectangle 1.svg" alt="" />
     </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="goMenu(index)">
         <img :src="item.image" alt="" />
         <div class="item-text pf400 fs14 fc666666">{{ item.name }}</div>
       </div>
@@ -69,6 +73,16 @@
     router.push("/financialBuy");
   };
 
+  const goMenu = (index) => {
+    if (index == 0) {
+      router.push("/cloudComPowerIndex");
+    } else if (index == 1) {
+      router.push("/loanIndex");
+    } else if (index == 2) {
+      router.push("/stakingIndex");
+    }
+  };
+
   const indexMenu = [
     {
       name: "云算力",

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>