1.行情-切换币种 完成 2.行情-行情自行无数据页面 完成 3.资产-首页 完成 4.资产-交易历史-当前委托 70%

src/assets/icon/asset/asset-index.svg

@@ -0,0 +1,46 @@
+<svg width="369" height="220" viewBox="0 0 369 220" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.25" filter="url(#filter0_d_13_1093)">
+<rect x="12" y="12" width="345" height="178" rx="12" fill="#DF384C" fill-opacity="0.5" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter1_d_13_1093)">
+<g clip-path="url(#clip0_13_1093)">
+<path d="M334.141 30.0874C341.4 29.4288 356.067 32.1954 356.668 48.5298C357.268 64.8645 356.918 152.376 356.668 194.09C356.918 199.14 351.261 208.975 326.632 207.921C295.846 206.604 207.184 202.001 184.716 202C167.287 202 74.3359 205.945 30.0338 207.921C24.0267 208.36 12.0134 204.496 12.0133 185.528V45.895C11.7631 40.6259 15.0166 30.0876 30.0338 30.0874C45.0515 30.0874 91.8572 31.4053 113.382 32.064H244.787L334.141 30.0874Z" fill="url(#paint0_linear_13_1093)"/>
+<g opacity="0.24">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M281.699 -30.0418C313.895 -60.1032 354.556 -88.4372 394.305 -69.8584C440.771 -48.1398 473.452 3.56055 459.5 53.0631C447.518 95.5725 391.346 90.4454 347.551 96.0241C304.795 101.47 251.46 120.202 231.556 82.0988C210.67 42.1148 248.588 0.873505 281.699 -30.0418Z" stroke="#E8F2FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M294.699 -38.0418C326.895 -68.1032 367.556 -96.4372 407.305 -77.8584C453.771 -56.1398 486.452 -4.43945 472.5 45.0631C460.518 87.5725 404.346 82.4454 360.551 88.0241C317.795 93.4704 264.46 112.202 244.556 74.0988C223.67 34.1148 261.588 -7.1265 294.699 -38.0418Z" stroke="#E8F2FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M307.699 -44.0418C339.895 -74.1032 380.556 -102.437 420.305 -83.8584C466.771 -62.1398 499.452 -10.4395 485.5 39.0631C473.518 81.5725 417.346 76.4454 373.551 82.0241C330.795 87.4704 277.46 106.202 257.556 68.0988C236.67 28.1148 274.588 -13.1265 307.699 -44.0418Z" stroke="#E8F2FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M323.699 -53.0418C355.895 -83.1032 396.556 -111.437 436.305 -92.8584C482.771 -71.1398 515.452 -19.4395 501.5 30.0631C489.518 72.5725 433.346 67.4454 389.551 73.0241C346.795 78.4704 293.46 97.2024 273.556 59.0988C252.67 19.1148 290.588 -22.1265 323.699 -53.0418Z" stroke="#E8F2FF"/>
+</g>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_13_1093" x="0" y="0" width="369" height="202" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="6"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.246667 0 0 0 0 0.489943 0 0 0 0 0.8 0 0 0 0.12 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_13_1093"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_13_1093" result="shape"/>
+</filter>
+<filter id="filter1_d_13_1093" x="0" y="18" width="369" height="202" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="6"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.246667 0 0 0 0 0.489943 0 0 0 0 0.8 0 0 0 0.12 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_13_1093"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_13_1093" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_13_1093" x1="352.252" y1="38.0005" x2="19.8016" y2="217.454" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F74545"/>
+<stop offset="0.602112" stop-color="#DF384C"/>
+<stop offset="1" stop-color="#DF384C"/>
+</linearGradient>
+<clipPath id="clip0_13_1093">
+<rect x="12" y="30" width="345" height="178" rx="12" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/icon/asset/clock-rewind.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="M17.025 10.125L15.5254 8.625L14.025 10.125M15.75 9C15.75 12.7279 12.7279 15.75 9 15.75C5.27208 15.75 2.25 12.7279 2.25 9C2.25 5.27208 5.27208 2.25 9 2.25C11.4764 2.25 13.6414 3.5836 14.8159 5.57182M9 5.25V9L11.25 10.5" stroke="#A8A8A8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/icon/asset/divider.svg

@@ -0,0 +1,10 @@
+<svg width="2" height="52" viewBox="0 0 2 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect opacity="0.3" width="1.23419" height="51.0505" fill="url(#paint0_linear_13_1326)"/>
+<defs>
+<linearGradient id="paint0_linear_13_1326" x1="0.617094" y1="0" x2="0.617094" y2="51.0505" gradientUnits="userSpaceOnUse">
+<stop stop-color="#BDBDBD" stop-opacity="0"/>
+<stop offset="0.489583" stop-color="#BDBDBD"/>
+<stop offset="1" stop-color="#BDBDBD" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>

src/assets/less/color.less

@@ -63,3 +63,7 @@
 .fcFF7171 {
   color: #ff7171;
 }
+
+.fc767676 {
+  color: #767676;
+}

src/views/asset/Index.vue

@@ -1,3 +1,435 @@
-<template><div>asset</div></template>
-<script setup></script>
-<style lang="less" scoped></style>
+<template>
+  <div class="asset-index">
+    <div class="asset-header">
+      <div class="header-content pf600 fs18 fc121212">
+        资产
+        <div class="save pf600 fs14 fc333333">我的资产</div>
+      </div>
+    </div>
+    <div class="asset-total">
+      <div class="total-text pf400 fs16 fcFFFFFF">总资产估值(USDT)</div>
+      <div class="all-asset pf600 fs32 fcFFFFFF">1,125,158.00</div>
+      <div class="about-asset pf500 fs16 fcFFFFFF">≈35,458.00</div>
+      <div class="asset-func">
+        <div class="asset-item">
+          <div class="item-top pf400 fs12 fcFFFFFF">可用资金(USDT)</div>
+          <div class="item-bottom pf500 fs16 fcFFFFFF">5,678.00</div>
+        </div>
+        <div class="asset-item">
+          <div class="item-top pf400 fs12 fcFFFFFF">浮动盈亏</div>
+          <div class="item-bottom pf500 fs16 fcFFFFFF">5,678.00</div>
+        </div>
+        <div class="asset-item">
+          <div class="item-top pf400 fs12 fcFFFFFF">占用资金(USDT)</div>
+          <div class="item-bottom pf500 fs16 fcFFFFFF">5,678.00</div>
+        </div>
+      </div>
+    </div>
+    <div class="asset-money">
+      <div class="money-item">
+        <div class="item-img">
+          <img src="../../assets/img/index/Rectangle 8.svg" />
+        </div>
+        <div class="pf400 fs14 fc666666">充币</div>
+        <img src="../../assets/icon/asset/divider.svg" alt="" class="divider-img" />
+      </div>
+      <div class="money-item">
+        <div class="item-img">
+          <img src="../../assets/img/index/Rectangle 9.svg" />
+        </div>
+        <div class="pf400 fs14 fc666666">提币</div>
+        <img src="../../assets/icon/asset/divider.svg" alt="" class="divider-img" />
+      </div>
+      <div class="money-item">
+        <div class="item-img">
+          <img src="../../assets/img/index/user/huazhuan.svg" />
+        </div>
+        <div class="pf400 fs14 fc666666">划转</div>
+      </div>
+    </div>
+    <div class="asset-details">
+      <div class="details-title">
+        <div class="notifi-classifi">
+          <div class="pf600 fs18 fc121212">持仓明细</div>
+          <div class="sys-notifi pf600 fs14 fcA8A8A8">ICO明细</div>
+        </div>
+        <div class="history pf600 fs14 fcA8A8A8">
+          <img src="../../assets/icon/asset/clock-rewind.svg" alt="" />
+          历史
+        </div>
+      </div>
+      <div class="details-main">
+        <div class="details-item" v-for="(item, index) in 2" :key="index">
+          <div class="item-name">
+            <div class="name-left">
+              <img src="../../assets/icon/coin/bnb.svg" alt="" class="left-coin" />
+              <div class="name-area">
+                <div class="pf500 fs16 fc121212">BTC/USDT 永续</div>
+                <div class="name-flag">
+                  <div class="flag-buy pf500 fs10 fcFFFFFF">买入</div>
+                  <div class="flag-cang pf500 fs10 fcFFFFFF">逐仓 20X</div>
+                </div>
+              </div>
+            </div>
+            <div class="name-right">
+              <div class="pf500 fs12 fc767676">2025-11-04, 16:30</div>
+              <div class="pf500 fs12 fc767676">下单时间</div>
+            </div>
+          </div>
+          <div class="item-line"></div>
+          <div class="item-yingkui">
+            <div class="pf500 fs12 fcA8A8A8">未实现盈亏(USDT)</div>
+            <div class="pf500 fs12 fc45B26B">+0.2015 USDT</div>
+          </div>
+          <div class="item-price">
+            <div class="price-top">
+              <div class="price-item">
+                <div class="pf500 fs12 fcA8A8A8">持仓数量</div>
+                <div class="pf500 fs12 fc333333">0.215 USDT</div>
+              </div>
+              <div class="price-item">
+                <div class="pf500 fs12 fcA8A8A8">开仓价格</div>
+                <div class="pf500 fs12 fc333333">0.215 USDT</div>
+              </div>
+              <div class="price-item">
+                <div class="pf500 fs12 fcA8A8A8">标记价格</div>
+                <div class="pf500 fs12 fc333333">0.215 USDT</div>
+              </div>
+            </div>
+            <div class="price-bottom">
+              <div class="price-item">
+                <div class="pf500 fs12 fcA8A8A8">保证金</div>
+                <div class="pf500 fs12 fc333333">0.215 USDT</div>
+              </div>
+              <div class="price-item">
+                <div class="pf500 fs12 fcA8A8A8">强平价格</div>
+                <div class="pf500 fs12 fc333333">0.215 USDT</div>
+              </div>
+              <div class="price-item">
+                <div class="pf500 fs12 fcA8A8A8">收益率</div>
+                <div class="pf500 fs12 fc333333">0.215 USDT</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+  import { useRouter } from "vue-router";
+
+  const router = useRouter();
+</script>
+<style lang="less" scoped>
+  .asset-index {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    margin-bottom: 100px;
+    width: 100%;
+
+    .asset-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: 16px;
+          right: 16px;
+        }
+      }
+    }
+
+    .asset-total {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: center;
+      margin-top: 48px;
+      width: 345px;
+      height: 196px;
+      background-image: url("../../assets/icon/asset/asset-index.svg");
+      background-repeat: no-repeat;
+      background-position: center center;
+
+      .total-text {
+        margin-top: 34px;
+        width: 318px;
+        height: 22px;
+        line-height: 22px;
+        letter-spacing: -0.7%;
+      }
+
+      .all-asset {
+        margin-top: 3px;
+        width: 318px;
+        height: 44px;
+        line-height: 44px;
+      }
+
+      .about-asset {
+        margin-top: 1px;
+        width: 318px;
+        height: 22px;
+        line-height: 22px;
+      }
+
+      .asset-func {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        margin-top: 9px;
+        width: 318px;
+        height: 44px;
+
+        .asset-item {
+          display: flex;
+          flex-direction: column;
+          justify-content: space-around;
+          align-items: center;
+          height: 44px;
+        }
+      }
+    }
+
+    .asset-money {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      margin-top: 9px;
+      width: 345px;
+      height: 80px;
+
+      .money-item {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+        width: 114px;
+        height: 80px;
+
+        .divider-img {
+          position: absolute;
+          top: 14.5px;
+          right: 0;
+        }
+
+        .item-img {
+          margin-bottom: 3px;
+          width: 32px;
+          height: 32px;
+
+          img {
+            width: 32px;
+            height: 32px;
+          }
+        }
+      }
+    }
+
+    .asset-details {
+      margin-top: 0.7px;
+      width: 345px;
+
+      .details-title {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        width: 100%;
+        height: 24px;
+
+        .notifi-classifi {
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-start;
+          align-items: flex-end;
+          width: 345px;
+          height: 24px;
+
+          .sys-notifi {
+            margin-left: 47px;
+          }
+        }
+
+        .history {
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-start;
+          align-items: flex-end;
+          width: 60px;
+          height: 24px;
+
+          img {
+            margin-right: 3px;
+            width: 18px;
+            height: 18px;
+          }
+        }
+      }
+
+      .details-main {
+        margin-top: 10px;
+        width: 100%;
+
+        .details-item {
+          display: flex;
+          flex-direction: column;
+          justify-content: flex-start;
+          align-items: center;
+          margin-top: 10px;
+          width: 345px;
+          height: 182px;
+          border: 1px solid #ebebeb;
+          border-radius: 8px;
+
+          .item-name {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            margin-top: 10px;
+            width: 320px;
+            height: 40px;
+
+            .name-left {
+              display: flex;
+              flex-direction: row;
+              justify-content: flex-start;
+              height: 40px;
+
+              .left-coin {
+                width: 40px;
+                height: 40px;
+              }
+
+              .name-area {
+                display: flex;
+                flex-direction: column;
+                justify-content: space-evenly;
+                margin-left: 8px;
+                height: 40px;
+
+                .name-flag {
+                  display: flex;
+                  flex-direction: row;
+                  justify-content: flex-start;
+                  height: 15px;
+
+                  .flag-buy {
+                    width: 33px;
+                    height: 15px;
+                    line-height: 15px;
+                    text-align: center;
+                    background: #45b26b;
+                    border-radius: 3px;
+                  }
+
+                  .flag-cang {
+                    margin-left: 2px;
+                    width: 49px;
+                    height: 15px;
+                    line-height: 15px;
+                    text-align: center;
+                    background: #a8a8a8;
+                    border-radius: 3px;
+                  }
+                }
+              }
+            }
+
+            .name-right {
+              display: flex;
+              flex-direction: column;
+              justify-content: space-evenly;
+              align-items: flex-end;
+              height: 40px;
+            }
+          }
+
+          .item-line {
+            margin-top: 8px;
+            width: 320px;
+            height: 1.5px;
+            background: #e9e9e9;
+          }
+
+          .item-yingkui {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+            margin-top: 6px;
+            width: 320px;
+            height: 20px;
+          }
+
+          .item-price {
+            margin-top: 7px;
+            width: 320px;
+            height: 85px;
+
+            .price-top {
+              display: flex;
+              flex-direction: row;
+              justify-content: space-between;
+              width: 100%;
+              height: 38px;
+
+              .price-item {
+                display: flex;
+                flex-direction: column;
+                justify-content: space-evenly;
+                align-items: center;
+                width: 80px;
+                height: 38px;
+              }
+            }
+
+            .price-bottom {
+              display: flex;
+              flex-direction: row;
+              justify-content: space-between;
+              margin-top: 9px;
+              width: 100%;
+              height: 38px;
+
+              .price-item {
+                display: flex;
+                flex-direction: column;
+                justify-content: space-evenly;
+                align-items: center;
+                width: 80px;
+                height: 38px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+</style>

src/views/market/details/Index.vue

@@ -4,7 +4,7 @@
       <div class="header-back" @click="goBack">
         <img src="../../../assets/icon/market/left-arrow.svg" alt="" />
       </div>
-      <div class="header-icon pf600 fs18 fc121212">
+      <div class="header-icon pf600 fs18 fc121212" @click="changeIconFlag = true">
         BTCUSDT
         <img src="../../../assets/icon/market/btn_triangle_down_bk.svg" alt="" />
       </div>
@@ -27,17 +27,24 @@
       </div>
     </div>
     <component :is="currentComponent" />
+    <ChangeIcon v-show="changeIconFlag" @changeIconClose="changeIconClose"></ChangeIcon>
   </div>
 </template>
 <script setup>
   import Info from "./Info.vue";
   import MarketConditions from "./MarketConditions.vue";
   import TransactionData from "./TransactionData.vue";
+  import ChangeIcon from "../dialog/ChangeIcon.vue";
   import { ref, computed } from "vue";
   import { useRouter } from "vue-router";
 
   const router = useRouter();
 
+  const changeIconFlag = ref(false);
+  const changeIconClose = () => {
+    changeIconFlag.value = false;
+  };
+
   const current = ref("marketConditions");
   const componentsMap = {
     info: Info,

src/views/market/dialog/ChangeIcon.vue

@@ -0,0 +1,299 @@
+<template>
+  <div class="change-icon">
+    <div class="apply-mask" @click="emits('changeIconClose')"></div>
+    <div class="apply-content">
+      <div class="slide-line"></div>
+      <div class="notifi-classifi">
+        <div class="pf600 fs18 fc121212">自选</div>
+        <div class="sys-notifi pf600 fs14 fcA8A8A8">持仓</div>
+      </div>
+      <div class="search-input">
+        <input
+          type="text"
+          class="input pf400 fs16 fc4B5563"
+          placeholder="搜索您关心的币种" />
+        <img src="../../../assets/icon/index/search-input.svg" alt="" />
+      </div>
+      <div class="coin-head">
+        <div class="name">
+          <div class="name-text pf400 fs12 fc666666">交易对</div>
+          <div class="list-sort">
+            <div class="sort-up">
+              <img src="../../../assets/icon/index/Triangle.svg" alt="" />
+            </div>
+            <div class="sort-bottom">
+              <img src="../../../assets/icon/index/Triangle 2.svg" alt="" />
+            </div>
+          </div>
+        </div>
+        <div class="name price">
+          <div class="name-text pf400 fs12 fc666666">最新价</div>
+          <div class="list-sort">
+            <div class="sort-up">
+              <img src="../../../assets/icon/index/Triangle.svg" alt="" />
+            </div>
+            <div class="sort-bottom">
+              <img src="../../../assets/icon/index/Triangle 2.svg" alt="" />
+            </div>
+          </div>
+        </div>
+        <div class="name today">
+          <div class="name-text pf400 fs12 fc666666">今日涨跌幅</div>
+          <div class="list-sort">
+            <div class="sort-up">
+              <img src="../../../assets/icon/index/Triangle.svg" alt="" />
+            </div>
+            <div class="sort-bottom">
+              <img src="../../../assets/icon/index/Triangle 2.svg" alt="" />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="coin-body">
+        <div
+          class="body-item"
+          v-for="(item, index) in 5"
+          :key="index"
+          @click="goCoinDetails">
+          <div class="item-left">
+            <div class="coin-img">
+              <img src="../../../assets/img/index/Frame 7.svg" alt="" />
+            </div>
+            <div class="coin-name">
+              <div class="upper-name pf500 fs14 fc2C3131">Ethereum</div>
+              <div class="letter-name pf400 fs10 fcA9A9A9">ETH</div>
+            </div>
+            <div class="coin-echars"></div>
+            <div class="coin-price">
+              <div class="upper-price pf500 fs14 fc2C3131">48.503.12</div>
+              <div class="letter-price pf400 fs10 fcA9A9A9">￥ 4250.00</div>
+            </div>
+          </div>
+          <div class="item-right pf500 fs12 fcFFFFFF">+2.18%</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+  const emits = defineEmits(["changeIconClose"]);
+</script>
+<style lang="less" scoped>
+  .change-icon {
+    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: 646px;
+      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: 15px;
+        width: 349px;
+        height: 24px;
+
+        .sys-notifi {
+          margin-left: 35px;
+        }
+      }
+
+      .search-input {
+        position: relative;
+        margin-top: 20px;
+        width: 343px;
+        height: 48px;
+
+        .input {
+          padding-left: 40px;
+          width: 100%;
+          height: 100%;
+          border: 1px solid #cbd5e1;
+          border-radius: 64px;
+          box-sizing: border-box;
+          outline: none;
+        }
+
+        img {
+          position: absolute;
+          top: 15px;
+          left: 14px;
+          width: 17px;
+          height: 17px;
+        }
+      }
+
+      .coin-head {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        margin-top: 16px;
+        width: 349px;
+        height: 24px;
+
+        .name {
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-start;
+          align-items: center;
+          height: 24px;
+
+          .list-sort {
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-start;
+            margin-left: 4px;
+            width: 8px;
+            height: 16px;
+
+            .sort-up,
+            .sort-bottom {
+              display: flex;
+              flex-direction: row;
+              justify-content: center;
+              align-items: center;
+              width: 8px;
+              height: 8px;
+
+              img {
+                width: 8px;
+                height: 4px;
+              }
+            }
+          }
+        }
+
+        .price {
+          margin-left: 128px;
+        }
+
+        .today {
+          margin-left: 47px;
+        }
+      }
+
+      .coin-body {
+        margin-top: 9px;
+        width: 349px;
+
+        .body-item {
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-start;
+          align-items: center;
+          margin-top: 23.5px;
+          width: 100%;
+          height: 38px;
+
+          &:nth-child(1) {
+            margin-top: 0;
+          }
+
+          .item-left {
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-start;
+            align-items: center;
+            width: 276px;
+            height: 100%;
+
+            .coin-img {
+              width: 32px;
+              height: 32px;
+
+              img {
+                width: 32px;
+                height: 32px;
+              }
+            }
+
+            .coin-name {
+              margin-left: 10px;
+              width: 85px;
+              height: 34px;
+
+              .upper-name {
+                height: 20px;
+                line-height: 20px;
+              }
+
+              .letter-name {
+                height: 14px;
+                line-height: 14px;
+              }
+            }
+
+            .coin-echars {
+              width: 60px;
+              height: 35px;
+            }
+
+            .coin-price {
+              margin-left: 13px;
+              width: 75px;
+              height: 38px;
+
+              .upper-price {
+                height: 20px;
+                line-height: 20px;
+                text-align: right;
+              }
+
+              .letter-price {
+                height: 16px;
+                line-height: 16px;
+                text-align: right;
+              }
+            }
+          }
+
+          .item-right {
+            margin-left: 8px;
+            width: 61px;
+            height: 25px;
+            line-height: 25px;
+            text-align: center;
+            background: #45b26b;
+            border-radius: 5px;
+          }
+        }
+      }
+    }
+  }
+</style>