今日工作12.2 1，C2C-筛选 完成 2，C2C-购买 完成 3，C2C-出售 完成 4，C2C-暂无收款方式 完成 5，C2C-选择收款方式-无 完成 6，C2C-选择收款方式-有 完成 7，C2C-添加支付宝账号 完成 8，C2C-添加银行卡账号 完成 9，C2C-取消订单 完成 10，OTC-我的 10% 11，首页常用功能图标svg替换png

src/assets/icon/asset/Checkbox Only.svg

@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12Z" fill="#DF384C"/>
+<g clip-path="url(#clip0_322_18648)">
+<path d="M6.5 13L10 16.5L18 8.5" stroke="white" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_322_18648">
+<rect width="16" height="16" fill="white" transform="translate(4 4)"/>
+</clipPath>
+</defs>
+</svg>

src/assets/icon/asset/right-arrow-black.svg

@@ -0,0 +1,3 @@
+<svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.75 8.75L4.75 4.75L0.75 0.75" stroke="#333333" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/router/index.js

@@ -51,6 +51,8 @@ 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 AddzfbAccount from "@/views/asset/otc/transaction/AddzfbAccount.vue";
+import AddBankAccount from "@/views/asset/otc/transaction/AddBankAccount.vue";
 
 import CommonFunctionsPopup from "@/views/bitcoin/CommonFunctionsPopup/CommonFunctionsPopup.vue"; // 子组件路径
 import TradeRules from "@/views/bitcoin/CommonFunctionsPopup/GeneralLevel2/TradeRules.vue"; // 新建
@@ -567,6 +569,16 @@ const routes = [
     name: "stakingRecord",
     component: StakingRecord,
   },
+  {
+    path: "/addzfbAccount",
+    name: "addzfbAccount",
+    component: AddzfbAccount,
+  },
+  {
+    path: "/addBankAccount",
+    name: "addBankAccount",
+    component: AddBankAccount,
+  },
 ];
 
 const router = createRouter({

src/views/asset/dialog/CancelOrder.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="cancel-order">
+    <div class="apply-mask" @click="emits('cancelOrderClose')"></div>
+    <div class="apply-content">
+      <div class="slide-line"></div>
+      <div class="order-title pf600 fs18 fc333333">您是否确定取消订单？</div>
+      <img src="@/assets/icon/asset/Digital_currency_2_.svg" alt="" />
+      <div class="text pf500 fs14 fc333333">
+        如果您已向卖家付款 <br />
+        请不要取消订单
+      </div>
+      <div class="sure-btn pf600 fs14 fcFFFFFF">确认</div>
+      <div class="cancel pf500 fs14 fcDF384C">取消</div>
+    </div>
+  </div>
+</template>
+<script setup>
+  const emits = defineEmits(["cancelOrderClose"]);
+</script>
+<style lang="less" scoped>
+  .cancel-order {
+    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: 337px;
+      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);
+      }
+
+      .order-title {
+        margin-top: 20px;
+        height: 24px;
+        line-height: 24px;
+      }
+
+      img {
+        margin-top: 19px;
+        width: 110px;
+        height: 70px;
+      }
+
+      .text {
+        margin-top: 20px;
+        line-height: 25px;
+        text-align: center;
+      }
+
+      .sure-btn {
+        margin-top: 10px;
+        width: 311px;
+        height: 40px;
+        line-height: 40px;
+        text-align: center;
+        border-radius: 100px;
+        background: #df384c;
+      }
+
+      .cancel {
+        margin-top: 11px;
+      }
+    }
+  }
+</style>

src/views/asset/dialog/NotPaymentWay.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="payment-way">
+    <div class="apply-mask" @click="emits('notPaymentWayClose')"></div>
+    <div class="apply-content">
+      <div class="slide-line"></div>
+      <img src="@/assets/icon/asset/not-payment-way.svg" alt="" />
+      <div class="text pf500 fs20 fc333333">暂无收款方式</div>
+      <div class="sure-btn pf600 fs14 fcFFFFFF">添加</div>
+    </div>
+  </div>
+</template>
+<script setup>
+  const emits = defineEmits(["notPaymentWayClose"]);
+</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: 350px;
+      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);
+      }
+
+      img {
+        margin-top: 42px;
+        width: 189px;
+        height: 130px;
+      }
+
+      .text {
+        margin-top: 20px;
+      }
+
+      .sure-btn {
+        margin-top: 23px;
+        width: 311px;
+        height: 40px;
+        line-height: 40px;
+        text-align: center;
+        border-radius: 100px;
+        background: #df384c;
+      }
+    }
+  }
+</style>

src/views/asset/dialog/PaymentAccount.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="not-account">
+    <div class="apply-mask" @click="emits('paymentAccountClose')"></div>
+    <div class="apply-content">
+      <div class="slide-line"></div>
+      <div class="account-not" v-if="current == 0">
+        <div class="not-item pf600 fs16 fc333333" v-for="(item, index) in 2" :key="index">
+          暂无银行卡账号
+          <div class="add pf500 fs12 fcFFFFFF">添加</div>
+        </div>
+      </div>
+      <div class="account-have" v-else>
+        <div class="have-item" v-for="(item, index) in 2" :key="index">
+          <div class="have-left">
+            <div class="left-text pf600 fs16 fcDF384C">
+              银行卡&nbsp;&nbsp;<span class="pf500 fs12 fcA8A8A8">删除</span>
+            </div>
+            <div class="left-bumber pf400 fs14 fcDF384C">1502 0802 0802 0820 252</div>
+          </div>
+          <div class="have-right">
+            <img src="@/assets/icon/asset/Checkbox Only.svg" alt="" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+  import { ref } from "vue";
+
+  const emits = defineEmits(["paymentAccountClose"]);
+
+  const current = ref(0);
+</script>
+<style lang="less" scoped>
+  .not-account {
+    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: 300px;
+      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);
+      }
+
+      .account-not {
+        margin-top: 29px;
+
+        .not-item {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          align-items: center;
+          padding: 0 16px;
+          margin-top: 12px;
+          width: 345px;
+          height: 80px;
+          border-radius: 16px;
+          border: 1px solid #a8a8a8;
+          box-sizing: border-box;
+
+          &:first-child {
+            margin-top: 0;
+          }
+
+          .add {
+            width: 76px;
+            height: 24px;
+            line-height: 24px;
+            text-align: center;
+            border-radius: 5px;
+            background: #df384c;
+          }
+        }
+      }
+
+      .account-have {
+        margin-top: 29px;
+
+        .have-item {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          align-items: center;
+          margin-top: 12px;
+          padding: 0 16px;
+          width: 345px;
+          height: 80px;
+          border-radius: 16px;
+          border: 1px solid #a8a8a8;
+          box-sizing: border-box;
+
+          &:first-child {
+            margin-top: 0;
+          }
+        }
+
+        .have-left {
+          .left-text {
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-start;
+            align-items: center;
+            height: 22px;
+          }
+
+          .left-bumber {
+            height: 22px;
+            line-height: 22px;
+          }
+        }
+
+        .have-right {
+          width: 24px;
+          height: 24px;
+        }
+      }
+    }
+  }
+</style>

src/views/asset/dialog/SellAndBuy.vue

@@ -1,19 +1,75 @@
 <template>
   <div class="sell-and-buy">
-    <div class="apply-mask" @click="emits('amountClose')"></div>
+    <div class="apply-mask" @click="emits('sellAndBuyClose')"></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 class="info-left">
+          <div class="shangjia">
+            <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="chengjiao pf400 fs10 fc999999">成交量 12550 · 98.95% 成交率</div>
+        </div>
+        <div class="info-right">
+          <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>
       </div>
-      <div class="sure-btn pf600 fs14 fcFFFFFF">确定出售</div>
+      <div class="required-quantity pf500 fs14 fc999999">
+        <div>需求数量</div>
+        <div>150200.00 USDT</div>
+      </div>
+      <div class="required-quantity pf500 fs14 fc999999">
+        <div>单笔限额</div>
+        <div>100.00 - 252020.00 USDT</div>
+      </div>
+      <div class="number-input">
+        <input
+          type="text"
+          class="input pf400 fs14 fc333333"
+          placeholder="请输入卖出数量" />
+        <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="account pf500 fs14 fc999999">
+        <div>收款方式</div>
+        <div class="account-right">
+          <div class="color"></div>
+          银行卡
+        </div>
+      </div>
+      <div class="account pf500 fs14 fc999999">
+        <div>收款账号</div>
+        <div class="account-right fcDF384C" @click="goAddBankAccount">
+          请选择
+          <img src="@/assets/icon/asset/right-arrow-black.svg" alt="" />
+        </div>
+      </div>
+      <div class="sure-btn pf600 fs14 fcFFFFFF" @click="goAddzfbAccount">确定出售</div>
     </div>
   </div>
 </template>
 <script setup>
-  const emits = defineEmits(["amountClose"]);
+  import { useRoute, useRouter } from "vue-router";
+
+  const router = useRouter();
+
+  const emits = defineEmits(["sellAndBuyClose"]);
+
+  const goAddzfbAccount = () => {
+    router.push("/addzfbAccount");
+  };
+
+  const goAddBankAccount = () => {
+    router.push("/addBankAccount");
+  };
 </script>
 <style lang="less" scoped>
   .sell-and-buy {
@@ -56,7 +112,7 @@
       }
 
       .apply-text {
-        margin-top: 21px;
+        margin-top: 20px;
         height: 24px;
         line-height: 24px;
         letter-spacing: 0.2px;
@@ -70,14 +126,130 @@
         width: 345px;
 
         .info-left {
+          .shangjia {
+            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;
+            }
+          }
+
+          .chengjiao {
+            margin-top: 3px;
+          }
         }
 
         .info-right {
+          display: flex;
+          flex-direction: column;
+          justify-content: flex-start;
+          align-items: flex-end;
+
+          .text {
+            height: 24px;
+            line-height: 24px;
+          }
+
+          .price-number {
+            margin-top: -6px;
+          }
+        }
+      }
+
+      .required-quantity {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 10px;
+        width: 345px;
+        height: 18px;
+      }
+
+      .number-input {
+        position: relative;
+        margin-top: 18px;
+        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 {
+        margin-top: 7px;
+        width: 345px;
+        height: 18px;
+        line-height: 18px;
+      }
+
+      .account {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 8px;
+        width: 345px;
+        height: 18px;
+
+        .account-right {
+          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;
+          }
+
+          img {
+            margin-left: 5px;
+          }
         }
       }
 
       .sure-btn {
         margin-top: 47px;
+        margin-bottom: 40px;
         width: 311px;
         height: 40px;
         line-height: 40px;

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

@@ -0,0 +1,76 @@
+<template>
+  <HeaderNav headerText="添加银行卡账号"></HeaderNav>
+  <div class="add-zfb-account">
+    <div class="account-item">
+      <div class="item-title pf500 fs14 fc333333">持卡人姓名</div>
+      <div class="left-input">
+        <input type="text" class="input pf400 fs14 fc333333" placeholder="请输入" />
+      </div>
+    </div>
+    <div class="account-item">
+      <div class="item-title pf500 fs14 fc333333">手机号</div>
+      <div class="left-input">
+        <input type="text" class="input pf400 fs14 fc333333" placeholder="请输入" />
+      </div>
+    </div>
+    <div class="account-item">
+      <div class="item-title pf500 fs14 fc333333">开户行</div>
+      <div class="left-input">
+        <input type="text" class="input pf400 fs14 fc333333" placeholder="请输入" />
+      </div>
+    </div>
+    <div class="account-item">
+      <div class="item-title pf500 fs14 fc333333">银行卡号</div>
+      <div class="left-input">
+        <input type="text" class="input pf400 fs14 fc333333" placeholder="请输入" />
+      </div>
+    </div>
+    <div class="submit pf600 fs14 fcFFFFFF" @click="submit">提交</div>
+  </div>
+</template>
+<script setup>
+  import HeaderNav from "../../../index/components/HeaderNav.vue";
+</script>
+<style lang="less" scoped>
+  .add-zfb-account {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    margin-top: 48px;
+    width: 100%;
+
+    .account-item {
+      margin-top: 14px;
+      width: 345px;
+
+      .left-input {
+        width: 345px;
+        height: 45px;
+
+        .input {
+          padding-left: 11px;
+          margin-top: 5px;
+          width: 100%;
+          height: 100%;
+          box-sizing: border-box;
+          border-radius: 6px;
+          border: none;
+          outline: none;
+          background: #f5f5f5;
+        }
+      }
+    }
+
+    .submit {
+      margin-top: 264px;
+      width: 311px;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      border-radius: 100px;
+      background: #df384c;
+      letter-spacing: 0.2px;
+    }
+  }
+</style>

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

@@ -0,0 +1,76 @@
+<template>
+  <HeaderNav headerText="添加支付宝账号"></HeaderNav>
+  <div class="add-zfb-account">
+    <div class="account-item">
+      <div class="item-title pf500 fs14 fc333333">姓名</div>
+      <div class="left-input">
+        <input type="text" class="input pf400 fs14 fc333333" placeholder="请输入" />
+      </div>
+    </div>
+    <div class="account-item">
+      <div class="item-title pf500 fs14 fc333333">手机号</div>
+      <div class="left-input">
+        <input type="text" class="input pf400 fs14 fc333333" placeholder="请输入" />
+      </div>
+    </div>
+    <div class="account-item">
+      <div class="item-title pf500 fs14 fc333333">身份证号</div>
+      <div class="left-input">
+        <input type="text" class="input pf400 fs14 fc333333" placeholder="请输入" />
+      </div>
+    </div>
+    <div class="account-item">
+      <div class="item-title pf500 fs14 fc333333">支付宝账号</div>
+      <div class="left-input">
+        <input type="text" class="input pf400 fs14 fc333333" placeholder="请输入" />
+      </div>
+    </div>
+    <div class="submit pf600 fs14 fcFFFFFF" @click="submit">提交</div>
+  </div>
+</template>
+<script setup>
+  import HeaderNav from "../../../index/components/HeaderNav.vue";
+</script>
+<style lang="less" scoped>
+  .add-zfb-account {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    margin-top: 48px;
+    width: 100%;
+
+    .account-item {
+      margin-top: 14px;
+      width: 345px;
+
+      .left-input {
+        width: 345px;
+        height: 45px;
+
+        .input {
+          padding-left: 11px;
+          margin-top: 5px;
+          width: 100%;
+          height: 100%;
+          box-sizing: border-box;
+          border-radius: 6px;
+          border: none;
+          outline: none;
+          background: #f5f5f5;
+        }
+      }
+    }
+
+    .submit {
+      margin-top: 264px;
+      width: 311px;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      border-radius: 100px;
+      background: #df384c;
+      letter-spacing: 0.2px;
+    }
+  }
+</style>

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

@@ -70,7 +70,9 @@
           </div>
           <div class="func-main">
             <div class="func-chat pf500 fs12 fcDF384C">聊天</div>
-            <div class="func-buy pf500 fs12 fcFFFFFF">购买</div>
+            <div class="func-buy pf500 fs12 fcFFFFFF" @click="sellAndBuyFlag = true">
+              购买
+            </div>
           </div>
         </div>
       </div>
@@ -78,15 +80,50 @@
     <PaymentWay v-show="paymentWayFlag" @paymentWayClose="paymentWayClose"></PaymentWay>
     <Amount v-show="amountFlag" @amountClose="amountClose"></Amount>
     <Filter v-show="filterFlag" @filterClose="filterClose"></Filter>
-    <SellAndBuy></SellAndBuy>
+    <SellAndBuy v-show="sellAndBuyFlag" @sellAndBuyClose="sellAndBuyClose"></SellAndBuy>
+    <!-- 暂无收款方式，还没点击的地方 -->
+    <NotPaymentWay
+      v-show="notPaymnetWayFlag"
+      @notPaymentWayClose="notPaymentWayClose"></NotPaymentWay>
+    <!-- 添加收款方式，还没点击的地方 -->
+    <PaymentAccount
+      v-show="paymentAccountFlag"
+      @paymentAccountClose="paymentAccountClose"></PaymentAccount>
+    <!-- 取消订单，还没点击的地方 -->
+    <CancelOrder
+      v-show="cancelOrderFlag"
+      @cancelOrderClose="cancelOrderClose"></CancelOrder>
   </div>
 </template>
 <script setup>
   import { ref } from "vue";
-  import PaymentWay from "../../dialog/PaymentWay.vue";
+  import PaymentWay from "../../dialog/NotPaymentWay.vue";
   import Amount from "../../dialog/Amount.vue";
   import Filter from "../../dialog/Filter.vue";
   import SellAndBuy from "../../dialog/SellAndBuy.vue";
+  import NotPaymentWay from "../../dialog/NotPaymentWay.vue";
+  import PaymentAccount from "../../dialog/PaymentAccount.vue";
+  import CancelOrder from "../../dialog/CancelOrder.vue";
+
+  const cancelOrderFlag = ref(false);
+  const cancelOrderClose = () => {
+    cancelOrderFlag.value = false;
+  };
+
+  const paymentAccountFlag = ref(false);
+  const paymentAccountClose = () => {
+    paymentAccountFlag.value = false;
+  };
+
+  const notPaymnetWayFlag = ref(false);
+  const notPaymentWayClose = () => {
+    notPaymnetWayFlag.value = false;
+  };
+
+  const sellAndBuyFlag = ref(false);
+  const sellAndBuyClose = () => {
+    sellAndBuyFlag.value = false;
+  };
 
   const filterFlag = ref(false);
   const filterClose = () => {

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

@@ -1,5 +1,26 @@
 <template>
-  <div>4</div>
+  <HeaderNav headerText="我的"></HeaderNav>
+  <div class="otc-user">
+    <div class="user-info"></div>
+  </div>
 </template>
-<script setup></script>
-<style lang="less" scoped></style>
+<script setup>
+  import HeaderNav from "../../../index/components/HeaderNav.vue";
+</script>
+<style lang="less" scoped>
+  .otc-user {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    margin-top: 48px;
+    width: 100%;
+
+    .user-info {
+      margin-top: 10px;
+      width: 345px;
+      height: 56px;
+      background: pink;
+    }
+  }
+</style>

src/views/index/Index.vue

@@ -60,35 +60,35 @@
   const indexMenu = [
     {
       name: "ICO功能",
-      image: require("@/assets/img/index/Rectangle 2.svg"),
+      image: require("@/assets/icon/index/Rectangle 2.png"),
     },
     {
       name: "质押理财",
-      image: require("@/assets/img/index/Rectangle 3.svg"),
+      image: require("@/assets/icon/index/Rectangle 3.png"),
     },
     {
       name: "贷款",
-      image: require("@/assets/img/index/Rectangle 4.svg"),
+      image: require("@/assets/icon/index/Rectangle 4.png"),
     },
     {
       name: "邀请推广",
-      image: require("@/assets/img/index/Rectangle 5.svg"),
+      image: require("@/assets/icon/index/Rectangle 5.png"),
     },
     {
       name: "秒合约",
-      image: require("@/assets/img/index/Rectangle 6.svg"),
+      image: require("@/assets/icon/index/Rectangle 6.png"),
     },
     {
       name: "客服",
-      image: require("@/assets/img/index/Rectangle 7.svg"),
+      image: require("@/assets/icon/index/Rectangle 7.png"),
     },
     {
       name: "充币",
-      image: require("@/assets/img/index/Rectangle 8.svg"),
+      image: require("@/assets/icon/index/Rectangle 8.png"),
     },
     {
       name: "OTC交易",
-      image: require("@/assets/img/index/user/otc.svg"),
+      image: require("@/assets/icon/index/Rectangle 9.png"),
     },
   ];