diff --git a/src/components/business/loading-empty-wrapper.vue b/src/components/business/loading-empty-wrapper.vue
index b331ae26..6c49aac2 100644
--- a/src/components/business/loading-empty-wrapper.vue
+++ b/src/components/business/loading-empty-wrapper.vue
@@ -54,7 +54,7 @@ const props = withDefaults(defineProps<Props>(), {
   placeholderClass: 'bg-white dark:bg-dark transition-background-color duration-300 ease-in-out',
   emptyDesc: '暂无数据',
   iconClass: 'text-320px text-primary',
-  descClass: 'text-16px text-[#666]',
+  descClass: 'text-16px text-#666',
   showNetworkReload: false
 });
 
diff --git a/src/components/common/dark-mode-container.vue b/src/components/common/dark-mode-container.vue
index f2be2d14..5bb8714f 100644
--- a/src/components/common/dark-mode-container.vue
+++ b/src/components/common/dark-mode-container.vue
@@ -1,7 +1,7 @@
 <template>
   <div
-    class="dark:bg-[#18181c] dark:text-white dark:text-opacity-82 transition-all"
-    :class="inverted ? 'bg-[#001428] text-white' : 'bg-white text-[#333639]'"
+    class="dark:bg-dark dark:text-white dark:text-opacity-82 transition-all"
+    :class="inverted ? 'bg-#001428 text-white' : 'bg-white text-#333639'"
   >
     <slot></slot>
   </div>
diff --git a/src/components/common/exception-base.vue b/src/components/common/exception-base.vue
index 5cc3cd3d..78744caf 100644
--- a/src/components/common/exception-base.vue
+++ b/src/components/common/exception-base.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="flex-col-center wh-full">
-    <div class="text-400px text-primary">
+  <div class="flex-col-center gap-24px min-h-520px wh-full overflow-hidden">
+    <div class="flex text-400px text-primary">
       <icon-local-no-permission v-if="type === '403'" />
       <icon-local-not-found v-if="type === '404'" />
       <icon-local-service-error v-if="type === '500'" />
diff --git a/src/components/common/hover-container.vue b/src/components/common/hover-container.vue
index 19348b8b..1d198e23 100644
--- a/src/components/common/hover-container.vue
+++ b/src/components/common/hover-container.vue
@@ -2,14 +2,14 @@
   <div v-if="showTooltip">
     <n-tooltip :placement="placement" trigger="hover">
       <template #trigger>
-        <div class="flex-center h-full cursor-pointer dark:hover:bg-[#333]" :class="contentClassName">
+        <div class="flex-center h-full cursor-pointer dark:hover:bg-#333" :class="contentClassName">
           <slot></slot>
         </div>
       </template>
       {{ tooltipContent }}
     </n-tooltip>
   </div>
-  <div v-else class="flex-center cursor-pointer dark:hover:bg-[#333]" :class="contentClassName">
+  <div v-else class="flex-center cursor-pointer dark:hover:bg-#333" :class="contentClassName">
     <slot></slot>
   </div>
 </template>
@@ -41,7 +41,7 @@ const props = withDefaults(defineProps<Props>(), {
 const showTooltip = computed(() => Boolean(props.tooltipContent));
 
 const contentClassName = computed(
-  () => `${props.contentClass} ${props.inverted ? 'hover:bg-primary' : 'hover:bg-[#f6f6f6]'}`
+  () => `${props.contentClass} ${props.inverted ? 'hover:bg-primary' : 'hover:bg-#f6f6f6'}`
 );
 </script>
 
diff --git a/src/components/custom/icon-select.vue b/src/components/custom/icon-select.vue
index ac6bdaf1..454501f3 100644
--- a/src/components/custom/icon-select.vue
+++ b/src/components/custom/icon-select.vue
@@ -14,7 +14,7 @@
       <span v-for="iconItem in iconsList" :key="iconItem" @click="handleChange(iconItem)">
         <svg-icon
           :icon="iconItem"
-          class="border-1px border-[#d9d9d9] text-30px m-2px p-5px cursor-pointer"
+          class="border-1px border-#d9d9d9 text-30px m-2px p-5px cursor-pointer"
           :class="{ 'border-primary': modelValue === iconItem }"
         />
       </span>
diff --git a/src/layouts/basic-layout/index.vue b/src/layouts/basic-layout/index.vue
index cd919cda..35e77f34 100644
--- a/src/layouts/basic-layout/index.vue
+++ b/src/layouts/basic-layout/index.vue
@@ -15,6 +15,7 @@
     :sider-collapsed-width="siderCollapsedWidth"
     :footer-visible="theme.footer.visible"
     :fixed-footer="theme.footer.fixed"
+    :right-footer="theme.footer.right"
   >
     <template #header>
       <global-header v-bind="headerProps" />
@@ -48,4 +49,12 @@ const theme = useThemeStore();
 const { mode, headerProps, siderVisible, siderWidth, siderCollapsedWidth } = useBasicLayout();
 </script>
 
-<style scoped></style>
+<style lang="scss">
+#__SCROLL_EL_ID__ {
+  @include scrollbar(8px, #e1e1e1);
+}
+
+.dark #__SCROLL_EL_ID__ {
+  @include scrollbar(8px, #555);
+}
+</style>
diff --git a/src/layouts/common/global-content/index.vue b/src/layouts/common/global-content/index.vue
index a75b09a3..0a32bfed 100644
--- a/src/layouts/common/global-content/index.vue
+++ b/src/layouts/common/global-content/index.vue
@@ -13,7 +13,7 @@
           v-if="app.reloadFlag"
           :key="route.fullPath"
           :class="{ 'p-16px': showPadding }"
-          class="flex-grow bg-[#f6f9f8] dark:bg-[#101014] transition duration-300 ease-in-out"
+          class="flex-grow bg-#f6f9f8 dark:bg-#101014 transition duration-300 ease-in-out"
         />
       </keep-alive>
     </transition>
diff --git a/src/layouts/common/global-footer/index.vue b/src/layouts/common/global-footer/index.vue
index c01710fc..abd1ef08 100644
--- a/src/layouts/common/global-footer/index.vue
+++ b/src/layouts/common/global-footer/index.vue
@@ -1,11 +1,15 @@
 <template>
-  <dark-mode-container class="flex-center h-full">
+  <dark-mode-container class="flex-center h-full" :inverted="theme.footer.inverted">
     <span>Copyright ©2021 Soybean Admin</span>
   </dark-mode-container>
 </template>
 
 <script setup lang="ts">
+import { useThemeStore } from '@/store';
+
 defineOptions({ name: 'GlobalFooter' });
+
+const theme = useThemeStore();
 </script>
 
 <style scoped></style>
diff --git a/src/layouts/common/global-header/components/message-list.vue b/src/layouts/common/global-header/components/message-list.vue
index a8845aa1..32c7f845 100644
--- a/src/layouts/common/global-header/components/message-list.vue
+++ b/src/layouts/common/global-header/components/message-list.vue
@@ -4,7 +4,7 @@
       <n-list-item
         v-for="(item, index) in list"
         :key="item.id"
-        class="hover:bg-[#f6f6f6] dark:hover:bg-dark cursor-pointer"
+        class="hover:bg-#f6f6f6 dark:hover:bg-dark cursor-pointer"
         @click="handleRead(index)"
       >
         <n-thing class="px-15px" :class="{ 'opacity-30': item.isRead }">
diff --git a/src/layouts/common/global-search/components/search-modal.vue b/src/layouts/common/global-search/components/search-modal.vue
index 8b6d40d9..b559b449 100644
--- a/src/layouts/common/global-search/components/search-modal.vue
+++ b/src/layouts/common/global-search/components/search-modal.vue
@@ -12,7 +12,7 @@
     <n-input-group>
       <n-input ref="inputRef" v-model:value="keyword" clearable placeholder="请输入关键词搜索" @input="handleSearch">
         <template #prefix>
-          <icon-uil-search class="text-15px text-[#c2c2c2]" />
+          <icon-uil-search class="text-15px text-#c2c2c2" />
         </template>
       </n-input>
       <n-button v-if="isMobile" type="primary" ghost @click="handleClose">取消</n-button>
diff --git a/src/layouts/common/global-search/components/search-result.vue b/src/layouts/common/global-search/components/search-result.vue
index 38b58bde..68eed3ab 100644
--- a/src/layouts/common/global-search/components/search-result.vue
+++ b/src/layouts/common/global-search/components/search-result.vue
@@ -3,7 +3,7 @@
     <div class="pb-12px">
       <template v-for="item in options" :key="item.path">
         <div
-          class="bg-[#e5e7eb] dark:bg-dark h-56px mt-8px px-14px rounded-4px cursor-pointer flex-y-center justify-between"
+          class="bg-#e5e7eb dark:bg-dark h-56px mt-8px px-14px rounded-4px cursor-pointer flex-y-center justify-between"
           :style="{
             background: item.path === active ? theme.themeColor : '',
             color: item.path === active ? '#fff' : ''
diff --git a/src/layouts/common/global-sider/components/vertical-mix-sider/components/mix-menu-drawer.vue b/src/layouts/common/global-sider/components/vertical-mix-sider/components/mix-menu-drawer.vue
index 00a1cdf1..f743f998 100644
--- a/src/layouts/common/global-sider/components/vertical-mix-sider/components/mix-menu-drawer.vue
+++ b/src/layouts/common/global-sider/components/vertical-mix-sider/components/mix-menu-drawer.vue
@@ -5,6 +5,7 @@
   >
     <dark-mode-container
       class="drawer-shadow absolute-lt flex-col-stretch h-full nowrap-hidden"
+      :inverted="theme.sider.inverted"
       :style="{ width: showDrawer ? theme.sider.mixChildMenuWidth + 'px' : '0px' }"
     >
       <header class="header-height flex-y-center justify-between" :style="{ height: theme.header.height + 'px' }">
@@ -20,6 +21,7 @@
           :options="menus"
           :expanded-keys="expandedKeys"
           :indent="18"
+          :inverted="!theme.darkMode && theme.sider.inverted"
           @update:value="handleUpdateMenu"
           @update:expanded-keys="handleUpdateExpandedKeys"
         />
diff --git a/src/layouts/common/global-sider/components/vertical-sider/components/vertical-menu.vue b/src/layouts/common/global-sider/components/vertical-sider/components/vertical-menu.vue
index 25c0e450..b5932cc0 100644
--- a/src/layouts/common/global-sider/components/vertical-sider/components/vertical-menu.vue
+++ b/src/layouts/common/global-sider/components/vertical-sider/components/vertical-menu.vue
@@ -8,7 +8,7 @@
       :options="menus"
       :expanded-keys="expandedKeys"
       :indent="18"
-      :inverted="theme.sider.inverted"
+      :inverted="!theme.darkMode && theme.sider.inverted"
       @update:value="handleUpdateMenu"
       @update:expanded-keys="handleUpdateExpandedKeys"
     />
diff --git a/src/layouts/common/setting-drawer/components/dark-mode/index.vue b/src/layouts/common/setting-drawer/components/dark-mode/index.vue
index 5e21f08d..1d7992ea 100644
--- a/src/layouts/common/setting-drawer/components/dark-mode/index.vue
+++ b/src/layouts/common/setting-drawer/components/dark-mode/index.vue
@@ -21,12 +21,15 @@
         </template>
       </n-switch>
     </setting-menu>
-    <setting-menu label="侧边栏深色主题">
+    <setting-menu label="侧边栏深色">
       <n-switch :value="theme.sider.inverted" @update:value="theme.setSiderInverted" />
     </setting-menu>
-    <setting-menu label="头部深色主题">
+    <setting-menu label="头部深色">
       <n-switch :value="theme.header.inverted" @update:value="theme.setHeaderInverted" />
     </setting-menu>
+    <setting-menu label="底部深色">
+      <n-switch :value="theme.footer.inverted" @update:value="theme.setFooterInverted" />
+    </setting-menu>
   </n-space>
 </template>
 
diff --git a/src/layouts/common/setting-drawer/components/layout-mode/components/layout-checkbox.vue b/src/layouts/common/setting-drawer/components/layout-mode/components/layout-checkbox.vue
index 23f0448f..73a55a63 100644
--- a/src/layouts/common/setting-drawer/components/layout-mode/components/layout-checkbox.vue
+++ b/src/layouts/common/setting-drawer/components/layout-mode/components/layout-checkbox.vue
@@ -6,8 +6,8 @@
     <n-tooltip :placement="activeConfig.placement" trigger="hover">
       <template #trigger>
         <div class="layout-checkbox__shadow relative w-56px h-48px bg-white rounded-4px overflow-hidden">
-          <div class="absolute-lt bg-[#273352]" :class="activeConfig.menuClass"></div>
-          <div class="absolute-rb bg-[#f0f2f5]" :class="activeConfig.mainClass"></div>
+          <div class="absolute-lt bg-#273352" :class="activeConfig.menuClass"></div>
+          <div class="absolute-rb bg-#f0f2f5" :class="activeConfig.mainClass"></div>
         </div>
       </template>
       <span>{{ label }}</span>
diff --git a/src/layouts/common/setting-drawer/components/page-func/index.vue b/src/layouts/common/setting-drawer/components/page-func/index.vue
index b0cfe8e2..b9e7c6e2 100644
--- a/src/layouts/common/setting-drawer/components/page-func/index.vue
+++ b/src/layouts/common/setting-drawer/components/page-func/index.vue
@@ -61,11 +61,14 @@
         @update:value="theme.setMixSiderWidth"
       />
     </setting-menu>
+    <setting-menu label="显示底部">
+      <n-switch :value="theme.footer.visible" @update:value="theme.setFooterVisible" />
+    </setting-menu>
     <setting-menu label="固定底部">
       <n-switch :value="theme.footer.fixed" @update:value="theme.setFooterIsFixed" />
     </setting-menu>
-    <setting-menu label="显示底部">
-      <n-switch :value="theme.footer.visible" @update:value="theme.setFooterVisible" />
+    <setting-menu label="底部居右">
+      <n-switch :value="theme.footer.right" @update:value="theme.setFooterIsRight" />
     </setting-menu>
   </n-space>
 </template>
diff --git a/src/settings/theme.json b/src/settings/theme.json
index 65a81792..a812847e 100644
--- a/src/settings/theme.json
+++ b/src/settings/theme.json
@@ -120,9 +120,11 @@
     ]
   },
   "footer": {
+    "visible": true,
     "fixed": false,
+    "right": true,
     "height": 48,
-    "visible": true
+    "inverted": false
   },
   "page": {
     "animate": true,
diff --git a/src/settings/theme.ts b/src/settings/theme.ts
index ff1c5c07..b678cb94 100644
--- a/src/settings/theme.ts
+++ b/src/settings/theme.ts
@@ -83,9 +83,11 @@ const defaultThemeSetting: Theme.Setting = {
     horizontalPositionList: themeHorizontalMenuPositionOptions
   },
   footer: {
+    visible: true,
     fixed: false,
+    right: true,
     height: 48,
-    visible: true
+    inverted: false
   },
   page: {
     animate: true,
diff --git a/src/store/modules/theme/index.ts b/src/store/modules/theme/index.ts
index b61a4c7a..35be6f11 100644
--- a/src/store/modules/theme/index.ts
+++ b/src/store/modules/theme/index.ts
@@ -145,17 +145,25 @@ export const useThemeStore = defineStore('theme-store', {
     setHorizontalMenuPosition(position: UnionKey.ThemeHorizontalMenuPosition) {
       this.menu.horizontalPosition = position;
     },
+    /** 设置底部是否显示 */
+    setFooterVisible(isVisible: boolean) {
+      this.footer.visible = isVisible;
+    },
     /** 设置底部是否固定 */
     setFooterIsFixed(isFixed: boolean) {
       this.footer.fixed = isFixed;
     },
+    /** 设置底部是否固定 */
+    setFooterIsRight(right: boolean) {
+      this.footer.right = right;
+    },
     /** 设置底部高度 */
     setFooterHeight(height: number) {
       this.footer.height = height;
     },
-    /** 设置底部是否显示 */
-    setFooterVisible(isVisible: boolean) {
-      this.footer.visible = isVisible;
+    /** 设置底部高度 */
+    setFooterInverted(inverted: boolean) {
+      this.footer.inverted = inverted;
     },
     /** 设置切换页面时是否过渡动画 */
     setPageIsAnimate(animate: boolean) {
diff --git a/src/styles/css/global.css b/src/styles/css/global.css
index 6fbfc094..d5038769 100644
--- a/src/styles/css/global.css
+++ b/src/styles/css/global.css
@@ -1,6 +1,5 @@
 @import "./transition.css";
 @import "./reset.css";
-@import "./scrollbar.css";
 
 html,
 body,
diff --git a/src/styles/css/scrollbar.css b/src/styles/css/scrollbar.css
deleted file mode 100644
index 8119c70b..00000000
--- a/src/styles/css/scrollbar.css
+++ /dev/null
@@ -1,52 +0,0 @@
-html {
-	scrollbar-width: thin;
-	scrollbar-color: #e1e1e1 transparent;
-}
-
-/*---滚动条默认显示样式--*/
-html::-webkit-scrollbar-thumb {
-	background-color: #e1e1e1;
-	border-radius: 8px;
-}
-/*---鼠标点击滚动条显示样式--*/
-html::-webkit-scrollbar-thumb:hover {
-	background-color: #e1e1e1;
-	border-radius: 8px;
-}
-/*---滚动条大小--*/
-html::-webkit-scrollbar {
-	width: 8px;
-	height: 8px;
-}
-/*---滚动框背景样式--*/
-html::-webkit-scrollbar-track-piece {
-	background-color: rgba(0, 0, 0, 0);
-	border-radius: 0;
-}
-
-html.dark {
-	scrollbar-width: thin;
-	scrollbar-color: #555 transparent;
-}
-
-/*---滚动条默认显示样式--*/
-html.dark::-webkit-scrollbar-thumb {
-	background-color: #555;
-	border-radius: 8px;
-}
-/*---鼠标点击滚动条显示样式--*/
-html.dark::-webkit-scrollbar-thumb:hover {
-	background-color: #555;
-	border-radius: 8px;
-}
-/*---滚动条大小--*/
-html.dark::-webkit-scrollbar {
-	width: 8px;
-	height: 8px;
-}
-
-/*---滚动框背景样式--*/
-html.dark::-webkit-scrollbar-track-piece {
-	background-color: rgba(0, 0, 0, 0);
-	border-radius: 0;
-}
diff --git a/src/styles/scss/scrollbar.scss b/src/styles/scss/scrollbar.scss
index 169f91b3..ae9edb0d 100644
--- a/src/styles/scss/scrollbar.scss
+++ b/src/styles/scss/scrollbar.scss
@@ -1,4 +1,7 @@
 @mixin scrollbar($size: 8px, $color: #d9d9d9) {
+	scrollbar-width: thin;
+	scrollbar-color: $color transparent;
+
 	&::-webkit-scrollbar-thumb {
 		background-color: $color;
 		border-radius: $size;
diff --git a/src/typings/system.d.ts b/src/typings/system.d.ts
index 527c48da..587cbbb5 100644
--- a/src/typings/system.d.ts
+++ b/src/typings/system.d.ts
@@ -200,12 +200,16 @@ declare namespace Theme {
 
   /** 底部样式 */
   interface Footer {
-    /** 是否固定底部 */
-    fixed: boolean;
-    /** 底部高度 */
-    height: number;
     /* 底部是否可见 */
     visible: boolean;
+    /** 是否固定底部 */
+    fixed: boolean;
+    /** 底部是否居右(顶部混合菜单模式有效) */
+    right: boolean;
+    /** 底部高度 */
+    height: number;
+    /** 底部反转色 */
+    inverted: boolean;
   }
 
   /** 页面样式 */
diff --git a/src/views/_builtin/login/components/pwd-login/components/other-account.vue b/src/views/_builtin/login/components/pwd-login/components/other-account.vue
index 64f6dd79..b7ce0342 100644
--- a/src/views/_builtin/login/components/pwd-login/components/other-account.vue
+++ b/src/views/_builtin/login/components/pwd-login/components/other-account.vue
@@ -1,6 +1,6 @@
 <template>
   <n-space :vertical="true">
-    <n-divider class="!mb-0 text-14px text-[#666]">其他账户登录</n-divider>
+    <n-divider class="!mb-0 text-14px text-#666">其他账户登录</n-divider>
     <n-space justify="center">
       <n-button
         v-for="item in accounts"
diff --git a/src/views/_builtin/login/components/pwd-login/components/other-login.vue b/src/views/_builtin/login/components/pwd-login/components/other-login.vue
index eb377363..7ffdd79f 100644
--- a/src/views/_builtin/login/components/pwd-login/components/other-login.vue
+++ b/src/views/_builtin/login/components/pwd-login/components/other-login.vue
@@ -1,9 +1,9 @@
 <template>
   <n-space :vertical="true">
-    <n-divider class="!mb-0 text-14px text-[#666]">其他登录方式</n-divider>
+    <n-divider class="!mb-0 text-14px text-#666">其他登录方式</n-divider>
     <div class="flex-center">
       <n-button :text="true">
-        <icon-mdi-wechat class="text-22px text-[#888] hover:text-[#52BF5E]" />
+        <icon-mdi-wechat class="text-22px text-#888 hover:text-#52BF5E" />
       </n-button>
     </div>
   </n-space>
diff --git a/src/views/component/table/index.vue b/src/views/component/table/index.vue
index cd116ba4..8f18473d 100644
--- a/src/views/component/table/index.vue
+++ b/src/views/component/table/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="h-full overflow-hidden">
     <n-card title="表格" class="h-full shadow-sm rounded-16px">
       <n-space :vertical="true">
         <n-space>
diff --git a/src/views/dashboard/analysis/components/bottom-part/index.vue b/src/views/dashboard/analysis/components/bottom-part/index.vue
index 2e1d641a..3fb9fe42 100644
--- a/src/views/dashboard/analysis/components/bottom-part/index.vue
+++ b/src/views/dashboard/analysis/components/bottom-part/index.vue
@@ -1,14 +1,14 @@
 <template>
   <n-grid :x-gap="16" :y-gap="16" :item-responsive="true">
     <n-grid-item span="0:24 640:24 1024:8">
-      <n-card title="时间线" :bordered="false" class="rounded-16px shadow-sm">
+      <n-card title="时间线" :bordered="false" class="h-full rounded-16px shadow-sm">
         <n-timeline>
           <n-timeline-item v-for="item in timelines" :key="item.type" v-bind="item" />
         </n-timeline>
       </n-card>
     </n-grid-item>
     <n-grid-item span="0:24 640:24 1024:16">
-      <n-card title="表格" :bordered="false" class="rounded-16px shadow-sm">
+      <n-card title="表格" :bordered="false" class="h-full rounded-16px shadow-sm">
         <n-data-table size="small" :columns="columns" :data="tableData" />
       </n-card>
     </n-grid-item>
diff --git a/src/views/dashboard/analysis/components/top-chart/index.vue b/src/views/dashboard/analysis/components/top-chart/index.vue
index e72b1d4b..c7048b7e 100644
--- a/src/views/dashboard/analysis/components/top-chart/index.vue
+++ b/src/views/dashboard/analysis/components/top-chart/index.vue
@@ -4,15 +4,15 @@
       <n-card :bordered="false" class="rounded-16px shadow-sm">
         <div class="w-full h-360px py-12px">
           <h3 class="text-16px font-bold">Dashboard</h3>
-          <p class="text-[#aaa]">Overview Of Lasted Month</p>
+          <p class="text-#aaa">Overview Of Lasted Month</p>
           <h3 class="pt-32px text-24px font-bold">
             <count-to prefix="$" :start-value="0" :end-value="7754" />
           </h3>
-          <p class="text-[#aaa]">Current Month Earnings</p>
+          <p class="text-#aaa">Current Month Earnings</p>
           <h3 class="pt-32px text-24px font-bold">
             <count-to :start-value="0" :end-value="1234" />
           </h3>
-          <p class="text-[#aaa]">Current Month Sales</p>
+          <p class="text-#aaa">Current Month Sales</p>
           <n-button class="mt-24px whitespace-pre-wrap" type="primary">Last Month Summary</n-button>
         </div>
       </n-card>
diff --git a/src/views/dashboard/workbench/components/workbench-header/index.vue b/src/views/dashboard/workbench/components/workbench-header/index.vue
index 9e2985f9..3c57cc24 100644
--- a/src/views/dashboard/workbench/components/workbench-header/index.vue
+++ b/src/views/dashboard/workbench/components/workbench-header/index.vue
@@ -5,7 +5,7 @@
         <icon-local-avatar class="text-70px" />
         <div class="pl-12px">
           <h3 class="text-18px font-semibold">早安，{{ auth.userInfo.userName }}, 今天又是充满活力的一天！</h3>
-          <p class="leading-30px text-[#999]">今日多云转晴，20℃ - 25℃！</p>
+          <p class="leading-30px text-#999">今日多云转晴，20℃ - 25℃！</p>
         </div>
       </div>
       <n-space :size="24" :wrap="false">
diff --git a/src/views/dashboard/workbench/components/workbench-main/components/shortcuts-card.vue b/src/views/dashboard/workbench/components/workbench-main/components/shortcuts-card.vue
index ca847da5..b4ea695f 100644
--- a/src/views/dashboard/workbench/components/workbench-main/components/shortcuts-card.vue
+++ b/src/views/dashboard/workbench/components/workbench-main/components/shortcuts-card.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex-col-center h-120px p-12px border-1px border-[#efeff5] dark:border-[#ffffff17] rounded-4px hover:shadow-sm cursor-pointer"
+    class="flex-col-center h-120px p-12px border-1px border-#efeff5 dark:border-#ffffff17 rounded-4px hover:shadow-sm cursor-pointer"
   >
     <svg-icon :icon="icon" :style="{ color: iconColor }" class="text-30px" />
     <p class="py-8px text-16px">{{ label }}</p>
diff --git a/src/views/dashboard/workbench/components/workbench-main/components/technology-card.vue b/src/views/dashboard/workbench/components/workbench-main/components/technology-card.vue
index 362fccc5..018622d6 100644
--- a/src/views/dashboard/workbench/components/workbench-main/components/technology-card.vue
+++ b/src/views/dashboard/workbench/components/workbench-main/components/technology-card.vue
@@ -1,13 +1,13 @@
 <template>
   <div
-    class="h-120px p-4px border-1px border-[#efeff5] dark:border-[#ffffff17] rounded-4px hover:shadow-sm cursor-pointer"
+    class="h-120px p-4px border-1px border-#efeff5 dark:border-#ffffff17 rounded-4px hover:shadow-sm cursor-pointer"
     @click="handleOpenSite"
   >
     <header class="flex-y-center">
       <svg-icon :icon="icon" :style="{ color: iconColor }" class="text-30px" />
       <h3 class="pl-12px text-18px font-semibold">{{ name }}</h3>
     </header>
-    <p class="py-8px h-56px text-[#999]">{{ description }}</p>
+    <p class="py-8px h-56px text-#999">{{ description }}</p>
     <div class="flex justify-end">
       <span>{{ author }}</span>
     </div>
diff --git a/src/views/management/user/index.vue b/src/views/management/user/index.vue
index f7a6e324..d27769cd 100644
--- a/src/views/management/user/index.vue
+++ b/src/views/management/user/index.vue
@@ -1,31 +1,33 @@
 <template>
-  <n-card title="用户管理" :bordered="false" class="rounded-16px shadow-sm">
-    <n-space class="pb-12px" justify="space-between">
-      <n-space>
-        <n-button type="primary" @click="handleAddTable">
-          <icon-ic-round-plus class="mr-4px text-20px" />
-          新增
-        </n-button>
-        <n-button type="error">
-          <icon-ic-round-delete class="mr-4px text-20px" />
-          删除
-        </n-button>
-        <n-button type="success">
-          <icon-uil:export class="mr-4px text-20px" />
-          导出Excel
-        </n-button>
+  <div class="h-full overflow-hidden">
+    <n-card title="用户管理" :bordered="false" class="rounded-16px shadow-sm">
+      <n-space class="pb-12px" justify="space-between">
+        <n-space>
+          <n-button type="primary" @click="handleAddTable">
+            <icon-ic-round-plus class="mr-4px text-20px" />
+            新增
+          </n-button>
+          <n-button type="error">
+            <icon-ic-round-delete class="mr-4px text-20px" />
+            删除
+          </n-button>
+          <n-button type="success">
+            <icon-uil:export class="mr-4px text-20px" />
+            导出Excel
+          </n-button>
+        </n-space>
+        <n-space align="center" :size="18">
+          <n-button size="small" type="primary" @click="getTableData">
+            <icon-mdi-refresh class="mr-4px text-16px" :class="{ 'animate-spin': loading }" />
+            刷新表格
+          </n-button>
+          <column-setting v-model:columns="columns" />
+        </n-space>
       </n-space>
-      <n-space align="center" :size="18">
-        <n-button size="small" type="primary" @click="getTableData">
-          <icon-mdi-refresh class="mr-4px text-16px" :class="{ 'animate-spin': loading }" />
-          刷新表格
-        </n-button>
-        <column-setting v-model:columns="columns" />
-      </n-space>
-    </n-space>
-    <n-data-table :columns="columns" :data="tableData" :loading="loading" :pagination="pagination" />
-    <table-action-modal v-model:visible="visible" :type="modalType" :edit-data="editData" />
-  </n-card>
+      <n-data-table :columns="columns" :data="tableData" :loading="loading" :pagination="pagination" />
+      <table-action-modal v-model:visible="visible" :type="modalType" :edit-data="editData" />
+    </n-card>
+  </div>
 </template>
 
 <script setup lang="tsx">
diff --git a/src/views/plugin/swiper/index.vue b/src/views/plugin/swiper/index.vue
index de34a91f..86eabf20 100644
--- a/src/views/plugin/swiper/index.vue
+++ b/src/views/plugin/swiper/index.vue
@@ -11,7 +11,7 @@
           <h3 class="py-24px text-24px font-bold">{{ item.label }}</h3>
           <swiper v-bind="item.options">
             <swiper-slide v-for="i in 5" :key="i">
-              <div class="flex-center h-240px border-1px border-[#999] text-18px font-bold">Slide{{ i }}</div>
+              <div class="flex-center h-240px border-1px border-#999 text-18px font-bold">Slide{{ i }}</div>
             </swiper-slide>
           </swiper>
         </div>