Merge branch 'web3_transection'

# Conflicts:
#	src/router/index.js

public/index.html

@@ -15,3 +15,5 @@
     <!-- built files will be auto injected -->
   </body>
 </html>
+<style>
+</style>

src/App.vue

@@ -1,5 +1,20 @@
 <template>
-  <router-view/>
+  <div class="content">
+    <router-view />
+  </div>
+
 </template>
 
-<style lang="less"></style>
+<style lang="less" scoped>
+.content{
+  padding-bottom: 60px;
+}
+</style>
+<script setup >
+import {onMounted} from "vue";
+
+onMounted(() => {
+  // 强制滚动到顶部
+  window.scrollTo(0, 0);
+});
+</script>

src/assets/icon/bitcoin/lanweishezhi.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 10C10.0001 10.0938 9.97902 10.1863 9.93845 10.2708C9.89788 10.3554 9.83881 10.4297 9.76562 10.4883L6.64062 12.9883C6.5765 13.0396 6.5029 13.0777 6.42403 13.1006C6.34516 13.1235 6.26256 13.1305 6.18095 13.1215C6.09933 13.1124 6.0203 13.0874 5.94837 13.0477C5.87644 13.0081 5.81302 12.9547 5.76172 12.8906C5.71042 12.8265 5.67226 12.7529 5.6494 12.674C5.62655 12.5952 5.61945 12.5126 5.62852 12.4309C5.63759 12.3493 5.66264 12.2703 5.70225 12.1984C5.74186 12.1264 5.79525 12.063 5.85938 12.0117L8.37422 10L5.85938 7.98828C5.79525 7.93698 5.74186 7.87356 5.70225 7.80163C5.66264 7.7297 5.63759 7.65067 5.62852 7.56905C5.61945 7.48744 5.62655 7.40484 5.6494 7.32597C5.67226 7.2471 5.71042 7.1735 5.76172 7.10938C5.81302 7.04525 5.87644 6.99186 5.94837 6.95225C6.0203 6.91264 6.09933 6.88759 6.18095 6.87852C6.26256 6.86945 6.34516 6.87655 6.42403 6.8994C6.5029 6.92226 6.5765 6.96042 6.64062 7.01172L9.76562 9.51172C9.83881 9.57032 9.89788 9.64463 9.93845 9.72915C9.97902 9.81368 10.0001 9.90624 10 10ZM13.75 11.875H10.625C10.4592 11.875 10.3003 11.9408 10.1831 12.0581C10.0658 12.1753 10 12.3342 10 12.5C10 12.6658 10.0658 12.8247 10.1831 12.9419C10.3003 13.0592 10.4592 13.125 10.625 13.125H13.75C13.9158 13.125 14.0747 13.0592 14.1919 12.9419C14.3092 12.8247 14.375 12.6658 14.375 12.5C14.375 12.3342 14.3092 12.1753 14.1919 12.0581C14.0747 11.9408 13.9158 11.875 13.75 11.875ZM18.125 4.375V15.625C18.125 15.9565 17.9933 16.2745 17.7589 16.5089C17.5245 16.7433 17.2065 16.875 16.875 16.875H3.125C2.79348 16.875 2.47554 16.7433 2.24112 16.5089C2.0067 16.2745 1.875 15.9565 1.875 15.625V4.375C1.875 4.04348 2.0067 3.72554 2.24112 3.49112C2.47554 3.2567 2.79348 3.125 3.125 3.125H16.875C17.2065 3.125 17.5245 3.2567 17.7589 3.49112C17.9933 3.72554 18.125 4.04348 18.125 4.375ZM16.875 15.625V4.375H3.125V15.625H16.875Z" fill="#A8A8A8"/>
+</svg>

src/assets/less/reset.less

@@ -35,5 +35,5 @@ a {
 }
 
 html, body {
-  overflow-x: hidden;
+  //overflow-x: hidden;
 }

src/router/index.js

@@ -44,6 +44,15 @@ import Calculator from "../views/bitcoin/Calculator.vue"; // 新建的计算器
 import CommonFunctionsPopup from "@/views/bitcoin/CommonFunctionsPopup/CommonFunctionsPopup.vue"; // 子组件路径
 import TradeSettings from "@/views/bitcoin/CommonFunctionsPopup/GeneralLevel2/TradeSettings.vue"; // 新建
 import TradeRules from "@/views/bitcoin/CommonFunctionsPopup/GeneralLevel2/TradeRules.vue"; // 新建
+import TradeLayout from '@/views/bitcoin/TradeLayout.vue'; // 新建的公共父组件
+import TradeFutures from '@/views/bitcoin/TradeFutures.vue'; // （合约）
+import TradeSeconds from '@/views/bitcoin/lever/TradeSeconds.vue'; // 秒合约（占位）
+import TradeOptions from '@/views/bitcoin/lever/TradeOptions.vue'; // 期权（占位）
+import TradeMargin from '@/views/bitcoin/lever/TradeMargin.vue';
+import Calculator from '../views/bitcoin/Calculator.vue' // 新建的计算器页面
+import TradeSettings from '@/views/bitcoin/CommonFunctionsPopup/GeneralLevel2/TradeSettings.vue'// 新建
+import OptionTrading from '@/views/bitcoin/lever/OptionTrading.vue'
+
 
 const routes = [
   {
@@ -53,7 +62,7 @@ const routes = [
     children: [
       {
         path: "",
-        name: "appIndex",
+        name: "",
         component: AppIndex,
       },
       {
@@ -86,12 +95,36 @@ const routes = [
             component: TradeOptions,
             meta: { title: "期权" },
           },
+            meta: { title: '期权' },
+          },
+
           {
             path: "margin",
             name: "TradeMargin",
             component: TradeMargin,
             meta: { title: "杠杆" },
           },
+          { path: 'settings',
+            name: 'TradeSettings',
+            component: TradeSettings },
+
+         ]
+        },
+        {
+            path: 'PnLAnalysis',
+            name: 'PnLAnalysis.vue',
+            component: () => import('@/views/bitcoin/lever/PnLAnalysis.vue'),
+            meta: { title: '' }
+         },
+         { path: 'calculator',
+            name: 'calculator',
+            component: Calculator },
+        {
+            path: 'OptionTrading',
+            name: 'OptionTrading',
+            component: OptionTrading,
+            meta: { title: '' }
+         },
           { path: "settings", name: "TradeSettings", component: TradeSettings },
           { path: "calculator", name: "calculator", component: Calculator },
         ],

src/views/HomeIndex.vue

@@ -28,7 +28,7 @@
 
   const tabbarChange = (key, path) => {
     current.value = key;
-    router.push(path);
+    router.push('/'+key);
   };
 
   const tabbarList = [

src/views/bitcoin/Calculator.vue

@@ -345,20 +345,26 @@ const reset = () => {
   font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif;
   background: #fff;
   min-height: 100vh;
+  /* 这里的 padding-bottom: 90px 很重要，为了防止底部内容被固定的 footer 遮挡，保留它 */
   padding-bottom: 90px;
   color: #333;
   z-index: 200;
-  position: fixed;       /* 固定定位 */
-  top: 0;
-  left: 0;
+
+  /* 删掉了 position: fixed/top/left */
+
   display: flex;
   flex-direction: column;
   width: 100%;
 }
-
 /* 导航 & 头部 */
 .nav-bar { display: flex; justify-content: space-between; align-items: center;
-  height: 44px; padding: 0 16px; }
+  height: 44px; padding: 0 16px;
+  /* 新增以下 3 行，实现吸顶效果 */
+  position: sticky;
+  top: 0;
+  background: #fff; /* 防止透明背景导致内容重叠 */
+  z-index: 100;
+}
 .nav-left { font-size: 24px; cursor: pointer; }
 .nav-title { font-size: 18px; font-weight: 600; }
 .nav-right { width: 20px; }
@@ -366,7 +372,7 @@ const reset = () => {
 .header-info {
   display: flex;
   align-items: center;
-  padding: 8px 12px;
+  padding: 0px 15px;
   background-color: #fff;
   width: 100%;
 }

src/views/bitcoin/TradeFutures.vue

@@ -225,8 +225,7 @@
         </div>
       </div>
     </div>
-
-    <sellOrder></sellOrder>
+      <sellOrder></sellOrder>
 
     <div v-if="isassetlessState">
       <assetlessState></assetlessState>
@@ -280,9 +279,12 @@
 
 <script setup>
 import {Checkbox as VanCheckbox, Icon as VanIcon} from 'vant';
-import {computed, defineAsyncComponent, ref} from 'vue';
+import {computed, defineAsyncComponent, ref, onMounted} from 'vue';
 import { useRouter } from 'vue-router'; // 【新增】 引入路由
-
+onMounted(() => {
+  // 强制滚动到顶部
+  window.scrollTo(0, 0);
+});
 const router = useRouter(); // 【新增】 实例化路由
 
 // --- 异步组件引入 ---
@@ -375,12 +377,29 @@ const onOrderConfirmed = () => {
 .trade-futures-container {
   display: flex;
   flex-direction: column;
-  justify-content: flex-start;
   align-items: center;
-  margin-bottom: 100px;
+  padding-bottom: 60px; /* <-- 改成这行 */
+   padding-top: 65px;
+box-sizing: border-box;
   width: 100%;
+  /* 1. 设定高度为视口高度，占满屏幕 */
+  //height: 100vh;
+
+  /* 2. 开启容器内部纵向滚动 */
+  overflow-y: auto;
+
+  /* 3. 开启 iOS 惯性滚动，滑动更丝滑 */
+  -webkit-overflow-scrolling: touch;
+
+  /* 4. 取消 box-sizing 的注释，防止 padding 撑破宽度 */
+
+  /* 5. 底部留白（防止内容被底部导航栏遮挡） */
+  /* --- 修改结束 --- */
+
+
 }
 
+
 /* --- 【新增】 头部行情的样式 --- */
 .menu {
   display: flex;

src/views/bitcoin/TradeLayout.vue

@@ -66,6 +66,8 @@ const isCurrent = (name) => {
   justify-content: flex-start;
   align-items: center;
   width: 100%;
+  height: auto;
+  z-index: auto;
 
   /* 确保导航栏样式正常 */
   .market-nav {
@@ -73,9 +75,14 @@ const isCurrent = (name) => {
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    margin-top: 21px;
+    padding:10px 15px;
     width: 345px;
-    height: 24px;
+    height: 48px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1000;
+    background-color: #FFFFFF;
     /* 既然只放Tabs，可能需要一点底部间距，以免紧贴着下面的内容 */
     margin-bottom: 18px;
 
@@ -84,7 +91,7 @@ const isCurrent = (name) => {
       flex-direction: row;
       justify-content: flex-start;
       align-items: flex-end;
-      width: 349px;
+      width: 345px;
       height: 24px;
 
       .nav-item {

src/views/bitcoin/TradeOptions.vue

@@ -1,11 +0,0 @@
-<script setup>
-
-</script>
-
-<template>
-<div>fjlzlnlf</div>
-</template>
-
-<style scoped lang="less">
-
-</style>

src/views/bitcoin/components/ClosePositionSheet.vue

@@ -1,5 +1,5 @@
 <template>
-  <Teleport to="body">
+  <Teleport to="body" v-if="visible">
     <transition name="fade">
       <div v-if="visible" class="modal-mask" @click="close"></div>
     </transition>

src/views/bitcoin/components/ProfitAndLossPrompt.vue

@@ -47,7 +47,7 @@ const close = () => {
   display: flex;
   align-items: center; /* 垂直居中 */
   justify-content: center; /* 水平居中 */
-  z-index: 999;
+  z-index: 2000;
 }
 
 /* --- 弹窗卡片 --- */

src/views/bitcoin/components/position.vue

@@ -211,7 +211,7 @@
   </div>
     </div>
     </div>
-   <div>
+   <div v-if="showModal == true">
       <ClosePositionSheet
           v-model:visible="showModal">
       </ClosePositionSheet>

src/views/bitcoin/components/sellOrder.vue

@@ -38,7 +38,7 @@
         time: '2025-11-04,16:30',
         stateText: '未触发',
         canCancel: false // 显示灰色已完成/不可操作按钮
-      }
+      },
     ]);
 
     // 当前选中的 Tab，默认选中 index 1 (当前委托)
@@ -57,7 +57,7 @@
 </script>
 
 <template>
-  <div class="page-container">
+  <div class="page-container1">
 
     <div class="tabs-header">
       <div class="tabs-left">
@@ -78,11 +78,14 @@
           <img src="../../../assets/icon/bitcoin/shizhong.svg" alt=""> 全部</span>
       </div>
     </div>
-    <position v-if="currentTab==0.9"></position>
+    <div v-if="currentTab===8">
+      <position ></position>
+    </div>
+
     <div >
-      <assetlessState v-if="isassetlessState"></assetlessState>
+<!--      <assetlessState v-if="isassetlessState"></assetlessState>-->
     </div>
-    <div v-if="currentTab==1" class="order-list">
+    <div v-if="currentTab===1" class="order-list">
       <div
           v-for="item in orders"
           :key="item.id"
@@ -156,9 +159,9 @@
 
 <style lang="less" scoped>
 /* 基础设置 */
-.page-container {
+.page-container1 {
   width: 100%;
-  //min-height: 100vh;
+  height: auto;
   //background-color: #FAFAFA; /* 浅灰背景 */
   font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, sans-serif;
 }

src/views/bitcoin/lever/OptionTrading.vue

@@ -0,0 +1,1155 @@
+<template>
+  <div class="calculator-page">
+    <div class="nav-bar">
+      <div class="nav-left" @click="$router.back()">
+        <div>
+          <VanIcon size="18" name="arrow-left"/>
+        </div>
+      </div>
+      <div class="nav-title">期权</div>
+      <div class="nav-right"></div>
+    </div>
+    <div>
+       <div class="page-container">
+    <header class="header">
+      <div class="left" style="display: flex; align-items: center;">
+        <img class="fc333333" src="@/assets/icon/bitcoin/menu.svg" alt="">
+        <h1 class="title">BTCUSDT</h1>
+      </div>
+      <div class="right">
+        <img src="@/assets/icon/bitcoin/den.svg" alt="" @click="showFunctions = true">
+      </div>
+    </header>
+
+
+
+    <nav class="time-tabs">
+      <div
+        v-for="tab in tabs"
+        :key="tab"
+        class="tab-item"
+        :class="{ active: currentTab === tab }"
+        @click="switchPeriod(tab)"
+      >
+        {{ tab }}
+      </div>
+      <div class="tab-item icon">更多 <span class="triangle">◢</span></div>
+      <div class="tab-item icon">
+        <img src="@/assets/icon/bitcoin/lishidingdan.svg" alt="">
+      </div>
+    </nav>
+
+    <div class="chart-wrapper">
+      <div id="k-line-chart" class="kline-container"></div>
+    </div>
+    <section class="market-info">
+      <div class="price-block">
+        <div class="fs12 fcA8A8A8">指数价格</div>
+        <div class="current-price">78,776.76</div>
+      </div>
+
+      <div class="stat-grid">
+        <div class="stat-item">
+          <span class="label fcA8A8A8">24h 最高价</span>
+          <span class="label fcDF384C">24h 成交量 </span>
+        </div>
+
+      </div>
+      <div>
+        <div class="stat-item">
+          <span class="label fcA8A8A8">24h 最低价</span>
+          <span class="value">78,776.76</span>
+        </div>
+      </div>
+       <div>
+        <div class="stat-item">
+
+          <span class="label fcA8A8A8">到期时间</span>
+          <span class="value">01:00:00</span>
+        </div>
+      </div>
+
+    </section>
+    <div style="margin: 0 auto">
+      <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>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 fc333333">
+            <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>
+
+
+
+          </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" @click="showInfo = true">
+            <img src="@/assets/icon/bitcoin/quancang.svg" alt="">
+            <span>{{ selectedLabel1 }}</span>
+          </div>
+          <div @click="showModal1 = true" style="font-size: 12px; margin-right: 12px;">
+            <VanIcon :style="{ fontWeight: 'bold' }" :name="showModal1 ? 'arrow-up' : 'arrow-down'"/>
+          </div>
+        </div>
+
+        <div class="menu-content-rb pf400 fs14">
+          <div class="menu-content-rb1 fs14 fc333333" @click="showModal3 = true">
+            <img src="@/assets/icon/bitcoin/quancang.svg" alt="">
+            <span>限价委托</span>
+          </div>
+<!--          <div @click="showModal2 = true" style="font-size: 12px; margin-right: 12px;">-->
+<!--            <VanIcon :style="{ fontWeight: 'bold' }" :name="showModal2 ? 'arrow-up' : 'arrow-down'"/>-->
+<!--          </div>-->
+        </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 fs12 fc333333">
+          <span>买入最高限价</span>
+          <span class="fcDF384C" style="padding-right: 0">20924</span>
+        </div>
+         <div class="menu-content-rb pf400 fs14">
+          <div class="menu-content-rb1 fs14 fc333333" @click="showInfo = true">
+            <img src="@/assets/icon/bitcoin/quancang.svg" alt="">
+            <span>隐含波动率</span>
+          </div>
+          <div @click="showModal1 = true" style="font-size: 12px; margin-right: 12px;">
+            53.6%
+          </div>
+        </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 style="margin-left: 0" class="menu-content-rb1s fc333333">只减仓</span>
+          </div>
+          <div class="menu-content-rb1" @click="showM = true">
+            <span></span>
+            <span>{{ currentType }}</span>
+            <div style="font-size: 12px;">
+              <VanIcon :style="{ fontWeight: 'bold' }" :name="showM ? 'arrow-up' : 'arrow-down'"/>
+            </div>
+          </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" @click="showConfirm = true">
+          <div class="pf400 fs16 fcFFFFFF">买入(做多)</div>
+        </div>
+
+
+        <div class="menu-content-rb pf400 fs14">
+          <div class="pf400 fs16 fcFFFFFF" @click="showConfirm = true">卖出(做空)</div>
+        </div>
+      </div>
+    </div>
+    </div>
+
+     <sellOrder1></sellOrder1>
+
+    <div v-if="isassetlessState">
+      <assetlessState></assetlessState>
+    </div>
+
+    <ChooseThisDepth
+        v-model:show="isPickerVisible"
+        v-model="currentDepth"
+    ></ChooseThisDepth>
+
+    <LeveragePopup
+        v-model:visible="showLeverageModal"
+        :initial-value="selectedLeverage"
+        @confirm="handleConfirm">
+    </LeveragePopup>
+
+    <OrderConfirmPopup
+        v-model:visible="showConfirm"
+        @confirm="onOrderConfirmed">
+    </OrderConfirmPopup>
+
+    <OrderTimeSheet
+        v-model:visible="showM"
+        v-model="currentType"
+        teleport="body"
+    ></OrderTimeSheet>
+
+    <MarginInfoSheet
+        v-model:visible="showInfo"
+    ></MarginInfoSheet>
+
+    <FundingOptions
+        v-model:visible="showModal1"
+        :selected-id="currentId1"
+        @confirm="handleConfirm1">
+    </FundingOptions>
+
+    <OrderType
+        v-model:visible="showModal2"
+        :selected-id="currentId2"
+        @confirm="handleConfirm2"
+    ></OrderType>
+
+    <LimitOrderModal
+        v-model:visible="showModal3"
+    ></LimitOrderModal>
+    <CommonFunctionsPopup
+      v-model:visible="showFunctions"
+    ></CommonFunctionsPopup>
+    <div style="margin-bottom: 80px">
+    </div>
+  </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { Icon as VanIcon,Popup as VanPopup} from 'vant';
+import {Checkbox as VanCheckbox, } from 'vant';
+import { onMounted, onUnmounted } from 'vue'
+
+import {computed, defineAsyncComponent, ref} from 'vue';
+import { useRouter } from 'vue-router'; // 【新增】 引入路由
+
+const router = useRouter(); // 【新增】 实例化路由
+
+// --- 异步组件引入 ---
+const priceLimit = defineAsyncComponent(() => import("@/views/bitcoin/components/priceLimit.vue"));
+const assetlessState = defineAsyncComponent(() => import("@/views/bitcoin/components/assetlessState.vue"));
+const assetlessStateData = defineAsyncComponent(() => import("@/views/bitcoin/components/assetlessStateData.vue"));
+const sellOrder1 = defineAsyncComponent(() => import('@/views/bitcoin/lever/components/sellOrder1.vue'));
+const SellTradingStatusData = defineAsyncComponent(() => import('@/views/bitcoin/components/SellTradingStatusData.vue'));
+const ChooseThisDepth = defineAsyncComponent(() => import('@/views/bitcoin/components/ChooseThisDepth.vue'));
+const LeveragePopup = defineAsyncComponent(() => import('@/views/bitcoin/components/LeveragePopup.vue'));
+const OrderConfirmPopup = defineAsyncComponent(() => import('@/views/bitcoin/components/OrderConfirmPopup.vue'));
+const OrderTimeSheet = defineAsyncComponent(() => import('@/views/bitcoin/components/OrderTimeSheet.vue'));
+const MarginInfoSheet = defineAsyncComponent(() => import('@/views/bitcoin/lever/components/impliedVolatility.vue'));
+const FundingOptions = defineAsyncComponent(() => import('@/views/bitcoin/components/FundingOptions.vue'));
+const OrderType = defineAsyncComponent(() => import('@/views/bitcoin/components/OrderType.vue'));
+const LimitOrderModal = defineAsyncComponent(() => import('@/views/bitcoin/components/LimitOrderModal.vue'));
+// 假设您的组件在 @/components/CommonFunctionsPopup.vue (请根据实际路径修改)
+const CommonFunctionsPopup = defineAsyncComponent(() => import('@/views/bitcoin/CommonFunctionsPopup/CommonFunctionsPopup.vue'));
+
+// 控制弹窗显示的变量
+const showFunctions = ref(false);
+
+// --- 状态定义 ---
+const isassetlessState = ref(false);
+
+const isPickerVisible = ref(false);
+const currentDepth = ref('depth1');
+const depthMap = {
+  'depth1': '深度1',
+  'depth2': '深度2',
+  'depth3': '深度3',
+};
+const displayLabel = computed(() => depthMap[currentDepth.value] || '请选择');
+
+/* 市价说明 */
+const showModal3 = ref(false);
+
+/* 订单类型选项 */
+const showModal2 = ref(false);
+const currentId2 = ref(1);
+const selectedLabel2 = ref('市价');
+const selectedUnit2 = ref('%');
+const handleConfirm2 = (item) => {
+  currentId2.value = item.id;
+  selectedLabel2.value = item.label.slice(0, 2);
+  selectedUnit2.value = item.unit;
+};
+
+/* 全仓逐仓选项 */
+const showModal1 = ref(false);
+const currentId1 = ref(1);
+const selectedLabel1 = ref('全仓');
+const selectedUnit1 = ref('%');
+const handleConfirm1 = (item) => {
+  currentId1.value = item.id;
+  selectedLabel1.value = item.label.slice(0, 2);
+  selectedUnit1.value = item.unit;
+};
+
+/* 全仓逐仓说明 */
+const showInfo = ref(false);
+
+/* GTC 弹框 */
+const showM = ref(false);
+const currentType = ref('GTC');
+
+/* 控制倍数 */
+const showLeverageModal = ref(false);
+const selectedLeverage = ref(100);
+const handleConfirm = (value) => {
+  selectedLeverage.value = value;
+};
+
+/* 交易确认 */
+const showConfirm = ref(false);
+const onOrderConfirmed = () => {
+  // console.log('订单已提交');
+  }
+
+
+// ✅ 使用 namespace 引入，防止报错
+import * as klinecharts from 'klinecharts'
+
+
+
+// --- 状态管理 ---
+const currentTab = ref('24h')
+const tabs = ['1h', '6h', '24h', '1w', '1m']
+let chartInstance = null
+
+// --- 数据生成逻辑 ---
+const generateData = (baseVal = 3812.74) => {
+  const data = []
+  let baseTime = new Date().getTime()
+  let basePrice = baseVal
+  for (let i = 0; i < 80; i++) {
+    const change = (Math.random() - 0.5) * 30
+    const close = basePrice + change
+    const open = basePrice + (Math.random() - 0.5) * 10
+    const high = Math.max(open, close) + Math.random() * 10
+    const low = Math.min(open, close) - Math.random() * 10
+    const volume = Math.random() * 100 + 50
+
+    data.push({ timestamp: baseTime, open, high, low, close, volume })
+    baseTime += 60 * 60 * 1000 // 1h 间隔
+    basePrice = close + (Math.random() * 2) // 稍微向上的趋势
+  }
+  return data
+}
+
+// --- 切换周期逻辑 ---
+const switchPeriod = (period) => {
+  currentTab.value = period
+  if (chartInstance) {
+    // 模拟数据刷新
+    const randomStart = 3800 + Math.random() * 100
+    chartInstance.applyNewData(generateData(randomStart))
+  }
+}
+
+// --- 初始化与配置 ---
+onMounted(() => {
+  const chartDOM = document.getElementById('k-line-chart')
+  if (!chartDOM) return
+
+  // 1. 初始化图表
+  chartInstance = klinecharts.init(chartDOM)
+  if (!chartInstance) return
+
+  // 2. 样式常量
+  const targetBlue = '#4A6EF5' // 截图中的蓝色虚线颜色
+  const gridColor = '#F2F4F6'  // 极淡的网格线
+  const textColor = '#929AA5'  // 灰色文字
+
+  // 3. 核心配置 (setStyleOptions)
+  chartInstance.setStyleOptions({
+    grid: {
+      show: true,
+      horizontal: {
+        show: true,
+        size: 1,
+        color: gridColor,
+        style: 'dash',
+        dashValue: [5, 5]
+      },
+      vertical: { show: false }
+    },
+    candle: {
+      type: 'candle_solid',
+      bar: {
+        upColor: '#2EBD85',
+        downColor: '#F6465D',
+        noChangeColor: '#2EBD85'
+      },
+      // ✅ 重点：蓝色价格指示线配置
+      priceMark: {
+        show: true,
+        high: { show: false },
+        low: { show: false },
+        last: {
+          show: true,
+          // 强制无论涨跌都显示蓝色
+          upColor: targetBlue,
+          downColor: targetBlue,
+          line: { show: true, style: 'dash', dashValue: [4, 3] },
+          text: {
+            show: true,
+            color: '#FFFFFF',
+            size: 11,
+            paddingLeft: 4,
+            paddingRight: 4,
+            borderRadius: 2
+          }
+        }
+      },
+      tooltip: {
+        // 只有按压时才显示十字光标
+        showRule: 'follow_cross',
+        showType: 'rect',
+        dataSource: 'none', // 隐藏浮层数据，保持清爽
+        crosshair: {
+          show: true,
+          horizontal: { line: { style: 'dash', color: textColor } },
+          vertical: { line: { style: 'dash', color: textColor } }
+        }
+      }
+    },
+    // ✅ 重点：技术指标(VOL)颜色
+    technicalIndicator: {
+      bar: {
+        upColor: '#2EBD85',
+        downColor: '#F6465D',
+        noChangeColor: '#2EBD85'
+      }
+    },
+    // ✅ 重点：隐藏坐标轴线，只保留文字
+    xAxis: {
+      axisLine: { show: false },
+      tickLine: { show: false },
+      tickText: { color: textColor, size: 10, paddingTop: 8 }
+    },
+    yAxis: {
+      type: 'normal',
+      position: 'right',
+      inside: true,
+      axisLine: { show: false },
+      tickLine: { show: false },
+      tickText: { color: textColor, size: 10, paddingLeft: 8 }
+    },
+    separator: { size: 0 } // 去掉指标和K线之间的分割线
+  })
+
+  // 4. 创建副图指标 (VOL)
+  chartInstance.createTechnicalIndicator('VOL', false, { id: 'pane_1', heightRatio: 0.2 })
+
+  // 5. 加载数据并设置缩放
+  chartInstance.applyNewData(generateData())
+  if (chartInstance.setDataSpace) {
+  chartInstance.setDataSpace(7)
+}
+  // chartInstance.setBarSpace(7) // 设置蜡烛宽度
+})
+
+onUnmounted(() => {
+  if (chartInstance) {
+    klinecharts.dispose('k-line-chart')
+  }
+})
+
+
+
+
+</script>
+
+<style lang="less" scoped>
+* {
+  box-sizing: border-box;
+}
+
+.menu-content {
+    width: 100%;
+    max-width: 345px;
+    display: flex;
+    flex-direction: row;
+    margin-top: 8px;
+  margin-left: 15px;
+
+    .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;
+          display: flex;
+          align-content: center;
+          justify-content: center;
+          align-items: center;
+
+          img {
+            padding-right: 6px;
+
+          }
+
+        }
+      }
+
+      .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(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(8) {
+        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(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 0px 0 5px;
+          }
+        }
+
+        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: #45b26b;
+
+        div {
+          margin: auto;
+        }
+
+      }
+
+      .menu-content-rb:nth-of-type(12) {
+        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(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(12) {
+        background-color: #df384c;
+        height: 38px;
+
+        div {
+          margin: auto;
+        }
+
+      }
+
+      //.van-dropdown-menu__bar{
+      //  width: 214px;
+      //}
+
+    }
+  }
+
+
+.calculator-page {
+  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif;
+  background: #fff;
+  padding-bottom: 90px;
+  color: #333;
+  //z-index: 99;
+  //position: relative;       /* 固定定位 */
+  top: 0;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+/* 导航 & 头部 */
+.nav-bar { display: flex; justify-content: space-between; align-items: center;
+  height: 44px; padding: 0 16px; margin-bottom: 5px; }
+.nav-left { font-size: 24px; cursor: pointer; }
+.nav-title { font-size: 18px; font-weight: 600; }
+.nav-right { width: 20px; }
+
+/* --- 布局容器 --- */
+.page-container {
+  width: 100%;
+  max-width: 375px;
+  margin: 0 auto;
+  background-color: #fff;
+  /* 使用系统字体，还原原生质感 */
+  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Roboto, Arial, sans-serif;
+  color: #333;
+  /* 防止横向滚动条 */
+  overflow-x: hidden;
+}
+
+/* 🔥🔥 核心修改：定义一个公共的左右内边距
+   给 header, market-info, time-tabs, chart-wrapper 都加上
+*/
+.header,
+.time-tabs,
+.chart-wrapper {
+  padding-left: 15px;
+  padding-right: 15px;
+  /* 关键：确保 padding 不会撑大 width: 100% */
+  box-sizing: border-box;
+}
+
+/* --- 1. 头部 --- */
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+ /* padding-top: 12px;*/
+  padding-bottom: 12px;
+}
+.title {
+  font-size: 18px;
+  font-weight: 600;
+  display: inline-block;
+  margin-left: 10px;
+}
+
+/* --- 2. 行情信息 --- */
+.market-info {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 15px;
+  line-height: 1.5;
+}
+
+.price-block .current-price {
+  font-size: 12px;
+  color: #111;
+  /* 稍微调整一下字间距，防止数字太紧 */
+  letter-spacing: -0.5px;
+}
+.sub-info {
+  font-size: 12px;
+  margin-top: 4px;
+  font-weight: 500;
+}
+.sub-info .fiat {
+  color: #999;
+  margin-right: 8px;
+}
+.sub-info .percent.up {
+  color: #2EBD85;
+}
+
+/* 统计网格 */
+
+.stat-item {
+  span{
+    display: flex;
+  }
+}
+.stat-item .label {
+  font-size: 11px;
+
+}
+.stat-item .value {
+  font-size: 11px;
+  color: #333;
+  font-family: "DIN", -apple-system, sans-serif; /* 如果有数字字体更好 */
+}
+
+/* --- 3. Tabs --- */
+.time-tabs {
+  display: flex;
+  align-items: center;
+  /*gap: 5px;*/
+  justify-content: space-between;
+  /*//padding-top: 8px;*/
+  /*padding-bottom: 8px;*/
+  /* 你的截图中似乎没有底边框，这里保持干净 */
+}
+.tab-item {
+  font-size: 14px;
+  color: #929AA5;
+  padding: 4px 10px; /* 稍微减小内边距，适应 15px 的两侧挤压 */
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: 500;
+  transition: all 0.2s;
+}
+.tab-item.active {
+  background-color: #F6465D;
+  color: #fff;
+}
+.tab-item.icon {
+  color: #929AA5;
+  font-size: 12px;
+}
+.triangle {
+  font-size: 8px;
+}
+
+/* --- 4. 图表容器 --- */
+.chart-wrapper {
+  width: 100%;
+  height: 275px;
+  /*margin-top: 5px;*/
+  /* 🔥 这里加了 padding 后，K线图就会自动往里缩，左右留出白边 */
+}
+.kline-container {
+  width: 100%;
+  height: 100%;
+}
+
+</style>

src/views/bitcoin/lever/PnLAnalysis.vue

@@ -0,0 +1,264 @@
+<template>
+  <div class="page-container">
+    <div class="nav-bar">
+      <div class="left-icon" @click="goBack">
+        <van-icon name="arrow-left" size="20" color="#333" />
+      </div>
+      <div class="nav-title">盈亏分析</div>
+      <div class="right-placeholder"></div> </div>
+
+    <div class="content-body">
+
+      <div class="header-section">
+        <div class="label-text">期权总资产(USDT)</div>
+        <div class="total-asset">1,125,158.00</div>
+        <div class="approx-value">≈35,458.00</div>
+
+        <div class="daily-pnl-row">
+          <div class="col">
+            <div class="label-text">今日盈亏(USDT)</div>
+            <div class="value-text bold">5,678.00</div>
+          </div>
+          <div class="col right-align">
+            <div class="label-text">盈亏率(%)</div>
+            <div class="value-text bold">5.25</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="stats-list">
+        <div class="stat-row" v-for="(item, index) in statsData" :key="index">
+          <span class="stat-label">{{ item.label }}</span>
+          <span class="stat-value">{{ item.value }}</span>
+        </div>
+      </div>
+
+      <div class="history-section">
+        <div class="section-title">
+          历史盈亏 <van-icon name="question-o" color="#999" size="14" style="margin-left:4px" />
+        </div>
+
+        <div class="history-card" v-for="(card, idx) in historyList" :key="idx">
+          <div class="card-header">{{ card.date }}</div>
+          <div class="card-body">
+            <div class="info-row">
+              <span class="info-label">账户总权益</span>
+              <span class="info-value">{{ card.equity }}</span>
+            </div>
+            <div class="info-row">
+              <span class="info-label">每日盈亏</span>
+              <span class="info-value">{{ card.dailyPnl }}</span>
+            </div>
+            <div class="info-row">
+              <span class="info-label">累计盈亏(%)</span>
+              <span class="info-value">{{ card.cumulative }}</span>
+            </div>
+            <div class="info-row">
+              <span class="info-label">净划入</span>
+              <span class="info-value">{{ card.netIn }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useRouter } from 'vue-router'; // 引入路由钩子
+import { Popup as vanPopup, Icon as vanIcon } from 'vant';
+
+const router = useRouter();
+
+// 返回上一页
+const goBack = () => {
+  router.back();
+  // 或者跳转指定路由: router.push('/home');
+};
+
+// 模拟数据：统计列表
+const statsData = ref([
+  { label: '总盈利', value: '152 USDT' },
+  { label: '总亏损', value: '0.0000 USDT' },
+  { label: '净盈利/亏损', value: '100 USDT' },
+  { label: '胜率', value: '2.51%' },
+  { label: '亏损天数', value: '10 天' },
+  { label: '盈利天数', value: '10 天' },
+  { label: '持平天数', value: '10 天' },
+]);
+
+// 模拟数据：历史记录
+const historyList = ref([
+  {
+    date: '2025-11-07',
+    equity: '0.2525 USDT',
+    dailyPnl: '0.4875 USDT',
+    cumulative: '0.0000 USDT(0.00%)',
+    netIn: '0.2525 USDT'
+  },
+  {
+    date: '2025-11-06',
+    equity: '0.2525 USDT',
+    dailyPnl: '0.4875 USDT',
+    cumulative: '0.0000 USDT(0.00%)',
+    netIn: '0.2525 USDT'
+  },
+  {
+    date: '2025-11-05',
+    equity: '0.2525 USDT',
+    dailyPnl: '0.4875 USDT',
+    cumulative: '0.0000 USDT(0.00%)',
+    netIn: '0.2525 USDT'
+  },
+]);
+</script>
+
+<style scoped>
+/* 全局容器设置 */
+.page-container {
+  min-height: 100vh;
+  background-color: #fff;
+  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif;
+  color: #333;
+  padding-top: 44px; /* 为固定导航栏留出空间 */
+}
+
+/* 1. 导航栏样式 */
+.nav-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+  background: #fff;
+  z-index: 99;
+  /* border-bottom: 1px solid #f5f5f5; 可选 */
+}
+.left-icon, .right-placeholder {
+  width: 40px; /* 保持左右平衡 */
+}
+.nav-title {
+  font-size: 17px;
+  font-weight: 600;
+  color: #000;
+}
+
+/* 主体内容内边距 */
+.content-body {
+  padding: 0 16px 40px; /* 底部留白 */
+}
+
+/* 2. 头部总资产区域 */
+.header-section {
+  margin-top: 10px;
+  margin-bottom: 24px;
+}
+.label-text {
+  font-size: 13px;
+  color: #86909C;
+  margin-bottom: 8px;
+}
+.total-asset {
+  font-size: 32px;
+  font-weight: 700;
+  color: #1D2129;
+  line-height: 1.2;
+  font-family: "DIN Alternate", "Roboto", sans-serif; /* 数字字体优化 */
+}
+.approx-value {
+  font-size: 14px;
+  color: #F53F3F; /* 红色 */
+  margin-top: 4px;
+  font-weight: 500;
+}
+
+.daily-pnl-row {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 24px;
+}
+.daily-pnl-row .value-text {
+  font-size: 18px;
+  color: #1D2129;
+  margin-top: 4px;
+}
+.bold {
+  font-weight: 600;
+}
+.right-align {
+  text-align: right;
+}
+
+/* 3. 统计列表样式 */
+.stats-list {
+  margin-bottom: 30px;
+}
+.stat-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 0;
+  font-size: 14px;
+}
+.stat-label {
+  color: #4E5969;
+}
+.stat-value {
+  color: #86909C;
+}
+
+/* 4. 历史盈亏样式 */
+.history-section {
+  margin-top: 10px;
+}
+.section-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #1D2129;
+  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+}
+
+/* 卡片样式 */
+.history-card {
+  background: #fff;
+  border: 1px solid #E5E6EB; /* 边框 */
+  border-radius: 8px;
+  padding: 0 12px;
+  margin-bottom: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
+}
+.card-header {
+  padding: 12px 0;
+  font-size: 16px;
+  font-weight: 500;
+  color: #1D2129;
+  border-bottom: 1px solid #F2F3F5;
+}
+.card-body {
+  padding: 12px 0;
+}
+.info-row {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+  font-size: 13px;
+}
+.info-row:last-child {
+  margin-bottom: 0;
+}
+.info-label {
+  color: #86909C;
+}
+.info-value {
+  color: #4E5969;
+  font-family: "Helvetica Neue", sans-serif;
+}
+</style>

src/views/bitcoin/lever/TradeMargin.vue

@@ -60,9 +60,7 @@
       <div id="k-line-chart" class="kline-container"></div>
     </div>
     <MarketPriceAndPlan></MarketPriceAndPlan>
-    <div style="margin-bottom: 20px">
-      <sellOrder  ></sellOrder>
-    </div>
+    <sellOrder  ></sellOrder>
 
   </div>
 </template>
@@ -232,6 +230,8 @@ onUnmounted(() => {
   color: #333;
   /* 防止横向滚动条 */
   overflow-x: hidden;
+  margin-bottom: 80px;
+  padding-top: 65px;
 }
 
 /* 🔥🔥 核心修改：定义一个公共的左右内边距

src/views/bitcoin/lever/TradeOptions.vue

@@ -0,0 +1,316 @@
+<template>
+  <div class="page-container">
+    <header class="header">
+      <div class="left" style="display: flex; align-items: center;">
+        <img class="fc333333" src="@/assets/icon/bitcoin/menu.svg" alt="">
+        <h1 class="title">BTC期权-251109-101000</h1>
+      </div>
+      <div class="right">
+        <img src="@/assets/icon/bitcoin/den.svg" alt="" @click="showFunctions = true">
+      </div>
+    </header>
+    <div >
+      <OptionChain></OptionChain>
+    </div>
+
+  </div>
+</template>
+
+<script setup>
+import { onMounted, onUnmounted, ref } from 'vue'
+// ✅ 使用 namespace 引入，防止报错
+import * as klinecharts from 'klinecharts'
+import OptionChain from './components/OptionChain.vue'
+
+
+// --- 状态管理 ---
+const currentTab = ref('24h')
+const tabs = ['1h', '6h', '24h', '1w', '1m']
+let chartInstance = null
+
+// --- 数据生成逻辑 ---
+const generateData = (baseVal = 3812.74) => {
+  const data = []
+  let baseTime = new Date().getTime()
+  let basePrice = baseVal
+  for (let i = 0; i < 80; i++) {
+    const change = (Math.random() - 0.5) * 30
+    const close = basePrice + change
+    const open = basePrice + (Math.random() - 0.5) * 10
+    const high = Math.max(open, close) + Math.random() * 10
+    const low = Math.min(open, close) - Math.random() * 10
+    const volume = Math.random() * 100 + 50
+
+    data.push({ timestamp: baseTime, open, high, low, close, volume })
+    baseTime += 60 * 60 * 1000 // 1h 间隔
+    basePrice = close + (Math.random() * 2) // 稍微向上的趋势
+  }
+  return data
+}
+
+// --- 切换周期逻辑 ---
+const switchPeriod = (period) => {
+  currentTab.value = period
+  if (chartInstance) {
+    // 模拟数据刷新
+    const randomStart = 3800 + Math.random() * 100
+    chartInstance.applyNewData(generateData(randomStart))
+  }
+}
+
+// --- 初始化与配置 ---
+onMounted(() => {
+  const chartDOM = document.getElementById('k-line-chart')
+  if (!chartDOM) return
+
+  // 1. 初始化图表
+  chartInstance = klinecharts.init(chartDOM)
+  if (!chartInstance) return
+
+  // 2. 样式常量
+  const targetBlue = '#4A6EF5' // 截图中的蓝色虚线颜色
+  const gridColor = '#F2F4F6'  // 极淡的网格线
+  const textColor = '#929AA5'  // 灰色文字
+
+  // 3. 核心配置 (setStyleOptions)
+  chartInstance.setStyleOptions({
+    grid: {
+      show: true,
+      horizontal: {
+        show: true,
+        size: 1,
+        color: gridColor,
+        style: 'dash',
+        dashValue: [5, 5]
+      },
+      vertical: { show: false }
+    },
+    candle: {
+      type: 'candle_solid',
+      bar: {
+        upColor: '#2EBD85',
+        downColor: '#F6465D',
+        noChangeColor: '#2EBD85'
+      },
+      // ✅ 重点：蓝色价格指示线配置
+      priceMark: {
+        show: true,
+        high: { show: false },
+        low: { show: false },
+        last: {
+          show: true,
+          // 强制无论涨跌都显示蓝色
+          upColor: targetBlue,
+          downColor: targetBlue,
+          line: { show: true, style: 'dash', dashValue: [4, 3] },
+          text: {
+            show: true,
+            color: '#FFFFFF',
+            size: 11,
+            paddingLeft: 4,
+            paddingRight: 4,
+            borderRadius: 2
+          }
+        }
+      },
+      tooltip: {
+        // 只有按压时才显示十字光标
+        showRule: 'follow_cross',
+        showType: 'rect',
+        dataSource: 'none', // 隐藏浮层数据，保持清爽
+        crosshair: {
+          show: true,
+          horizontal: { line: { style: 'dash', color: textColor } },
+          vertical: { line: { style: 'dash', color: textColor } }
+        }
+      }
+    },
+    // ✅ 重点：技术指标(VOL)颜色
+    technicalIndicator: {
+      bar: {
+        upColor: '#2EBD85',
+        downColor: '#F6465D',
+        noChangeColor: '#2EBD85'
+      }
+    },
+    // ✅ 重点：隐藏坐标轴线，只保留文字
+    xAxis: {
+      axisLine: { show: false },
+      tickLine: { show: false },
+      tickText: { color: textColor, size: 10, paddingTop: 8 }
+    },
+    yAxis: {
+      type: 'normal',
+      position: 'right',
+      inside: true,
+      axisLine: { show: false },
+      tickLine: { show: false },
+      tickText: { color: textColor, size: 10, paddingLeft: 8 }
+    },
+    separator: { size: 0 } // 去掉指标和K线之间的分割线
+  })
+
+  // 4. 创建副图指标 (VOL)
+  chartInstance.createTechnicalIndicator('VOL', false, { id: 'pane_1', heightRatio: 0.2 })
+
+  // 5. 加载数据并设置缩放
+  chartInstance.applyNewData(generateData())
+  if (chartInstance.setDataSpace) {
+  chartInstance.setDataSpace(7)
+}
+  // chartInstance.setBarSpace(7) // 设置蜡烛宽度
+})
+
+onUnmounted(() => {
+  if (chartInstance) {
+    klinecharts.dispose('k-line-chart')
+  }
+})
+</script>
+
+<style scoped>
+/* --- 布局容器 --- */
+.page-container {
+  width: 100%;
+  max-width: 375px;
+  margin: 0 auto;
+  background-color: #fff;
+  /* 使用系统字体，还原原生质感 */
+  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Roboto, Arial, sans-serif;
+  color: #333;
+  /* 防止横向滚动条 */
+  padding-top: 65px;
+  overflow-x: hidden;
+}
+
+/* 🔥🔥 核心修改：定义一个公共的左右内边距
+   给 header, market-info, time-tabs, chart-wrapper 都加上
+*/
+.header,
+.market-info,
+.time-tabs,
+.chart-wrapper {
+  padding-left: 15px;
+  padding-right: 15px;
+  /* 关键：确保 padding 不会撑大 width: 100% */
+  box-sizing: border-box;
+}
+
+/* --- 1. 头部 --- */
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+ /* padding-top: 12px;*/
+  //padding-bottom: 12px;
+}
+.title {
+  font-size: 18px;
+  font-weight: 600;
+  display: inline-block;
+  margin-left: 10px;
+}
+.icon-menu, .icon-more {
+  font-size: 18px;
+  cursor: pointer;
+}
+
+/* --- 2. 行情信息 --- */
+.market-info {
+  display: flex;
+  justify-content: space-between;
+  padding-bottom: 10px;
+}
+
+.price-block .current-price {
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 1.2;
+  color: #111;
+  /* 稍微调整一下字间距，防止数字太紧 */
+  letter-spacing: -0.5px;
+}
+.sub-info {
+  font-size: 12px;
+  margin-top: 4px;
+  font-weight: 500;
+}
+.sub-info .fiat {
+  color: #999;
+  margin-right: 8px;
+}
+.sub-info .percent.up {
+  color: #2EBD85;
+}
+
+/* 统计网格 */
+.stat-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr; /* 保持两列 */
+  column-gap: 12px;
+  row-gap: 6px;
+  text-align: right;
+
+}
+.stat-item {
+  display: flex;
+  flex-direction: column;
+
+}
+.stat-item .label {
+  font-size: 11px;
+  color: #999;
+  /* 稍微缩小字体 */
+  transform: scale(0.9);
+  transform-origin: right bottom;
+  white-space: nowrap; /* 防止文字换行 */
+}
+.stat-item .value {
+  font-size: 11px;
+  color: #333;
+  font-family: "DIN", -apple-system, sans-serif; /* 如果有数字字体更好 */
+}
+
+/* --- 3. Tabs --- */
+.time-tabs {
+  display: flex;
+  align-items: center;
+  /*gap: 5px;*/
+  justify-content: space-between;
+  /*//padding-top: 8px;*/
+  /*padding-bottom: 8px;*/
+  /* 你的截图中似乎没有底边框，这里保持干净 */
+}
+.tab-item {
+  font-size: 14px;
+  color: #929AA5;
+  padding: 4px 10px; /* 稍微减小内边距，适应 15px 的两侧挤压 */
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: 500;
+  transition: all 0.2s;
+}
+.tab-item.active {
+  background-color: #F6465D;
+  color: #fff;
+}
+.tab-item.icon {
+  color: #929AA5;
+  font-size: 12px;
+}
+.triangle {
+  font-size: 8px;
+}
+
+/* --- 4. 图表容器 --- */
+.chart-wrapper {
+  width: 100%;
+  height: 275px;
+  /*margin-top: 5px;*/
+  /* 🔥 这里加了 padding 后，K线图就会自动往里缩，左右留出白边 */
+}
+.kline-container {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/bitcoin/lever/TradeSeconds.vue

@@ -60,10 +60,8 @@
       <div id="k-line-chart" class="kline-container"></div>
     </div>
     <ChooseThisCycle></ChooseThisCycle>
+    <sellOrder  ></sellOrder>
 <!--    <MarketPriceAndPlan></MarketPriceAndPlan>-->
-    <div style="margin-bottom: 20px">
-      <sellOrder  ></sellOrder>
-    </div>
   </div>
 </template>
 
@@ -232,6 +230,7 @@ onUnmounted(() => {
   font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Roboto, Arial, sans-serif;
   color: #333;
   /* 防止横向滚动条 */
+  padding-top: 65px;
   overflow-x: hidden;
 }
 
@@ -297,10 +296,6 @@ onUnmounted(() => {
 
 /* 统计网格 */
 .stat-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr; /* 保持两列 */
-  column-gap: 12px;
-  row-gap: 6px;
   text-align: right;
 
 }

src/views/bitcoin/lever/components/AccountPopup.vue

@@ -0,0 +1,222 @@
+<template>
+  <vanPopup vanPopup
+    v-model:show="show"
+    position="bottom"
+    round
+    :style="{ maxHeight: '80%' }"
+    teleport="body"
+    class="account-popup"
+  >
+    <div class="popup-content">
+      <div class="drag-handle"></div>
+
+      <div class="main-title">我的</div>
+
+      <div class="section">
+        <div class="row main-row">
+          <span class="label-main">账户总权益</span>
+          <span class="value-main">85020 <span class="unit">USDT</span></span>
+        </div>
+        <div class="row sub-row">
+          <span class="label-sub">Market Value</span>
+          <span class="value-sub">85020 <span class="unit">USDT</span></span>
+        </div>
+        <div class="row sub-row">
+          <span class="label-sub">保证金余额</span>
+          <span class="value-sub">85020 <span class="unit">USDT</span></span>
+        </div>
+      </div>
+
+      <div class="divider"></div>
+
+      <div class="section">
+        <div class="row main-row">
+          <span class="label-main">可用保证金</span>
+          <span class="value-main">85020 <span class="unit">USDT</span></span>
+        </div>
+        <div class="row sub-row">
+          <span class="label-sub">下单冻结</span>
+          <span class="value-sub">0.20 <span class="unit">USDT</span></span>
+        </div>
+        <div class="row sub-row">
+          <span class="label-sub">维持保证金</span>
+          <span class="value-sub">85020 <span class="unit">USDT</span></span>
+        </div>
+      </div>
+
+      <div class="divider"></div>
+
+      <div class="section single-row-section">
+        <div class="row main-row">
+          <span class="label-main">盈亏分析</span>
+          <span class="link-action" @click="handleCheckAnalysis">
+            查看 <vanIcon :style="{ color: '#191616' }" name="arrow" />
+          </span>
+        </div>
+      </div>
+
+      <div class="divider"></div>
+
+      <div class="section">
+        <div class="section-title">账户风险参数(希腊值)</div>
+
+        <div class="row sub-row">
+          <span class="label-sub">Delta</span>
+          <span class="value-sub">0.20 <span class="unit">USDT</span></span>
+        </div>
+        <div class="row sub-row">
+          <span class="label-sub">Gamma</span>
+          <span class="value-sub">85020 <span class="unit">USDT</span></span>
+        </div>
+        <div class="row sub-row">
+          <span class="label-sub">Theta</span>
+          <span class="value-sub">0.20 <span class="unit">USDT</span></span>
+        </div>
+        <div class="row sub-row">
+          <span class="label-sub">Vega</span>
+          <span class="value-sub">85020 <span class="unit">USDT</span></span>
+        </div>
+      </div>
+
+      <div class="safe-area-bottom"></div>
+    </div>
+  </vanPopup>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+// 如果没有全局引入 vant，需要在这里 import { Popup, Icon } from 'vant';
+import { Popup as vanPopup, Icon as vanIcon } from 'vant';
+import { useRouter } from 'vue-router'; // 引入路由钩子
+
+
+const router = useRouter();
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['update:visible']);
+
+// 双向绑定处理
+const show = computed({
+  get: () => props.visible,
+  set: (val) => emit('update:visible', val)
+});
+
+const handleCheckAnalysis = () => {
+  console.log('点击了查看盈亏分析');
+  router.push('/PnLAnalysis')
+};
+</script>
+
+<style scoped>
+.popup-content {
+  padding: 0 16px 20px;
+  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
+  color: #333;
+}
+
+/* 顶部拖拽条 */
+.drag-handle {
+  width: 36px;
+  height: 4px;
+  background: #E5E6EB;
+  border-radius: 2px;
+  margin: 10px auto 20px; /* 居中 */
+}
+
+/* 大标题 "我的" */
+.main-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: #1D2129;
+  margin-bottom: 20px;
+}
+
+/* 通用行布局 */
+.row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+.row:last-child {
+  margin-bottom: 0;
+}
+
+/* 区块间距 */
+.section {
+  padding: 16px 0;
+}
+.single-row-section {
+  padding: 16px 0;
+}
+
+/* 字体样式分级 */
+/* 1. 主标签 (如：账户总权益) */
+.label-main {
+  font-size: 15px;
+  font-weight: 500;
+  color: #1D2129;
+}
+
+/* 2. 主数值 (黑色加粗) */
+.value-main {
+  font-size: 15px;
+  font-weight: 600;
+  color: #1D2129;
+}
+
+/* 3. 副标签 (灰色) */
+.label-sub {
+  font-size: 14px;
+  color: #86909C;
+}
+
+/* 4. 副数值 (灰色) */
+.value-sub {
+  font-size: 14px;
+  color: #86909C; /* 或者用 #4E5969 */
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; /* 数字字体 */
+}
+
+/* 5. 单位小字 */
+.unit {
+  font-size: 12px;
+  font-weight: normal;
+  margin-left: 2px;
+}
+
+/* 6. 查看链接 (红色) */
+.link-action {
+  display: flex;
+  align-items: center;
+  color: #f33333; /* 红色 */
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+/* 7. 风险参数标题 */
+.section-title {
+  font-size: 14px;
+  color: #1D2129;
+  font-weight: 500;
+  margin-bottom: 12px;
+}
+
+/* 分割线 */
+.divider {
+  height: 1px;
+  background-color: #F2F3F5;
+  width: 100%;
+}
+
+.safe-area-bottom {
+  height: 20px; /* 适配底部安全区 */
+}
+</style>

src/views/bitcoin/lever/components/ColumnSettings.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="settings-container">
+    <div class="header">
+      <div class="drag-handle"></div>
+      <div class="title">栏位设置</div>
+    </div>
+
+    <div class="scroll-area">
+      <div
+        v-for="(item, index) in columns"
+        :key="item.key"
+        class="list-item"
+        @click="toggleItem(index)"
+      >
+        <span class="label">{{ item.label }}</span>
+
+        <div class="checkbox-icon" :class="{ active: item.checked }">
+          <svg v-if="item.checked" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="20 6 9 17 4 12"></polyline>
+          </svg>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+// 定义父组件可能需要的事件（比如关闭弹窗或保存设置）
+const emit = defineEmits(['update:columns']);
+
+// 模拟数据 (完全还原图中文字)
+const columns = ref([
+  { label: '买价', key: 'bid', checked: true },
+  { label: '标记价格', key: 'mark', checked: true },
+  { label: '卖价', key: 'ask', checked: true }, // 图中写的是'买价'可能是笔误，这里修正为卖价，或者你改成图中的文字
+  { label: '仓位', key: 'position', checked: true },
+  { label: '持仓量', key: 'open_interest', checked: true },
+  { label: '买价数量', key: 'bid_size', checked: false },
+  { label: '卖价数量', key: 'ask_size', checked: false },
+  { label: '24h成交量', key: 'volume_24h', checked: false },
+  { label: 'Gamma', key: 'gamma', checked: false },
+  { label: 'Delta', key: 'delta', checked: false },
+  { label: 'Vega', key: 'vega', checked: false },
+  { label: 'Theta', key: 'theta', checked: false },
+  { label: '杠杆倍数', key: 'leverage', checked: false },
+  { label: '24h涨跌', key: 'change_24h', checked: false },
+  { label: '最新价格', key: 'last_price', checked: false },
+  { label: '24h最高/最低价', key: 'high_low_24h', checked: false },
+]);
+
+// 切换选中状态
+const toggleItem = (index) => {
+  columns.value[index].checked = !columns.value[index].checked;
+  // 触发更新事件给父组件（可选）
+  emit('update:columns', columns.value);
+};
+</script>
+
+<style scoped>
+/* 容器：白色背景，圆角顶部 (适配底部弹窗) */
+.settings-container {
+  width: 100%;
+  background: #fff;
+  border-top-left-radius: 16px;
+  border-top-right-radius: 16px;
+  display: flex;
+  flex-direction: column;
+  /* 限制最大高度，大概占屏幕 60%-70% */
+  max-height: 70vh;
+  overflow: hidden;
+  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
+}
+
+/* --- 头部区域 --- */
+.header {
+  padding: 10px 16px 16px;
+  background: #fff;
+  position: relative;
+  z-index: 10;
+  flex-shrink: 0; /* 防止被压缩 */
+}
+
+/* 顶部灰色小把手 */
+.drag-handle {
+  width: 36px;
+  height: 4px;
+  background: #e5e6eb;
+  border-radius: 2px;
+  margin: 0 auto 12px; /* 居中 */
+}
+
+.title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #1d2129;
+  text-align: left;
+}
+
+/* --- 列表区域 --- */
+.scroll-area {
+  flex: 1;
+  overflow-y: auto; /* 允许纵向滚动 */
+  padding-bottom: 30px; /* 底部留白 */
+  /* iOS 顺滑滚动 */
+  -webkit-overflow-scrolling: touch;
+}
+
+.list-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 14px 16px;
+  /* 点击反馈 */
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.list-item:active {
+  background-color: #f7f8fa;
+}
+
+.label {
+  font-size: 14px;
+  color: #4e5969; /* 未选中通常是深灰色 */
+}
+
+/* 如果需要在选中时文字变黑/变红，可以加逻辑，这里还原图示保持灰色即可 */
+
+/* --- 复选框样式 (纯CSS画圆) --- */
+.checkbox-icon {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 1px solid #c9cdd4; /* 默认灰色边框 */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #fff;
+  transition: all 0.2s;
+}
+
+/* 选中状态 */
+.checkbox-icon.active {
+  background-color: #F53F3F; /* 你的主题红 */
+  border-color: #F53F3F;
+  color: #fff;
+}
+
+/* 列表滚动条隐藏 (可选) */
+.scroll-area::-webkit-scrollbar {
+  display: none;
+}
+</style>

src/views/bitcoin/lever/components/MarketPriceAndPlan.vue

@@ -421,14 +421,14 @@ const sliderStyle = computed(() => {
 .start-marker {
   position: absolute;
   left: 12px;
-  top: 50%;
+  top: 29%;
   transform: translateY(-50%);
   width: 24px;
   height: 24px;
   background: #fff;
   border: 2px solid #F6465D;
   border-radius: 50%;
-  z-index: 1;
+  z-index: 10;
   box-sizing: border-box;
 }
 

src/views/bitcoin/lever/components/OptionChain.vue

@@ -0,0 +1,340 @@
+<template>
+  <div class="option-chain-container">
+    <div class="header-tabs">
+      <div
+        v-for="tab in tabs"
+        :key="tab.key"
+        class="tab-item"
+        :class="{ active: currentTab === tab.key }"
+        @click="switchTab(tab.key)"
+      >
+        {{ tab.name }}
+        <span v-if="currentTab === tab.key" class="active-line"></span>
+      </div>
+
+      <div class="header-icons" @click="showSettings = true">
+        <span><img src="@/assets/icon/bitcoin/lanweishezhi.svg" alt="设置"></span>
+      </div>
+      <div class="header-icons">
+        <span><img src="@/assets/icon/bitcoin/shizhong.svg" alt="时钟"></span>
+      </div>
+    </div>
+
+    <div class="date-scroll-wrapper">
+      <div
+        v-for="(date, index) in dates"
+        :key="index"
+        class="date-item"
+        :class="{ active: selectedDateIndex === index }"
+        @click="selectedDateIndex = index"
+      >
+        {{ date }}
+      </div>
+    </div>
+
+    <div class="market-info">
+      <div class="index-price">
+        <span>指数价格: 231581.5</span>
+      </div>
+      <div class="expiry-time">
+        <span>到期时间: 04:11:50</span>
+      </div>
+    </div>
+
+    <div class="fs12" v-if="currentTab === 't-quote'" style="display: flex; justify-content: space-between; padding: 0 15px;">
+      <span class="text-green" style="font-weight: 600;">看涨期权</span>
+      <span class="text-red" style="font-weight: 600;">看跌期权</span>
+    </div>
+
+    <div
+      v-if="currentTab === 't-quote'"
+      class="t-quote-scroll-wrapper"
+      ref="tQuoteRef"
+    >
+      <ul class="t-quote-list">
+        <li class="t-row t-header">
+           <div class="side-block left">
+             <span>卖价</span><span>标记价格</span><span>买价</span>
+           </div>
+           <div class="center-block sticky-center header-bg">行权价格</div>
+           <div class="side-block right">
+             <span>买价</span><span>标记价格</span><span>卖价</span>
+           </div>
+        </li>
+
+        <li
+          v-for="(item, index) in mockData"
+          :key="index"
+          class="t-row"
+        >
+          <div class="side-block left" :class="{ 'bg-tint-green': index < 5 }">
+            <div class="cell">
+              <span class="price text-red">{{ item.call_ask.val }}</span>
+              <span class="sub">{{ item.call_ask.change }}</span>
+            </div>
+            <div class="cell">
+              <span class="price">{{ item.call_mark.val }}</span>
+              <span class="sub">{{ item.call_mark.change }}</span>
+            </div>
+            <div class="cell">
+              <span class="price text-green">{{ item.call_bid.val }}</span>
+              <span class="sub">{{ item.call_bid.change }}</span>
+            </div>
+          </div>
+
+          <div class="center-block sticky-center">
+            {{ item.strike }}
+          </div>
+
+          <div class="side-block right" :class="{ 'bg-tint-red': index >= 5 }">
+            <div class="cell">
+              <span class="price text-green">{{ item.put_bid.val }}</span>
+              <span class="sub">{{ item.put_bid.change }}</span>
+            </div>
+            <div class="cell">
+              <span class="price">{{ item.put_mark.val }}</span>
+              <span class="sub">{{ item.put_mark.change }}</span>
+            </div>
+            <div class="cell">
+              <span class="price text-red">{{ item.put_ask.val }}</span>
+              <span class="sub">{{ item.put_ask.change }}</span>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <div v-else class="table-wrapper">
+      <table>
+        <thead>
+          <tr>
+            <th
+              v-for="(col, index) in standardColumns"
+              :key="col.key"
+              :class="[
+                col.fixed ? 'sticky-col' : '',
+                col.align || 'center'
+              ]"
+            >
+              {{ col.label }}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(item, index) in mockData" :key="index" @click="router.push({ name: 'OptionTrading' })">
+             <td
+              v-for="col in standardColumns"
+              :key="col.key"
+              :class="[
+                col.fixed ? 'sticky-col' : '',
+                col.align || 'center',
+              ]"
+             >
+               <div v-if="col.key === 'strike'" class="strike-cell">
+                 {{ item[col.key] }}
+                 <span class="arrow-icon">›</span>
+               </div>
+               <div v-else-if="col.isDual" >
+                 <div :class="item[col.key].trend === 'up' ? 'text-green' : 'text-red'">
+                   {{ item[col.key].val }}
+                 </div>
+                 <div class="sub-text">{{ item[col.key].change }}</div>
+               </div>
+               <div v-else>
+                 {{ item[col.key] }}
+               </div>
+             </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <van-popup
+      v-model:show="showSettings"
+      position="bottom"
+      round
+      :style="{ height: '70%' }"
+    >
+      <ColumnSettings @update:columns="handleColumnChange" />
+    </van-popup>
+  </div>
+</template>
+
+<script setup>
+import { ref, nextTick } from 'vue';
+import { Popup as VanPopup } from 'vant';
+import ColumnSettings from './ColumnSettings.vue'; // 确保路径正确
+import { useRouter } from 'vue-router'
+const router = useRouter()
+
+// --- 1. 静态配置池：所有可用列的详细样式定义 ---
+// key 必须与 ColumnSettings.vue 里传出来的 key 一致
+const COLUMN_DEFINITIONS = {
+  // 固定列
+  strike: { label: '行权价格', key: 'strike', fixed: true, align: 'left', width: '90px' },
+
+  // 数据列
+  bid: { label: '买价', key: 'bid', isDual: true, align: 'right' },
+  mark: { label: '标记价格', key: 'mark', isDual: true, align: 'right' },
+  ask: { label: '卖价', key: 'ask', isDual: true, align: 'right' },
+  position: { label: '仓位', key: 'position', align: 'center' },
+  holding: { label: '持仓量', key: 'holding', align: 'right' }, // 注意：如果弹窗传的是 open_interest，下面逻辑里要做映射
+  delta: { label: 'Delta', key: 'delta', align: 'right' },
+  gamma: { label: 'Gamma', key: 'gamma', align: 'right' },
+  // ... 其他可能的列定义 ...
+  vega: { label: 'Vega', key: 'vega', align: 'right' },
+  theta: { label: 'Theta', key: 'theta', align: 'right' },
+};
+
+// --- 2. 状态管理 ---
+const showSettings = ref(false);
+const currentTab = ref('all');
+const selectedDateIndex = ref(0);
+const tQuoteRef = ref(null);
+
+// standardColumns 现在是响应式的，默认初始化显示一部分列
+const standardColumns = ref([
+  COLUMN_DEFINITIONS.strike,
+  COLUMN_DEFINITIONS.bid,
+  COLUMN_DEFINITIONS.mark,
+  COLUMN_DEFINITIONS.ask,
+  COLUMN_DEFINITIONS.position,
+  COLUMN_DEFINITIONS.holding,
+]);
+
+// --- 3. 核心逻辑：处理列配置变更 ---
+const handleColumnChange = (newSettings) => {
+  // 1. 始终保持“行权价”在第一位
+  const nextCols = [COLUMN_DEFINITIONS.strike];
+
+  // 2. 遍历弹窗传回来的配置数组
+  newSettings.forEach(setting => {
+    if (setting.checked) {
+      // 处理 Key 映射（例如弹窗里叫 open_interest，数据里叫 holding）
+      // 这里假设简单处理：如果弹窗的 key 能在 DEFINITIONS 里找到就直接用
+      // 实际项目中可以写 switch case 处理特殊映射
+
+      let colKey = setting.key;
+      if (colKey === 'open_interest') colKey = 'holding'; // 示例映射
+
+      const colDef = COLUMN_DEFINITIONS[colKey];
+      if (colDef) {
+        nextCols.push(colDef);
+      }
+    }
+  });
+
+  // 3. 更新表格列，Vue 会自动重新渲染
+  standardColumns.value = nextCols;
+};
+
+// --- 4. 其他数据与逻辑 ---
+const tabs = [
+  { name: '全部', key: 'all' },
+  { name: '看涨', key: 'call' },
+  { name: '看跌', key: 'put' },
+  { name: 'T字报价', key: 't-quote' }
+];
+const dates = ['25-11-09', '25-11-10', '25-11-11', '25-11-12', '25-11-13'];
+
+// 模拟数据生成
+const mockData = Array.from({ length: 20 }).map((_, i) => {
+  const strike = 100000 + (i * 50);
+  const createPrice = (val, change, trend) => ({ val, change, trend });
+
+  return {
+    strike: strike,
+    type: i % 2 === 0 ? '看跌' : '看涨',
+    // 普通表格数据
+    bid: createPrice('15.0', '12.2%', 'up'),
+    ask: createPrice('12.5', '12.2%', 'down'),
+    mark: createPrice('1688.3', '12.2%', 'up'),
+    position: '--',
+    holding: '2235.50',
+    delta: '0.50',
+    gamma: '0.02',
+    vega: '0.1',
+    theta: '-0.5',
+    // T字报价数据
+    call_ask: createPrice('12.5', '2.2%', 'down'),
+    call_mark: createPrice('1688.3', '12.2%', 'up'),
+    call_bid: createPrice('15.0', '12.2%', 'up'),
+    put_bid: createPrice('14.0', '12.2%', 'up'),
+    put_mark: createPrice('1688.3', '12.2%', 'up'),
+    put_ask: createPrice('13.5', '12.2%', 'down'),
+  };
+});
+
+const switchTab = (key) => {
+  currentTab.value = key;
+  if (key === 't-quote') {
+    nextTick(() => {
+      if (tQuoteRef.value) {
+        const el = tQuoteRef.value;
+        el.scrollLeft = (el.scrollWidth - el.clientWidth) / 2;
+      }
+    });
+  }
+};
+</script>
+
+<style scoped>
+/* 全局基础 */
+.option-chain-container { width: 100%; background: #fff; font-size: 12px; color: #1d2129;
+  font-family: -apple-system, sans-serif; }
+.text-green { color: #00b42a; } .text-red { color: #f53f3f; }
+.sub-text { font-size: 10px;
+  color: #86909c; margin-top: 2px; }
+
+/* 头部 */
+.header-tabs { display: flex; align-items: center; justify-content: space-between;
+  padding: 0 15px; height: 44px; }
+.tab-item { margin-right: 0px; font-weight: 600; color: #86909c; padding: 10px 0;
+  position: relative; }
+.tab-item.active { color: #1d2129; font-size: 16px; }
+.active-line { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
+  width: 20px; height: 3px; background: #1d2129; border-radius: 2px; }
+.header-icons { margin-left: 0; display: flex; gap: 12px; font-size: 18px; color: #86909c; }
+.date-scroll-wrapper { display: flex; overflow-x: auto; padding: 10px 12px; gap: 20px;
+  scrollbar-width: none; }
+.market-info { display: flex; justify-content: space-between; padding: 0 15px ;
+  color: #86909c; font-size: 11px; }
+
+/* === 场景 A: T字报价 样式 === */
+.t-quote-scroll-wrapper { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
+  position: relative; }
+.t-quote-list { list-style: none; padding: 0; margin: 0; width: max-content; min-width: 100%; }
+
+.t-row { display: flex; height: 52px; border-bottom: 1px solid #f7f8fa; }
+.t-header { height: 30px; color: #86909c; font-size: 11px; background: #fff; }
+.t-header .side-block { justify-content: space-around; background: #fff; }
+.header-bg { background: #fff !important; }
+
+.side-block { width: 210px; display: flex; align-items: center; }
+.cell { flex: 1; display: flex; flex-direction: column; align-items: center;
+  justify-content: center; white-space: nowrap; }
+.price { font-size: 13px; font-weight: 500; }
+.sub { font-size: 10px; color: #86909c; margin-top: 1px; }
+
+.center-block { width: 90px; flex-shrink: 0; display: flex; align-items: center;
+  justify-content: center; background-color: #f7f8fa; font-weight: 600; color: #4e5969; font-size: 14px; }
+.sticky-center { position: sticky; left: calc(50vw - 45px); z-index: 10; border-left: 1px solid #fff;
+  border-right: 1px solid #fff; }
+.t-header .sticky-center { background: #fff; z-index: 20; }
+.t-row:not(.t-header) .sticky-center { background-color: #f7f8fa; }
+
+.bg-tint-green { background-color: rgba(0, 180, 42, 0.03); }
+.bg-tint-red { background-color: rgba(245, 63, 63, 0.03); }
+
+/* === 场景 B: 普通表格 === */
+.table-wrapper { width: 100%; overflow-x: auto; }
+table { border-collapse: collapse; width: 100%; min-width: 100%; }
+th, td { padding: 8px 10px; white-space: nowrap; background: #fff; font-size: 11px; }
+td { padding: 10px 10px; border-bottom: 1px solid #f2f3f5; height: 50px; box-sizing: border-box; }
+.sticky-col { position: sticky; left: 0; z-index: 10; background-color: #f7f8fa;
+  border-right: 1px solid #e5e6eb; }
+th.sticky-col { background-color: #fff; z-index: 11; }
+.strike-cell { display: flex; align-items: center; justify-content: space-between;
+  font-weight: 500; color: #4e5969; }
+.arrow-icon { color: #c9cdd4; font-size: 14px; }
+</style>

src/views/bitcoin/lever/components/impliedVolatility.vue

@@ -0,0 +1,165 @@
+<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-content">
+          <div class="section">
+            <h3 class="section-title">隐含波动率</h3>
+            <p class="section-text">
+这是根据您的订单价格估算的当前隐含波动率。隐含波动率将随着指数价格的变化或时间越来越近到期而不断变化。            </p>
+          </div>
+
+
+        </div>
+
+        <div class="panel-footer">
+          <button class="confirm-btn" @click="closeModal">
+            我知道了
+          </button>
+        </div>
+
+        <div class="safe-area-bottom"></div>
+      </div>
+    </transition>
+  </Teleport>
+</template>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+
+// 接收 visible 属性
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false
+  }
+});
+
+// 定义事件
+const emit = defineEmits(['update:visible']);
+
+// 关闭弹窗的方法
+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.6); /* 稍微深一点的遮罩，突出文字 */
+  z-index: 2000;
+}
+
+/* 弹窗主体 */
+.modal-panel {
+  position: fixed;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%); /* 水平居中 */
+  width: 100%;
+  max-width: 600px; /* PC端限制最大宽度 */
+  background: white;
+  border-radius: 16px 16px 0 0;
+  z-index: 2001;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+
+/* 顶部 Handle 区域 */
+.panel-handle-wrap {
+  padding: 12px 0 20px 0;
+  display: flex;
+  justify-content: center;
+}
+.panel-handle {
+  width: 36px;
+  height: 4px;
+  background: #E0E0E0;
+  border-radius: 2px;
+}
+
+/* 内容区域 */
+.panel-content {
+  padding: 0 20px;
+  /* 防止内容过多导致无法显示，增加滚动 */
+  max-height: 60vh;
+  overflow-y: auto;
+}
+
+.section {
+  margin-bottom: 24px;
+}
+
+.section-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #1A1A1A;
+  margin: 0 0 8px 0;
+  line-height: 1.4;
+}
+
+.section-text {
+  font-size: 14px;
+  color: #444; /* 设计稿文字看起来比纯黑淡一点 */
+  line-height: 1.6; /* 增加行高，提升阅读体验 */
+  margin: 0;
+  text-align: justify; /* 两端对齐，让大段文字更整齐 */
+}
+
+/* 底部按钮区域 */
+.panel-footer {
+  padding: 20px 20px 10px 20px;
+}
+
+.confirm-btn {
+  width: 100%;
+  height: 48px;
+  background: #DC3E48; /* 提取的红色 hex */
+  color: white;
+  border: none;
+  border-radius: 24px; /* 圆角按钮 */
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  /* 点击时的按压效果 */
+  transition: opacity 0.2s;
+}
+.confirm-btn:active {
+  opacity: 0.9;
+}
+
+/* 底部安全区 */
+.safe-area-bottom {
+  height: env(safe-area-inset-bottom, 20px);
+}
+
+/* 动画定义 */
+.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 cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+.slide-up-enter-from, .slide-up-leave-to {
+  transform: translate(-50%, 100%);
+}
+</style>

src/views/bitcoin/lever/components/sellOrder1.vue

@@ -0,0 +1,369 @@
+<script setup>
+    import {defineAsyncComponent, ref} from 'vue';
+    //状态组件
+    // const assetlessState = defineAsyncComponent(() => import("./assetlessState.vue"));
+    import AccountPopup from './AccountPopup.vue'; // 引入组件
+
+    const showAccountPopup = ref(false);
+    //持有仓位组件
+    const position = defineAsyncComponent(() => import("@/views/bitcoin/components/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 = ['持有仓位(0)', '当前委托(2)'];
+
+    // 按钮操作
+    const handleCancel = (id) => {
+      console.log('撤单 ID:', id);
+      // 这里写撤单逻辑
+    };
+
+    //平仓平空
+    const showModal3 = ref(false);
+
+</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="fc999999 fs14" @click="showAccountPopup = true">我的</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 >
+<!--      <assetlessState v-if="isassetlessState"></assetlessState>-->
+    </div>
+    <div v-show="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>
+
+<AccountPopup v-model:visible="showAccountPopup" />
+  </div>
+
+</template>
+
+<style lang="less" scoped>
+/* 基础设置 */
+.page-container {
+  width: 100%;
+  height: auto;
+  //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 2fr 1fr;
+  row-gap: 12px; /* 行间距 */
+}
+
+.grid-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+/* 对齐方式 */
+.align-left {
+  align-items: flex-start;
+}
+
+.align-center {
+  align-items: center;
+  .value:nth-child(2){
+    margin-top: 2px;
+  }
+}
+
+.align-right {
+  align-items: flex-end;
+}
+
+.label {
+  font-size: 12px;
+  color: #999; /* 灰色标签 */
+}
+
+.value {
+  font-size: 13px;
+  color: #333;
+  font-family: Helvetica, Arial, sans-serif; /* 数字字体优化 */
+  font-weight: 500;
+}
+
+.bold-text {
+  font-weight: 500;
+}
+</style>

src/views/bitcoin/lever/yii.vue

@@ -1,425 +0,0 @@
-<template>
-  <div class="trade-container">
-    <div class="trade-tabs">
-      <span class="tab active">市价</span>
-      <span class="tab">计划</span>
-    </div>
-
-    <div class="section-label">杠杆倍数</div>
-    <div class="grid-row">
-      <div
-        v-for="lev in leverages"
-        :key="lev"
-        class="tag-btn"
-        :class="{ active: currentLeverage === lev }"
-        @click="selectLeverage(lev)"
-      >
-        {{ lev }}X
-      </div>
-      <div class="tag-btn" @click="showModal = true">更多</div>
-    </div>
-
-    <div class="input-group" :class="{ focused: isInputFocused }">
-      <span class="prefix">本金</span>
-      <input
-        type="number"
-        placeholder="请输入价格"
-        v-model="amount"
-        @focus="isInputFocused = true"
-        @blur="isInputFocused = false"
-      />
-      <span class="suffix">USDT</span>
-    </div>
-
-    <div class="grid-row mt-10">
-      <div
-        v-for="amt in quickAmounts"
-        :key="amt"
-        class="tag-btn light"
-        @click="amount = amt"
-      >
-        {{ amt }}
-      </div>
-      <div class="tag-btn light">更多</div>
-    </div>
-
-    <div class="balance-row">
-      可用 215.0508 USDT <span class="wallet-icon">👛</span>
-    </div>
-
-    <div class="action-buttons">
-      <button class="btn-long">
-        <div class="main-text">买入(做多)</div>
-        <div class="sub-text">预计开仓 0.008 BTC</div>
-      </button>
-      <button class="btn-short">
-        <div class="main-text">卖出(做空)</div>
-        <div class="sub-text">预计开仓 0.008 BTC</div>
-      </button>
-    </div>
-
-    <div v-if="showModal" class="modal-mask" @click="showModal = false">
-      <div class="modal-content" @click.stop>
-        <div class="drag-handle"></div>
-
-        <h3 class="modal-title">调整保证金</h3>
-
-        <div class="stepper-box">
-          <button class="step-btn" @click="adjustLeverage(-1)">—</button>
-          <div class="step-value">{{ tempLeverage }}x</div>
-          <button class="step-btn" @click="adjustLeverage(1)">+</button>
-        </div>
-
-        <div class="slider-container">
-          <input
-            type="range"
-            min="1"
-            max="1000"
-            v-model="tempLeverage"
-            class="custom-range"
-            :style="sliderStyle"
-          />
-          <div class="slider-marks">
-            <span>1</span>
-            <span>50</span>
-            <span>100</span>
-            <span>500</span>
-            <span>1000</span>
-          </div>
-        </div>
-
-        <button class="confirm-btn" @click="confirmLeverage">确认</button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed } from 'vue'
-
-// --- 状态管理 ---
-const currentLeverage = ref(50) // 当前选中的杠杆
-const tempLeverage = ref(20)    // 弹窗中临时的杠杆
-const amount = ref('')          // 输入金额
-const isInputFocused = ref(false)
-const showModal = ref(false)
-
-const leverages = [20, 50, 100, 1000]
-const quickAmounts = [50, 100, 500, 1000]
-
-// --- 方法 ---
-const selectLeverage = (val) => {
-  currentLeverage.value = val
-  tempLeverage.value = val // 同步到弹窗
-}
-
-const adjustLeverage = (delta) => {
-  let val = parseInt(tempLeverage.value) + delta
-  if (val < 1) val = 1
-  if (val > 1000) val = 1000
-  tempLeverage.value = val
-}
-
-const confirmLeverage = () => {
-  currentLeverage.value = tempLeverage.value
-  showModal.value = false
-}
-
-// --- 计算属性：动态生成 Slider 的红色进度条背景 ---
-const sliderStyle = computed(() => {
-  const min = 1
-  const max = 1000
-  const val = tempLeverage.value
-  // 计算百分比: (val - min) / (max - min) * 100
-  const percentage = ((val - min) / (max - min)) * 100
-  return {
-    background: `linear-gradient(to right, #F6465D 0%, #F6465D ${percentage}%, #F2F4F6 ${percentage}%, #F2F4F6 100%)`
-  }
-})
-</script>
-
-<style scoped>
-/* 全局容器配置 */
-.trade-container {
-  width: 100%;
-  max-width: 375px;
-  margin: 0 auto;
-  padding: 15px; /* 这里的 padding 对应之前要求的安全距离 */
-  box-sizing: border-box;
-  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Roboto, sans-serif;
-  color: #333;
-  background-color: #fff;
-  position: relative; /* 为弹窗定位做准备 */
-}
-
-/* 1. Tabs */
-.trade-tabs {
-  display: flex;
-  gap: 20px;
-  margin-bottom: 15px;
-}
-.tab {
-  font-size: 16px;
-  color: #999;
-  font-weight: 500;
-  cursor: pointer;
-}
-.tab.active {
-  color: #111;
-  font-weight: 600;
-}
-
-/* 2. Grid 按钮组 */
-.section-label {
-  font-size: 12px;
-  color: #999;
-  margin-bottom: 8px;
-}
-.grid-row {
-  display: grid;
-  grid-template-columns: repeat(5, 1fr); /* 5列等分 */
-  gap: 8px;
-  margin-bottom: 15px;
-}
-.mt-10 {
-  margin-top: 10px;
-}
-
-.tag-btn {
-  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: #F7F8FA;
-  border-radius: 4px;
-  font-size: 12px;
-  color: #333;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-/* 选中状态 - 红色 (还原图1) */
-.tag-btn.active {
-  background-color: #F6465D; /* 截图中的红 */
-  color: #fff;
-  font-weight: 500;
-}
-/* 浅色按钮 (还原图2下方的金额按钮) */
-.tag-btn.light {
-  background-color: #F7F8FA;
-  color: #333;
-}
-
-/* 3. 输入框组 (还原图2的蓝色边框) */
-.input-group {
-  display: flex;
-  align-items: center;
-  height: 44px;
-  background-color: #F7F8FA; /* 默认灰色背景 */
-  border-radius: 4px;
-  padding: 0 12px;
-  border: 1px solid transparent; /* 预留边框位置 */
-  transition: all 0.2s;
-}
-/* 聚焦时的样式 - 还原图2 */
-.input-group.focused {
-  background-color: #fff;
-  border-color: #2979FF; /* 截图中的亮蓝色 */
-  box-shadow: 0 0 0 1px rgba(41, 121, 255, 0.1); /* 可选：微弱的光晕 */
-}
-
-.prefix, .suffix {
-  font-size: 14px;
-  color: #111;
-  font-weight: 500;
-  white-space: nowrap;
-}
-.suffix {
-  font-size: 12px;
-}
-
-.input-group input {
-  flex: 1;
-  border: none;
-  background: transparent;
-  outline: none;
-  text-align: right;
-  padding: 0 10px;
-  font-size: 14px;
-  color: #333;
-}
-.input-group input::placeholder {
-  color: #CCC;
-  text-align: left; /* placeholder靠左，输入内容靠右 */
-}
-
-/* 5. 余额行 */
-.balance-row {
-  margin-top: 15px;
-  font-size: 12px;
-  color: #666;
-  display: flex;
-  align-items: center;
-}
-.wallet-icon {
-  margin-left: 4px;
-  color: #F6465D;
-}
-
-/* 6. 底部大按钮 */
-.action-buttons {
-  display: flex;
-  gap: 12px;
-  margin-top: 15px;
-}
-.btn-long, .btn-short {
-  flex: 1;
-  border: none;
-  height: 60px; /* 增加高度以容纳两行字 */
-  border-radius: 6px;
-  color: #fff;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-}
-.btn-long { background-color: #2EBD85; }
-.btn-short { background-color: #F6465D; }
-
-.main-text {
-  font-size: 16px;
-  font-weight: 600;
-  margin-bottom: 2px;
-}
-.sub-text {
-  font-size: 10px;
-  opacity: 0.9;
-  font-weight: 400;
-}
-
-/* ========================================= */
-/* 7. Modal 弹窗样式 (核心还原) */
-/* ========================================= */
-.modal-mask {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  background-color: rgba(0, 0, 0, 0.4);
-  z-index: 999;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end; /* 底部对齐 */
-}
-
-.modal-content {
-  background-color: #fff;
-  width: 100%;
-  max-width: 375px;
-  margin: 0 auto; /* 适配 PC 居中 */
-  border-radius: 16px 16px 0 0;
-  padding: 10px 20px 30px;
-  box-sizing: border-box;
-  animation: slideUp 0.3s ease-out;
-}
-
-@keyframes slideUp {
-  from { transform: translateY(100%); }
-  to { transform: translateY(0); }
-}
-
-.drag-handle {
-  width: 40px;
-  height: 4px;
-  background-color: #E0E0E0;
-  border-radius: 2px;
-  margin: 0 auto 15px;
-}
-
-.modal-title {
-  font-size: 16px;
-  font-weight: 600;
-  margin-bottom: 20px;
-}
-
-/* 步进器 */
-.stepper-box {
-  display: flex;
-  align-items: center;
-  background-color: #F7F8FA;
-  border-radius: 8px;
-  height: 48px;
-  margin-bottom: 30px;
-}
-.step-btn {
-  width: 60px;
-  height: 100%;
-  border: none;
-  background: transparent;
-  font-size: 24px;
-  color: #999;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.step-value {
-  flex: 1;
-  text-align: center;
-  font-size: 18px;
-  font-weight: 600;
-  color: #333;
-}
-
-/* 自定义 Slider (核心难点) */
-.slider-container {
-  position: relative;
-  margin-bottom: 40px;
-  padding: 0 10px;
-}
-
-.custom-range {
-  -webkit-appearance: none;
-  width: 100%;
-  height: 6px;
-  border-radius: 3px;
-  outline: none;
-  /* 背景色通过 inline-style 动态设置渐变 */
-}
-
-/* 滑块样式 (Thumb) */
-.custom-range::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  appearance: none;
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  background: #fff;
-  border: 2px solid #F6465D; /* 截图中的红圈白底滑块 */
-  cursor: pointer;
-  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
-  margin-top: -1px; /* 微调对齐 */
-}
-
-/* 刻度标签 */
-.slider-marks {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 10px;
-  color: #666;
-  font-size: 12px;
-}
-
-.confirm-btn {
-  width: 100%;
-  height: 48px;
-  background-color: #F6465D;
-  color: #fff;
-  border: none;
-  border-radius: 24px;
-  font-size: 16px;
-  font-weight: 600;
-  cursor: pointer;
-}
-</style>