Browse Source

修改侧边栏样式

lex 1 year ago
parent
commit
22c77c5713
2 changed files with 12 additions and 3 deletions
  1. 9 0
      src/components/layout/index.module.less
  2. 3 3
      src/components/layout/layoutSilder.tsx

+ 9 - 0
src/components/layout/index.module.less

@@ -42,6 +42,15 @@
 
   .sliderList {
     margin-top: 10px;
+    max-height: calc(100vh - 92px);
+
+    :global {
+      .n-scrollbar-content {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+      }
+    }
   }
 }
 

+ 3 - 3
src/components/layout/layoutSilder.tsx

@@ -1,5 +1,5 @@
 import { defineComponent, onMounted, reactive } from 'vue';
-import { NImage } from 'naive-ui';
+import { NImage, NScrollbar } from 'naive-ui';
 import styles from './index.module.less';
 import logo from './images/logo.png';
 import classIcon from './images/classIcon.png';
@@ -166,11 +166,11 @@ export default defineComponent({
               src={logo}
               previewDisabled={true}></NImage>
           </div>
-          <div class={styles.sliderList}>
+          <NScrollbar class={styles.sliderList}>
             {itemInfoList.map((item: any) => (
               <SilderItem onCheckNavBar={checkNavBar} item={item} />
             ))}
-          </div>
+          </NScrollbar>
         </div>
       </>
     );