commit

src/assets/styles/variables.less

@@ -7,16 +7,21 @@
 @m-grey2: #88a0ae;
 @m-grey3: #ccc;
 @m-grey4: #333333;
+@m-grey5: #363F45;
 @m-red0: #ff4d4f;
 @m-white: #fff;
 @m-black0: #242a2e;
 @m-black1: #181e22;
+@m-black2: #0E0E0F;
 @m-blue0: #3a87f7;
 @m-blue1: #4885eb;
 @m-blue2: #3270d2;
 @body-bg: #e9eef3;
 @font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
 
+//高度设置
+@bottomHeight: 330px;
+
 /*滚动条样式*/
 // ::-webkit-scrollbar {
 //     width: 10px;

src/components/capitalInfo/index.vue

@@ -1,6 +1,12 @@
 <template>
   <div class="capital-info">
-    资金信息
+    <!-- 资金信息 -->
+    <a-collapse v-model="activeKey">
+      <a-collapse-panel key="1" header="This is panel header 1">
+        <p>{{current}}</p>
+        <a-icon slot="extra" type="setting" @click="handleClick" />
+      </a-collapse-panel>
+    </a-collapse>
   </div>
 </template>
 
@@ -30,10 +36,13 @@ export default defineComponent({
         function menuClick(value: any) {
             const index = +value.key;
             context.emit('selectMenu', props.list[index]);
-        }
+        };
+        const activeKey = ref<string[]>(['1']);
+
         return {
             current,
             menuClick,
+            activeKey,
         };
     },
 });
@@ -41,5 +50,7 @@ export default defineComponent({
 
 <style lang="less">
 .capital-info {
+    width: 100%;
+    height: 100%;
 }
 </style>;

src/components/firstMenu/index.vue

@@ -57,6 +57,7 @@ export default defineComponent({
 }
 .first-menu {
     .flex();
+    flex: 1;
     justify-content: space-between;
     border-bottom: 1px solid @m-blue0 !important;
     background-color: @m-black1;

src/layout/index.vue

@@ -29,7 +29,7 @@
                 </div>
             </div>
         </a-layout-header>
-        <a-layout>
+        <a-layout class="middleLayout">
             <a-layout-sider class="m-layout-left" width="180" v-model:collapsed="collapsed" @collapse="collapse" collapsible>
                 <a-menu theme="dark" mode="inline" class="left-menu" v-model:selectedKeys="selectedKeys" v-model:openKeys="openKeys" @click="menuClick">
                     <a-sub-menu v-for="item in menuList" :key="item.code">
@@ -47,11 +47,20 @@
                     </a-sub-menu>
                 </a-menu>
             </a-layout-sider>
-            <a-layout :style="{ flex: 1 }">
-                <a-layout-content :style="{ background: '#0E0E0F', height: '100%' }">
-                    <router-view />
-                </a-layout-content>
-            </a-layout>
+            <a-layout-content :style="{ background: '#0E0E0F', flex: 1 }">
+                <router-view />
+            </a-layout-content>
+        </a-layout>
+        <div class="sliderLayout">
+            <div class="shortLine"></div>
+        </div>
+        <a-layout class="bottomLayout">
+            <a-layout-sider class="m-layout-left" width="180">
+                <!-- 这里左边需要加上资金信息 capital-info -->
+                <capitalInfo></capitalInfo>
+            </a-layout-sider>
+            <a-layout-content :style="{ background: '#0E0E0F', flex: 1 }">
+            </a-layout-content>
         </a-layout>
     </a-layout>
 </template>
@@ -60,6 +69,7 @@ import { UserOutlined } from '@ant-design/icons-vue';
 import { defineComponent, ref, provide } from 'vue';
 import APP from '@/services';
 import Setting from '@/views/setting/index.vue';
+import capitalInfo from '@/components/capitalInfo/index.vue';
 
 // 菜单栏
 const handleMenu = () => {
@@ -158,6 +168,10 @@ export default defineComponent({
 </script>
 <style lang="less">
 .layout {
+    .flex;
+    width: 100%;
+    height: 100%;
+    flex-direction: column;
     .m-layout-header {
         width: 100%;
         height: 40px;
@@ -189,9 +203,6 @@ export default defineComponent({
             }
         }
     }
-    .m-layout-left {
-        background: @m-black0;
-    }
     .left-menu {
         height: 100%;
         .menu-item_title {
@@ -205,5 +216,41 @@ export default defineComponent({
         background-color: @m-grey1;
         cursor: pointer;
     }
+    .m-layout-left {
+        background: @m-black0;
+    }
+    .middleLayout {
+        flex: 1;
+        width: 100%;
+        .inlineflex;
+        border-bottom: 1px solid @m-black2;
+        .m-layout-left {
+            position: relative;
+        }
+        .ant-layout-sider-trigger {
+            position: absolute;
+        }
+    }
+    .sliderLayout {
+        width: 100%;
+        height: 4px;
+        background: #242A2E;
+        border-top: 1px solid @m-grey5;
+        border-bottom: 1px solid @m-grey5;
+        position: relative;
+        .shortLine {
+            width: 30px;
+            height: 2px;
+            background: #4B5861;
+            border-radius: 1px;
+            .position(absolute, 50%, auto, auto, 50%);
+            transform: translate(-50%, -50%);
+        }
+    }
+    .bottomLayout {
+        width: 100%;
+        height: @bottomHeight;
+        .inlineflex;
+    }
 }
 </style>

src/views/market/warehouseTrade/index.vue

@@ -1,15 +1,17 @@
 <template>
   <!-- 仓单贸易 -->
   <section class="forward-section warehouse-trade">
-    <firstMenu :list="list"
-               :value="'value'"
-               @selectMenu="selectMenu" />
-    <quoteTable :columns="columns"
-                :dataSource="data"
-                :contextMenuList="contextMenuList" />
-    <!-- 这里需要加上二级菜单 二级菜单封装在公告组件里面 secondeMenu -->
+    <div class="topBar">
+        <!-- 这里需要加上二级菜单 二级菜单封装在公告组件里面 secondeMenu -->
+        <firstMenu :list="list"
+                :value="'value'"
+                @selectMenu="selectMenu" />
+        
+        <quoteTable :columns="columns"
+                    :dataSource="data"
+                    :contextMenuList="contextMenuList" />
+    </div>
     <div class="warehouse-trade-order">
-      <!-- 这里左边需要加上资金信息 capital-info -->
       <!-- 右边是单据 -->
       单据
     </div>
@@ -131,7 +133,13 @@ export default defineComponent({
 
 <style lang="less">
 .warehouse-trade {
-    // height: 100%;
+    height: 100%;
     position: relative;
+    .topBar {
+        flex: 1;
+    }
+    .warehouse-trade-order {
+        height: 330px;
+    }
 }
 </style>;