合约交易-图表界面编写

src/assets/styles/mixin.less

@@ -2510,4 +2510,94 @@ input:-internal-autofill-selected {
  // 数字最右侧上下箭头不显示
 .ant-input-number-handler-wrap {
     display: none
+}
+
+// 图标卖挂选项卡
+.chartTabs.ant-tabs-top {
+    height: calc(100% - 22px);
+    background: transparent;
+    .ant-tabs-bar {
+        margin-bottom: 0;
+        border-bottom: 0;
+        height: 30px;
+        .ant-tabs-nav-container {
+            .ant-tabs-nav-wrap {
+                .ant-tabs-nav-scroll {
+                    .ant-tabs-nav {
+                        width: 100%;
+                        > div {
+                            .flex;
+                        }
+                        .ant-tabs-tab {
+                            margin-right: 0;
+                            padding: 0;
+                            height: 30px;
+                            line-height: 30px;
+                            background: #171B1D;
+                            color: #7A8A94;
+                            font-size: 14px;
+                            flex: 1;
+                            text-align: center;
+                        }
+                        .ant-tabs-tab-active {
+                            background: #10251D;
+                            color: #3A87F7;
+                        }
+                        .ant-tabs-ink-bar-animated {
+                            width: 0 !important;
+                            height: 0 !important;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    .ant-tabs-content {
+        width: 100%;
+        height: calc(100% - 29px);
+        margin-top: -1px;
+        .flex;
+        flex-direction: column;
+        .ant-tabs-tabpane {
+            height: 100%;
+        }
+        .ant-tabs-tabpane-active {
+            background: #10251D;
+        }
+    }
+}
+
+.watchMore {
+    width: 100%;
+    height: 22px;
+    line-height: 22px;
+    background: #171B1D;
+    font-size: 14px;
+    color: #3C454B;
+    text-align: center;
+    cursor: pointer;
+}
+
+.chartRow {
+    width: 100%;
+    padding-left: 8px;
+    padding-right: 10px;
+    display: inline-flex;
+    > div {
+        flex: 1;
+        font-size: 14px;
+        color: #ACB8C0;
+        height: 40px;
+        line-height: 40px;
+    }
+    .left {
+        text-align: left;
+    }
+    .middle {
+        text-align: center;
+        color: #FF2B2B;
+    }
+    .right {
+        text-align: right;
+    }
 }

src/views/market/spot_trade/spot_trade_order_transaction/components/chart/index.vue

@@ -1,19 +1,97 @@
 <template>
-  <!-- 交易图表  -->
-  <div class="chart-container">
-    <div class="chart-content"></div>
-    <div class="chart-tips">
-      <a-tabs v-model:activeKey="activeKey">
-        <a-tab-pane key="1"
-                    tab="卖挂">Tab 1</a-tab-pane>
-        <a-tab-pane key="2"
-                    tab="买挂">Tab 2</a-tab-pane>
-        <a-tab-pane key="3"
-                    tab="成交">Tab 3</a-tab-pane>
-      </a-tabs>
-      <div @click="watchMore">查看更多</div>
+    <!-- 交易图表  -->
+    <div class="chart-container">
+        <div class="chart-content"></div>
+        <div class="chart-tips">
+            <a-tabs class="chartTabs" v-model:activeKey="activeKey">
+                <a-tab-pane key="1" tab="卖挂">
+                    <div class="chartRow">
+                        <div class="left">江**铜</div>
+                        <div class="middle">6287</div>
+                        <div class="right">30</div>
+                    </div>
+                    <div class="chartRow">
+                        <div class="left">江**铜</div>
+                        <div class="middle">6287</div>
+                        <div class="right">30</div>
+                    </div>
+                    <div class="chartRow">
+                        <div class="left">江**铜</div>
+                        <div class="middle">6287</div>
+                        <div class="right">30</div>
+                    </div>
+                    <div class="chartRow">
+                        <div class="left">江**铜</div>
+                        <div class="middle">6287</div>
+                        <div class="right">30</div>
+                    </div>
+                    <div class="chartRow">
+                        <div class="left">江**铜</div>
+                        <div class="middle">6287</div>
+                        <div class="right">30</div>
+                    </div>
+                    <div class="chartRow">
+                        <div class="left">江**铜</div>
+                        <div class="middle">6287</div>
+                        <div class="right">30</div>
+                    </div>
+                    <div class="chartRow">
+                        <div class="left">江**铜</div>
+                        <div class="middle">6287</div>
+                        <div class="right">30</div>
+                    </div>
+                    <div class="chartRow">
+                        <div class="left">江**铜</div>
+                        <div class="middle">6287</div>
+                        <div class="right">30</div>
+                    </div>
+                    <div class="chartRow">
+                        <div class="left">江**铜</div>
+                        <div class="middle">6287</div>
+                        <div class="right">30</div>
+                    </div>
+                    <div class="chartRow">
+                        <div class="left">江**铜</div>
+                        <div class="middle">6287</div>
+                        <div class="right">30</div>
+                    </div>
+                    <div class="chartRow">
+                        <div class="left">江**铜</div>
+                        <div class="middle">6287</div>
+                        <div class="right">30</div>
+                    </div>
+                    <div class="chartRow">
+                        <div class="left">江**铜</div>
+                        <div class="middle">6287</div>
+                        <div class="right">30</div>
+                    </div>
+                    <div class="chartRow">
+                        <div class="left">江**铜</div>
+                        <div class="middle">6287</div>
+                        <div class="right">30</div>
+                    </div>
+                    <div class="chartRow">
+                        <div class="left">江**铜</div>
+                        <div class="middle">6287</div>
+                        <div class="right">30</div>
+                    </div>
+                    <div class="chartRow">
+                        <div class="left">江**铜</div>
+                        <div class="middle">6287</div>
+                        <div class="right">30</div>
+                    </div>
+                    <div class="chartRow">
+                        <div class="left">江**铜</div>
+                        <div class="middle">6287</div>
+                        <div class="right">30</div>
+                    </div>
+                </a-tab-pane>
+                <a-tab-pane key="2" tab="买挂">Tab 2</a-tab-pane>
+                <a-tab-pane key="3" tab="成交">Tab 3</a-tab-pane>
+            </a-tabs>
+            <div @click="watchMore" class="watchMore">查看更多</div>
+        </div>
     </div>
-  </div>
 </template>
 
 <script lang="ts">
@@ -99,11 +177,15 @@ export default defineComponent({
 <style lang="less">
 .chart-container {
     display: flex;
+    width: 100%;
+    height: calc(100% - 41px);
     .chart-content {
         flex: 1;
+        height: 100%;
     }
     .chart-tips {
         width: 300px;
+        height: 100%;
     }
 }
 </style>