C2C购买完成

package-lock.json

@@ -13,7 +13,7 @@
         "klinecharts": "^8.6.3",
         "vant": "^4.9.21",
         "vue": "^3.2.13",
-        "vue-i18n": "^11.2.2",
+        "vue-i18n": "^12.0.0-alpha.3",
         "vue-router": "^4.0.3",
         "vuex": "^4.0.0"
       },
@@ -230,13 +230,12 @@
       }
     },
     "node_modules/@intlify/core-base": {
-      "version": "11.2.2",
-      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-11.2.2.tgz",
-      "integrity": "sha512-0mCTBOLKIqFUP3BzwuFW23hYEl9g/wby6uY//AC5hTgQfTsM2srCYF2/hYGp+a5DZ/HIFIgKkLJMzXTt30r0JQ==",
-      "license": "MIT",
+      "version": "12.0.0-alpha.3",
+      "resolved": "https://registry.npmmirror.com/@intlify/core-base/-/core-base-12.0.0-alpha.3.tgz",
+      "integrity": "sha512-LEvBHBUbiOOtIBkp4IIQENVC5Fg2YHsvdXN1+WRIxQ8hzHbHSBiqZ2l68B/yg8sE1a4S7dqhkaAedunShWPH+Q==",
       "dependencies": {
-        "@intlify/message-compiler": "11.2.2",
-        "@intlify/shared": "11.2.2"
+        "@intlify/message-compiler": "12.0.0-alpha.3",
+        "@intlify/shared": "12.0.0-alpha.3"
       },
       "engines": {
         "node": ">= 16"
@@ -246,12 +245,11 @@
       }
     },
     "node_modules/@intlify/message-compiler": {
-      "version": "11.2.2",
-      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-11.2.2.tgz",
-      "integrity": "sha512-XS2p8Ff5JxWsKhgfld4/MRQzZRQ85drMMPhb7Co6Be4ZOgqJX1DzcZt0IFgGTycgqL8rkYNwgnD443Q+TapOoA==",
-      "license": "MIT",
+      "version": "12.0.0-alpha.3",
+      "resolved": "https://registry.npmmirror.com/@intlify/message-compiler/-/message-compiler-12.0.0-alpha.3.tgz",
+      "integrity": "sha512-mDDTN3gfYOHhBnpnlby19UHyvMaOnzdlpsIrxUfs44R/vCATfn8pMOkE8PXD2t410xkocEj3FpDcC9XC/0v4Dg==",
       "dependencies": {
-        "@intlify/shared": "11.2.2",
+        "@intlify/shared": "12.0.0-alpha.3",
         "source-map-js": "^1.0.2"
       },
       "engines": {
@@ -262,10 +260,9 @@
       }
     },
     "node_modules/@intlify/shared": {
-      "version": "11.2.2",
-      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-11.2.2.tgz",
-      "integrity": "sha512-OtCmyFpSXxNu/oET/aN6HtPCbZ01btXVd0f3w00YsHOb13Kverk1jzA2k47pAekM55qbUw421fvPF1yxZ+gicw==",
-      "license": "MIT",
+      "version": "12.0.0-alpha.3",
+      "resolved": "https://registry.npmmirror.com/@intlify/shared/-/shared-12.0.0-alpha.3.tgz",
+      "integrity": "sha512-ryaNYBvxQjyJUmVuBBg+HHUsmGnfxcEUPR0NCeG4/K9N2qtyFE35C80S15IN6iYFE2MGWLN7HfOSyg0MXZIc9w==",
       "engines": {
         "node": ">= 16"
       },
@@ -273,6 +270,22 @@
         "url": "https://github.com/sponsors/kazupon"
       }
     },
+    "node_modules/@intlify/vue-i18n-core": {
+      "version": "12.0.0-alpha.3",
+      "resolved": "https://registry.npmmirror.com/@intlify/vue-i18n-core/-/vue-i18n-core-12.0.0-alpha.3.tgz",
+      "integrity": "sha512-YwAfTQILHN+VoK0P/Yv47GbKnEf1lhfbliyVyW3knAL1EmT8m0m3rwffXJnwyQhYw8Jpx85CpL49WkSgyi6d/g==",
+      "dependencies": {
+        "@intlify/core-base": "12.0.0-alpha.3",
+        "@intlify/shared": "12.0.0-alpha.3",
+        "@vue/devtools-api": "^6.5.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.13",
       "resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -7758,13 +7771,13 @@
       "dev": true
     },
     "node_modules/vue-i18n": {
-      "version": "11.2.2",
-      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-11.2.2.tgz",
-      "integrity": "sha512-ULIKZyRluUPRCZmihVgUvpq8hJTtOqnbGZuv4Lz+byEKZq4mU0g92og414l6f/4ju+L5mORsiUuEPYrAuX2NJg==",
-      "license": "MIT",
+      "version": "12.0.0-alpha.3",
+      "resolved": "https://registry.npmmirror.com/vue-i18n/-/vue-i18n-12.0.0-alpha.3.tgz",
+      "integrity": "sha512-+KQgD9LJoHfGCdJh3gaLdVS/Sps1n860+6wsjyeNLWJeEofjdVH7KPjz4rAeBlTAUaIDlIjHoXQY0Lk+8B6S9w==",
       "dependencies": {
-        "@intlify/core-base": "11.2.2",
-        "@intlify/shared": "11.2.2",
+        "@intlify/core-base": "12.0.0-alpha.3",
+        "@intlify/shared": "12.0.0-alpha.3",
+        "@intlify/vue-i18n-core": "12.0.0-alpha.3",
         "@vue/devtools-api": "^6.5.0"
       },
       "engines": {

package.json

@@ -12,7 +12,7 @@
     "klinecharts": "^8.6.3",
     "vant": "^4.9.21",
     "vue": "^3.2.13",
-    "vue-i18n": "^11.2.2",
+    "vue-i18n": "^12.0.0-alpha.3",
     "vue-router": "^4.0.3",
     "vuex": "^4.0.0"
   },

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

@@ -0,0 +1,3 @@
+<svg width="9" height="5" viewBox="0 0 9 5" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.75 0.75L4.25 4.25L7.75 0.75" stroke="#333333" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/icon/asset/filter.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.5243 0.670096C14.4378 0.470065 14.2943 0.299898 14.1118 0.18076C13.9293 0.0616213 13.7157 -0.00123158 13.4978 1.82845e-05H1.12278C0.905048 0.000447303 0.692116 0.064052 0.509817 0.183117C0.327519 0.302181 0.183689 0.471589 0.0957766 0.670788C0.00786385 0.869988 -0.0203539 1.09042 0.0145464 1.30534C0.0494468 1.52026 0.145965 1.72044 0.292393 1.88158L0.298018 1.88791L5.06028 6.97291V12.375C5.06024 12.5786 5.11545 12.7784 5.22003 12.9531C5.32461 13.1278 5.47465 13.2709 5.65414 13.367C5.83362 13.4631 6.03583 13.5087 6.23921 13.499C6.44258 13.4892 6.6395 13.4245 6.80896 13.3116L9.05896 11.8111C9.2132 11.7084 9.33967 11.5691 9.42713 11.4057C9.51459 11.2423 9.56033 11.0599 9.56029 10.8745V6.97291L14.3233 1.88791L14.3289 1.88158C14.4769 1.72117 14.5743 1.52073 14.6091 1.30528C14.6438 1.08982 14.6144 0.868906 14.5243 0.670096ZM8.58857 6.36892C8.49126 6.47209 8.43651 6.60821 8.43528 6.75002V10.8745L6.18528 12.375V6.75002C6.18533 6.60718 6.13103 6.46968 6.03341 6.36541L1.12278 1.12502H13.4978L8.58857 6.36892Z" fill="#1F2937"/>
+</svg>

src/router/index.js

@@ -29,22 +29,42 @@ 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 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 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 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 CloudComPowerIndex from "@/views/index/cloudComputingPower/Index.vue";
+import ComboDetails from "@/views/index/cloudComputingPower/ComboDetails.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 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'
-import AddressAuth from '@/views/user/AddressAuth.vue'
-import RelativeAuth from '@/views/user/RelativeAuth.vue'
-import LanguageSwitch from '@/views/user/LanguageSwitch.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 AddressAuth from "@/views/user/AddressAuth.vue";
+import RelativeAuth from "@/views/user/RelativeAuth.vue";
+import LanguageSwitch from "@/views/user/LanguageSwitch.vue"; //语言国际化
 
 const routes = [
   {
@@ -82,34 +102,31 @@ const routes = [
             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: 'calculator',
-            name: 'calculator',
-            component: Calculator },
+          {
+            path: "margin",
+            name: "TradeMargin",
+            component: TradeMargin,
+            meta: { title: "杠杆" },
+          },
+          {
+            path: "settings",
+            name: "TradeSettings",
+            component: TradeSettings,
+          },
+        ],
+      },
+      { path: "calculator", name: "calculator", component: Calculator },
       {
-            path: 'OptionTrading',
-            name: 'OptionTrading',
-            component: OptionTrading,
-            meta: { title: '' }
+        path: "OptionTrading",
+        name: "OptionTrading",
+        component: OptionTrading,
+        meta: { title: "" },
       },
       {
         path: "/assetIndex",
@@ -124,103 +141,130 @@ const routes = [
     ],
   },
   {
-    path: '/AdvancedCertification',
-    name: 'AdvancedCertification',
-    component: () => import('@/views/user/AdvancedCertification.vue'),
-    meta: { title: '' }
-   },
+    path: "/AdvancedCertification",
+    name: "AdvancedCertification",
+    component: () => import("@/views/user/AdvancedCertification.vue"),
+    meta: { title: "" },
+  },
   {
-            path: '/PnLAnalysis',
-            name: 'PnLAnalysis',
-            component: () => import('@/views/bitcoin/lever/PnLAnalysis.vue'),
-            meta: { title: '' }
+    path: "/PnLAnalysis",
+    name: "PnLAnalysis",
+    component: () => import("@/views/bitcoin/lever/PnLAnalysis.vue"),
+    meta: { title: "" },
   },
   {
-    path: '/detail',
-    name: 'HelpCenter',
+    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: "/detail",
+    name: "HelpCenter",
     // 记得创建这个 Detail.vue 文件
-    component: () => import('@/views/user/HelpCenter.vue')
+    component: () => import("@/views/user/HelpCenter.vue"),
   },
   {
     // 动态路由，接收一个 id 参数
-    path: '/help/detail',
-    name: 'HelpDetail',
-    component: () => import('@/views/user/HelpDetail.vue')
+    path: "/help/detail",
+    name: "HelpDetail",
+    component: () => import("@/views/user/HelpDetail.vue"),
   },
   {
-    path: '/about',
-    name: 'AboutUs',
-    component: () => import('@/views/user/AboutUs.vue')
+    path: "/about",
+    name: "AboutUs",
+    component: () => import("@/views/user/AboutUs.vue"),
   },
   {
-    path: '/about/privacy',
-    name: 'PrivacyPolicy',
-    component: () => import('@/views/user/PrivacyPolicy.vue')
+    path: "/about/privacy",
+    name: "PrivacyPolicy",
+    component: () => import("@/views/user/PrivacyPolicy.vue"),
   },
   {
-    path: '/about/agreement',
-    name: 'UserAgreement',
-    component: () => import('@/views/user/UserAgreement.vue')
+    path: "/about/agreement",
+    name: "UserAgreement",
+    component: () => import("@/views/user/UserAgreement.vue"),
   },
   {
-    path: '/invite',
-    name: 'InviteCenter',
-    component: () => import('@/views/user/InviteCenter.vue') // 上面的组件
+    path: "/invite",
+    name: "InviteCenter",
+    component: () => import("@/views/user/InviteCenter.vue"), // 上面的组件
   },
   {
-      path: '/invite/poster',
-      name: 'InvitePoster',
-      component: () => import('@/views/user/InvitePoster.vue')
+    path: "/invite/poster",
+    name: "InvitePoster",
+    component: () => import("@/views/user/InvitePoster.vue"),
   },
   {
-    path: '/vip',
-    name: 'VipCenter',
-    component: () => import('@/views/user/VipCenter.vue')
+    path: "/vip",
+    name: "VipCenter",
+    component: () => import("@/views/user/VipCenter.vue"),
   },
   {
-    path: '/vip/rules',
-    name: 'VipRules',
-    component: () => import('@/views/user/VipRules.vue')
+    path: "/vip/rules",
+    name: "VipRules",
+    component: () => import("@/views/user/VipRules.vue"),
   },
   {
-    path: '/kyc/step1',
-    name: 'KycForm',
-    component: () => import('@/views/user/KycForm.vue') // 填写表单
+    path: "/kyc/step1",
+    name: "KycForm",
+    component: () => import("@/views/user/KycForm.vue"), // 填写表单
   },
   {
-    path: '/kyc/step2',
-    name: 'KycUpload',
-    component: () => import('@/views/user/KycUpload.vue') // 上传证件
+    path: "/kyc/step2",
+    name: "KycUpload",
+    component: () => import("@/views/user/KycUpload.vue"), // 上传证件
   },
   {
-    path: '/security',
-    name: 'SecuritySettings',
-    component: () => import('@/views/user/SecuritySettings.vue') // 核心页面
+    path: "/security",
+    name: "SecuritySettings",
+    component: () => import("@/views/user/SecuritySettings.vue"), // 核心页面
   },
   {
     // 地址认证：复用同一个组件，通过 query 参数 type 来区分是 "home" 还是 "work"
-    path: '/auth/address',
-    name: 'address-auth',
-    component: AddressAuth
+    path: "/auth/address",
+    name: "address-auth",
+    component: AddressAuth,
   },
   {
     // 亲属认证
-    path: '/auth/relative',
-    name: 'relative-auth',
-    component: RelativeAuth
+    path: "/auth/relative",
+    name: "relative-auth",
+    component: RelativeAuth,
   },
   {
-    path: '/language',
-    name: 'LanguageSwitch',
+    path: "/language",
+    name: "LanguageSwitch",
     component: LanguageSwitch,
-    meta: { title: '切换语言' }
+    meta: { title: "切换语言" },
   },
   {
-      path: '/basic-verify',
-      name: 'BasicVerify',
-      component: () => import('@/views/user/BasicVerify.vue'),
-      meta: { title: '基础认证' }
-   },
+    path: "/basic-verify",
+    name: "BasicVerify",
+    component: () => import("@/views/user/BasicVerify.vue"),
+    meta: { title: "基础认证" },
+  },
 
   {
     path: "/applyPermission",
@@ -422,6 +466,91 @@ const routes = [
     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/asset/otc/transaction/C2C.vue

@@ -1,5 +1,81 @@
 <template>
   <img src="@/assets/icon/asset/c2c.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>
@@ -8,4 +84,285 @@
     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>