commit

src/assets/styles/variables.less

@@ -21,6 +21,7 @@
 @m-black2: #0E0E0F;
 @m-black3: #4D5A64;
 @m-black4: #14181B;
+@m-black5: #121415;
 @m-blue0: #3a87f7;
 @m-blue1: #4885eb;
 @m-blue2: #3270d2;

src/components/quoteTable/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div @contextmenu.prevent="onContextMenu">
+    <div class="quoteTable" @contextmenu.prevent="onContextMenu">
         <a-table
             class="quote-table"
             :columns="columns"
@@ -73,8 +73,13 @@ export default defineComponent({
 });
 </script>
 <style lang="less">
-.quote-table {
-    height: calc(100% - 440px);
+.quoteTable {
+    width: 100%;
+    flex: 1;
+    .quote-table {
+        width: 100%;
+        height: 100%;
+    }
     .ant-table td { white-space: nowrap; }
     .ant-table-thead {
         tr th {

src/components/thirdMenu/index.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="thirdMenu">
+    <a-tabs default-active-key="1" @change="callback">
+      <a-tab-pane key="1" tab="一口价挂牌">
+      </a-tab-pane>
+      <a-tab-pane key="2" tab="浮动价挂牌">
+      </a-tab-pane>
+      <!-- <a-tab-pane key="3" tab="Tab 3">
+      </a-tab-pane> -->
+    </a-tabs>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, PropType } from 'vue';
+
+interface Key {
+    [propName: string]: string;
+}
+
+export default defineComponent({
+    name: 'third-menu',
+    props: {
+        list: {
+            default: [],
+            type: Object as PropType<Key[]>,
+        },
+        value: {
+            // 需要绑定的值得 key
+            default: '',
+            type: String,
+        },
+    },
+    components: {},
+    setup(props, context) {
+        function callback(key: any) {
+            console.log(key);
+        };
+        return {
+            callback,
+        };
+    },
+});
+</script>
+
+<style lang="less">
+.noBorderBottom {
+    border-bottom: none;
+}
+.thirdMenu {
+    width: 100%;
+    height: 28px;
+    padding-bottom: 2px;
+    background-color: @m-black5;
+    .ant-tabs {
+        line-height: 26px;
+        .flex;
+        .ant-tabs-bar {
+            margin-bottom: 0;
+            border-bottom: 0;
+            .ant-tabs-nav-container {
+                margin-bottom: 0;
+                line-height: 100%;
+                .ant-tabs-nav-wrap {
+                    margin-bottom: 0;
+                    .ant-tabs-nav-scroll {
+                        .ant-tabs-nav {
+                            .ant-tabs-tab {
+                                width: 121px;
+                                height: 26px;
+                                line-height: 26px;
+                                text-align: center;
+                                color: @m-grey1;
+                                padding: 0;
+                                margin: 0;
+                                background: url(../../assets/images/tabbg.png) center center no-repeat;
+                                background-size: cover;
+                            }
+                            .ant-tabs-tab-active.ant-tabs-tab {
+                                color: @m-white0;
+                                background: url(../../assets/images/tabbgActive.png) center center no-repeat;
+                                background-size: cover;
+                                z-index: 2;
+                            }
+                            .ant-tabs-tab+.ant-tabs-tab {
+                                margin-left: -14px;
+                            }
+                            .ant-tabs-ink-bar {
+                                width: 0px !important;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+</style>;

src/layout/index.vue

@@ -35,8 +35,9 @@
         </a-layout-header>
         <a-layout class="middleLayout">
             <SecondMenu></SecondMenu>
-            <a-layout-content :style="{ background: '#0E0E0F', flex: 1 }">
+            <a-layout-content class="contentBar">
                 <!-- <router-view /> -->
+                <WarehouseTrade></WarehouseTrade>
             </a-layout-content>
         </a-layout>
         <div class="sliderLayout">
@@ -47,7 +48,7 @@
                 <!-- 这里左边需要加上资金信息 capital-info -->
                 <CapitalInfo></CapitalInfo>
             </a-layout-sider>
-            <a-layout-content :style="{ background: '#0E0E0F', flex: 1 }">
+            <a-layout-content :style="{ background: '#0E0E0F' }">
             </a-layout-content>
         </a-layout>
     </a-layout>
@@ -58,6 +59,7 @@ import { defineComponent, ref, provide } from 'vue';
 import Setting from '@/views/setting/index.vue';
 import CapitalInfo from '@/components/capitalInfo/index.vue';
 import SecondMenu from '@/components/secondeMenu/index.vue';
+import WarehouseTrade from '@/views/market/warehouseTrade/index.vue';
 import APP from '@/services';
 
 // 设置
@@ -94,7 +96,8 @@ export default defineComponent({
         Setting,
         UserOutlined,
         CapitalInfo,
-        SecondMenu
+        SecondMenu,
+        WarehouseTrade,
     },
     setup() {
         const { visible, setMenu, chooseSetMenu } = setFn();
@@ -182,7 +185,10 @@ export default defineComponent({
             }
         }
     }
-    
+    .contentBar {
+        background: @m-black2;
+        overflow-y: hidden;
+    }
     .middleLayout {
         flex: 1;
         width: 100%;

src/views/market/warehouseTrade/index.vue

@@ -1,6 +1,7 @@
 <template>
   <!-- 仓单贸易 -->
   <section class="forward-section warehouse-trade">
+    <div class="conditionIcon icon iconfont icon-saixuantiaojiantubiao"></div>
     <!-- 这里需要加上二级菜单 二级菜单封装在公告组件里面 secondeMenu -->
     <firstMenu :list="list"
             :value="'value'"
@@ -9,9 +10,7 @@
     <quoteTable :columns="columns"
                 :dataSource="data"
                 :contextMenuList="contextMenuList" />
-    <!-- <div class="warehouse-trade-order">
-       单据
-    </div> -->
+    <thirdMenu></thirdMenu>
   </section>
 </template>
 
@@ -19,34 +18,29 @@
 import { defineComponent, computed, reactive, ref, toRefs, unref, onMounted, onUpdated, onUnmounted, provide, inject } from 'vue';
 import { initData } from '@/setup/methods/index';
 import firstMenu from '@/components/firstMenu/index.vue';
+import thirdMenu from '@/components/thirdMenu/index.vue';
 import quoteTable from '@/components/quoteTable/index.vue';
 import { MenuItem } from '@/components/contextMenu/interface';
 import orderTable from '@/components/orderTable/index.vue';
 
 const columns = [
-    { title: 'Full Name', width: 100, dataIndex: 'name', key: 'name', fixed: 'left', align: 'center' },
-    { title: 'Age', width: 100, dataIndex: 'age', key: 'age', fixed: 'left', align: 'center' },
-    { title: 'Column 1', dataIndex: 'address', key: '1', width: 156, align: 'center' },
-    { title: 'Column 2', dataIndex: 'address', key: '2', width: 156, align: 'center' },
-    { title: 'Column 3', dataIndex: 'address', key: '3', width: 156, align: 'center' },
-    { title: 'Column 4', dataIndex: 'address', key: '4', width: 200, align: 'center' },
-    { title: 'Column 5', dataIndex: 'address', key: '5', width: 200, align: 'center' },
-    { title: 'Column 6', dataIndex: 'address', key: '6', width: 200, align: 'center' },
-    { title: 'Column 7', dataIndex: 'address', key: '7', width: 200, align: 'center' },
-    { title: 'Column 8', dataIndex: 'address', key: '8', width: 200, align: 'center' },
-    { title: 'Column 8', dataIndex: 'address', key: '9', width: 200, align: 'center' },
-    { title: 'Column 8', dataIndex: 'address', key: '10', width: 200, align: 'center' },
-    //   { title: 'Column 8', dataIndex: 'address', key: '11', width: 200 , align: 'center' },
-    //   { title: 'Column 8', dataIndex: 'address', key: '12', width: 200 , align: 'center' },
-    //   { title: 'Column 8', dataIndex: 'address', key: '13', width: 200 , align: 'center' },
-    {
-        title: 'Action',
-        key: 'operation',
-        fixed: 'right',
-        align: 'center',
-        width: 100,
-        slots: { customRender: 'action' },
-    },
+    { title: '序号', width: 100, dataIndex: 'name', key: 'name', fixed: 'left', align: 'center' },
+    { title: '品种', width: 100, dataIndex: 'age', key: 'age', fixed: 'left', align: 'center' },
+    { title: '种类', dataIndex: 'address', key: '1', width: 200, align: 'center' },
+    { title: '品牌', dataIndex: 'address', key: '2', width: 200, align: 'center' },
+    { title: '数量', dataIndex: 'address', key: '3', width: 200, align: 'center' },
+    { title: '价格', dataIndex: 'address', key: '4', width: 200, align: 'center' },
+    { title: '仓库', dataIndex: 'address', key: '5', width: 200, align: 'center' },
+    { title: '所在地', dataIndex: 'address', key: '6', width: 200, align: 'center' },
+    { title: '挂牌方', dataIndex: 'address', key: '7', width: 'auto', align: 'center' },
+    // {
+    //     title: 'Action',
+    //     key: 'operation',
+    //     fixed: 'right',
+    //     align: 'center',
+    //     width: 100,
+    //     slots: { customRender: 'action' },
+    // },
 ];
 
 interface DataItem {
@@ -102,6 +96,7 @@ export default defineComponent({
         firstMenu,
         quoteTable,
         orderTable,
+        thirdMenu,
     },
     setup() {
         initData(() => {
@@ -131,7 +126,22 @@ export default defineComponent({
 <style lang="less">
 .warehouse-trade {
     height: 100%;
+    height: 100%;
+    .flex;
+    flex-direction: column;
     position: relative;
+    .conditionIcon {
+        font-size: 18px;
+        color: @m-blue0;
+        width: 18px;
+        height: 18px;
+        line-height: 18px;
+        cursor: pointer;
+        .position(absolute, 8px, 14px, auto, auto);
+        &:hover {
+            color: rgba(@m-blue0, .8);
+        }
+    }
     .topBar {
         flex: 1;
     }