样式修改

src/assets/styles/mixin.less

@@ -824,6 +824,9 @@
 .ml10 {
     margin-left: 10px;
 }
+.ml35 {
+    margin-left: 35px;
+}
 .ml9 {
     margin-left: 9px;
 }
@@ -1610,9 +1613,198 @@ input:-internal-autofill-selected {
 
 .topTableHeight {
     height: calc(100% - 28px);
+    // .srcollYTable {
+    //     display: none;
+    // }
 }
 
 // 折叠底部上面左边菜单高度
 .hiddenBottomLayout .layout-top .middleLayout .m-layout-left .ant-layout-sider-children ul.ant-menu.ant-menu-inline.left-menu {
     height: calc(100vh - 126px);
+}
+
+// 买卖大厅
+.buy-sell-market {
+    width: 100%;
+    height: 100%;
+    .buy-sell-market-title {
+        width: 100%;
+        height: 60px;
+        background: @m-black1;
+        display: inline-flex;
+        font-size: 14px;
+        position: relative;
+        line-height: 60px;
+        border-bottom: 1PX solid @m-blue0;
+        div {
+            align-self: center;
+            align-items: center;
+        }
+        .backIcon {
+            width: 52px;
+            line-height: 60px;
+        }
+        .titleBtn {
+            min-width: 90px;
+            height: 40px;
+            background: @m-blue12;
+            .rounded-corners(3px);
+            color: @m-white0;
+            line-height: 40px;
+            text-align: center;
+            font-size: 16px;
+            padding: 0 16px;
+            margin-right: 20px;
+        }
+        .numBlock {
+            display: inline-flex;
+            .first {
+                font-size: 14px;
+            }
+            .last {
+                font-size: 18px;
+                margin-left: 10px;
+            }
+        }
+        .numBlock+.numBlock {
+            margin-left: 25px;
+        }
+        .market {
+            margin-left: 28px;
+            min-width: 160px;
+            height: 40px;
+            display: inline-flex;
+            background: @m-blue3;
+            border: 1px solid @m-blue13;
+            .rounded-corners(3px);
+            color: @m-grey2;
+            padding: 0 14px;
+            > div {
+                align-self: center;
+                align-items: center;
+            }
+            .first {
+                font-size: 14px;
+            }
+            .last {
+                font-size: 18px;
+                margin-left: 10px;
+                margin-right: 10px;
+            }
+            .red {
+                color: @m-red1;
+            }
+        }
+        .ant-btn {
+            align-items: center;
+            align-self: center;
+        }
+        .publishBuy.ant-btn {
+            min-width: 80px;
+            height: 30px;
+            line-height: 30px;
+            background: linear-gradient(0deg, @m-blue2, @m-blue0);
+            .rounded-corners(3px);
+            font-size: 14px;
+            color: @m-white0;
+            text-align: center;
+            border: none;
+            margin-left: 10px;
+            &:hover {
+                background: linear-gradient(0deg, @m-blue2-hover, @m-blue0-hover);
+                color: @m-white0-hover;
+            }
+        }
+        .detailBtn.ant-btn {
+            min-width: 80px;
+            height: 30px;
+            line-height: 30px;
+            background: linear-gradient(0deg, @m-grey12 0%, @m-grey13 100%);
+            .rounded-corners(3px);
+            font-size: 14px;
+            color: @m-white0;
+            text-align: center;
+            border: none;
+            &:hover {
+                background: linear-gradient(0deg, @m-grey12-hover 0%, @m-grey13-hover 100%);
+                color: @m-white0-hover;
+            }
+        }
+        .ant-btn+.ant-btn {
+            margin-left: 10px;
+        }
+    }
+}
+// 买卖大厅表格
+.buyHallTable,.sellHallTable {
+    .ant-table {
+        width: 100%;
+        table {
+            border: 0;
+        }
+        .ant-table-thead {
+            tr {
+                box-shadow: 0px 1px 0px 0px #2E3539;
+                th {
+                    line-height: 34px;
+                    background: @m-black8;
+                    padding-top: 0;
+                    padding-bottom: 0;
+                    color: @m-grey17;
+                    font-size: 14px;
+                    border-right: 1px solid @m-black10;
+                    border-bottom: 1px solid @m-black10;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    overflow: hidden;
+                }
+            }
+        }
+        .ant-table-tbody {
+            tr {
+                td {
+                    height: 43px;
+                    line-height: 43px;
+                    padding: 0 8px;
+                    border-right: 1px solid @m-black10;
+                    border-bottom: 1px solid @m-black10;
+                    font-size: 16px;
+                    color: @m-grey17;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    overflow: hidden;
+                }
+                td:not(:first-child) {
+                    background: rgba(@m-green0, .1);
+                    color: @m-white1;
+                }
+            }
+            tr.ant-table-expanded-row:hover { //tr.ant-table-expanded-row,
+                td {
+                    background-color: @m-black2;
+                }
+            }
+            tr.ant-table-expanded-row {
+                td {
+                    text-align: right;
+                }
+            }
+        }
+        .ant-table-placeholder {
+            border: 0;
+            background: @m-black2;
+        }
+    }
+}
+
+.sellHallTable {
+    .ant-table {
+        .ant-table-tbody {
+            tr {
+                td:not(:first-child) {
+                    background: rgba(@m-red1, .1);
+                }
+            }
+        }
+    }
 }

src/assets/styles/variables.less

@@ -66,6 +66,8 @@
 @m-blue9-hover: rgba(@m-blue9, .8);
 @m-blue10: #0C95FF;
 @m-blue11: #1271BA;
+@m-blue12: #1556B5;
+@m-blue13: #193778;
 @body-bg: #e9eef3;
 @m-white0: #ffffff;
 @m-white0-hover: rgba(@m-white0, .8);

src/views/market/spot_trade/components/buy-sell-market/components/buy/index.vue

@@ -1,15 +1,16 @@
 <template>
-  <!-- 买大厅 -->
-  <a-table :columns="columns"
-           class="srcollYTable"
-           :scroll="{ x: '100%', y: 'calc(100vh - 163px)' }"
-           :pagination="false"
-           :loading="loading"
-           :expandedRowKeys="expandedRowKeys"
-           :customRow="Rowclick"
-           rowKey="key"
-           :data-source="tableList"></a-table>
-
+    <!-- 买大厅 -->
+    <a-table
+        :columns="columns"
+        class="buyHallTable"
+        :scroll="{ x: '100%', y: 'calc(100% - 61px)' }"
+        :pagination="false"
+        :loading="loading"
+        :expandedRowKeys="expandedRowKeys"
+        :customRow="Rowclick"
+        rowKey="key"
+        :data-source="tableList"
+    ></a-table>
 </template>
 
 <script lang="ts">
@@ -54,13 +55,5 @@ export default defineComponent({
 </script>
 <style lang="less">
 .buy-sell-market {
-    position: absolute;
-    z-index: 99;
-    top: 0;
-    height: 100%;
-    width: 100%;
-    bottom: 30px;
-    background: #fff;
-    left: 0;
 }
 </style>

src/views/market/spot_trade/components/buy-sell-market/components/sell/index.vue

@@ -1,15 +1,17 @@
 <template>
-  <!-- 卖大厅 -->
-  <a-table :columns="columns"
-           class="srcollYTable"
-           :scroll="{ x: '100%', y: 'calc(100vh - 163px)' }"
-           :pagination="false"
-           :loading="loading"
-           :expandedRowKeys="expandedRowKeys"
-           :customRow="Rowclick"
-           rowKey="key"
-           :data-source="tableList"></a-table>
+    <!-- 卖大厅 -->
 
+    <a-table
+        :columns="columns"
+        class="sellHallTable"
+        :scroll="{ x: '100%', y: 'calc(100% - 61px)' }"
+        :pagination="false"
+        :loading="loading"
+        :expandedRowKeys="expandedRowKeys"
+        :customRow="Rowclick"
+        rowKey="key"
+        :data-source="tableList"
+    ></a-table>
 </template>
 
 <script lang="ts">
@@ -54,13 +56,5 @@ export default defineComponent({
 </script>
 <style lang="less">
 .buy-sell-market {
-    position: absolute;
-    z-index: 99;
-    top: 0;
-    height: 100%;
-    width: 100%;
-    bottom: 30px;
-    background: #fff;
-    left: 0;
 }
 </style>

src/views/market/spot_trade/components/buy-sell-market/index.vue

@@ -1,18 +1,53 @@
 <template>
-  <!-- 买卖大厅 -->
-  <div class="buy-sell-market">
-    <div>
-      <button @click="cancel">关闭</button>
+    <!-- 买卖大厅 -->
+    <div class="buy-sell-market">
+        <!--<div>
+             <button @click="cancel">关闭</button> 
+        </div>-->
+        <div class="buy-sell-market-title">
+            <a class="backIcon">
+                <LeftOutlined />
+            </a>
+            <div class="titleBtn">螺纹钢</div>
+            <div class="titleBtn">12mm-江铜</div>
+            <div class="titleBtn">华南仓库</div>
+            <div class="green">
+                <div class="numBlock">
+                    <div class="first">卖基差</div>
+                    <div class="last">125.00</div>
+                </div>
+                <div class="numBlock">
+                    <div class="first">卖量</div>
+                    <div class="last">10000</div>
+                </div>
+            </div>
+            <div class="red ml35">
+                <div class="numBlock">
+                    <div class="first">买基差</div>
+                    <div class="last">120.00</div>
+                </div>
+                <div class="numBlock">
+                    <div class="first">买量</div>
+                    <div class="last">10000</div>
+                </div>
+            </div>
+            <div class="market">
+                <div class="first">IC2104</div>
+                <div class="last red">6291.0</div>
+                <LineChartOutlined />
+            </div>
+            <a-button class="publishBuy">发布求购</a-button>
+            <a-button class="detailBtn">详情</a-button>
+        </div>
+        <a-row>
+            <a-col :span="12">
+                <Buy />
+            </a-col>
+            <a-col :span="12">
+                <Sell />
+            </a-col>
+        </a-row>
     </div>
-    <a-row>
-      <a-col :span="12">
-        <Buy />
-      </a-col>
-      <a-col :span="12">
-        <Sell />
-      </a-col>
-    </a-row>
-  </div>
 </template>
 
 <script lang="ts">
@@ -21,9 +56,11 @@ import { ComposeTableParam, defineComponent, handleComposeTable, ModalEnum, quer
 import { _closeModal } from '@/common/setup/modal/modal';
 import { queryOrderQuoteDetail } from '@/services/go/wrtrade';
 import { QueryOrderQuoteDetailReq, WrOrderQuoteDetail } from '@/services/go/wrtrade/interface';
+import { LeftOutlined } from '@ant-design/icons-vue';
 import { handleBuyAndSellList } from './setup';
 import Buy from './components/buy/index.vue';
 import Sell from './components/sell/index.vue';
+import { LineChartOutlined } from '@ant-design/icons-vue';
 
 export default defineComponent({
     emits: ['cancel'],
@@ -42,6 +79,8 @@ export default defineComponent({
     components: {
         Buy,
         Sell,
+        LeftOutlined,
+        LineChartOutlined,
     },
     setup(props, context) {
         const { visible, cancel } = _closeModal(context);
@@ -55,13 +94,5 @@ export default defineComponent({
 </script>
 <style lang="less">
 .buy-sell-market {
-    position: absolute;
-    z-index: 99;
-    top: 0;
-    height: 100%;
-    width: 100%;
-    bottom: 30px;
-    background: #fff;
-    left: 0;
 }
 </style>