样式修改

src/common/components/capitalInfo/index.vue

@@ -1,43 +1,44 @@
 <template>
-  <div class="capital-info">
-    <!-- 资金信息 -->
-    <a-collapse class="capitalCollapse"
-                default-active-key="1"
-                :bordered="false"
-                expand-icon-position="right">
-      <a-collapse-panel key="1"
-                        header="南山铜加工厂（074345345345345345）">
-        <div class="capitalItem">
-          <div class="firstLine">
-            <div>净值</div>
-            <div><i class="iconfont icon-zhengyan"></i></div>
-          </div>
-          <div class="numBar">128,000.00</div>
-        </div>
-        <div class="capitalItem">
-          <div class="firstLine">
-            <div>占用</div>
-          </div>
-          <div class="numBar green">128,000.00</div>
-        </div>
-        <div class="capitalItem">
-          <div class="firstLine">
-            <div>冻结</div>
-          </div>
-          <div class="numBar red">128,000.00</div>
-        </div>
-        <div class="capitalItem">
-          <div class="firstLine">
-            <div>可用</div>
-          </div>
-          <div class="numBar blue">128,000.00</div>
-        </div>
-        <a-icon slot="extra"
-                type="setting"
-                @click="handleClick" />
-      </a-collapse-panel>
-    </a-collapse>
-  </div>
+    <div class="capital-info">
+        <!-- 资金信息 -->
+        <a-collapse
+            class="capitalCollapse"
+            default-active-key="1"
+            :bordered="false"
+            expand-icon-position="right"
+        >
+            <a-collapse-panel key="1" header="南山铜加工厂（074345345345345345）">
+                <div class="capitalItem">
+                    <div class="firstLine">
+                        <div>净值</div>
+                        <div>
+                            <i class="iconfont icon-zhengyan"></i>
+                        </div>
+                    </div>
+                    <div class="numBar">128,000.00</div>
+                </div>
+                <div class="capitalItem">
+                    <div class="firstLine">
+                        <div>占用</div>
+                    </div>
+                    <div class="numBar green">128,000.00</div>
+                </div>
+                <div class="capitalItem">
+                    <div class="firstLine">
+                        <div>冻结</div>
+                    </div>
+                    <div class="numBar red">128,000.00</div>
+                </div>
+                <div class="capitalItem">
+                    <div class="firstLine">
+                        <div>可用</div>
+                    </div>
+                    <div class="numBar blue">128,000.00</div>
+                </div>
+                <a-icon slot="extra" type="setting" @click="handleClick" />
+            </a-collapse-panel>
+        </a-collapse>
+    </div>
 </template>
 
 <script lang="ts">
@@ -110,15 +111,15 @@ export default defineComponent({
                 }
             }
             .ant-collapse-content {
-                height: calc(100% - 40px);
-                overflow-y: auto;
+                height: calc(100% - 60px);
+                overflow: auto;
                 .ant-collapse-content-box {
                     padding: 10px 12px;
                     .flex();
                     flex-direction: column;
                     .capitalItem {
                         width: 100%;
-                        padding-top: 5px;
+                        padding-top: 2px;
                         font-size: 14px;
                         color: @m-grey1;
                         .firstLine {
@@ -140,7 +141,7 @@ export default defineComponent({
                             font-size: 16px;
                             text-align: left;
                             color: @m-white0;
-                            margin-bottom: 14px;
+                            margin-bottom: 10px;
                         }
                         .green {
                             color: @m-green0;

src/common/components/firstMenu/index.vue

@@ -1,19 +1,18 @@
 <template>
-  <div class="first-menu">
-    <a-menu class="a-menu_container"
+    <div class="first-menu">
+        <a-menu
+            class="a-menu_container"
             theme="dark"
             v-model:selectedKeys="current"
             @click="menuClick"
-            mode="horizontal">
-      <a-menu-item :key="String(index)"
-                   v-for="(item, index) in list">
-        {{ item[value]}}
-      </a-menu-item>
-    </a-menu>
-    <div class="menu_right">
-      <slot></slot>
+            mode="horizontal"
+        >
+            <a-menu-item :key="String(index)" v-for="(item, index) in list">{{ item[value]}}</a-menu-item>
+        </a-menu>
+        <div class="menu_right">
+            <slot></slot>
+        </div>
     </div>
-  </div>
 </template>
 
 <script lang="ts">
@@ -65,13 +64,14 @@ export default defineComponent({
 .first-menu {
     width: 100%;
     height: 40px;
-    border-bottom: 1px solid @m-blue0 !important;
+
     background-color: @m-black1;
     .a-menu_container {
         padding-top: 5px;
         .flex();
-        height: 34px;
+        height: 40px;
         line-height: 34px;
+        border-bottom: 1px solid @m-blue0 !important;
         .ant-menu-item {
             min-width: 120px;
             height: 34px;

src/layout/components/bottom.vue

@@ -1,16 +1,13 @@
 <template>
-  <section class="layout-bottom">
-    <CapitalInfo class="capital-info-container"></CapitalInfo>
-    <main>
-      <div class="conditionIcon icon iconfont icon-shouqi"></div>
-      <firstMenu :list="list"
-                 :value="'value'"
-                 @selectMenu="selectMenu" />
-      <quoteTable :columns="columns"
-                  :dataSource="data" />
-      <thirdMenu></thirdMenu>
-    </main>
-  </section>
+    <section class="layout-bottom">
+        <CapitalInfo class="capital-info-container"></CapitalInfo>
+        <main>
+            <div class="conditionIcon icon iconfont icon-shouqi"></div>
+            <firstMenu :list="list" :value="'value'" @selectMenu="selectMenu" />
+            <quoteTable :columns="columns" :dataSource="data" />
+            <thirdMenu></thirdMenu>
+        </main>
+    </section>
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue';
@@ -89,6 +86,7 @@ export default defineComponent({
 .layout-bottom {
     display: flex;
     width: 100%;
+    height: 330px;
     overflow: hidden;
     .capital-info-container {
         width: 180px;

src/layout/components/top.vue

@@ -1,25 +1,25 @@
 <template>
-  <a-layout class="layout-top">
-    <a-layout-header class="m-layout-header">
-      <Header />
-    </a-layout-header>
-    <a-layout class="middleLayout">
-      <a-layout-sider class="m-layout-left"
-                      width="180"
-                      v-model:collapsed="collapsed"
-                      @collapse="collapse"
-                      collapsible>
-        <Menu @chooseMenu="chooseMenu"
-              :collapsed="collapsed" />
-      </a-layout-sider>
-      <a-layout-content :style="{ background: '#0E0E0F', flex: 1 }">
-        <!-- <Drawer :title="'挂牌'"
-                :visible="visible"></Drawer> -->
-        <!-- <Main /> -->
-        <router-view />
-      </a-layout-content>
+    <a-layout class="layout-top">
+        <a-layout-header class="m-layout-header">
+            <Header />
+        </a-layout-header>
+        <a-layout class="middleLayout">
+            <a-layout-sider
+                class="m-layout-left"
+                width="180"
+                v-model:collapsed="collapsed"
+                @collapse="collapse"
+                collapsible
+            >
+                <Menu @chooseMenu="chooseMenu" :collapsed="collapsed" />
+            </a-layout-sider>
+            <a-layout-content :style="{ background: '#0E0E0F', flex: 1 }">
+                <Drawer :title="'挂牌'" :visible="visible"></Drawer>
+                <!-- <Main /> -->
+                <router-view />
+            </a-layout-content>
+        </a-layout>
     </a-layout>
-  </a-layout>
 </template>
 <script lang="ts">
 import { defineComponent, ref, provide } from 'vue';
@@ -110,7 +110,7 @@ export default defineComponent({
 .layout-top {
     .flex;
     width: 100%;
-    height: 100%;
+    height: calc(100% - 336px);
     flex-direction: column;
     .m-layout-header {
         width: 100%;
@@ -174,6 +174,9 @@ export default defineComponent({
     .middleLayout {
         flex: 1;
         width: 100%;
+        height: calc(100% - 40px);
+        max-height: calc(100% - 40px);
+        background: @m-grey18;
         .inlineflex;
         border-bottom: 1px solid @m-black2;
         .ant-layout-sider-has-trigger {
@@ -183,12 +186,12 @@ export default defineComponent({
             }
         }
         .m-layout-left {
-            height: calc(100vh - 40px);
+            min-height: calc(100vh - 376px);
             background: @m-black4;
             overflow: hidden;
             .ant-layout-sider-children {
                 ul.ant-menu.ant-menu-inline.left-menu {
-                    height: calc(100vh - 80px);
+                    height: calc(100vh - 376px);
                     overflow-y: auto;
                     li.ant-menu-submenu {
                         padding-bottom: 0;

src/layout/index.vue

@@ -1,13 +1,14 @@
 <template>
-  <div class="layout">
-    <LayoutTop @chooseMenu="chooseMenu" />
-    <template v-if="isShowBottomPart">
-      <div class="sliderLayout">
-        <div class="shortLine"></div>
-      </div>
-      <LayoutBottom />
-    </template>
-  </div>
+    <div class="layout">
+        <LayoutTop @chooseMenu="chooseMenu" />
+        <!-- <template> -->
+        <!--v-if="isShowBottomPart" -->
+        <div class="sliderLayout">
+            <div class="shortLine"></div>
+        </div>
+        <LayoutBottom />
+        <!-- </template> -->
+    </div>
 </template>
 <script lang="ts">
 import LayoutTop from './components/top.vue';

src/views/market/spot_trade/capacity_pre_sale/index.vue

@@ -1,11 +1,9 @@
 <template>
-  <!-- 仓单预售 -->
-  <div class="warehouse_receipt_trade">
-    <router-view></router-view>
-    <ThridMenu :list="tabList"
-               :selectedKey="index"
-               @selectMenu="changeTab" />
-  </div>
+    <!-- 仓单预售 -->
+    <div class="warehouse_receipt_trade">
+        <router-view></router-view>
+        <ThridMenu :list="tabList" :selectedKey="index" @selectMenu="changeTab" />
+    </div>
 </template>
 
 <script lang="ts">
@@ -52,4 +50,9 @@ export default defineComponent({
         return { tabList, changeTab, index };
     },
 });
-</script>
+</script>
+<style lang="less">
+.warehouse_receipt_trade {
+    height: calc(100% - 40px);
+}
+</style>

src/views/market/spot_trade/warehouse_receipt_trade/index.vue

@@ -1,11 +1,9 @@
 <template>
-  <!-- 仓单贸易 -->
-  <div class="warehouse_receipt_trade">
-    <router-view></router-view>
-    <ThridMenu :list="tabList"
-               :selectedKey="index"
-               @selectMenu="changeTab" />
-  </div>
+    <!-- 仓单贸易 -->
+    <div class="warehouse_receipt_trade">
+        <router-view></router-view>
+        <ThridMenu :list="tabList" :selectedKey="index" @selectMenu="changeTab" />
+    </div>
 </template>
 
 <script lang="ts">
@@ -52,4 +50,9 @@ export default defineComponent({
         return { tabList, changeTab, index };
     },
 });
-</script>
+</script>
+<style lang="less">
+.warehouse_receipt_trade {
+    height: calc(100% - 40px);
+}
+</style>

src/views/market/spot_trade/warehouse_receipt_trade/warehouse_receipt_trade_floating_price/index.vue

@@ -1,8 +1,6 @@
 <template>
-  <!-- 仓单贸易 浮动价挂牌-->
-  <div class="capacity_pre_sale">
-    浮动价挂牌
-  </div>
+    <!-- 仓单贸易 浮动价挂牌-->
+    <div class="capacity_pre_sale">浮动价挂牌</div>
 </template>
 
 <script lang="ts">
@@ -14,4 +12,9 @@ export default defineComponent({
         return {};
     },
 });
-</script>
+</script>
+<style lang="less">
+.capacity_pre_sale {
+    height: calc(100% - 28px);
+}
+</style>

src/views/market/spot_trade/warehouse_receipt_trade/warehouse_receipt_trade_price/index.vue

@@ -1,8 +1,6 @@
 <template>
-  <!-- 仓单预售 一口价挂牌-->
-  <div class="capacity_pre_sale">
-    一口价挂牌
-  </div>
+    <!-- 仓单预售 一口价挂牌-->
+    <div class="capacity_pre_sale">一口价挂牌</div>
 </template>
 
 <script lang="ts">
@@ -14,4 +12,9 @@ export default defineComponent({
         return {};
     },
 });
-</script>
+</script>
+<style lang="less">
+.capacity_pre_sale {
+    height: calc(100% - 28px);
+}
+</style>