Merge branch 'web3_transection'

package-lock.json

@@ -8,6 +8,8 @@
       "name": "bit_wise_world",
       "version": "0.1.0",
       "dependencies": {
+        "axios": "^1.13.2",
+        "vant": "^4.9.21",
         "vue": "^3.2.13",
         "vue-router": "^4.0.3",
         "vuex": "^4.0.0"
@@ -549,6 +551,21 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@vant/popperjs": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@vant/popperjs/-/popperjs-1.3.0.tgz",
+      "integrity": "sha512-hB+czUG+aHtjhaEmCJDuXOep0YTZjdlRR+4MSmIFnkCQIxJaXLQdSsR90XWvAI2yvKUI7TCGqR8pQg2RtvkMHw==",
+      "license": "MIT"
+    },
+    "node_modules/@vant/use": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@vant/use/-/use-1.6.0.tgz",
+      "integrity": "sha512-PHHxeAASgiOpSmMjceweIrv2AxDZIkWXyaczksMoWvKV2YAYEhoizRuk/xFnKF+emUIi46TsQ+rvlm/t2BBCfA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/@vue/cli-overlay": {
       "version": "5.0.9",
       "resolved": "https://registry.npmmirror.com/@vue/cli-overlay/-/cli-overlay-5.0.9.tgz",
@@ -1347,6 +1364,12 @@
       "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==",
       "dev": true
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
     "node_modules/at-least-node": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/at-least-node/-/at-least-node-1.0.0.tgz",
@@ -1393,6 +1416,17 @@
         "postcss": "^8.1.0"
       }
     },
+    "node_modules/axios": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.2.tgz",
+      "integrity": "sha512-VPk9ebNqPcy5lRGuSlKx752IlDatOjT9paPlm8A7yOuW2Fbvp4X3JznJtT4f0GzGLLiWE9W8onz51SqLYwzGaA==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.4",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -1625,7 +1659,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
       "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
-      "dev": true,
       "dependencies": {
         "es-errors": "^1.3.0",
         "function-bind": "^1.1.2"
@@ -1919,6 +1952,18 @@
       "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
       "dev": true
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/commander": {
       "version": "8.3.0",
       "resolved": "https://registry.npmmirror.com/commander/-/commander-8.3.0.tgz",
@@ -2599,6 +2644,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/depd/-/depd-2.0.0.tgz",
@@ -2741,7 +2795,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/dunder-proto/-/dunder-proto-1.0.1.tgz",
       "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
-      "dev": true,
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.1",
         "es-errors": "^1.3.0",
@@ -2868,7 +2921,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/es-define-property/-/es-define-property-1.0.1.tgz",
       "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -2877,7 +2929,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmmirror.com/es-errors/-/es-errors-1.3.0.tgz",
       "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -2892,7 +2943,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
       "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
-      "dev": true,
       "dependencies": {
         "es-errors": "^1.3.0"
       },
@@ -2900,6 +2950,21 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/escalade": {
       "version": "3.2.0",
       "resolved": "https://registry.npmmirror.com/escalade/-/escalade-3.2.0.tgz",
@@ -3244,7 +3309,6 @@
       "version": "1.15.11",
       "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.11.tgz",
       "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
-      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -3260,6 +3324,22 @@
         }
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.5.tgz",
+      "integrity": "sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.2",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmmirror.com/forwarded/-/forwarded-0.2.0.tgz",
@@ -3336,7 +3416,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -3354,7 +3433,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmmirror.com/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
       "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
-      "dev": true,
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.2",
         "es-define-property": "^1.0.1",
@@ -3378,7 +3456,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/get-proto/-/get-proto-1.0.1.tgz",
       "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
-      "dev": true,
       "dependencies": {
         "dunder-proto": "^1.0.1",
         "es-object-atoms": "^1.0.0"
@@ -3462,7 +3539,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmmirror.com/gopd/-/gopd-1.2.0.tgz",
       "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -3510,7 +3586,21 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/has-symbols/-/has-symbols-1.1.0.tgz",
       "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
-      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
       "engines": {
         "node": ">= 0.4"
       },
@@ -3528,7 +3618,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmmirror.com/hasown/-/hasown-2.0.2.tgz",
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.2"
       },
@@ -4542,7 +4631,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
       "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -4645,7 +4733,6 @@
       "version": "1.52.0",
       "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -4654,7 +4741,6 @@
       "version": "2.1.35",
       "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
       "dependencies": {
         "mime-db": "1.52.0"
       },
@@ -6097,6 +6183,12 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
     "node_modules/prr": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/prr/-/prr-1.0.1.tgz",
@@ -7415,6 +7507,20 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
+    "node_modules/vant": {
+      "version": "4.9.21",
+      "resolved": "https://registry.npmjs.org/vant/-/vant-4.9.21.tgz",
+      "integrity": "sha512-hXUoZMrLLjykimFRLDlGNd+K2iYSRh9YwLMKnsVdVZ+9inUKxpqnjhOqlZwocbnYkvJlS+febf9u9aJpDol4Pw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vant/popperjs": "^1.3.0",
+        "@vant/use": "^1.6.0",
+        "@vue/shared": "^3.5.17"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmmirror.com/vary/-/vary-1.1.2.tgz",

package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "axios": "^1.13.2",
+    "vant": "^4.9.21",
     "vue": "^3.2.13",
     "vue-router": "^4.0.3",
     "vuex": "^4.0.0"

src/assets/icon/bitcoin/den.svg

@@ -0,0 +1,5 @@
+<svg width="18" height="4" viewBox="0 0 18 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 2C8 2.55228 8.44772 3 9 3C9.55228 3 10 2.55228 10 2C10 1.44772 9.55228 1 9 1C8.44772 1 8 1.44772 8 2Z" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1 2C1 2.55228 1.44772 3 2 3C2.55228 3 3 2.55228 3 2C3 1.44772 2.55228 1 2 1C1.44772 1 1 1.44772 1 2Z" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15 2C15 2.55228 15.4477 3 16 3C16.5523 3 17 2.55228 17 2C17 1.44772 16.5523 1 16 1C15.4477 1 15 1.44772 15 2Z" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/icon/bitcoin/maipan.svg

@@ -0,0 +1,9 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="24" height="23" rx="4.5" fill="white" stroke="#A8A8A8"/>
+<rect x="4" y="4" width="8" height="16" fill="#FF7171"/>
+<rect x="13" y="5" width="8" height="2" fill="#FF7171"/>
+<rect x="13" y="8" width="8" height="2" fill="#FF7171"/>
+<rect x="13" y="11" width="8" height="2" fill="#FF7171"/>
+<rect x="13" y="14" width="8" height="2" fill="#FF7171"/>
+<rect x="13" y="17" width="8" height="2" fill="#FF7171"/>
+</svg>

src/assets/icon/bitcoin/qianbao1.svg

@@ -0,0 +1,9 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.7891 0C12.6029 0 13.2627 0.659763 13.2627 1.47363V3.15332C13.6974 3.41119 13.9999 3.8757 14 4.4209V8.8418C14 9.38706 13.6974 9.85148 13.2627 10.1094V11.7891C13.2627 12.603 12.603 13.2627 11.7891 13.2627H1.47363C0.659763 13.2627 0 12.6029 0 11.7891V1.47363C2.77545e-05 0.663147 0.655779 2.78135e-05 1.47363 0H11.7891ZM1.47363 11.7891H11.7891V10.3154H7.36816C6.55439 10.3153 5.89453 9.6556 5.89453 8.8418V4.4209C5.89461 3.60716 6.55444 2.94741 7.36816 2.94727H11.7891V1.47363H1.47363V11.7891ZM7.36816 8.8418H12.5264V4.4209H7.36816V8.8418ZM9.5791 5.52637C10.1895 5.52645 10.6846 6.02147 10.6846 6.63184C10.6844 7.24209 10.1894 7.73722 9.5791 7.7373C8.96877 7.7373 8.47377 7.24214 8.47363 6.63184C8.47363 6.02142 8.96868 5.52637 9.5791 5.52637Z" fill="black"/>
+<mask id="mask0_13_524" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="14" height="14">
+<path d="M11.7891 0C12.6029 0 13.2627 0.659763 13.2627 1.47363V3.15332C13.6974 3.41119 13.9999 3.8757 14 4.4209V8.8418C14 9.38706 13.6974 9.85148 13.2627 10.1094V11.7891C13.2627 12.603 12.603 13.2627 11.7891 13.2627H1.47363C0.659763 13.2627 0 12.6029 0 11.7891V1.47363C2.77545e-05 0.663147 0.655779 2.78135e-05 1.47363 0H11.7891ZM1.47363 11.7891H11.7891V10.3154H7.36816C6.55439 10.3153 5.89453 9.6556 5.89453 8.8418V4.4209C5.89461 3.60716 6.55444 2.94741 7.36816 2.94727H11.7891V1.47363H1.47363V11.7891ZM7.36816 8.8418H12.5264V4.4209H7.36816V8.8418ZM9.5791 5.52637C10.1895 5.52645 10.6846 6.02147 10.6846 6.63184C10.6844 7.24209 10.1894 7.73722 9.5791 7.7373C8.96877 7.7373 8.47377 7.24214 8.47363 6.63184C8.47363 6.02142 8.96868 5.52637 9.5791 5.52637Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_13_524)">
+<rect width="14" height="14" fill="#DF384C"/>
+</g>
+</svg>

src/assets/icon/bitcoin/qianwangcb.svg

@@ -0,0 +1,11 @@
+<svg width="163" height="61" viewBox="0 0 163 61" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M93.8491 56.7478C79.4254 56.7478 67.702 44.8782 67.702 30.3054C67.702 15.7326 79.439 3.84937 93.8491 3.84937C108.273 3.84937 119.996 15.7189 119.996 30.2917C119.996 44.8645 108.273 56.7478 93.8491 56.7478ZM93.8491 4.45313C79.7646 4.45313 68.299 16.0483 68.299 30.2917C68.299 44.5352 79.7646 56.1303 93.8491 56.1303C107.934 56.1303 119.399 44.5352 119.399 30.2917C119.399 16.0483 107.947 4.45313 93.8491 4.45313Z" fill="#1F2937"/>
+<path d="M93.8491 51.1493C82.4784 51.1493 73.2245 41.7909 73.2245 30.2918C73.2245 18.7928 82.4784 9.43433 93.8491 9.43433C105.22 9.43433 114.474 18.7928 114.474 30.2918C114.474 41.7909 105.22 51.1493 93.8491 51.1493ZM93.8491 10.0381C82.8041 10.0381 73.8215 19.1221 73.8215 30.2918C73.8215 41.4616 82.8041 50.5455 93.8491 50.5455C104.894 50.5455 113.877 41.4616 113.877 30.2918C113.877 19.1221 104.894 10.0381 93.8491 10.0381Z" fill="#1F2937"/>
+<path d="M96.5461 48.7798C106.64 38.5714 106.64 22.0204 96.5461 11.812C86.4516 1.60358 70.0854 1.60358 59.991 11.812C49.8966 22.0204 49.8966 38.5714 59.991 48.7798C70.0854 58.9882 86.4516 58.9882 96.5461 48.7798Z" fill="#E2E8F0"/>
+<path d="M78.2711 56.7476C63.8474 56.7476 52.124 44.878 52.124 30.3052C52.124 15.7324 63.861 3.84912 78.2711 3.84912C92.6811 3.84912 104.418 15.7187 104.418 30.2915C104.418 44.8643 92.6947 56.7476 78.2711 56.7476ZM78.2711 4.45289C64.1866 4.45289 52.721 16.048 52.721 30.2915C52.721 44.535 64.1866 56.1301 78.2711 56.1301C92.3555 56.1301 103.821 44.535 103.821 30.2915C103.821 16.048 92.3691 4.45289 78.2711 4.45289Z" fill="#1F2937"/>
+<path d="M92.6411 44.831C100.579 36.8036 100.579 23.7887 92.6411 15.7613C84.7033 7.73389 71.8337 7.73389 63.8959 15.7613C55.9582 23.7887 55.9582 36.8036 63.8959 44.831C71.8337 52.8584 84.7033 52.8584 92.6411 44.831Z" fill="#E2E8F0"/>
+<path d="M78.2711 51.1491C66.9004 51.1491 57.6465 41.7906 57.6465 30.2916C57.6465 18.7925 66.9004 9.43408 78.2711 9.43408C89.6417 9.43408 98.8957 18.7925 98.8957 30.2916C98.8957 41.7906 89.6417 51.1491 78.2711 51.1491ZM78.2711 10.0379C67.2261 10.0379 58.2435 19.1218 58.2435 30.2916C58.2435 41.4613 67.2261 50.5453 78.2711 50.5453C89.3161 50.5453 98.2986 41.4613 98.2986 30.2916C98.2986 19.1218 89.3161 10.0379 78.2711 10.0379Z" fill="#1F2937"/>
+<path d="M80.9696 48.7803C91.064 38.5719 91.064 22.0209 80.9696 11.8125C70.8752 1.60407 54.509 1.60407 44.4146 11.8125C34.3202 22.0208 34.3202 38.5719 44.4146 48.7803C54.509 58.9887 70.8752 58.9887 80.9696 48.7803Z" fill="#1F2937"/>
+<path d="M62.6944 51.1491C51.3238 51.1491 42.0698 41.7906 42.0698 30.2916C42.0698 18.7925 51.3238 9.43408 62.6944 9.43408C74.0651 9.43408 83.319 18.7925 83.319 30.2916C83.319 41.7906 74.0651 51.1491 62.6944 51.1491ZM62.6944 10.0379C51.6494 10.0379 42.6669 19.1218 42.6669 30.2916C42.6669 41.4613 51.6494 50.5453 62.6944 50.5453C73.7394 50.5453 82.722 41.4613 82.722 30.2916C82.722 19.1218 73.7394 10.0379 62.6944 10.0379Z" fill="#E2E8F0"/>
+<path d="M61.3646 46.5387V42.5455C59.0987 42.5044 56.7512 41.7908 55.3808 40.8028L56.317 38.1545C57.7282 39.1013 59.7635 39.856 61.9481 39.856C64.7297 39.856 66.6022 38.2368 66.6022 35.9864C66.6022 33.8046 65.0825 32.4598 62.1788 31.2797C58.1895 29.7017 55.72 27.8767 55.72 24.4325C55.72 21.1529 58.0267 18.6555 61.6225 18.0654V14.0586H64.0513V17.9008C66.3987 17.9831 67.9998 18.6143 69.1396 19.2867L68.1626 21.8939C67.3349 21.4136 65.7338 20.5491 63.2371 20.5491C60.2249 20.5491 59.0851 22.3741 59.0851 23.9522C59.0851 26.0105 60.5369 27.0396 63.9292 28.4667C67.9591 30.1271 69.9944 32.1854 69.9944 35.712C69.9944 38.8406 67.837 41.7634 63.8206 42.4358V46.5524H61.3646V46.5387Z" fill="white"/>
+</svg>

src/assets/icon/bitcoin/qiaobao.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="14" height="14" fill="#DF384C"/>
+</svg>

src/assets/icon/bitcoin/quancang.svg

@@ -0,0 +1,3 @@
+<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.25 9.75C7.25 9.89833 7.20601 10.0433 7.1236 10.1667C7.04119 10.29 6.92406 10.3861 6.78701 10.4429C6.64997 10.4997 6.49917 10.5145 6.35368 10.4856C6.2082 10.4566 6.07456 10.3852 5.96967 10.2803C5.86478 10.1754 5.79335 10.0418 5.76441 9.89632C5.73547 9.75083 5.75033 9.60003 5.80709 9.46299C5.86386 9.32594 5.95999 9.20881 6.08332 9.1264C6.20666 9.04398 6.35167 9 6.5 9C6.69891 9 6.88968 9.07902 7.03033 9.21967C7.17098 9.36032 7.25 9.55109 7.25 9.75ZM6.5 3C5.12125 3 4 4.00937 4 5.25V5.5C4 5.63261 4.05268 5.75978 4.14645 5.85355C4.24022 5.94732 4.36739 6 4.5 6C4.63261 6 4.75979 5.94732 4.85355 5.85355C4.94732 5.75978 5 5.63261 5 5.5V5.25C5 4.5625 5.67313 4 6.5 4C7.32688 4 8 4.5625 8 5.25C8 5.9375 7.32688 6.5 6.5 6.5C6.36739 6.5 6.24022 6.55268 6.14645 6.64644C6.05268 6.74021 6 6.86739 6 7V7.5C6 7.63261 6.05268 7.75978 6.14645 7.85355C6.24022 7.94732 6.36739 8 6.5 8C6.63261 8 6.75979 7.94732 6.85355 7.85355C6.94732 7.75978 7 7.63261 7 7.5V7.455C8.14 7.24562 9 6.33625 9 5.25C9 4.00937 7.87875 3 6.5 3ZM13 6.5C13 7.78558 12.6188 9.04228 11.9046 10.1112C11.1903 11.1801 10.1752 12.0132 8.98744 12.5052C7.79972 12.9972 6.49279 13.1259 5.23191 12.8751C3.97104 12.6243 2.81285 12.0052 1.90381 11.0962C0.994767 10.1872 0.375702 9.02896 0.124899 7.76809C-0.125905 6.50721 0.00281632 5.20028 0.494786 4.01256C0.986755 2.82484 1.81988 1.80968 2.8888 1.09545C3.95771 0.381218 5.21442 0 6.5 0C8.22335 0.00181989 9.87559 0.687223 11.0942 1.90582C12.3128 3.12441 12.9982 4.77665 13 6.5ZM12 6.5C12 5.4122 11.6774 4.34883 11.0731 3.44436C10.4687 2.53989 9.60975 1.83494 8.60476 1.41866C7.59977 1.00238 6.4939 0.893462 5.42701 1.10568C4.36011 1.3179 3.3801 1.84172 2.61091 2.61091C1.84173 3.3801 1.3179 4.36011 1.10568 5.427C0.893465 6.4939 1.00238 7.59976 1.41867 8.60476C1.83495 9.60975 2.5399 10.4687 3.44437 11.0731C4.34884 11.6774 5.4122 12 6.5 12C7.95818 11.9983 9.35617 11.4183 10.3873 10.3873C11.4184 9.35617 11.9983 7.95818 12 6.5Z" fill="#999999"/>
+</svg>

src/assets/icon/bitcoin/quangcang1.svg

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

src/assets/icon/bitcoin/shendul.svg

@@ -0,0 +1,8 @@
+<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_13_594" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="13" height="13">
+<rect width="13" height="13" fill="white"/>
+</mask>
+<g mask="url(#mask0_13_594)">
+<path d="M3.25 4.875L6.5 8.125L9.75 4.875" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

src/assets/icon/bitcoin/shendur.svg

@@ -0,0 +1,9 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="24" height="23" rx="4.5" fill="white" stroke="#A8A8A8"/>
+<rect x="4" y="4" width="8" height="7" fill="#FF7171"/>
+<rect x="13" y="5" width="8" height="2" fill="#FF7171"/>
+<rect x="13" y="8" width="8" height="2" fill="#FF7171"/>
+<rect x="4" y="13" width="8" height="7" fill="#45B26B"/>
+<rect x="13" y="14" width="8" height="2" fill="#45B26B"/>
+<rect x="13" y="17" width="8" height="2" fill="#45B26B"/>
+</svg>

src/assets/icon/bitcoin/shizhong.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/bitcoin/wuzichan.svg

@@ -0,0 +1,10 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="24" height="23" rx="4.5" fill="white" stroke="#A8A8A8"/>
+<rect x="4" y="4" width="8" height="7" fill="#FF7171"/>
+<rect x="13" y="5" width="8" height="2" fill="#45B26B"/>
+<rect x="13" y="8" width="8" height="2" fill="#45B26B"/>
+<rect x="13" y="11" width="8" height="2" fill="#45B26B"/>
+<rect x="4" y="4" width="8" height="16" fill="#45B26B"/>
+<rect x="13" y="14" width="8" height="2" fill="#45B26B"/>
+<rect x="13" y="17" width="8" height="2" fill="#45B26B"/>
+</svg>

src/main.js

@@ -2,6 +2,7 @@ import { createApp } from "vue";
 import App from "./App.vue";
 import router from "./router";
 import store from "./store";
+import 'vant/lib/index.css';
 
 // 引入less样式文件
 import "./assets/less/index.less";

src/views/bitcoin/Index.vue

@@ -1,5 +1,807 @@
 <template>
-  <div>bitcoin</div>
+  <div class="market">
+    <div class="market-nav">
+      <div class="nav-left">
+        <div class="pf600 fs18 fc121212" @click="messageChange('selfSelected')">合约
+          <div class="active-line"></div>
+        </div>
+        <div class="sys-notifi pf600 fs14 fcA8A8A8" @click="messageChange('contract')">秒合约</div>
+        <div
+          class="sys-notifi pf600 fs14 fcA8A8A8"
+          @click="messageChange('secondContract')">
+          期权
+        </div>
+        <div
+          class="sys-notifi pf600 fs14 fcA8A8A8"
+          @click="messageChange('secondContract')">
+          杠杆
+        </div>
+      </div>
+
+    </div>
+    <div class="menu">
+      <div class="menu-left">
+      <img class="fc333333" src="../../assets/icon/bitcoin/menu.svg" alt="">
+      <div class="pf600 fs18 fc121212" >BTCUSDT 永续</div>
+    </div>
+    <div class="menu-right fc333333">
+      <img src="../../assets/icon/bitcoin/jisuan.svg" alt="">
+      <img src="../../assets/icon/bitcoin/hangqing.svg" alt="">
+      <img src="../../assets/icon/bitcoin/den.svg" alt="">
+    </div>
+    </div>
+    <div class="menu-bottom">
+      <div class="pf500 fs12 menu-leftb">
+        +2.18%
+      </div>
+      <div class="fc333333 fs12 pf400 menu-rightb">
+        <div>资金费率/倒计时</div>
+        <div>0.003%/1:57:32</div>
+      </div>
+    </div>
+    <div class="menu-content" >
+<!--      //左边-->
+      <div class="menu-content-l">
+        <div class="menu-content-lb pf400 fs14 fc666666">
+          <span>价格</span><span>数量(USDT)</span>
+        </div>
+        <div  class="menu-content-lb1">
+          <div class="menu-content-lb1l pf400 fs14 fcFF7171">
+            <span class="">40,166.82</span>
+            <span>40,166.82</span>
+            <span>40,166.82</span>
+            <span>40,166.82</span>
+            <span>40,166.82</span>
+            <span>40,166.82</span>
+            <span>40,166.82</span>
+            <span>40,166.82</span>
+            <span>40,166.82</span>
+
+          </div>
+          <div class="menu-content-lb1r pf400 fs14 fc444444">
+            <span>37.80K</span>
+            <span>37.80K</span>
+            <span>37.80K</span>
+            <span>37.80K</span>
+            <span>37.80K</span>
+            <span>37.80K</span>
+            <span>37.80K</span>
+            <span>37.80K</span>
+            <span>37.80K</span>
+
+          </div>
+        </div>
+        <div class="menu-content-lb2">
+          <p class="pf600 fs16 fcDF384C">5,678.00</p>
+          <p class="fs12 fcA8A8A8 pf400">1,678.00</p>
+        </div>
+        <div  class="menu-content-lb1">
+          <div class="menu-content-lb1l pf400 fs14 fcFF7171">
+            <span class="">40,166.82</span>
+            <span>40,166.82</span>
+            <span>40,166.82</span>
+            <span>40,166.82</span>
+            <span>40,166.82</span>
+            <span>40,166.82</span>
+            <span>40,166.82</span>
+            <span>40,166.82</span>
+            <span>40,166.82</span>
+
+          </div>
+          <div class="menu-content-lb1r pf400 fs14 fc444444">
+            <span>37.80K</span>
+            <span>37.80K</span>
+            <span>37.80K</span>
+            <span>37.80K</span>
+            <span>37.80K</span>
+            <span>37.80K</span>
+            <span>37.80K</span>
+            <span>37.80K</span>
+            <span>37.80K</span>
+
+          </div>
+        </div>
+        <div class="menu-content-lb1">
+          <div class="menu-content-lb1l pf400 fs12 fc333333" @click="isPickerVisible = true">
+            <span class="fs12">{{displayLabel}}</span>
+            <img src="../../assets/icon/bitcoin/shendul.svg" alt="">
+
+          </div>
+          <div class="menu-content-lb1r pf400 fs14 fc444444">
+            <img src="../../assets/icon/bitcoin/shendur.svg" alt="">
+            <img v-if="isassetlessState" src="../../assets/icon/bitcoin/wuzichan.svg" alt="">
+          </div>
+        </div>
+
+      </div>
+      <assetlessStateData v-if="isassetlessState"></assetlessStateData>
+      <SellTradingStatusData v-if="isassetlessState"></SellTradingStatusData>
+<!--      //右边-->
+      <div  class="menu-content-r">
+        <div class="menu-content-rb pf400 fs14">
+         <div class="menu-content-rb1 fs14 fc333333">
+            <img src="../../assets/icon/bitcoin/quancang.svg" alt="">
+            <span>全仓</span>
+         </div>
+         <img src="../../assets/icon/bitcoin/quangcang1.svg" alt="">
+
+
+      </div>
+        <div class="menu-content-rb pf400 fs14">
+         <div class="menu-content-rb1 fs14 fc333333">
+            <img src="../../assets/icon/bitcoin/quancang.svg" alt="">
+            <span>市价</span>
+         </div>
+         <img src="../../assets/icon/bitcoin/quangcang1.svg" alt="">
+      </div>
+        <div class="menu-content-rb pf400 fs14">
+         <div class="menu-content-rb1 fs14 fc333333">
+            <span>125000</span>
+         </div>
+          <span>最优价</span>
+      </div>
+        <div class="menu-content-rb pf400 fs14 fc333333">≈25.2250 USDT</div>
+        <div class="menu-content-rb pf400 fs14">
+         <div class="menu-content-rb1 fs14 fc333333">
+            <span class="menu-content-rb1s fc999999">数量</span>
+         </div>
+         <span>USDT</span>
+      </div>
+        <div class="menu-content-rb pf400 fs14">
+         <div class="menu-content-rb1 fs14 fc333333">
+           <span class="menu-content-rb1s fc333333">可用</span>
+         </div>
+         <div class="menu-content-rb1">
+            <span>0</span>
+            <span>USDT</span>
+            <img class="fs16" src="../../assets/icon/bitcoin/qianbao1.svg" alt="">
+         </div>
+
+      </div>
+        <div class="menu-content-rb pf400 fs14">
+         <div class="menu-content-rb1 fs14 fc333333">
+           <span class="menu-content-rb1s fc333333">倍数</span>
+         </div>
+         <div class="menu-content-rb1" @click="showLeverageModal = true">
+            <span></span>
+            <span>{{ selectedLeverage }}X</span>
+            <span>更多</span>
+         </div>
+
+      </div>
+        <div class="menu-content-rb pf400 fs14">
+         <div class="menu-content-rb1 fs14 fc333333">
+<!--           <label class="custom-checkbox-container">-->
+<!--            <input type="checkbox" checked="checked">-->
+<!--            <span class="checkmark"></span>-->
+<!--            </label>-->
+           <van-checkbox
+              v-model="isEnabled"
+              shape="square"
+              checked-color="#DC4653"
+              icon-size="16px"
+           >
+           </van-checkbox>
+<!--           <input class="fs16" type="checkbox" id="bike" value="Bike">-->
+           <span class="menu-content-rb1s fc333333">只减仓</span>
+         </div>
+         <div class="menu-content-rb1" @click="showModal = true">
+            <span></span>
+            <span>{{ currentType }}</span>
+            <img class="fs16" src="../../assets/icon/bitcoin/quangcang1.svg" alt="">
+         </div>
+
+      </div>
+        <TakeProfitsTopLoss v-show="!isEnabled"></TakeProfitsTopLoss>
+
+        <div class="menu-content-rb pf400 fs14">
+         <div class="menu-content-rb1 fs14 fc333333">
+           <span class="menu-content-rb1s fc333333">可用</span>
+         </div>
+         <div class="menu-content-rb1">
+            <span>0</span>
+            <span>USDT</span>
+
+         </div>
+
+      </div>
+        <div class="menu-content-rb pf400 fs14">
+         <div class="menu-content-rb1 fs14 fc333333">
+           <span class="menu-content-rb1s fc333333">保证金</span>
+         </div>
+         <div class="menu-content-rb1">
+            <span>0</span>
+            <span>USDT</span>
+
+         </div>
+
+      </div>
+
+        <div class="menu-content-rb pf400 fs14" @click="showConfirm = true">
+          <div class="pf400 fs16 fcFFFFFF">买入(做多)</div>
+
+        </div>
+
+        <div class="menu-content-rb pf400 fs14">
+         <div class="menu-content-rb1 fs14 fc333333">
+           <span class="menu-content-rb1s fc333333">可用</span>
+         </div>
+         <div class="menu-content-rb1">
+            <span>0</span>
+            <span>USDT</span>
+
+         </div>
+
+      </div>
+        <div class="menu-content-rb pf400 fs14">
+         <div class="menu-content-rb1 fs14 fc333333">
+           <span class="menu-content-rb1s fc333333">保证金</span>
+         </div>
+         <div class="menu-content-rb1">
+            <span>0</span>
+            <span>USDT</span>
+
+         </div>
+
+      </div>
+        <div class="menu-content-rb pf400 fs14">
+          <div class="pf400 fs16 fcFFFFFF" @click="showConfirm = true">卖出(做空)</div>
+        </div>
+      </div>
+    </div>
+    <sellOrder></sellOrder>
+    <!--    //各种弹窗-->
+    <div v-if="isassetlessState">
+      <assetlessState></assetlessState>
+    </div>
+    <div>
+      <ChooseThisDepth
+          v-model:show="isPickerVisible"
+          v-model="currentDepth"
+      ></ChooseThisDepth>
+    </div>
+    <div>
+      <LeveragePopup
+          v-model:visible="showLeverageModal"
+          :initial-value="selectedLeverage"
+          @confirm="handleConfirm">
+      </LeveragePopup>
+    </div>
+    <div>
+      <OrderConfirmPopup
+          v-model:visible="showConfirm"
+          @confirm="onOrderConfirmed">
+      </OrderConfirmPopup>
+    </div>
+    <div>
+      <OrderTimeSheet
+          v-model:visible="showModal"
+          v-model="currentType"
+      ></OrderTimeSheet>
+    </div>
+  </div>
+
 </template>
-<script setup></script>
-<style lang="less" scoped></style>
+<script setup>
+    import { Checkbox as VanCheckbox } from 'vant';
+    // import { Icon as VanIcon, } from 'vant';
+    import { defineAsyncComponent } from 'vue';
+    import { ref ,computed} from 'vue';
+    // 懒加载多个组件
+    const priceLimit = defineAsyncComponent(() => import("./components/priceLimit.vue"));
+    const assetlessState = defineAsyncComponent(() => import("./components/assetlessState.vue"));
+    const assetlessStateData = defineAsyncComponent(() => import("./components/assetlessStateData.vue"));
+    const sellOrder = defineAsyncComponent(() => import('./components/sellOrder.vue'));
+    const SellTradingStatusData = defineAsyncComponent(() => import('./components/SellTradingStatusData.vue'));
+    const TakeProfitsTopLoss = defineAsyncComponent(() => import('./components/TakeProfitsTopLoss.vue'));
+    const ChooseThisDepth = defineAsyncComponent(() => import('./components/ChooseThisDepth.vue'));
+    const LeveragePopup = defineAsyncComponent(() => import('./components/LeveragePopup.vue'));
+    const OrderConfirmPopup = defineAsyncComponent(() => import('./components/OrderConfirmPopup.vue'));
+    const OrderTimeSheet = defineAsyncComponent(() => import('./components/OrderTimeSheet.vue'));
+    //GTC弹框
+    // 控制弹窗显示
+    const showModal = ref(false);
+
+    // 选中的值，默认为 GTC
+    const currentType = ref('GTC');
+
+
+    // --- 深度弹窗 ---
+    const isPickerVisible = ref(false); // 控制弹窗开关
+    const currentDepth = ref('depth1'); // 当前选中的深度
+    const depthMap = {
+      'depth1': '深度1',
+      'depth2': '深度2',
+      'depth3': '深度3',
+    };
+    const displayLabel = computed(() => depthMap[currentDepth.value] || '请选择');
+
+    //控制止盈止损
+    const isEnabled = ref(false);
+
+    //控制倍数
+    // 控制弹窗显示
+    const showLeverageModal = ref(false);
+    // 存储当前选中的倍数，默认 100
+    const selectedLeverage = ref(100);
+    // 处理子组件回传的确认事件
+    const handleConfirm = (value) => {
+      console.log('用户选择了:', value);
+      selectedLeverage.value = value;
+      // 这里可以继续添加发送 API 请求的逻辑
+    };
+
+    //做多买入
+    const showConfirm = ref(false);
+    const onOrderConfirmed = () => {
+      console.log('订单已提交');
+      // 这里可以添加 Toast 提示
+    };
+
+
+</script>
+<style lang="less" scoped>
+
+/* 容器基础样式，基于 375px 设计稿 */
+:deep(.van-checkbox__icon--square .van-icon) {
+  /* 这里的 4px 是圆角大小，数值越大越圆 */
+  border-radius: 2px !important;}
+  .market {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    margin-bottom: 100px;
+    width: 100%;
+
+    .market-nav {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 21px;
+      width: 345px;
+      height: 24px;
+
+      .nav-left {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: flex-end;
+        width: 349px;
+        height: 24px;
+        div:nth-child(1){
+          position: relative;
+          .active-line{
+                position: absolute;
+                bottom: -6px;
+                left: 50%;
+                transform: translateX(-50%);
+                width: 20px;
+                height: 3px;
+                background-color: #323233;
+                border-radius: 2px;
+          }
+        }
+
+        .sys-notifi {
+          margin-left: 35px;
+        }
+      }
+
+      .nav-right {
+        width: 20px;
+        height: 20px;
+      }
+    }
+    .menu {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 21px;
+      width: 345px;
+      height: 24px;
+
+      .menu-left{
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        line-height:0px;
+        img{
+          margin: 0px 10px 0 0;
+        }
+      }
+      .menu-right{
+        img{
+          margin-left: 14px;
+        }
+      }
+    }
+
+    .menu-bottom {
+       display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 8px;
+      width: 345px;
+      .menu-leftb{
+        width:61px;
+        height: 25px;
+        background-color: #45b26b;
+        border-radius: 5px;
+        color: #ffffff;
+        text-align: center;
+        line-height: 25px;
+      }
+      .menu-rightb{
+        text-align: right;
+      }
+    }
+
+    .menu-content{
+      width: 100%;
+      max-width: 345px;
+      display: flex;
+      flex-direction: row;
+      margin-top: 8px;
+      .menu-content-l{
+        flex: 1;
+        .menu-content-lb{
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          padding-right: 14px;
+        }
+        .menu-content-lb1{
+          margin-top: 11px;
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+           padding-right: 14px;
+          .menu-content-lb1l{
+            display: flex;
+            flex-direction: column;
+            line-height: 22px;
+          }
+          .menu-content-lb1r{
+            display: flex;
+            flex-direction: column;
+            line-height: 22px;
+          }
+        }
+        .menu-content-lb1:nth-child(4){
+          .menu-content-lb1l{
+            color: #45b26b;
+          }
+        }
+        .menu-content-lb1:nth-child(5){
+          .menu-content-lb1l{
+            width: 100%;
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+            background-color: #f5f5f5;
+            border-radius: 6px;
+            height: 24px;
+            padding: 0 5px 0 13px;
+
+
+          }
+          .menu-content-lb1r{
+            margin-left: 15px;
+          }
+        }
+
+        .menu-content-lb2{
+          margin-top: 8px;
+          line-height: 16px;
+          //span:nth-child(2){
+          //  //border-style: dashed;
+          //}
+        }
+      }
+      .menu-content-r{
+        flex: 1;
+        flex-basis: 63.5px;
+        max-width: 204.25px;
+        .menu-content-rb:nth-of-type(4){
+           background-color: transparent;
+            height:20px;
+
+        }
+        .menu-content-rb {
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background-color: #f5f5f5;
+            border-radius: 6px;
+            margin-bottom: 8px;
+            height: 38px;
+          span{
+              padding-right: 12px;
+
+            }
+          img{
+            padding-right: 12px;
+            //height: 16px;
+            //width: 16px;
+          }
+
+          .menu-content-rb1{
+            text-align: center;
+            margin-left: 12px;
+            //padding-right: 12px;
+
+            img{
+              padding-right: 6px;
+
+            }
+
+          }
+          }
+        .menu-content-rb:nth-of-type(6){
+           background-color: transparent;
+            height:20px;
+           .menu-content-rb1{
+              margin-left: 0;
+            }
+          .menu-content-rb1:nth-child(2){
+            span:nth-child(1){
+
+               font-size: 12px;
+            }
+            span:nth-child(2){
+              margin:0 9px 0 9px;
+               font-size: 12px;
+            }
+          }
+           span{
+              padding-right: 0;
+            }
+          img{
+            padding-right: 0;
+          }
+
+        }
+        .menu-content-rb:nth-of-type(7){
+           background-color: transparent;
+            height:20px;
+           .menu-content-rb1{
+              margin-left: 0;
+            }
+          .menu-content-rb1:nth-child(2){
+            span:nth-child(2){
+              margin:0 9px 0 9px;
+              font-size: 12px;
+            }
+            span:nth-child(3){
+              color: #df384c;
+            }
+          }
+           span{
+              padding-right: 0;
+            }
+          img{
+            padding-right: 0;
+          }
+
+        }
+        .menu-content-rb:nth-of-type(8){
+           background-color: transparent;
+            height:20px;
+           .menu-content-rb1{
+             display: flex;
+             align-items: center;
+             height: 24px;
+              margin-left: 0;
+             align-content: center;
+             input{
+                width:16px;
+               height: 16px;
+               margin-right: 5px;
+             }
+            }
+          .menu-content-rb1:nth-child(2){
+            span:nth-child(2){
+              margin:0 9px 0 9px;
+            }
+          }
+          .menu-content-rb1s{
+            margin-left: 6px;
+          }
+           span{
+              padding-right: 0;
+            }
+          img{
+            padding-right: 0;
+          }
+
+        }
+        .menu-content-rb:nth-of-type(9){
+           background-color: transparent;
+            height:20px;
+           .menu-content-rb1{
+             display: flex;
+             align-items: center;
+             height: 24px;
+              margin-left: 0;
+             align-content: center;
+             input{
+                width:16px;
+               height: 16px;
+               margin-right: 5px;
+             }
+             img{
+               padding-left: 5px;
+               font-size: 16px;
+               padding-top: 2px;
+             }
+            }
+          .menu-content-rb1:nth-child(2){
+            span:nth-child(2){
+              margin:0 9px 0 9px;
+            }
+          }
+           span{
+              padding-right: 0;
+            }
+          img{
+            padding-right: 0;
+          }
+
+        }
+        .menu-content-rb:nth-of-type(10){
+           background-color: transparent;
+            height:20px;
+           .menu-content-rb1{
+             display: flex;
+             align-items: center;
+             height: 24px;
+              margin-left: 0;
+             align-content: center;
+             input{
+                width:16px;
+               height: 16px;
+               margin-right: 5px;
+             }
+             img{
+               padding-left: 5px;
+               font-size: 16px;
+               padding-top: 2px;
+             }
+            }
+          .menu-content-rb1:nth-child(2){
+            span:nth-child(2){
+              margin:0 0px 0 5px;
+            }
+          }
+           span{
+              padding-right: 0;
+            }
+          img{
+            padding-right: 0;
+          }
+
+        }
+        .menu-content-rb:nth-of-type(11){
+           background-color: transparent;
+            height:20px;
+           .menu-content-rb1{
+             display: flex;
+             align-items: center;
+             height: 24px;
+              margin-left: 0;
+             align-content: center;
+             input{
+                width:16px;
+               height: 16px;
+               margin-right: 5px;
+             }
+             img{
+               padding-left: 5px;
+               font-size: 16px;
+               padding-top: 2px;
+             }
+            }
+          .menu-content-rb1:nth-child(2){
+            span:nth-child(2){
+              margin:0 0px 0 5px;
+            }
+          }
+           span{
+              padding-right: 0;
+            }
+          img{
+            padding-right: 0;
+          }
+
+        }
+        .menu-content-rb:nth-of-type(12){
+           background-color: #45b26b;
+           div{margin: auto;}
+
+        }
+        .menu-content-rb:nth-of-type(13){
+           background-color: transparent;
+            height:20px;
+           .menu-content-rb1{
+             display: flex;
+             align-items: center;
+             height: 24px;
+              margin-left: 0;
+             align-content: center;
+             input{
+                width:16px;
+               height: 16px;
+               margin-right: 5px;
+             }
+             img{
+               padding-left: 5px;
+               font-size: 16px;
+               padding-top: 2px;
+             }
+            }
+          .menu-content-rb1:nth-child(2){
+            span:nth-child(2){
+              margin:0 0px 0 5px;
+            }
+          }
+           span{
+              padding-right: 0;
+            }
+          img{
+            padding-right: 0;
+          }
+
+        }
+        .menu-content-rb:nth-of-type(14){
+           background-color: transparent;
+            height:20px;
+           .menu-content-rb1{
+             display: flex;
+             align-items: center;
+             height: 24px;
+              margin-left: 0;
+             align-content: center;
+             input{
+                width:16px;
+               height: 16px;
+               margin-right: 5px;
+             }
+             img{
+               padding-left: 5px;
+               font-size: 16px;
+               padding-top: 2px;
+             }
+            }
+          .menu-content-rb1:nth-child(2){
+            span:nth-child(2){
+              margin:0 0px 0 5px;
+            }
+          }
+           span{
+              padding-right: 0;
+            }
+          img{
+            padding-right: 0;
+          }
+
+        }
+        .menu-content-rb:nth-of-type(15){
+           background-color: #df384c;
+           div{margin: auto;}
+
+        }
+        //.van-dropdown-menu__bar{
+        //  width: 214px;
+        //}
+
+      }
+    }
+  }
+</style>

src/views/bitcoin/components/ChooseThisDepth.vue

@@ -0,0 +1,112 @@
+<script setup>
+// --- 接收父组件参数 ---
+const props = defineProps({
+  // 1. 控制显示 (对应 v-model:show)
+  show: {
+    type: Boolean,
+    default: false
+  },
+  // 2. 当前选中的值 (对应 v-model)
+  modelValue: {
+    type: String,
+    default: ''
+  }
+});
+
+// --- 定义事件 ---
+const emit = defineEmits(['update:show', 'update:modelValue']);
+
+const options = [
+  { label: '深度1', value: 'depth1' },
+  { label: '深度2', value: 'depth2' },
+  { label: '深度3', value: 'depth3' },
+];
+
+// --- 交互逻辑 ---
+const close = () => {
+  emit('update:show', false); // 通知父组件：把 show 改成 false
+};
+
+const selectItem = (item) => {
+  emit('update:modelValue', item.value); // 通知父组件：更新选中的值
+  close(); // 选完直接关闭
+};
+</script>
+
+<template>
+  <teleport to="body">
+
+    <transition name="fade">
+      <div v-if="show" class="overlay" @click="close"></div>
+    </transition>
+
+    <transition name="slide-up">
+      <div v-if="show" class="popup-wrapper" @click.stop>
+        <div class="popup-header">
+          <div class="handle-bar"></div>
+          <div class="title">选择深度</div>
+        </div>
+
+        <div class="popup-content">
+          <div
+            v-for="item in options"
+            :key="item.value"
+            class="option-item"
+            @click="selectItem(item)"
+          >
+            <span :class="['label', { 'active': modelValue === item.value }]">
+              {{ item.label }}
+            </span>
+
+            <svg v-if="modelValue === item.value" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#DC4653" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+              <polyline points="20 6 9 17 4 12"></polyline>
+            </svg>
+          </div>
+        </div>
+        <div class="safe-area"></div>
+      </div>
+    </transition>
+
+  </teleport>
+</template>
+
+<style scoped>
+/* --- 仅包含弹窗相关的样式 --- */
+.overlay {
+  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(2px);
+  z-index: 999;
+}
+
+.popup-wrapper {
+  position: fixed; bottom: 0; left: 0; right: 0;
+  background-color: #FFFFFF;
+  border-top-left-radius: 16px;
+  border-top-right-radius: 16px;
+  z-index: 1000;
+  padding-bottom: 10px;
+}
+
+.popup-header { padding-top: 10px; margin-bottom: 10px; }
+.handle-bar {
+  width: 36px; height: 4px; background-color: #E6E8EA;
+  border-radius: 2px; margin: 0 auto 16px; }
+.title { font-size: 18px; font-weight: 600; color: #1E2329; padding: 0 20px; }
+
+.popup-content { max-height: 60vh; overflow-y: auto; }
+.option-item { display: flex; justify-content: space-between;
+  align-items: center; height: 56px; padding: 0 20px; cursor: pointer; }
+.option-item:active { background-color: #F5F5F5; }
+
+.label { font-size: 16px; color: #848E9C; }
+.label.active { color: #1E2329; font-weight: 500; }
+
+.safe-area { height: env(safe-area-inset-bottom); }
+
+/* 动画 */
+.fade-enter-active, .fade-leave-active { transition: opacity 0.3s; }
+.fade-enter-from, .fade-leave-to { opacity: 0; }
+.slide-up-enter-active, .slide-up-leave-active { transition: transform 0.3s cubic-bezier(0.2, 0, 0.2, 1); }
+.slide-up-enter-from, .slide-up-leave-to { transform: translateY(100%); }
+</style>

src/views/bitcoin/components/LeveragePopup.vue

@@ -0,0 +1,300 @@
+<template>
+  <Teleport to="body">
+    <transition name="fade">
+      <div
+        v-if="visible"
+        class="mask"
+        @click="handleClose"
+      ></div>
+    </transition>
+
+    <transition name="slide-up">
+      <div v-if="visible" class="popup-container">
+        <div class="drag-handle-area">
+          <div class="drag-handle"></div>
+        </div>
+
+        <div class="popup-content">
+          <h3 class="title">切换倍数</h3>
+
+          <div class="stepper-box">
+            <button class="step-btn minus" @click="decrement" :disabled="currentIndex <= 0">
+              <span class="icon">−</span>
+            </button>
+            <div class="value-display">{{ currentValue }}x</div>
+            <button class="step-btn plus" @click="increment" :disabled="currentIndex >= marks.length - 1">
+              <span class="icon">+</span>
+            </button>
+          </div>
+
+          <div class="slider-container">
+            <div class="slider-track-bg"></div>
+            <div
+              class="slider-track-active"
+              :style="{ width: getProgressPercent + '%' }"
+            ></div>
+
+            <div
+              class="slider-thumb"
+              :style="{ left: getProgressPercent + '%' }"
+              @touchstart="startDrag"
+            >
+              <div class="inner-circle"></div>
+            </div>
+
+            <input
+              type="range"
+              min="0"
+              :max="marks.length - 1"
+              step="1"
+              v-model="currentIndex"
+              class="native-input"
+            />
+          </div>
+
+          <div class="slider-labels">
+            <span
+              v-for="(mark, index) in marks"
+              :key="mark"
+              :class="{ active: index === currentIndex }"
+            >
+              {{ mark }}x
+            </span>
+          </div>
+
+          <button class="confirm-btn" @click="confirmSelection">
+            确认
+          </button>
+        </div>
+      </div>
+    </transition>
+  </Teleport>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue';
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  initialValue: {
+    type: Number,
+    default: 50
+  }
+});
+
+const emit = defineEmits(['update:visible', 'confirm']);
+
+// 定义倍数阶梯 (非线性)
+const marks = [10, 50, 100, 500, 1000];
+
+// 当前选中的索引 (对应 marks 数组)
+const currentIndex = ref(1);
+
+// 监听弹窗打开，初始化数值
+watch(() => props.visible, (newVal) => {
+  if (newVal) {
+    const idx = marks.indexOf(props.initialValue);
+    currentIndex.value = idx !== -1 ? idx : 1; // 默认选中50x或传入值
+  }
+});
+
+// 计算当前显示的具体倍数值
+const currentValue = computed(() => marks[currentIndex.value]);
+
+// 计算进度条百分比
+const getProgressPercent = computed(() => {
+  return (currentIndex.value / (marks.length - 1)) * 100;
+});
+
+// 步进器逻辑
+const increment = () => {
+  if (currentIndex.value < marks.length - 1) currentIndex.value++;
+};
+const decrement = () => {
+  if (currentIndex.value > 0) currentIndex.value--;
+};
+
+// 关闭弹窗
+const handleClose = () => {
+  emit('update:visible', false);
+};
+
+// 确认选择
+const confirmSelection = () => {
+  emit('confirm', currentValue.value);
+  handleClose();
+};
+</script>
+
+<style scoped>
+/* 动画效果 */
+.fade-enter-active, .fade-leave-active { transition: opacity 0.3s; }
+.fade-enter-from, .fade-leave-to { opacity: 0; }
+
+.slide-up-enter-active, .slide-up-leave-active { transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.5, 1); }
+.slide-up-enter-from, .slide-up-leave-to { transform: translateY(100%); }
+
+/* 遮罩层 */
+.mask {
+  position: fixed;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 998;
+}
+
+/* 弹窗容器 */
+.popup-container {
+  position: fixed;
+  bottom: 0; left: 0; right: 0;
+  background: #ffffff;
+  border-top-left-radius: 16px;
+  border-top-right-radius: 16px;
+  z-index: 999;
+  padding-bottom: env(safe-area-inset-bottom);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+}
+
+/* 拖拽条 */
+.drag-handle-area {
+  padding: 10px 0;
+  display: flex;
+  justify-content: center;
+}
+.drag-handle {
+  width: 40px;
+  height: 4px;
+  background: #E0E0E0;
+  border-radius: 2px;
+}
+
+.popup-content {
+  padding: 0 20px 20px 20px;
+}
+
+.title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+  margin: 0 0 20px 0;
+}
+
+/* 步进器样式 */
+.stepper-box {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: #F7F8FA;
+  border-radius: 8px;
+  padding: 5px;
+  margin-bottom: 30px;
+  height: 48px;
+}
+
+.step-btn {
+  border: none;
+  background: transparent;
+  width: 48px;
+  height: 100%;
+  font-size: 24px;
+  color: #999;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.step-btn:disabled { opacity: 0.3; }
+.step-btn:active { opacity: 0.6; }
+
+.value-display {
+  font-size: 18px;
+  font-weight: 500;
+  color: #333;
+}
+
+/* 滑块样式核心 */
+.slider-container {
+  position: relative;
+  height: 30px; /* 增加触控区域 */
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.slider-track-bg {
+  position: absolute;
+  left: 0; right: 0;
+  height: 6px;
+  background: #F2F3F5;
+  border-radius: 3px;
+}
+
+.slider-track-active {
+  position: absolute;
+  left: 0;
+  height: 6px;
+  background: #E54755; /* 主红色 */
+  border-radius: 3px;
+  pointer-events: none;
+}
+
+.slider-thumb {
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  background: #fff;
+  border: 2px solid #E54755;
+  border-radius: 50%;
+  transform: translateX(-50%); /* 居中对齐 */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  pointer-events: none; /* 让点击事件穿透到 input */
+  z-index: 2;
+}
+
+.inner-circle {
+  width: 0px; /* 图片中看起来是实心的或者空心的，这里做个空心白底红圈 */
+  height: 0px;
+}
+
+/* 原生 Input 覆盖在上面负责交互，但完全透明 */
+.native-input {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+  z-index: 3;
+  margin: 0;
+}
+
+/* 刻度标签 */
+.slider-labels {
+  display: flex;
+  justify-content: space-between;
+  color: #9FA2A8;
+  font-size: 12px;
+  margin-bottom: 30px;
+  padding: 0 2px; /* 微微修正对齐 */
+}
+
+/* 确认按钮 */
+.confirm-btn {
+  width: 100%;
+  height: 48px;
+  background: #E54755;
+  color: white;
+  border: none;
+  border-radius: 24px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+}
+.confirm-btn:active {
+  background: #D13E4A;
+}
+</style>

src/views/bitcoin/components/OrderConfirmPopup.vue

@@ -0,0 +1,282 @@
+<template>
+  <Teleport to="body">
+    <transition name="fade">
+      <div v-if="visible" class="mask" @click="handleClose"></div>
+    </transition>
+    <transition name="slide-up">
+      <div v-if="visible" class="popup-container">
+        <div class="drag-handle-area"><div class="drag-handle"></div></div>
+
+        <div class="popup-content">
+          <h3 class="main-title">下单确认</h3>
+
+          <div class="token-header">
+            <div class="token-icon">
+              <span class="btc-symbol">₿</span>
+            </div>
+            <div class="token-info">
+              <div class="token-name">
+                BTC/USDT 永续
+              </div>
+              <div class="tags">
+                <span class="tag buy">买入</span>
+                <span class="tag leverage">逐仓 20X</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="info-list">
+            <div class="info-row">
+              <span class="label">委托价格</span>
+              <span class="value">1000.05 USDT</span>
+            </div>
+            <div class="info-row">
+              <span class="label">数量</span>
+              <span class="value">10</span>
+            </div>
+            <div class="info-row">
+              <span class="label">金额</span>
+              <span class="value">0.30 USDT</span>
+            </div>
+            <div class="info-row">
+              <span class="label">类型</span>
+              <span class="value">限价</span>
+            </div>
+            <div class="info-row">
+              <span class="label">只减仓</span>
+              <span class="value">否</span>
+            </div>
+          </div>
+
+          <div class="tpsl-header" @click="toggleTpSl">
+            <span class="tpsl-title">止盈止损</span>
+            <span class="arrow" :class="{ expanded: isTpSlExpanded }">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
+                <path d="M6 9L12 15L18 9" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </span>
+          </div>
+
+          <div
+            class="tpsl-content-wrapper"
+            :class="{ show: isTpSlExpanded }"
+            ref="contentRef"
+            :style="contentStyle"
+          >
+            <div class="tpsl-inner">
+
+              <div class="strategy-block">
+                <div class="block-header">
+                  <span class="sub-title">止盈</span>
+                  <div class="right-action">
+                    <div>标记</div>
+                    <svg width="14" height="14" viewBox="0 0 28 28" fill="none" stroke="currentColor" stroke-width="3">
+                    <path d="M6 9L12 15L18 9" stroke-linecap="round" stroke-linejoin="round"/></svg>
+                  </div>
+                </div>
+                <div class="input-grid">
+                  <div class="input-box">
+                    <input type="number" placeholder="触发价(USDT)" />
+                  </div>
+                  <div class="input-box has-suffix">
+                    <input type="number" placeholder="盈亏" />
+                    <div class="suffix-select">USDT
+                       <svg width="14" height="14" viewBox="0 0 28 28" fill="none" stroke="currentColor" stroke-width="3">
+                    <path d="M6 9L12 15L18 9" stroke-linecap="round" stroke-linejoin="round"/></svg>
+                    </div>
+                  </div>
+                  <div class="input-box">
+                    <input type="number" placeholder="限价单(USDT)" />
+                  </div>
+                  <div class="toggle-btn">
+                    市价单
+                  </div>
+                </div>
+              </div>
+
+              <div class="strategy-block mt-15">
+                <div class="block-header">
+                  <span class="sub-title">止损</span>
+                  <div class="right-action">最新
+                     <svg width="14" height="14" viewBox="0 0 28 28" fill="none" stroke="currentColor" stroke-width="3">
+                    <path d="M6 9L12 15L18 9" stroke-linecap="round" stroke-linejoin="round"/></svg>
+                  </div>
+                </div>
+
+                <div class="input-grid">
+                  <div class="input-box">
+                    <input type="number" placeholder="触发价(USDT)" />
+                  </div>
+                  <div class="input-box has-suffix">
+                    <input type="number" placeholder="盈亏" />
+                    <div class="suffix-select">USDT
+                       <svg width="14" height="14" viewBox="0 0 28 28" fill="none" stroke="currentColor" stroke-width="3">
+                    <path d="M6 9L12 15L18 9" stroke-linecap="round" stroke-linejoin="round"/></svg>
+                    </div>
+                  </div>
+                  <div class="toggle-btn outline">
+                    市价
+                  </div>
+                  <div class="toggle-btn active-red">
+                    市价单
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <button class="confirm-btn" @click="handleConfirm">
+            确认
+          </button>
+        </div>
+      </div>
+    </transition>
+  </Teleport>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+
+const props = defineProps({
+  visible: Boolean
+});
+
+const emit = defineEmits(['update:visible', 'confirm']);
+
+// 折叠状态控制
+const isTpSlExpanded = ref(false);
+
+const toggleTpSl = () => {
+  isTpSlExpanded.value = !isTpSlExpanded.value;
+};
+
+// 计算高度用于 CSS transition (为了丝滑动画)
+// 实际项目中简单使用 v-if 也可以，但 height transition 体验更好
+const contentStyle = computed(() => {
+  return isTpSlExpanded.value
+    ? { maxHeight: '500px', opacity: 1, marginTop: '10px' }
+    : { maxHeight: '0px', opacity: 0, marginTop: '0px' };
+});
+
+const handleClose = () => {
+  emit('update:visible', false);
+};
+
+const handleConfirm = () => {
+  // 收集数据逻辑...
+  emit('confirm');
+  handleClose();
+};
+</script>
+
+<style lang="less" scoped>
+    /* 基础动画 */
+    .fade-enter-active, .fade-leave-active { transition: opacity 0.3s; }
+    .fade-enter-from, .fade-leave-to { opacity: 0; }
+    .slide-up-enter-active, .slide-up-leave-active { transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.5, 1); }
+    .slide-up-enter-from, .slide-up-leave-to { transform: translateY(100%); }
+
+    /* 布局样式 */
+    .mask {
+      position: fixed; top: 0; left: 0; right: 0; bottom: 0;
+      background: rgba(0,0,0,0.6); z-index: 998;
+    }
+    .popup-container {
+      position: fixed; bottom: 0; left: 0; right: 0;
+      background: #fff; border-radius: 16px 16px 0 0;
+      z-index: 999; padding-bottom: calc(20px + env(safe-area-inset-bottom));
+      font-family: -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
+      max-height: 90vh; overflow-y: auto; /* 允许小屏滚动 */
+    }
+
+    /* 拖拽条 */
+    .drag-handle-area { padding: 10px 0; display: flex; justify-content: center; }
+    .drag-handle { width: 40px; height: 4px; background: #E0E0E0; border-radius: 2px; }
+
+    .popup-content { padding: 0 20px; }
+    .main-title { font-size: 18px; font-weight: 600; margin: 0 0 10px 0; color: #333; }
+
+    /* 币种信息 */
+    .token-header { display: flex; align-items: center; margin-bottom: 10px; }
+    .token-icon {
+      width: 32px; height: 32px; background: #F7931A; border-radius: 50%;
+      display: flex; align-items: center; justify-content: center; margin-right: 10px;
+    }
+    .btc-symbol { color: white; font-weight: bold; font-size: 20px; }
+    .token-name { font-size: 16px; font-weight: 600; color: #333; margin-bottom: 4px; }
+    .tags { display: flex; gap: 5px; }
+    .tag { font-size: 10px; padding: 1px 4px; border-radius: 2px; }
+    .tag.buy { background: #2EBD85; color: white; }
+    .tag.leverage { background: #EFF0F2; color: #999; }
+
+    /* 信息列表 */
+    .info-row { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 14px; }
+    .info-row .label { color: #999; }
+    .info-row .value { color: #333; font-weight: 500; }
+
+    /* 止盈止损标题栏 */
+    .tpsl-header {
+      display: flex; justify-content: space-between; align-items: center;
+      padding: 10px 0; border-top: 1px solid #F5F5F5; cursor: pointer;
+    }
+    .tpsl-title { font-weight: 600; font-size: 15px; color: #333; text-underline-offset: 4px;
+      text-decoration-color: #333; }
+    .arrow { transition: transform 0.3s; color: #333; display: flex; }
+    .arrow.expanded { transform: rotate(180deg); }
+
+    /* 止盈止损 内容折叠区 */
+    .tpsl-content-wrapper {
+      overflow: hidden;
+      transition: max-height 0.3s ease-in-out, opacity 0.3s, margin-top 0.3s;
+    }
+    .strategy-block { margin-bottom: 10px; }
+    .mt-15 { margin-top: 15px; }
+    .block-header { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 13px; }
+    .sub-title { font-weight: 600; color: #333; }
+    .right-action { color: #333; display: flex; align-items: center; gap: 2px;
+      svg{
+        //display: block;
+        margin-top: 3px;
+        //text-align: center;
+      }
+    }
+    .tiny-arrow { font-size: 8px; color: #999; }
+
+    /* 输入框网格 (2列) */
+    .input-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
+
+    .input-box {
+      background: #F7F8FA; border-radius: 4px; height: 38px;
+      display: flex; align-items: center; padding: 0 10px;
+      position: relative;
+    }
+    .input-box input {
+      width: 100%; background: transparent; border: none; outline: none;
+      font-size: 13px; color: #333;
+    }
+    .input-box input::placeholder { color: #B0B3B8; }
+
+    .input-box.has-suffix input { padding-right: 50px; }
+    .suffix-select {
+      position: absolute; right: 10px; top: 0; bottom: 0;
+      display: flex; align-items: center; font-size: 12px; color: #333; font-weight: 500;
+      svg{
+        margin-top: 3px;
+      }
+    }
+
+    /* 按钮样式 */
+    .toggle-btn {
+      height: 40px; border-radius: 4px; display: flex; align-items: center; justify-content: center;
+      font-size: 13px; cursor: pointer; border: 1px solid #E0E0E0; background: #fff; color: #666;
+    }
+    .toggle-btn.outline { border-color: #666; color: #333; }
+    .toggle-btn.active-red { background: #E54755; border-color: #E54755; color: white; }
+
+    /* 确认按钮 */
+    .confirm-btn {
+      width: 100%; height: 48px; background: #E54755;
+      color: white; font-size: 16px; border: none; border-radius: 24px;
+      margin-top: 10px; font-weight: bold;
+    }
+    .confirm-btn:active { background: #D13E4A; }
+</style>

src/views/bitcoin/components/OrderTimeSheet.vue

@@ -0,0 +1,172 @@
+<template>
+  <Teleport to="body">
+    <transition name="fade">
+      <div v-if="visible" class="modal-mask" @click="closeModal"></div>
+    </transition>
+
+    <transition name="slide-up">
+      <div v-if="visible" class="modal-panel">
+        <div class="panel-handle-wrap">
+          <div class="panel-handle"></div>
+        </div>
+
+        <div class="panel-title">订单时效</div>
+
+        <div class="option-list">
+          <div
+            v-for="item in options"
+            :key="item.value"
+            class="option-item"
+            @click="selectOption(item.value)"
+          >
+            <span :class="{ 'active-text': modelValue === item.value }">
+              {{ item.label }}
+            </span>
+
+            <div v-if="modelValue === item.value" class="check-icon">
+              <svg viewBox="0 0 1024 1024" width="16" height="16">
+                <path d="M512 0C229.23 0 0 229.23 0 512s229.23 512 512 512 512-229.23 512-512S794.77 0 512 0z" fill="#E03C3C"/>
+                <path d="M426.67 725.33L213.33 512l60.33-60.33L426.67 604.67 750.33 281l60.34 60.33-384 384z" fill="#FFFFFF"/>
+              </svg>
+            </div>
+          </div>
+        </div>
+
+        <div class="safe-area-bottom"></div>
+      </div>
+    </transition>
+  </Teleport>
+</template>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+
+// 定义接收的属性
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  modelValue: {
+    type: String,
+    default: ''
+  }
+});
+
+// 定义抛出的事件
+const emit = defineEmits(['update:visible', 'update:modelValue']);
+
+// 选项数据 (模拟设计稿内容)
+const options = [
+  { label: 'GTC(一直有效直到取消)', value: 'GTC' },
+  { label: 'IOC(立即成交否则取消)', value: 'IOC' },
+  { label: 'FOK(全部成交否则取消)', value: 'FOK' }
+];
+
+// 选择逻辑
+const selectOption = (value) => {
+  emit('update:modelValue', value); // 带回选中的值
+  closeModal(); // 关闭弹窗
+};
+
+// 关闭逻辑
+const closeModal = () => {
+  emit('update:visible', false);
+};
+</script>
+
+<style scoped>
+/* 遮罩层样式 */
+.modal-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 1000;
+}
+
+/* 弹窗主体样式 */
+.modal-panel {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background: white;
+  border-radius: 16px 16px 0 0;
+  padding: 10px 0 0 0;
+  z-index: 1001;
+  box-sizing: border-box;
+  /* 模拟手机最大宽度，防止在PC上太宽 */
+  max-width: 600px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+/* 顶部小灰条 */
+.panel-handle-wrap {
+  display: flex;
+  justify-content: center;
+  padding-bottom: 20px;
+}
+.panel-handle {
+  width: 36px;
+  height: 4px;
+  background: #E0E0E0;
+  border-radius: 2px;
+}
+
+/* 标题 */
+.panel-title {
+  font-size: 18px;
+  font-weight: bold;
+  color: #333;
+  padding: 0 20px 20px 20px;
+}
+
+/* 列表项 */
+.option-list {
+  padding: 0 20px;
+}
+
+.option-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 0;
+  font-size: 16px;
+  color: #999; /* 未选中默认为灰色 */
+  cursor: pointer;
+}
+
+/* 选中时的文字颜色 */
+.active-text {
+  color: #333;
+  font-weight: 500;
+}
+
+.check-icon {
+  display: flex;
+  align-items: center;
+}
+
+.safe-area-bottom {
+  height: 30px; /* 简单的安全区预留 */
+}
+
+/* Vue 动画过渡类 */
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+.fade-enter-from, .fade-leave-to {
+  opacity: 0;
+}
+
+.slide-up-enter-active, .slide-up-leave-active {
+  transition: transform 0.3s ease;
+}
+.slide-up-enter-from, .slide-up-leave-to {
+  transform: translate(-50%, 100%); /* 从底部滑出 */
+}
+</style>

src/views/bitcoin/components/SellTradingStatusData.vue

@@ -0,0 +1,135 @@
+<script setup>
+
+</script>
+
+<template>
+  <div class="menu-content-l">
+        <div class="menu-content-lb pf400 fs14 fc666666">
+          <span>价格</span><span>数量(USDT)</span>
+        </div>
+        <div  class="menu-content-lb1">
+          <div class="menu-content-lb1l pf400 fs14 fcFF7171">
+            <span class="">40,166.82</span>
+            <span>40,166.82</span>
+            <span>40,166.82</span>
+            <span>40,166.82</span>
+            <span>40,166.82</span>
+            <span>40,166.82</span>
+            <span>40,166.82</span>
+            <span>40,166.82</span>
+            <span>40,166.82</span>
+            <span class="">40,166.82</span>
+            <span>40,166.82</span>
+            <span>40,166.82</span>
+            <span>40,166.82</span>
+            <span>40,166.82</span>
+            <span>40,166.82</span>
+            <span>40,166.82</span>
+            <span>40,166.82</span>
+            <span>40,166.82</span>
+            <span>40,166.82</span>
+
+
+
+          </div>
+          <div class="menu-content-lb1r pf400 fs14 fc444444">
+            <span>37.80K</span>
+            <span>37.80K</span>
+            <span>37.80K</span>
+            <span>37.80K</span>
+            <span>37.80K</span>
+            <span>37.80K</span>
+            <span>37.80K</span>
+            <span>37.80K</span>
+            <span>37.80K</span>
+            <span>37.80K</span>
+            <span>37.80K</span>
+            <span>37.80K</span>
+            <span>37.80K</span>
+            <span>37.80K</span>
+            <span>37.80K</span>
+            <span>37.80K</span>
+            <span>37.80K</span>
+            <span>37.80K</span>
+            <span>37.80K</span>
+
+
+          </div>
+        </div>
+        <div class="menu-content-lb2">
+          <p class="pf600 fs16 fcDF384C">5,678.00</p>
+          <p class="fs12 fcA8A8A8 pf400">1,678.00</p>
+        </div>
+        <div class="menu-content-lb1">
+          <div class="menu-content-lb1l pf400 fs12 fc333333">
+            <span class="fs12">深度1</span>
+            <img src="../../../assets/icon/bitcoin/shendul.svg" alt="">
+
+          </div>
+          <div class="menu-content-lb1r pf400 fs14 fc444444">
+            <img src="../../../assets/icon/bitcoin/maipan.svg" alt="">
+          </div>
+        </div>
+
+      </div>
+</template>
+
+<style scoped lang="less">
+  .menu-content-l{
+        flex: 1;
+        .menu-content-lb{
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          padding-right: 14px;
+        }
+        .menu-content-lb1{
+          margin-top: 5px;
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+           padding-right: 14px;
+          .menu-content-lb1l{
+            display: flex;
+            flex-direction: column;
+            line-height: 22px;
+          }
+          .menu-content-lb1r{
+            display: flex;
+            flex-direction: column;
+            line-height: 22px;
+          }
+        }
+        .menu-content-lb1:nth-child(2){
+          .menu-content-lb1l{
+            color: #ff7171;
+          }
+        }
+        .menu-content-lb1:nth-child(4){
+          .menu-content-lb1l{
+            width: 100%;
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+            background-color: #f5f5f5;
+            border-radius: 6px;
+            height: 24px;
+            padding: 0 5px 0 13px;
+
+
+          }
+          .menu-content-lb1r{
+            margin-left: 15px;
+          }
+        }
+
+        .menu-content-lb2{
+          margin-top: 8px;
+          line-height: 16px;
+          //span:nth-child(2){
+          //  //border-style: dashed;
+          //}
+        }
+      }
+</style>

src/views/bitcoin/components/TPSLSmartPopup.vue

@@ -0,0 +1,360 @@
+<template>
+  <Teleport to="body">
+    <transition name="fade">
+      <div v-if="visible" class="mask" @click="close"></div>
+    </transition>
+
+    <transition name="slide-up">
+      <div v-if="visible" class="popup-container" :class="directionClass">
+        <div class="drag-handle-area"><div class="drag-handle"></div></div>
+
+        <div class="popup-content">
+          <div class="header-title">设置止盈止损</div>
+
+          <div class="coin-info">
+            <div class="coin-icon">₿</div>
+            <span class="coin-name">BTC/USDT</span>
+          </div>
+
+          <div class="price-grid">
+            <div class="price-item"><div class="label">最新价格</div><div class="value">1000.05 USDT</div></div>
+            <div class="price-item center"><div class="label">委托价格</div><div class="value">10</div></div>
+            <div class="price-item right"><div class="label">委托数量</div><div class="value">10 BTC</div></div>
+          </div>
+
+          <div class="direction-switch">
+            <div class="switch-btn buy" :class="{ active: direction === 'buy' }" @click="direction = 'buy'">买入(做多)</div>
+            <div class="switch-btn sell" :class="{ active: direction === 'sell' }" @click="direction = 'sell'">卖出(做空)</div>
+          </div>
+
+          <div class="section-block">
+            <div class="section-header">
+              <span class="section-label">止盈</span>
+              <label class="checkbox-label">
+                <input type="checkbox" v-model="tpLimitMode" />
+                <span class="custom-check"></span>
+                限价委托
+              </label>
+            </div>
+
+            <div class="input-row">
+              <div class="input-group">
+<!--                <div class="prefix-label">触发价</div>-->
+                <input
+                  type="number"
+                  class="flex-input"
+                  placeholder="触发价"
+                  v-model="tpTriggerPrice"
+                />
+                <span class="unit-text" @click="showModal1 = true">{{selectedLabel1}}</span>
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
+                <path d="M6 9L12 15L18 9" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+              </div>
+
+              <div class="input-group">
+                <div class="suffix-select" @click="showModal = true">
+                  <span class="label-text">{{selectedLabel}}</span>
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
+                  <path d="M6 9L12 15L18 9" stroke-linecap="round" stroke-linejoin="round"/>
+                  </svg>
+                </div>
+                <div class="prefix-label">{{selectedUnit}}</div>
+              </div>
+            </div>
+
+            <div class="slider-wrapper">
+              <div class="slider-inner">
+                <div class="slider-track-bg"></div>
+                <div class="slider-start-point"></div>
+                <div class="slider-track-fill" :style="{ width: (tpPercent / 25 * 100) + '%' }"></div>
+                <div class="slider-thumb" :style="{ left: (tpPercent / 25 * 100) + '%' }"></div>
+                <input type="range" min="0" max="25" step="1" v-model.number="tpPercent" class="native-range" />
+                <div class="slider-ticks">
+                  <span v-for="tick in tpTicks" :key="tick" class="tick-label" :class="{ active: tpPercent >= tick }" :style="{ left: (tick / 25 * 100) + '%' }" @click="tpPercent = tick">{{ tick }}%</span>
+                </div>
+              </div>
+            </div>
+
+            <transition name="expand">
+              <div v-if="tpLimitMode" class="limit-input-box">
+                <div class="input-inner">
+                  <input type="number" placeholder="委托价" />
+                  <span class="unit">USDT</span></div>
+              </div>
+            </transition>
+          </div>
+
+          <div class="section-block">
+            <div class="section-header">
+              <span class="section-label">止损</span>
+              <label class="checkbox-label">
+                <input type="checkbox" v-model="slLimitMode" />
+                <span class="custom-check"></span>
+                限价委托
+              </label>
+            </div>
+
+            <div class="input-row">
+              <div class="input-group">
+<!--                <div class="prefix-label">触发价</div>-->
+                <input
+                  type="number"
+                  class="flex-input"
+                  placeholder="触发价"
+                  v-model="slTriggerPrice"
+                />
+                <span class="unit-text">标记</span>
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
+                <path d="M6 9L12 15L18 9" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+              </div>
+
+              <div class="input-group">
+
+                <div class="suffix-select">
+                  <span class="label-text">收益率</span>
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
+                <path d="M6 9L12 15L18 9" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+                </div>
+                <div class="prefix-label">%</div>
+              </div>
+            </div>
+
+            <div class="slider-wrapper">
+              <div class="slider-inner">
+                <div class="slider-track-bg"></div>
+                <div class="slider-start-point"></div>
+                <div class="slider-track-fill" :style="{ width: (slPercent / 10 * 100) + '%' }"></div>
+                <div class="slider-thumb" :style="{ left: (slPercent / 10 * 100) + '%' }"></div>
+                <input type="range" min="0" max="10" step="1" v-model.number="slPercent" class="native-range" />
+                <div class="slider-ticks">
+                  <span v-for="tick in slTicks" :key="tick" class="tick-label" :class="{ active: slPercent >= tick }" :style="{ left: (tick / 10 * 100) + '%' }" @click="slPercent = tick">{{ tick }}%</span>
+                </div>
+              </div>
+            </div>
+
+            <transition name="expand">
+              <div v-if="slLimitMode" class="limit-input-box">
+                <div class="input-inner">
+                  <input id="1" type="number" placeholder="委托价" />
+                  <span class="unit">USDT</span>
+                </div>
+              </div>
+            </transition>
+          </div>
+
+          <button class="confirm-btn" @click="confirm">确认</button>
+        </div>
+      </div>
+    </transition>
+  </Teleport>
+  <div>
+    <priceLimit
+      v-model:visible="showModal"
+      :selected-id="currentId"
+      @confirm="handleConfirm"
+    >
+    </priceLimit>
+
+    <TriggerPrice
+       v-model:visible="showModal1"
+      :selected-id="currentId1"
+      @confirm="handleConfirm1"
+    ></TriggerPrice>
+  </div>
+</template>
+
+<script setup>
+import {ref, computed, defineAsyncComponent} from 'vue';
+const priceLimit = defineAsyncComponent(() => import("../components/priceLimit.vue"));
+const TriggerPrice = defineAsyncComponent(() => import("../components/TriggerPrice.vue"));
+    //最新价格
+    const showModal1 = ref(false);
+
+    // 定义状态用于存储
+    const currentId1 = ref(1); // 默认选中第一个
+    const selectedLabel1 = ref('最新'); // 默认值
+    const selectedUnit1 = ref('%');      // 默认值
+
+    // 回调函数：子组件选中后触发
+    const handleConfirm1 = (item) => {
+      console.log('子组件返回的对象:', item);
+
+      // 保存ID用于下次打开时回显高亮
+      currentId1.value = item.id;
+      // const a = item.label.slice(-2)
+
+      // 核心需求：在这里将值“拆开”为两个字符串
+      selectedLabel1.value = item.label.slice(0, 2); // 字符串1: "涨跌幅"
+      selectedUnit1.value = item.unit;   // 字符串2: "%"
+    };
+//张跌幅
+const showModal = ref(false);
+
+// 定义状态用于存储
+const currentId = ref(1); // 默认选中第一个
+const selectedLabel = ref('涨跌幅'); // 默认值
+const selectedUnit = ref('%');      // 默认值
+
+// 回调函数：子组件选中后触发
+const handleConfirm = (item) => {
+  console.log('子组件返回的对象:', item);
+
+  // 保存ID用于下次打开时回显高亮
+  currentId.value = item.id;
+
+  // 核心需求：在这里将值“拆开”为两个字符串
+  selectedLabel.value = item.label; // 字符串1: "涨跌幅"
+  selectedUnit.value = item.unit;   // 字符串2: "%"
+};
+
+
+const props = defineProps({ visible: Boolean });
+const emit = defineEmits(['update:visible', 'confirm']);
+
+const direction = ref('buy');
+
+// 止盈数据
+const tpLimitMode = ref(false);
+const tpTriggerPrice = ref(''); // 新增：止盈触发价输入
+const tpPercent = ref(5);
+const tpTicks = [0, 5, 10, 15, 20, 25];
+
+// 止损数据
+const slLimitMode = ref(true);
+const slTriggerPrice = ref(''); // 新增：止损触发价输入
+const slPercent = ref(2);
+const slTicks = [0, 2, 4, 6, 8, 10];
+
+const directionClass = computed(() => direction.value === 'buy' ? 'theme-buy' : 'theme-sell');
+const close = () => emit('update:visible', false);
+const confirm = () => {
+  emit('confirm', {
+    direction: direction.value,
+    tp: { price: tpTriggerPrice.value, percent: tpPercent.value },
+    sl: { price: slTriggerPrice.value, percent: slPercent.value }
+  });
+  close();
+};
+</script>
+
+<style scoped>
+    .theme-buy { --primary-color: #2EBD85; }
+    .theme-sell { --primary-color: #F6465D; }
+
+    /* 基础布局 */
+    .mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); z-index: 998; }
+    .popup-container {
+      position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-radius: 16px 16px 0 0;
+      z-index: 999; padding-bottom: calc(20px + env(safe-area-inset-bottom));
+      font-family: -apple-system, BlinkMacSystemFont, Roboto, sans-serif; max-height: 90vh;
+      overflow-y: auto; color: #333;
+    }
+    .popup-content { padding: 0 20px; }
+
+    .drag-handle-area { padding: 10px 0; display: flex; justify-content: center; }
+    .drag-handle { width: 40px; height: 4px; background: #E0E0E0; border-radius: 2px; }
+    .header-title { font-size: 18px; font-weight: 600; margin-bottom: 15px; }
+
+    .coin-info { display: flex; align-items: center; gap: 8px; margin-bottom: 15px; }
+    .coin-icon { width: 20px; height: 20px; background: #F7931A; color: #fff; border-radius: 50%;
+      text-align: center; line-height: 20px; font-size: 12px; font-weight: bold; }
+    .price-grid { display: flex; justify-content: space-between; margin-bottom: 20px; }
+    .price-item .label { font-size: 12px; color: #999; }
+    .price-item .value { font-size: 14px; font-weight: 500; }
+
+    .direction-switch { display: flex; gap: 10px; margin-bottom: 20px; }
+    .switch-btn { flex: 1; height: 40px; display: flex; align-items: center; justify-content: center;
+      border-radius: 4px; font-size: 14px; font-weight: 600; cursor: pointer; background: #F7F8FA;
+      color: #999; transition: 0.2s; }
+    .theme-buy .switch-btn.buy.active { background: var(--primary-color); color: white; }
+    .theme-sell .switch-btn.sell.active { background: var(--primary-color); color: white; }
+
+    .section-block { margin-bottom: 25px; }
+    .section-header { display: flex; justify-content: space-between; align-items: center;
+      margin-bottom: 12px; }
+    .section-label { font-size: 15px; font-weight: 600; }
+    .checkbox-label { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
+    .checkbox-label input { display: none; }
+    .custom-check { width: 16px; height: 16px; border: 1px solid #ccc; border-radius: 2px;
+      position: relative; }
+    .checkbox-label input:checked + .custom-check { background: var(--primary-color);
+      border-color: var(--primary-color); }
+    .checkbox-label input:checked + .custom-check::after { content: ''; position: absolute;
+      left: 5px; top: 1px; width: 4px; height: 8px; border: solid white; border-width: 0 2px 2px 0;
+      transform: rotate(45deg); }
+
+    /* ============ 输入框区域 ============ */
+    .input-row { display: flex; gap: 10px; margin-bottom: 15px; }
+    .input-group {
+      flex: 1; height: 40px; background: #F7F8FA; border-radius: 4px;
+      display: flex; align-items: center; justify-content: space-between; padding: 0 10px;
+      position: relative;
+      font-size: 12px;
+    }
+    .prefix-label { color: #999; font-size: 12px; white-space: nowrap; margin-right: 8px; }
+
+    /* 新增：flex 输入框样式 */
+    .flex-input {
+      flex: 1;
+      background: transparent;
+      border: none;
+      outline: none;
+      font-size: 12px;
+      font-weight: 500;
+      color: #333;
+      width: 100%; /* 确保填满剩余空间 */
+    }
+    .flex-input::placeholder { color: #B0B3B8; font-weight: 400; }
+    /* 隐藏 number input 的上下箭头 */
+    .flex-input::-webkit-outer-spin-button,
+    .flex-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
+
+    .unit-text { font-size: 12px; color: #333; margin-left: 4px; font-weight: 500; }
+
+    .suffix-select { display: flex; align-items: center;  color: #333; }
+    .label-text { font-size: 12px; font-weight: 500; }
+    .icon-svg { width: 14px; height: 14px; color: #666; margin-left: 2px; }
+
+    /* ============ 滑块样式 ============ */
+    .slider-wrapper { padding: 0 15px; margin-top: 10px; box-sizing: border-box; }
+    .slider-inner { position: relative; height: 55px; width: 100%; }
+
+    .slider-track-bg { position: absolute; top: 12px; left: 0; right: 0; height: 6px;
+      background: #F0F0F0; border-radius: 3px; }
+    .slider-track-fill { position: absolute; top: 12px; left: 0; height: 6px;
+      background: var(--primary-color); border-radius: 3px; pointer-events: none; }
+    .slider-start-point, .slider-thumb { position: absolute; top: 15px; width: 24px;
+      height: 24px; background: #fff; border: 2px solid var(--primary-color); border-radius: 50%;
+      transform: translate(-50%, -50%); box-shadow: 0 2px 4px rgba(0,0,0,0.15); box-sizing: border-box; }
+    .slider-start-point { left: 0; z-index: 1; }
+    .slider-thumb { z-index: 2; pointer-events: none; }
+    .native-range { position: absolute; top: 0; left: 0; width: 100%; height: 40px;
+      opacity: 0; cursor: pointer; margin: 0; z-index: 3; -webkit-tap-highlight-color: transparent; }
+
+    .slider-ticks { position: absolute; top: 32px; left: 0; right: 0; height: 20px; }
+    .tick-label { position: absolute; transform: translateX(-50%); font-size: 12px;
+      color: #B0B3B8; cursor: pointer; white-space: nowrap; }
+    .tick-label.active { color: #333; font-weight: 500; }
+
+    .limit-input-box { overflow: hidden; margin-top: 8px; }
+    .input-inner { background: #F7F8FA; height: 44px; border-radius: 4px; display: flex;
+      align-items: center; padding: 0 12px; }
+    .input-inner .label { color: #999; font-size: 13px; margin-right: 10px; }
+    .input-inner input { flex: 1; border: none; background: transparent; outline: none; font-size: 14px; }
+    .input-inner .unit { color: #333; font-size: 13px; font-weight: 500; }
+
+    .expand-enter-active, .expand-leave-active { transition: all 0.3s ease-in-out; max-height: 60px;
+      opacity: 1; }
+    .expand-enter-from, .expand-leave-to { max-height: 0; opacity: 0; margin-top: 0; }
+    .slide-up-enter-active, .slide-up-leave-active { transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.5, 1); }
+    .slide-up-enter-from, .slide-up-leave-to { transform: translateY(100%); }
+    .fade-enter-active, .fade-leave-active { transition: opacity 0.3s; }
+    .fade-enter-from, .fade-leave-to { opacity: 0; }
+
+    .confirm-btn { width: 100%; height: 48px; margin-top: 10px;
+      background: var(--primary-color); color: white; border: none; border-radius: 24px;
+      font-size: 16px; font-weight: 600; }
+</style>

src/views/bitcoin/components/TakeProfitsTopLoss.vue

@@ -0,0 +1,191 @@
+<script setup>
+    import { Checkbox as VanCheckbox } from 'vant';
+    import { Icon as VanIcon, } from 'vant';
+    import {defineAsyncComponent, ref} from 'vue';
+    const TPSLSmartPopup = defineAsyncComponent(() => import('../components/TPSLSmartPopup.vue'));
+
+    // 1. 状态控制
+    const isEnabled = ref(false); // 控制复选框选中状态，
+    const takeProfit = ref('');  // 止盈价格
+    const stopLoss = ref('');    // 止损价格
+
+    // 点击“高级”的事件
+    const handleAdvanced = () => {
+      console.log('点击了高级设置');
+    };
+
+    //止盈止损高级设置
+    const showSmartTPSL = ref(false);
+    const handleConfirm1 = (data) => {
+      console.log('止盈止损设置:', data);
+    };
+</script>
+
+<template>
+  <div class="tpsl-container">
+
+    <div class="header-row">
+      <div class="left-trigger">
+        <van-checkbox
+          v-model="isEnabled"
+          shape="square"
+          checked-color="#DC4653"
+          icon-size="16px"
+        >
+        </van-checkbox>
+        <span class="label-text">止盈止损</span>
+
+        <van-icon name="question-o" color="#999" size="16" class="help-icon" />
+      </div>
+
+      <div v-if="isEnabled" class="right-action" @click="handleAdvanced">
+        <span class="fc333333" @click="showSmartTPSL = true">高级</span>
+        <van-icon style="font-weight: bold; margin-left: 5px;" name="arrow" size="12"/>
+      </div>
+    </div>
+
+    <transition style="min-width:205px" name="slide-fade">
+      <div v-if="isEnabled" class="inputs-wrapper">
+
+        <div class="input-box">
+          <span class="placeholder" v-show="!takeProfit">止盈价格</span>
+          <input
+            type="number"
+            v-model="takeProfit"
+            class="real-input"
+          />
+          <span class="suffix">USDT</span>
+        </div>
+
+        <div class="input-box">
+          <span class="placeholder" v-show="!stopLoss">止损价格</span>
+          <input
+            type="number"
+            v-model="stopLoss"
+            class="real-input"
+          />
+          <span class="suffix">USDT</span>
+        </div>
+
+      </div>
+    </transition>
+    <TPSLSmartPopup
+        v-model:visible="showSmartTPSL"
+        @confirm="handleConfirm1"
+    ></TPSLSmartPopup>
+  </div>
+</template>
+
+<style scoped>
+/* 容器基础样式，基于 375px 设计稿 */
+:deep(.van-checkbox__icon--square .van-icon) {
+  border-radius: 2px !important;}
+.tpsl-container {
+  width: 100%;
+  background: #fff;
+  box-sizing: border-box;
+}
+
+/* --- 头部样式 --- */
+.header-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 6px;
+  height: 24px;
+}
+
+.left-trigger {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.label-text {
+  font-size: 12px;
+  color: #333;
+  font-weight: 400;
+}
+
+.help-icon {
+  margin-left: 2px;
+}
+
+.right-action {
+  display: flex;
+  align-items: center;
+  color: #666;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+/* --- 输入框区域样式 --- */
+.inputs-wrapper {
+  max-width: 204.25px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px; /* 两个输入框之间的间距 */
+}
+
+.input-box {
+  position: relative; /* 为了让 placeholder 绝对定位 */
+  display: flex;
+  align-items: center;
+  background-color: #F7F8FA; /* 还原图片中的浅灰色背景 */
+  border-radius: 4px;
+  height: 38px;
+  padding: 0 12px;
+}
+
+/* 模拟 placeholder，为了更好控制样式和位置 */
+.placeholder {
+  position: absolute;
+  left: 12px;
+  color: #969799; /* 浅灰提示字 */
+  font-size: 14px;
+  pointer-events: none; /* 点击穿透，确保能点到 input */
+}
+
+/* 实际的输入框，背景透明覆盖在上面 */
+.real-input {
+  flex: 1; /* 占满剩余空间 */
+  background: transparent;
+  border: none;
+  outline: none;
+  font-size: 14px;
+  color: #333;
+  z-index: 1;
+  height: 100%;
+  text-align: right;
+  padding-right: 8px;
+}
+
+/* 让 real-input 靠左对齐输入 (还原图片样子) */
+.real-input {
+  text-align: left;
+}
+
+.suffix {
+  color: #333;
+  font-size: 14px;
+  font-weight: 400;
+  position: absolute;
+  right: 12px;
+}
+
+/* --- 简单的展开/收起动画 --- */
+.slide-fade-enter-active,
+.slide-fade-leave-active {
+  transition: all 0.3s ease-out;
+  max-height: 200px; /* 只要比实际高度大就行 */
+  opacity: 1;
+  overflow: hidden;
+}
+
+.slide-fade-enter-from,
+.slide-fade-leave-to {
+  max-height: 0;
+  opacity: 0;
+  margin-top: 0;
+}
+</style>

src/views/bitcoin/components/TriggerPrice.vue

@@ -0,0 +1,163 @@
+<template>
+  <Teleport to="body">
+    <div v-if="visible" class="modal-mask" @click="close">
+      <div class="modal-content" @click.stop>
+        <div class="handle-bar"></div>
+        <div class="trigger fs18 fc333333 pf600">选择触发类型</div>
+        <div class="options-list">
+          <div
+            v-for="item in options"
+            :key="item.id"
+            class="option-card"
+            :class="{ 'active': selectedId === item.id }"
+            @click="handleSelect(item)"
+          >
+            <div class="card-header">
+              <span class="title">{{ item.label }}</span>
+              <div v-if="selectedId === item.id" class="check-icon">
+                <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><polyline points="20 6 9 17 4 12"></polyline></svg>
+              </div>
+            </div>
+            <div class="description">
+              {{ item.desc }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+
+// 接收父组件传来的 modelValue (控制显示) 和 当前选中的ID
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  selectedId: {
+    type: [String, Number],
+    default: 1
+  }
+});
+
+const emit = defineEmits(['update:visible', 'confirm']);
+
+// 静态数据源 (保持不变)
+const options = [
+  {
+    id: 1,
+    label: '标记价格',
+    desc: '标记价格为合约的预计公允价值'
+  },
+
+  {
+    id: 2,
+    label: '最新价格',
+    desc: '最新价格为该合约的最新成交价格'
+  }
+];
+
+const close = () => {
+  emit('update:visible', false);
+};
+
+const handleSelect = (item) => {
+  // 1. 触发 confirm 事件，把整个对象带回去
+  emit('confirm', item);
+  // 2. 关闭弹窗
+  close();
+};
+</script>
+
+<style lang="less" scoped>
+.modal-mask {
+  position: fixed;
+  top: 0; left: 0; width: 100%; height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: flex-end; /* 底部对齐 */
+  z-index: 1000; /* 极高的 Z-index */
+}
+
+.modal-content {
+  width: 100%;
+  background: white;
+  border-radius: 16px 16px 0 0;
+  padding: 20px;
+  padding-bottom: 40px;
+  max-height: 80vh;
+  overflow-y: auto;
+  animation: slideUp 0.3s ease-out;
+  .trigger{margin-bottom: 15px}
+}
+
+.handle-bar {
+  width: 40px;
+  height: 4px;
+  background: #E0E0E0;
+  border-radius: 2px;
+  margin: 0 auto 20px auto;
+}
+
+.option-card {
+  border: 1px solid #E0E0E0;
+  border-radius: 12px;
+  padding: 16px;
+  margin-bottom: 16px;
+  cursor: pointer;
+  transition: all 0.2s;
+  position: relative;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #333;
+}
+
+.description {
+  font-size: 13px;
+  color: #666;
+  line-height: 1.5;
+}
+
+/* 选中状态样式 */
+.option-card.active {
+  border-color: #F53F3F; /* 红色边框 */
+  background-color: #FFF9F9; /* 极淡的红色背景可选 */
+}
+
+.option-card.active .title {
+  color: #D92828; /* 红色标题 */
+}
+
+.option-card.active .description {
+  color: #D92828; /* 红色描述 */
+}
+
+.check-icon {
+  width: 24px;
+  height: 24px;
+  background: #D92828;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+}
+
+@keyframes slideUp {
+  from { transform: translateY(100%); }
+  to { transform: translateY(0); }
+}
+</style>

src/views/bitcoin/components/assetlessState.vue

@@ -0,0 +1,97 @@
+<script setup>
+// 定义按钮点击事件
+const handleDeposit = () => {
+  console.log("点击了前往充币");
+  // 这里可以写跳转路由的代码，例如：router.push('/deposit')
+};
+</script>
+
+<template>
+   <div>
+      <div class="empty-state-container">
+    <div class="image-wrapper">
+<!--      src="https://cdn-icons-png.flaticon.com/512/5501/5501360.png"-->
+      <img
+        src="../../../assets/icon/bitcoin/qianwangcb.svg"
+        alt="暂无资产"
+        class="empty-image"
+      />
+    </div>
+
+    <h2 class="title">暂无资产</h2>
+    <p class="subtitle">立即充币或买币，开启交易之旅</p>
+
+    <button class="action-btn" @click="handleDeposit">
+      前往充币
+    </button>
+  </div>
+    </div>
+</template>
+
+<style lang="less" scoped>
+/* 基础尺寸：375px
+  如果你使用了 postcss-pxtorem 等插件，这里的 px 会自动转为 rem
+*/
+
+.empty-state-container {
+  width: 100%;
+  //min-height: 100vh; /* 占满全屏高度 */
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  align-items: center; /* 水平居中 */
+  padding-top: 30px; /* 距离顶部的距离，根据设计稿调整 */
+  box-sizing: border-box;
+}
+
+/* 图片区域 */
+.image-wrapper {
+  margin-bottom: 15px;
+}
+
+.empty-image {
+  width: 120px; /* 根据图片实际大小调整 */
+  height: auto;
+  /* 如果图片本身没有黑白滤镜，可以用 css 调整，或者直接用切好的图 */
+  filter: grayscale(100%);
+  opacity: 0.8;
+}
+
+/* 主标题 */
+.title {
+  font-size: 18px;
+  color: #333333; /* 深黑色 */
+  font-weight: 500;
+  margin: 0 0 0 0; /* 下边距 */
+  line-height: 1.5;
+}
+
+/* 副标题 */
+.subtitle {
+  font-size: 14px;
+  color: #999999; /* 浅灰色 */
+  margin: 0 0 20px 0; /* 距离按钮的间距 */
+  line-height: 1.5;
+  text-align: center;
+  padding: 0 20px; /* 防止文字太长贴边 */
+}
+
+/* 按钮样式 */
+.action-btn {
+  width: 315px; /* 375 - (30px padding * 2) 左右留白 */
+  height: 48px;
+  background-color: #DC4653; /* 提取自图片的红色 */
+  color: white;
+  font-size: 16px;
+  font-weight: bold;
+  border: none;
+  border-radius: 24px; /* 圆角，高度的一半形成胶囊状 */
+  cursor: pointer;
+  box-shadow: 0 4px 10px rgba(220, 70, 83, 0.3); /* 增加一点红色阴影更有质感 */
+  transition: opacity 0.2s;
+}
+
+.action-btn:active {
+  opacity: 0.8; /* 点击时的反馈 */
+}
+</style>

src/views/bitcoin/components/assetlessStateData.vue

@@ -0,0 +1,127 @@
+<script setup>
+
+</script>
+
+<template>
+  <div class="menu-content-l">
+        <div class="menu-content-lb pf400 fs14 fc666666">
+          <span>价格</span><span>数量(USDT)</span>
+        </div>
+        <div class="menu-content-lb2">
+          <p class="pf600 fs16 fcDF384C">5,678.00</p>
+          <p class="fs12 fcA8A8A8 pf400">1,678.00</p>
+        </div>
+        <div  class="menu-content-lb1">
+          <div class="menu-content-lb1l pf400 fs14 fcFF7171">
+            <span class="">40,166.82</span>
+            <span>40,166.82</span>
+            <span>40,166.82</span>
+            <span>40,166.82</span>
+            <span>40,166.82</span>
+            <span>40,166.82</span>
+            <span>40,166.82</span>
+            <span>40,166.82</span>
+            <span>40,166.82</span>
+            <span class="">40,166.82</span>
+            <span>40,166.82</span>
+            <span>40,166.82</span>
+            <span>40,166.82</span>
+            <span>40,166.82</span>
+            <span>40,166.82</span>
+            <span>40,166.82</span>
+            <span>40,166.82</span>
+            <span>40,166.82</span>
+            <span>40,166.82</span>
+          </div>
+          <div class="menu-content-lb1r pf400 fs14 fc444444">
+            <span>37.80K</span>
+            <span>37.80K</span>
+            <span>37.80K</span>
+            <span>37.80K</span>
+            <span>37.80K</span>
+            <span>37.80K</span>
+            <span>37.80K</span>
+            <span>37.80K</span>
+            <span>37.80K</span>
+            <span>37.80K</span>
+            <span>37.80K</span>
+            <span>37.80K</span>
+            <span>37.80K</span>
+            <span>37.80K</span>
+            <span>37.80K</span>
+            <span>37.80K</span>
+            <span>37.80K</span>
+            <span>37.80K</span>
+            <span>37.80K</span>
+          </div>
+        </div>
+        <div class="menu-content-lb1">
+          <div class="menu-content-lb1l pf400 fs12 fc333333">
+            <span class="fs12">深度1</span>
+            <img src="../../../assets/icon/bitcoin/shendul.svg" alt="">
+
+          </div>
+          <div class="menu-content-lb1r pf400 fs14 fc444444">
+            <img src="../../../assets/icon/bitcoin/wuzichan.svg" alt="">
+          </div>
+        </div>
+
+      </div>
+</template>
+
+<style scoped lang="less">
+  .menu-content-l{
+        flex: 1;
+        .menu-content-lb{
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          padding-right: 14px;
+        }
+        .menu-content-lb1{
+          margin-top: 5px;
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+           padding-right: 14px;
+          .menu-content-lb1l{
+            display: flex;
+            flex-direction: column;
+            line-height: 22px;
+          }
+          .menu-content-lb1r{
+            display: flex;
+            flex-direction: column;
+            line-height: 22px;
+          }
+        }
+        .menu-content-lb1:nth-child(3){
+          .menu-content-lb1l{
+            color: #45b26b;
+          }
+        }
+        .menu-content-lb1:nth-child(4){
+          .menu-content-lb1l{
+            width: 100%;
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+            background-color: #f5f5f5;
+            border-radius: 6px;
+            height: 24px;
+            padding: 0 5px 0 13px;
+          }
+          .menu-content-lb1r{
+            margin-left: 15px;
+          }
+        }
+        .menu-content-lb2{
+          margin-top: 8px;
+          line-height: 16px;
+          //span:nth-child(2){
+          //  //border-style: dashed;
+          //}
+        }
+      }
+</style>

src/views/bitcoin/components/position.vue

@@ -0,0 +1,504 @@
+<script setup>
+import { Icon as VanIcon, Button as VanButton } from 'vant';
+
+</script>
+
+<template>
+   <div>
+      <!--    m买入-->
+      <div class="transaction-cards">
+        <div class="container">
+
+<!--      <div class="top-nav">-->
+<!--        <div class="tabs">-->
+<!--          <div class="tab-item active">-->
+<!--            持有仓位(2)-->
+<!--            <div class="active-line"></div>-->
+<!--          </div>-->
+<!--          <div class="tab-item">当前委托(0)</div>-->
+<!--        </div>-->
+<!--        <div class="filter-all">-->
+<!--          <van-icon name="clock-o" style="margin-right: 4px;" /> 全部-->
+<!--        </div>-->
+<!--      </div>-->
+
+      <div class="position-card">
+
+        <div class="card-header">
+          <div class="coin-info">
+            <div class="btc-icon">₿</div>
+            <div class="title-group">
+              <div class="coin-name">BTC/USDT 永续</div>
+              <div class="tags">
+                <span class="tag-buy">买入</span>
+                <span class="tag-lever">逐仓 20X</span>
+              </div>
+            </div>
+          </div>
+          <div class="order-time">
+            <div>2025-11-04, 16:30</div>
+            <div style="text-align: right; margin-top: 2px;">下单时间</div>
+          </div>
+        </div>
+
+        <div class="divider"></div>
+
+        <div class="pnl-row">
+          <span class="label">未实现盈亏(USDT)</span>
+          <span class="value green-text">+0.2015 USDT</span>
+        </div>
+
+        <div class="data-grid">
+          <div class="grid-item align-left">
+            <div class="label">持仓数量</div>
+            <div class="value">0.215 USDT</div>
+          </div>
+          <div class="grid-item align-center">
+            <div class="label">开仓价格</div>
+            <div class="value">0.215 USDT</div>
+          </div>
+          <div class="grid-item align-right">
+            <div class="label">标记价格</div>
+            <div class="value">0.215 USDT</div>
+          </div>
+
+          <div class="grid-item align-left mt-10">
+            <div class="label">保证金</div>
+            <div class="value">0.215 USDT</div>
+          </div>
+          <div class="grid-item align-center mt-10">
+            <div class="label">强平价格</div>
+            <div class="value">0.215 USDT</div>
+          </div>
+          <div class="grid-item align-right mt-10">
+            <div class="label">收益率</div>
+            <div class="value green-text">+0.21%</div>
+          </div>
+        </div>
+
+        <div class="action-bar">
+          <div class="tp-sl-btn">止盈止损</div>
+          <div class="expand-btn">
+            展开 <van-icon name="arrow-down" />
+          </div>
+        </div>
+
+        <div class="footer-btn">
+          <van-button block round color="#e6424a" class="close-btn">
+            平仓
+          </van-button>
+        </div>
+
+      </div>
+    </div>
+      </div>
+      <!--    卖出-->
+      <div class="transaction-cards1">
+      <div class="mobile-viewport">
+
+    <div class="position-card">
+
+      <div class="card-header">
+        <div class="coin-info">
+          <div class="btc-icon">₿</div>
+          <div class="title-group">
+            <div class="coin-name">BTC/USDT 永续</div>
+            <div class="tags">
+              <span class="tag-sell">卖出</span>
+              <span class="tag-lever">全仓 20X</span>
+            </div>
+          </div>
+        </div>
+        <div class="order-time">
+          <div class="time-val">2025-11-04, 16:30</div>
+          <div class="time-lbl">下单时间</div>
+        </div>
+      </div>
+
+      <div class="divider"></div>
+
+      <div class="pnl-row">
+        <span class="label">未实现盈亏(USDT)</span>
+        <span class="value red-text">-0.2015 USDT</span>
+      </div>
+
+      <div class="data-grid">
+        <div class="grid-item align-left">
+          <div class="label">持仓数量</div>
+          <div class="value">0.215 USDT</div>
+        </div>
+        <div class="grid-item align-center">
+          <div class="label">开仓价格</div>
+          <div class="value">0.215 USDT</div>
+        </div>
+        <div class="grid-item align-right">
+          <div class="label">标记价格</div>
+          <div class="value">0.215 USDT</div>
+        </div>
+
+        <div class="grid-item align-left mt-12">
+          <div class="label">保证金</div>
+          <div class="value">0.215 USDT</div>
+        </div>
+        <div class="grid-item align-center mt-12">
+          <div class="label">强平价格</div>
+          <div class="value">0.215 USDT</div>
+        </div>
+        <div class="grid-item align-right mt-12">
+          <div class="label">收益率</div>
+          <div class="value red-text">+0.21%</div>
+        </div>
+      </div>
+
+      <div class="action-bar">
+        <div class="tp-sl-text">止盈止损</div>
+        <div class="expand-btn active">
+          收起 <van-icon name="arrow-up" />
+        </div>
+      </div>
+
+      <div class="detail-panel">
+        <div class="detail-row">
+          <div class="d-left">
+            <span class="d-tag">止盈</span>
+            <span class="d-val gray">标记价格≥2080.80</span>
+          </div>
+          <div class="d-right">
+            <span class="d-label">盈亏</span>
+            <span class="d-val green-text">+0.2015 USDT</span>
+          </div>
+        </div>
+
+        <div class="detail-row">
+          <div class="d-left">
+            <span class="d-tag">止损</span>
+            <span class="d-val gray">最新价格≤9878.8</span>
+          </div>
+          <div class="d-right">
+            <span class="d-label">盈亏</span>
+            <span class="d-val red-text">-0.2015 USDT</span>
+          </div>
+        </div>
+
+        <div class="detail-row">
+          <div class="d-left">
+            <span class="d-tag">数量</span>
+            <span class="d-val gray">0.215 USDT</span>
+          </div>
+          <div class="d-right">
+            <span class="d-label">委托价</span>
+            <span class="d-val gray">市价</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="footer-btn">
+        <van-button block round color="#e6424a" class="close-btn">
+          平仓
+        </van-button>
+      </div>
+
+    </div>
+  </div>
+    </div>
+    </div>
+</template>
+
+<style scoped lang="less">
+
+/* 模拟手机视口 375px */
+.mobile-viewport {
+  width: 100%;
+  max-width: 375px;
+  margin: 0 auto;
+  background-color: #ffffff; /* 外部背景色 */
+  padding: 0 15px;
+  box-sizing: border-box;
+  font-family: -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
+}
+
+/* 卡片主体 */
+.position-card {
+  background: #ffffff;
+  border-radius: 8px;
+  padding: 15px;
+  border: 1px solid #ebedf0;
+  position: relative;
+}
+
+/* --- Header --- */
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 12px;
+}
+.coin-info { display: flex; align-items: center; }
+.btc-icon {
+  width: 32px;
+  height: 32px;
+  background: #f7931a;
+  border-radius: 50%;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  font-size: 18px;
+  margin-right: 8px;
+}
+.title-group { display: flex; flex-direction: column; justify-content: center; }
+.coin-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  line-height: 1.2;
+  margin-bottom: 4px;
+}
+.tags { display: flex; align-items: center; }
+
+/* 标签样式 */
+.tag-sell {
+  background-color: #e6424a; /* 卖出红 */
+  color: white;
+  font-size: 11px;
+  padding: 1px 4px;
+  border-radius: 3px;
+  margin-right: 4px;
+  line-height: 1.4;
+}
+.tag-lever {
+  background-color: #9aa0a5; /* 灰色背景 */
+  color: #fff;
+  font-size: 11px;
+  padding: 1px 4px;
+  border-radius: 3px;
+  line-height: 1.4;
+}
+
+/* 时间 */
+.order-time { text-align: right; }
+.time-val { font-size: 12px; color: #666; }
+.time-lbl { font-size: 11px; color: #999; margin-top: 2px; }
+
+/* 分割线 */
+.divider { height: 1px; background-color: #f0f0f0; margin: 10px 0; }
+
+/* 盈亏行 */
+.pnl-row {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 12px;
+  font-size: 13px;
+  align-items: center;
+}
+.pnl-row .label { color: #999; }
+.pnl-row .value { font-size: 15px; font-weight: 500; }
+
+/* 通用颜色 */
+.green-text { color: #00b45a; }
+.red-text { color: #e6424a; }
+.gray { color: #888; }
+
+/* 数据网格 */
+.data-grid { display: flex; flex-wrap: wrap; }
+.grid-item { width: 33.33%; }
+.align-left { text-align: left; }
+.align-center { text-align: center; }
+.align-right { text-align: right; }
+.mt-12 { margin-top: 12px; }
+
+.grid-item .label { font-size: 11px; color: #999; margin-bottom: 4px; }
+.grid-item .value { font-size: 13px; color: #333; font-weight: 500; }
+
+/* 操作栏 */
+.action-bar {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 15px;
+  font-size: 12px;
+  color: #999;
+  align-items: center;
+}
+.tp-sl-text {
+  //text-decoration: underline;
+  text-decoration-color: #ccc;
+}
+.expand-btn { display: flex; align-items: center; cursor: pointer; }
+
+/* --- 详情面板 (关键还原部分) --- */
+.detail-panel {
+  margin-top: 8px;
+  padding-top: 4px;
+}
+.detail-row {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+  margin-bottom: 6px;
+  line-height: 1.5;
+}
+.d-left { display: flex; align-items: center; }
+.d-right { display: flex; align-items: center; }
+
+/* 详情里的文字对齐 */
+.d-tag {
+  color: #999;
+  margin-right: 12px; /* 标签(止盈)和数值之间的间距 */
+  min-width: 24px; /* 保证标签对齐 */
+}
+.d-label {
+  color: #999;
+  margin-right: 8px;
+}
+.d-val {
+  font-family: Arial, sans-serif;
+}
+
+/* 底部按钮 */
+.footer-btn { margin-top: 15px; }
+.close-btn { font-size: 15px; letter-spacing: 1px; border: none; }
+
+.container {
+  background-color: #fff;
+  //min-height: 100vh;
+  padding: 15px;
+  font-family: sans-serif;
+}
+
+.top-nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+.tabs { display: flex; align-items: center; gap: 20px; }
+.tab-item {
+  font-size: 16px;
+  color: #969799;
+  position: relative;
+  padding-bottom: 6px;
+  font-weight: 600;
+}
+.tab-item.active {
+  color: #323233;
+  font-weight: 600;
+  font-size: 17px;
+}
+.active-line {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 20px;
+  height: 3px;
+  background-color: #323233;
+  border-radius: 2px;
+}
+.filter-all {
+  font-size: 16px;
+  color: #969799;
+  display: flex;
+  font-weight: 600;
+  align-items: center;
+}
+
+.position-card {
+  background: #ffffff;
+  border-radius: 12px;
+  padding: 16px;
+  /* 去掉投影，增加描边 */
+  box-shadow: none;
+  border: 1px solid #ebedf0;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 12px;
+}
+.coin-info { display: flex; align-items: center; }
+.btc-icon {
+  width: 36px;
+  height: 36px;
+  background: #f7931a;
+  border-radius: 50%;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  font-size: 20px;
+  margin-right: 10px;
+}
+.coin-name {
+  font-size: 16px;
+  font-weight: bold;
+  color: #323233;
+  line-height: 1.2;
+  margin-bottom: 4px;
+}
+.tags { display: flex; align-items: center; }
+.tag-buy {
+  background-color: #00b45a;
+  color: white;
+  font-size: 11px;
+  padding: 1px 4px;
+  border-radius: 3px;
+  margin-right: 4px;
+}
+.tag-lever {
+  background-color: #f0f0f0;
+  color: #969799;
+  font-size: 11px;
+  padding: 1px 4px;
+  border-radius: 3px;
+}
+.order-time {
+  text-align: right;
+  font-size: 12px;
+  color: #969799;
+  line-height: 1.4;
+}
+.divider {
+  height: 1px;
+  background-color: #f5f6f7;
+  margin: 12px 0;
+}
+.pnl-row {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 12px;
+  font-size: 13px;
+}
+.pnl-row .label { color: #969799; }
+.green-text { color: #00b45a; font-weight: 500; }
+
+.data-grid { display: flex; flex-wrap: wrap; }
+.grid-item { width: 33.33%; margin-bottom: 4px; }
+.mt-10 { margin-top: 12px; }
+.align-left { text-align: left; }
+.align-center { text-align: center; }
+.align-right { text-align: right; }
+.grid-item .label {
+  font-size: 12px;
+  color: #969799;
+  margin-bottom: 4px;
+}
+.grid-item .value {
+  font-size: 14px;
+  color: #323233;
+  font-weight: 500;
+}
+
+.action-bar {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 16px;
+  font-size: 13px;
+  color: #969799;
+}
+.footer-btn { margin-top: 16px; }
+.close-btn { font-size: 16px; font-weight: 500; letter-spacing: 1px; }
+</style>

src/views/bitcoin/components/priceLimit.vue

@@ -0,0 +1,169 @@
+<template>
+  <Teleport to="body">
+    <div v-if="visible" class="modal-mask" @click="close">
+      <div class="modal-content" @click.stop>
+        <div class="handle-bar"></div>
+
+        <div class="options-list">
+          <div
+            v-for="item in options"
+            :key="item.id"
+            class="option-card"
+            :class="{ 'active': selectedId === item.id }"
+            @click="handleSelect(item)"
+          >
+            <div class="card-header">
+              <span class="title">{{ item.label }}({{ item.unit }})</span>
+              <div v-if="selectedId === item.id" class="check-icon">
+                <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><polyline points="20 6 9 17 4 12"></polyline></svg>
+              </div>
+            </div>
+            <div class="description">
+              {{ item.desc }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+
+// 接收父组件传来的 modelValue (控制显示) 和 当前选中的ID
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  selectedId: {
+    type: [String, Number],
+    default: 1
+  }
+});
+
+const emit = defineEmits(['update:visible', 'confirm']);
+
+// 静态数据源 (保持不变)
+const options = [
+  {
+    id: 1,
+    label: '涨跌幅',
+    unit: '%',
+    desc: '输入价格涨跌幅，系统会自动展示根据主单价格计算得出的止盈止损价格'
+  },
+  {
+    id: 2,
+    label: '收益率',
+    unit: '%',
+    desc: '输入收益率，系统会自动展示根据主单价格计算得出的止盈止损价格'
+  },
+  {
+    id: 3,
+    label: '收益额',
+    unit: 'USDT',
+    desc: '输入收益额，系统会自动展示根据主单价格计算得出的止盈止损价格'
+  }
+];
+
+const close = () => {
+  emit('update:visible', false);
+};
+
+const handleSelect = (item) => {
+  // 1. 触发 confirm 事件，把整个对象带回去
+  emit('confirm', item);
+  // 2. 关闭弹窗
+  close();
+};
+</script>
+
+<style>
+.modal-mask {
+  position: fixed;
+  top: 0; left: 0; width: 100%; height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: flex-end; /* 底部对齐 */
+  z-index: 1000; /* 极高的 Z-index */
+}
+
+.modal-content {
+  width: 100%;
+  background: white;
+  border-radius: 16px 16px 0 0;
+  padding: 20px;
+  padding-bottom: 40px;
+  max-height: 80vh;
+  overflow-y: auto;
+  animation: slideUp 0.3s ease-out;
+}
+
+.handle-bar {
+  width: 40px;
+  height: 4px;
+  background: #E0E0E0;
+  border-radius: 2px;
+  margin: 0 auto 20px auto;
+}
+
+.option-card {
+  border: 1px solid #E0E0E0;
+  border-radius: 12px;
+  padding: 16px;
+  margin-bottom: 16px;
+  cursor: pointer;
+  transition: all 0.2s;
+  position: relative;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #333;
+}
+
+.description {
+  font-size: 13px;
+  color: #666;
+  line-height: 1.5;
+}
+
+/* 选中状态样式 */
+.option-card.active {
+  border-color: #F53F3F; /* 红色边框 */
+  background-color: #FFF9F9; /* 极淡的红色背景可选 */
+}
+
+.option-card.active .title {
+  color: #D92828; /* 红色标题 */
+}
+
+.option-card.active .description {
+  color: #D92828; /* 红色描述 */
+}
+
+.check-icon {
+  width: 24px;
+  height: 24px;
+  background: #D92828;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+}
+
+@keyframes slideUp {
+  from { transform: translateY(100%); }
+  to { transform: translateY(0); }
+}
+</style>

src/views/bitcoin/components/sellOrder.vue

@@ -0,0 +1,340 @@
+<script setup>
+import {defineAsyncComponent, ref} from 'vue';
+const assetlessState = defineAsyncComponent(() => import("./assetlessState.vue"));
+const  position = defineAsyncComponent(() => import("./position.vue"));
+
+// 1. 模拟数据：为了还原图片，我们创建两个不同的订单对象
+const orders = ref([
+  {
+    id: 1,
+    symbol: 'BTC/USDT',
+    contractType: '永续',
+    side: 'buy', // 'buy' | 'sell'
+    leverage: '20X',
+    orderType: '市价',
+    amount: '0.215 USDT',
+    price: '0.215 USDT',
+    statusText: '止损',
+    triggerPrice: '标记价格>20',
+    time: '2025-11-04, 16:30',
+    stateText: '未触发',
+    canCancel: true // 显示红色撤单按钮
+  },
+  {
+    id: 2,
+    symbol: 'BTC/USDT',
+    contractType: '永续',
+    side: 'sell',
+    leverage: '20X',
+    orderType: '市价',
+    amount: '0.215 USDT',
+    price: '0.215 USDT',
+    statusText: '止盈',
+    triggerPrice: '标记价格>20',
+    time: '2025-11-04, 16:30',
+    stateText: '未触发',
+    canCancel: false // 显示灰色已完成/不可操作按钮
+  }
+]);
+
+// 当前选中的 Tab，默认选中 index 1 (当前委托)
+const currentTab = ref(0);
+const tabs = ['持有仓位(2)', '当前委托(2)'];
+
+// 按钮操作
+const handleCancel = (id) => {
+  console.log('撤单 ID:', id);
+  // 这里写撤单逻辑
+};
+</script>
+
+<template>
+  <div class="page-container">
+
+    <div class="tabs-header">
+      <div class="tabs-left">
+        <div
+          v-for="(tab, index) in tabs"
+          :key="index"
+          class="tab-item"
+          :class="{ active: currentTab === index }"
+          @click="currentTab = index"
+        >
+          {{ tab }}
+          <div class="active-line" v-if="currentTab === index"></div>
+        </div>
+      </div>
+
+      <div  class="tabs-right">
+        <span class="history-icon" style="align-content: center; display: flex; gap: 5px; align-items: center">
+          <img src="../../../assets/icon/bitcoin/shizhong.svg" alt=""> 全部</span>
+      </div>
+    </div>
+    <position v-if="currentTab==0"></position>
+
+    <div v-if="currentTab==1" class="order-list">
+      <div
+        v-for="item in orders"
+        :key="item.id"
+        class="order-card"
+      >
+        <div class="card-top">
+          <div class="coin-info">
+            <div class="coin-icon">₿</div>
+            <div class="coin-details">
+              <div class="coin-name">
+                {{ item.symbol }} <span class="contract-tag">{{ item.contractType }}</span>
+              </div>
+              <div class="tags-row">
+                <span class="tag" :class="item.side === 'buy' ? 'tag-buy' : 'tag-sell'">
+                  {{ item.side === 'buy' ? '买入' : '卖出' }}
+                </span>
+                <span class="tag tag-gray">逐仓 {{ item.leverage }}</span>
+                <span class="tag tag-gray">{{ item.orderType }}</span>
+              </div>
+            </div>
+          </div>
+
+          <button
+            v-if="item.canCancel"
+            class="btn-cancel"
+            @click="handleCancel(item.id)"
+          >
+            撤单
+          </button>
+          <div v-else class="badge-completed">
+            已完成
+          </div>
+        </div>
+
+        <div class="divider"></div>
+
+        <div class="card-body-grid">
+          <div class="grid-item align-left">
+            <div class="label">数量</div>
+            <div class="value">{{ item.amount }}</div>
+          </div>
+          <div class="grid-item align-center">
+            <div class="label">价格</div>
+            <div class="value">{{ item.price }}</div>
+          </div>
+          <div class="grid-item align-right">
+            <div class="label">状态</div>
+            <div class="value bold-text">{{ item.statusText }}</div>
+          </div>
+
+          <div class="grid-item align-left">
+            <div class="label">触发价格</div>
+            <div class="value">{{ item.triggerPrice }}</div>
+          </div>
+          <div class="grid-item align-center">
+            <div class="label">下单时间</div>
+            <div class="value">{{ item.time }}</div>
+          </div>
+          <div class="grid-item align-right">
+            <div class="label">状态</div>
+            <div class="value bold-text">{{ item.stateText }}</div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+/* 基础设置 */
+.page-container {
+  width: 100%;
+  //min-height: 100vh;
+  //background-color: #FAFAFA; /* 浅灰背景 */
+  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, sans-serif;
+}
+
+/* --- Tabs 样式 --- */
+.tabs-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 16px;
+  background-color: #fff;
+  height: 44px;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.tabs-left {
+  display: flex;
+  gap: 24px;
+}
+
+.tab-item {
+  font-size: 15px;
+  color: #999;
+  position: relative;
+  cursor: pointer;
+  padding: 10px 0;
+}
+
+.tab-item.active {
+  color: #333;
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.active-line {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 20px;
+  height: 3px;
+  background-color: #121212; /* 选中时的蓝色 */
+  border-radius: 2px;
+}
+
+.tabs-right {
+  color: #999;
+  font-size: 14px;
+  align-content: center;
+}
+
+/* --- 列表卡片样式 --- */
+.order-list {
+  padding: 15px;
+}
+
+.order-card {
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 12px;
+  //box-shadow: 0 2px 8px rgba(0,0,0,0.02); /* 轻微阴影 */
+  border: 1px solid #f0f0f0;
+}
+
+/* 卡片头部 */
+.card-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 12px;
+}
+
+.coin-info {
+  display: flex;
+  gap: 10px;
+}
+
+.coin-icon {
+  width: 36px;
+  height: 36px;
+  background-color: #F7931A; /* BTC 橙色 */
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  font-size: 20px;
+}
+
+.coin-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 4px;
+}
+
+.contract-tag {
+  font-size: 12px;
+  font-weight: normal;
+  color: #333;
+}
+
+.tags-row {
+  display: flex;
+  gap: 6px;
+}
+
+/* 标签体系 */
+.tag {
+  font-size: 11px;
+  padding: 1px 4px;
+  border-radius: 2px;
+  color: #fff;
+}
+
+.tag-buy {
+  background-color: #2EBD85; /* 涨/买入绿 */
+}
+
+.tag-sell {
+  background-color: #DF294A; /* 跌/卖出红 */
+}
+
+.tag-gray {
+  background-color: #F0F0F0;
+  color: #999;
+}
+
+/* 按钮体系 */
+.btn-cancel {
+  background-color: #DF294A;
+  color: white;
+  border: none;
+  padding: 6px 16px;
+  border-radius: 4px;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.badge-completed {
+  background-color: #aaa;
+  color: white;
+  padding: 6px 12px;
+  border-radius: 4px;
+  font-size: 13px;
+}
+
+.divider {
+  height: 1px;
+  background-color: #F5F5F5;
+  margin-bottom: 12px;
+}
+
+/* --- 数据网格 Grid --- */
+.card-body-grid {
+  display: grid;
+  /* 定义三列，左侧和中间自动，右侧靠边 */
+  grid-template-columns: 1fr 1fr 1fr;
+  row-gap: 12px; /* 行间距 */
+}
+
+.grid-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+/* 对齐方式 */
+.align-left { align-items: flex-start; }
+.align-center { align-items: center; }
+.align-right { align-items: flex-end; }
+
+.label {
+  font-size: 12px;
+  color: #999; /* 灰色标签 */
+}
+
+.value {
+  font-size: 13px;
+  color: #333;
+  font-family: Helvetica, Arial, sans-serif; /* 数字字体优化 */
+}
+
+.bold-text {
+  font-weight: 500;
+}
+</style>