今日工作12.1 1，解决代码合并导致的代码缺失问题 2，解决刷新页面后提示cannot get问题 3，C2C购买 完成 4，C2C出售 完成 5，快捷交易-购买 完成 6，快捷交易-出售 完成 7，大宗交易-购买 完成 8，大宗交易-出售 完成 9，C2C-支付方式 完成 10，C2C-金额 完成 11，C2C-出售 30% 12，底部我的去掉 完成

src/assets/icon/asset/duihao.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="9" viewBox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 4.33333L4.33333 7.66667L11 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/icon/asset/ic_check_blue.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="20" height="20" rx="10" fill="#DF384C"/>
+<path d="M5.3335 10.0003L8.66683 13.3337L15.3335 6.66699" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/views/HomeIndex.vue

@@ -60,13 +60,13 @@
       selectedImage: require("@/assets/icon/tabbar/wallet-clicked.svg"),
       text: "资产",
     },
-    {
-      key: "user",
-      path: "/userIndex",
-      image: require("@/assets/icon/tabbar/user-circle.svg"),
-      selectedImage: require("@/assets/icon/tabbar/user-circle-clicked.svg"),
-      text: "我的",
-    },
+    // {
+    //   key: "user",
+    //   path: "/userIndex",
+    //   image: require("@/assets/icon/tabbar/user-circle.svg"),
+    //   selectedImage: require("@/assets/icon/tabbar/user-circle-clicked.svg"),
+    //   text: "我的",
+    // },
   ];
 </script>
 <style lang="less" scoped>

src/views/asset/dialog/Amount.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="amount">
+    <div class="apply-mask" @click="emits('amountClose')"></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="0.00 " />
+        <div class="pf500 fs14 fc333333">CNY</div>
+      </div>
+      <div class="sure-btn pf600 fs14 fcFFFFFF">确认</div>
+      <div class="reset pf500 fs14 fcDF384C">重置</div>
+    </div>
+  </div>
+</template>
+<script setup>
+  const emits = defineEmits(["amountClose"]);
+</script>
+<style lang="less" scoped>
+  .amount {
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 1000;
+    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: 273px;
+      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: 21px;
+        width: 345px;
+        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;
+        }
+      }
+
+      .sure-btn {
+        margin-top: 41px;
+        width: 311px;
+        height: 40px;
+        line-height: 40px;
+        text-align: center;
+        border-radius: 100px;
+        background: #df384c;
+      }
+
+      .reset {
+        margin-top: 15px;
+      }
+    }
+  }
+</style>

src/views/asset/dialog/Filter.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="filter">
+    <div class="apply-mask" @click="emits('filterClose')"></div>
+    <div class="apply-content">
+      <div class="slide-line"></div>
+      <div class="apply-text pf600 fs18 fc121212">支付方式</div>
+      <div class="payment-main">
+        <div
+          class="payment-item"
+          v-for="(item, index) in paymentWayData"
+          :key="index"
+          @click="paymentChoice(index)">
+          <div class="pf500 fs16 fc121212">{{ item }}</div>
+          <div class="item-selected">
+            <div class="selected" v-if="currentChoice == index">
+              <img src="@/assets/icon/asset/duihao.svg" alt="" />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="sure-btn pf600 fs14 fcFFFFFF">确认</div>
+      <div class="reset pf500 fs14 fcDF384C">重置</div>
+    </div>
+  </div>
+</template>
+<script setup>
+  import { ref } from "vue";
+  const emits = defineEmits(["filterClose"]);
+
+  const paymentWayData = ["全部", "交易过", "我的关注", "仅展示可交易单"];
+  const currentChoice = ref(0);
+
+  const paymentChoice = (index) => {
+    currentChoice.value = index;
+  };
+</script>
+<style lang="less" scoped>
+  .filter {
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 1000;
+    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: 400px;
+      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: 21px;
+        width: 345px;
+        height: 24px;
+        line-height: 24px;
+        letter-spacing: 0.2px;
+      }
+
+      .payment-main {
+        margin-top: 15px;
+        width: 345px;
+
+        .payment-item {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          align-items: center;
+          margin-top: 15px;
+          width: 345px;
+          height: 25px;
+
+          &:first-child {
+            margin-top: 0px;
+          }
+
+          .item-selected {
+            width: 20px;
+            height: 20px;
+            border: 1px solid #a8a8a8;
+            border-radius: 50%;
+
+            .selected {
+              display: flex;
+              flex-direction: row;
+              justify-content: center;
+              align-items: center;
+              width: 20px;
+              height: 20px;
+              background: #df384c;
+              border-radius: 50%;
+
+              img {
+                width: 10px;
+                height: 6.67px;
+              }
+            }
+          }
+        }
+      }
+
+      .sure-btn {
+        margin-top: 65px;
+        width: 311px;
+        height: 40px;
+        line-height: 40px;
+        text-align: center;
+        border-radius: 100px;
+        background: #df384c;
+      }
+
+      .reset {
+        margin-top: 15px;
+      }
+    }
+  }
+</style>

src/views/asset/dialog/PaymentWay.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="payment-way">
+    <div class="apply-mask" @click="emits('paymentWayClose')"></div>
+    <div class="apply-content">
+      <div class="slide-line"></div>
+      <div class="apply-text pf600 fs18 fc121212">支付方式</div>
+      <div class="payment-main">
+        <div class="payment-item" v-for="(item, index) in paymentWayData" :key="index">
+          <div class="pf500 fs16 fc121212">{{ item }}</div>
+          <img src="@/assets/icon/asset/ic_check_blue.svg" alt="" />
+        </div>
+      </div>
+      <div class="sure-btn pf600 fs14 fcFFFFFF">确认</div>
+      <div class="reset pf500 fs14 fcDF384C">重置</div>
+    </div>
+  </div>
+</template>
+<script setup>
+  const emits = defineEmits(["paymentWayClose"]);
+
+  const paymentWayData = ["全部", "支付宝", "银行卡"];
+</script>
+<style lang="less" scoped>
+  .payment-way {
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 1000;
+    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: 313px;
+      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: 21px;
+        width: 345px;
+        height: 24px;
+        line-height: 24px;
+        letter-spacing: 0.2px;
+      }
+
+      .payment-main {
+        margin-top: 15px;
+        width: 345px;
+
+        .payment-item {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          align-items: center;
+          margin-top: 15px;
+          width: 345px;
+          height: 25px;
+
+          &:first-child {
+            margin-top: 0px;
+          }
+
+          img {
+            width: 20px;
+            height: 20px;
+          }
+        }
+      }
+
+      .sure-btn {
+        margin-top: 24px;
+        width: 311px;
+        height: 40px;
+        line-height: 40px;
+        text-align: center;
+        border-radius: 100px;
+        background: #df384c;
+      }
+
+      .reset {
+        margin-top: 15px;
+      }
+    }
+  }
+</style>

src/views/asset/dialog/SellAndBuy.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="sell-and-buy">
+    <div class="apply-mask" @click="emits('amountClose')"></div>
+    <div class="apply-content">
+      <div class="slide-line"></div>
+      <div class="apply-text pf600 fs18 fc121212">出售</div>
+      <div class="goods-info">
+        <div class="info-left"></div>
+        <div class="info-right"></div>
+      </div>
+      <div class="sure-btn pf600 fs14 fcFFFFFF">确定出售</div>
+    </div>
+  </div>
+</template>
+<script setup>
+  const emits = defineEmits(["amountClose"]);
+</script>
+<style lang="less" scoped>
+  .sell-and-buy {
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 1000;
+    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;
+      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: 21px;
+        height: 24px;
+        line-height: 24px;
+        letter-spacing: 0.2px;
+      }
+
+      .goods-info {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        margin-top: 11px;
+        width: 345px;
+
+        .info-left {
+        }
+
+        .info-right {
+        }
+      }
+
+      .sure-btn {
+        margin-top: 47px;
+        width: 311px;
+        height: 40px;
+        line-height: 40px;
+        text-align: center;
+        border-radius: 100px;
+        background: #df384c;
+      }
+    }
+  }
+</style>

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

@@ -1,5 +1,368 @@
 <template>
-  <div>3</div>
+  <img src="@/assets/icon/asset/dazong-sell-banner.svg" class="c2c" alt="" />
+  <div class="buy-sell">
+    <div class="buy-left">
+      <div class="buy-btn pf500 fs14 fcFFFFFF">购买</div>
+      <div class="sell-btn pf500 fs14 fc999999">出售</div>
+    </div>
+    <div class="buy-right">
+      <div class="text pf400 fs14 fc333333">CNY</div>
+      <img src="@/assets/icon/asset/bottom-arrow-black.svg" alt="" />
+    </div>
+  </div>
+  <div class="filter-area">
+    <div class="filter-left">
+      <div class="left-coin">
+        <img src="@/assets/icon/coin/bnb.svg" class="coin" alt="" />
+        <div class="text pf400 fs14 fc333333">BTC</div>
+        <img src="@/assets/icon/asset/bottom-arrow-black.svg" class="bottom-arrow" />
+      </div>
+      <div class="left-money">
+        <div class="text pf400 fs14 fc333333">金额</div>
+        <img src="@/assets/icon/asset/bottom-arrow-black.svg" class="bottom-arrow" />
+      </div>
+      <div class="left-pay-way">
+        <div class="text pf400 fs14 fc333333">支付方式</div>
+        <img src="@/assets/icon/asset/bottom-arrow-black.svg" class="bottom-arrow" />
+      </div>
+    </div>
+    <div class="filter-right">
+      <img src="@/assets/icon/asset/filter.svg" alt="" />
+    </div>
+  </div>
+  <div class="goods-area">
+    <div class="goods-item" v-for="(item, index) in 2" :key="index">
+      <div class="item-merchant">
+        <div class="merchant-left">
+          <img src="@/assets/img/index/user/default-head.png" alt="" />
+          <div class="left-name pf500 fs14 fc2C3131">商家昵称</div>
+          <div class="vip-flag pf500 fs10 fcDF384C">V2</div>
+        </div>
+        <div class="merchant-right pf400 fs10 fc999999">
+          入驻时间: 2025-11-07 12:25:10
+        </div>
+      </div>
+      <div class="item-chengjiao-number pf400 fs10 fc999999">
+        成交量 12550 · 98.95% 成交率
+      </div>
+      <div class="item-price">
+        <div class="price-area">
+          <div class="text pf400 fs10 fc999999">单价</div>
+          <div class="price-number pf400 fs10 fc999999">
+            ￥
+            <span class="pf500 fs16 fc333333">6.58</span>
+            /USDT
+          </div>
+          <div class="number pf400 fs10 fc999999">
+            数量 <span class="pf400 fs12 fc666666">1000.05 USDT</span>
+          </div>
+          <div class="number pf400 fs10 fc999999">
+            限额 <span class="pf400 fs12 fc666666">20000 - 1000.05 CNY</span>
+          </div>
+        </div>
+        <div class="price-func">
+          <div class="func-time pf400 fs10 fc999999">
+            <img src="@/assets/icon/asset/clock-gray.svg" alt="" />0m 45s
+          </div>
+          <div class="func-pay-way pf400 fs10 fc999999">
+            <div class="color"></div>
+            银行卡
+          </div>
+          <div class="func-main">
+            <div class="func-chat pf500 fs12 fcDF384C">聊天</div>
+            <div class="func-buy pf500 fs12 fcFFFFFF">验证购买</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 <script setup></script>
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+  .c2c {
+    margin-top: 13px;
+    width: 345px;
+    height: 100px;
+  }
+
+  .buy-sell {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin-top: 13px;
+    width: 345px;
+    height: 35px;
+
+    .buy-left {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      height: 100%;
+
+      .buy-btn {
+        width: 85px;
+        height: 35px;
+        line-height: 35px;
+        text-align: center;
+        border-radius: 6px;
+        background: #45b26b;
+      }
+
+      .sell-btn {
+        margin-left: 14px;
+        width: 85px;
+        height: 35px;
+        line-height: 35px;
+        text-align: center;
+        border-radius: 6px;
+        background: #f5f5f5;
+      }
+    }
+
+    .buy-right {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
+      width: 75px;
+      height: 35px;
+      line-height: 35px;
+      text-align: center;
+      border-radius: 6px;
+      background: #f5f5f5;
+
+      .text {
+        margin-left: 15px;
+      }
+
+      img {
+        margin-left: 12px;
+      }
+    }
+  }
+
+  .filter-area {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding-left: 6px;
+    margin-top: 13px;
+    width: 345px;
+    height: 18px;
+    box-sizing: border-box;
+
+    .filter-left {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
+      height: 18px;
+
+      .left-coin {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        height: 18px;
+
+        .coin {
+          width: 18px;
+          height: 18px;
+        }
+
+        .text {
+          margin-left: 3px;
+        }
+
+        .bottom-arrow {
+          margin-left: 5px;
+        }
+      }
+
+      .left-money {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        margin-left: 34px;
+        height: 18px;
+
+        .text {
+          margin-left: 3px;
+        }
+
+        .bottom-arrow {
+          margin-left: 5px;
+        }
+      }
+
+      .left-pay-way {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        margin-left: 34px;
+        height: 18px;
+
+        .text {
+          margin-left: 3px;
+        }
+
+        .bottom-arrow {
+          margin-left: 5px;
+        }
+      }
+    }
+
+    .filter-right {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      height: 18px;
+    }
+  }
+
+  .goods-area {
+    width: 345px;
+
+    .goods-item {
+      padding: 0 10px;
+      margin-top: 10px;
+      width: 345px;
+      height: 150px;
+      border-radius: 8px;
+      border: 1px solid #ebebeb;
+      box-sizing: border-box;
+
+      .item-merchant {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 15px;
+        width: 100%;
+        height: 24px;
+
+        .merchant-left {
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-start;
+          align-items: center;
+          height: 24px;
+
+          img {
+            width: 24px;
+            height: 24px;
+          }
+
+          .left-name {
+            margin-left: 4px;
+          }
+
+          .vip-flag {
+            margin-left: 4px;
+            width: 18px;
+            height: 15px;
+            line-height: 15px;
+            text-align: center;
+            border-radius: 3px;
+            background: #df384c1a;
+          }
+        }
+      }
+
+      .item-chengjiao-number {
+        margin-top: 6px;
+      }
+
+      .item-price {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        margin-top: 10px;
+
+        .price-area {
+          .price-number {
+            margin-top: 3px;
+          }
+
+          .number {
+            margin-top: 5px;
+            height: 13px;
+            line-height: 13px;
+
+            span {
+              margin-left: 1px;
+            }
+          }
+        }
+
+        .price-func {
+          display: flex;
+          flex-direction: column;
+          justify-content: flex-start;
+          align-items: flex-end;
+
+          .func-time {
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-start;
+            align-items: center;
+            height: 12px;
+
+            img {
+              margin-right: 3px;
+              width: 9px;
+              height: 9px;
+            }
+          }
+
+          .func-pay-way {
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-start;
+            align-items: center;
+            margin-top: 5px;
+            height: 12px;
+
+            .color {
+              margin-right: 3px;
+              width: 3px;
+              height: 10px;
+              border-radius: 2px;
+              background: #df384c;
+            }
+          }
+
+          .func-main {
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-start;
+            margin-top: 15px;
+            height: 24px;
+
+            .func-chat {
+              width: 58px;
+              height: 24px;
+              line-height: 24px;
+              text-align: center;
+              border-radius: 5px;
+              background: #df384c1a;
+            }
+
+            .func-buy {
+              margin-left: 8px;
+              width: 58px;
+              height: 24px;
+              line-height: 24px;
+              text-align: center;
+              border-radius: 5px;
+              background: #45b26b;
+            }
+          }
+        }
+      }
+    }
+  }
+</style>

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

@@ -17,16 +17,16 @@
         <div class="text pf400 fs14 fc333333">BTC</div>
         <img src="@/assets/icon/asset/bottom-arrow-black.svg" class="bottom-arrow" />
       </div>
-      <div class="left-money">
+      <div class="left-money" @click="amountFlag = true">
         <div class="text pf400 fs14 fc333333">金额</div>
         <img src="@/assets/icon/asset/bottom-arrow-black.svg" class="bottom-arrow" />
       </div>
-      <div class="left-pay-way">
+      <div class="left-pay-way" @click="paymentWayFlag = true">
         <div class="text pf400 fs14 fc333333">支付方式</div>
         <img src="@/assets/icon/asset/bottom-arrow-black.svg" class="bottom-arrow" />
       </div>
     </div>
-    <div class="filter-right">
+    <div class="filter-right" @click="filterFlag = true">
       <img src="@/assets/icon/asset/filter.svg" alt="" />
     </div>
   </div>
@@ -75,9 +75,34 @@
         </div>
       </div>
     </div>
+    <PaymentWay v-show="paymentWayFlag" @paymentWayClose="paymentWayClose"></PaymentWay>
+    <Amount v-show="amountFlag" @amountClose="amountClose"></Amount>
+    <Filter v-show="filterFlag" @filterClose="filterClose"></Filter>
+    <SellAndBuy></SellAndBuy>
   </div>
 </template>
-<script setup></script>
+<script setup>
+  import { ref } from "vue";
+  import PaymentWay from "../../dialog/PaymentWay.vue";
+  import Amount from "../../dialog/Amount.vue";
+  import Filter from "../../dialog/Filter.vue";
+  import SellAndBuy from "../../dialog/SellAndBuy.vue";
+
+  const filterFlag = ref(false);
+  const filterClose = () => {
+    filterFlag.value = false;
+  };
+
+  const amountFlag = ref(false);
+  const amountClose = () => {
+    amountFlag.value = false;
+  };
+
+  const paymentWayFlag = ref(false);
+  const paymentWayClose = () => {
+    paymentWayFlag.value = false;
+  };
+</script>
 <style lang="less" scoped>
   .c2c {
     margin-top: 13px;

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

@@ -1,5 +1,164 @@
 <template>
-  <div>2</div>
+  <div class="buy-left">
+    <div class="buy-btn pf500 fs14 fcFFFFFF">购买</div>
+    <div class="sell-btn pf500 fs14 fc999999">出售</div>
+  </div>
+  <div class="user-staking margin-top43">
+    <div class="user-staking-title pf500 fs14 fc2C3131">我要支付</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 class="tips pf400 fs12 fc999999">10 - 5000.000</div>
+  </div>
+  <div class="user-staking margin-top15">
+    <div class="user-staking-title pf500 fs14 fc2C3131">我将收到</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 class="tips pf400 fs12 fc999999">1 CNY ≈ 0.1684258 BTC</div>
+  </div>
+  <div class="buy-sell-btn pf600 fs14 fcFFFFFF">购买</div>
 </template>
 <script setup></script>
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+  .buy-left {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    margin-top: 15px;
+    width: 345px;
+    height: 35px;
+
+    .buy-btn {
+      width: 85px;
+      height: 35px;
+      line-height: 35px;
+      text-align: center;
+      border-radius: 6px;
+      background: #45b26b;
+    }
+
+    .sell-btn {
+      margin-left: 14px;
+      width: 85px;
+      height: 35px;
+      line-height: 35px;
+      text-align: center;
+      border-radius: 6px;
+      background: #f5f5f5;
+    }
+  }
+
+  .margin-top15 {
+    margin-top: 15px;
+  }
+
+  .margin-top43 {
+    margin-top: 43px;
+  }
+
+  .user-staking {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    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;
+    }
+
+    .tips {
+      margin-top: 3px;
+      width: 311px;
+      height: 24px;
+      line-height: 24px;
+    }
+  }
+
+  .buy-sell-btn {
+    margin-top: 50px;
+    width: 311px;
+    height: 40px;
+    line-height: 40px;
+    text-align: center;
+    border-radius: 100px;
+    background: #df384c;
+  }
+</style>

src/views/index/Index.vue

@@ -124,7 +124,7 @@
     flex-direction: column;
     justify-content: flex-start;
     align-items: center;
-    margin-bottom: 40px;
+    margin-bottom: 80px;
     width: 100%;
 
     .index-func {