样式修改

src/layout/components/bottom.vue

@@ -1,20 +1,17 @@
 <template>
-  <section :class="['layout-bottom', isShowBottom ? 'layout-bottom-all' : 'layout-bottom-hidden']">
-    <CapitalInfo class="capital-info-container"></CapitalInfo>
-    <main>
-      <firstMenu :list="orderList"
-                 :value="'title'"
-                 @selectMenu="selectMenu">
-        <div class="conditionIcon icon iconfont icon-shouqi"
-             @click="handleShowBottom"></div>
-      </firstMenu>
-      <div v-show="isShowBottom">
-        <component :is="componentId"
-                   v-if="componentId">
-        </component>
-      </div>
-    </main>
-  </section>
+    <section
+        :class="['layout-bottom', isShowBottom ? 'layout-bottom-all' : 'layout-bottom-hidden']"
+    >
+        <CapitalInfo class="capital-info-container"></CapitalInfo>
+        <main>
+            <firstMenu :list="orderList" :value="'title'" @selectMenu="selectMenu">
+                <div class="conditionIcon icon iconfont icon-shouqi" @click="handleShowBottom"></div>
+            </firstMenu>
+            <div v-show="isShowBottom">
+                <component :is="componentId" v-if="componentId"></component>
+            </div>
+        </main>
+    </section>
 </template>
 <script lang="ts">
 import { defineAsyncComponent, defineComponent, ref } from 'vue';
@@ -70,6 +67,7 @@ export default defineComponent({
     overflow: hidden;
     .capital-info-container {
         width: 180px;
+        border-right: 1px solid @m-black2;
     }
     main {
         max-width: calc(100% - 180px);

src/layout/components/top.vue

@@ -1,24 +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';
@@ -195,6 +196,7 @@ export default defineComponent({
         .m-layout-left {
             min-height: calc(100vh - 376px);
             background: @m-black4;
+            border-right: 1px solid @m-black2;
             overflow: hidden;
             .ant-layout-sider-children {
                 ul.ant-menu.ant-menu-inline.left-menu {