update

src/layout/components/bottom.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="layout-bottom">
+  <section :class="['layout-bottom', isShowBottom ? 'layout-bottom-all' : 'layout-bottom-hidden']">
     <CapitalInfo class="capital-info-container"></CapitalInfo>
     <main>
       <firstMenu :list="list"
@@ -8,11 +8,11 @@
         <div class="conditionIcon icon iconfont icon-shouqi"
              @click="openOrCloseBottom"></div>
       </firstMenu>
-      <template v-if="isShowBottom">
+      <div v-show="isShowBottom">
         <quoteTable :columns="columns"
                     :dataSource="data" />
         <thirdMenu></thirdMenu>
-      </template>
+      </div>
     </main>
   </section>
 </template>
@@ -101,10 +101,16 @@ export default defineComponent({
 });
 </script>
 <style lang="less">
+.layout-bottom-all {
+    height: 330px;
+}
+.layout-bottom-hidden {
+    height: 40px;
+}
 .layout-bottom {
     display: flex;
     width: 100%;
-    height: 330px;
+    transition: height 0.5s;
     overflow: hidden;
     .capital-info-container {
         width: 180px;

src/layout/index.vue

@@ -53,9 +53,6 @@ export default defineComponent({
     width: 100%;
     height: 100%;
     flex-direction: column;
-    .layout-bottom-container {
-        height: 329px;
-    }
     .sliderLayout {
         width: 100%;
         height: 4px;