update

src/common/components/firstMenu/index.vue

@@ -1,18 +1,17 @@
 <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>
-        </div>
+            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>
 </template>
 
 <script lang="ts">
@@ -64,7 +63,8 @@ export default defineComponent({
 .first-menu {
     width: 100%;
     height: 40px;
-
+    display: flex;
+    justify-content: space-between;
     background-color: @m-black1;
     .a-menu_container {
         padding-top: 5px;

src/layout/components/bottom.vue

@@ -1,16 +1,23 @@
 <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>
+      <firstMenu :list="list"
+                 :value="'value'"
+                 @selectMenu="selectMenu">
+        <div class="conditionIcon icon iconfont icon-shouqi"
+             @click="openOrCloseBottom"></div>
+      </firstMenu>
+      <template v-if="isShowBottom">
+        <quoteTable :columns="columns"
+                    :dataSource="data" />
+        <thirdMenu></thirdMenu>
+      </template>
+    </main>
+  </section>
 </template>
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, ref } from 'vue';
 import CapitalInfo from '@/common/components/capitalInfo/index.vue';
 import firstMenu from '@/common/components/firstMenu/index.vue';
 import thirdMenu from '@/common/components/thirdMenu/index.vue';
@@ -62,6 +69,14 @@ function handleMenu() {
     function selectMenu(item: any) {}
     return { list, selectMenu };
 }
+// 控制底部打开与关闭
+function handleBottom() {
+    const isShowBottom = ref<boolean>(true);
+    function openOrCloseBottom() {
+        isShowBottom.value = !isShowBottom.value;
+    }
+    return { isShowBottom, openOrCloseBottom };
+}
 
 export default defineComponent({
     name: 'layout-top',
@@ -73,11 +88,14 @@ export default defineComponent({
     },
     setup() {
         const { list, selectMenu } = handleMenu();
+        const { isShowBottom, openOrCloseBottom } = handleBottom();
         return {
             columns,
             data,
             list,
             selectMenu,
+            isShowBottom,
+            openOrCloseBottom,
         };
     },
 });
@@ -102,11 +120,10 @@ export default defineComponent({
             font-size: 16px;
             color: @m-grey1;
             width: 16px;
-            height: 16px;
-            line-height: 16px;
             cursor: pointer;
-            .position(absolute, 8px, 14px, auto, auto);
-            z-index: 2;
+            height: 40px;
+            line-height: 40px;
+            margin-right: 10px;
             &:hover {
                 color: rgba(@m-grey1, 0.8);
             }

src/layout/index.vue

@@ -1,13 +1,12 @@
 <template>
   <div class="layout">
     <LayoutTop @chooseMenu="chooseMenu" />
-    <!-- <template> -->
-    <!--v-if="isShowBottomPart" -->
-    <div class="sliderLayout">
-      <div class="shortLine"></div>
-    </div>
-    <LayoutBottom />
-    <!-- </template> -->
+    <template v-if="true">
+      <div class="sliderLayout">
+        <div class="shortLine"></div>
+      </div>
+      <LayoutBottom />
+    </template>
   </div>
 </template>
 <script lang="ts">
@@ -41,6 +40,7 @@ export default defineComponent({
             if (menuList.value.find((e: OperationTabMenu) => e.code === 'bottom')) {
                 isShowBottomPart.value = true;
             }
+            isShowBottomPart.value = true;
         });
 
         return { isShowBottomPart, chooseMenu };