1

src/App.vue

@@ -31,7 +31,7 @@
           :native-scrollbar="false"
           bordered
         >
-          <n-menu v-model:value="activeKey" :options="menuOptions" @update:value="handleUpdateValue" />
+          <n-menu class="menu-class" style="--n-item-color-hover: rgb(243, 243, 245, .5);--n-item-text-color: white; --n-font-size: 14px;--n-item-icon-color: #fff;    --n-item-icon-color-active: #316c72;" v-model:value="activeKey" :options="menuOptions" @update:value="handleUpdateValue" />
         </n-layout-sider>
         <n-layout-content
           content-class="layoutContent"

src/styles/index.sass

@@ -14,4 +14,16 @@ pointer
   border-color: rgb(0, 21, 41) !important
 .n-scrollbar
   background: rgba(0, 21, 41, 1)
-  border-color: rgb(0, 21, 41) !important
+  border-color: rgb(0, 21, 41) !important
+.n-layout-sider
+  border-color: rgb(0, 21, 41) !important
+.n-layout-sider__border
+  background: rgba(0, 21, 41, 1) !important
+.n-drawer
+  background: rgba(0, 21, 41, 1) !important
+  color: #fff
+.n-menu-item-content-header
+  a
+   color: #fff !important
+.n-menu-item-content__icon
+  color: #fff

src/views/textToaudio/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="textToaudio m-4" >
-    <div class="tablehader flex justify-between items-center mb-2.5">
+  <div class="textToaudio p-4" >
+    <div class="tablehader flex justify-between items-center mb-2.5 text-wrap">
       <div class="title">文字语音互转</div>
       <div class="bottomList">
         <n-space>
@@ -127,4 +127,8 @@ code
   padding: 2px 4px
   border-radius: 4px
   color: #304455
+.textToaudio
+  min-height: 100%
+  border-left: 1px solid
+
 </style>