diff --git a/src/Layout/footer/index.vue b/src/Layout/footer/index.vue
index 1814090..7c9d95c 100644
--- a/src/Layout/footer/index.vue
+++ b/src/Layout/footer/index.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="footer">
+  <div class="footer" :class="{ 'dark-layout': useThemeStore.isDark }">
     <div class="footer-nav">
       <div v-for="item in NewList" :key="item.id" @click="toNewsDetail(item.id)">
         <div class="item">
-            {{ item.title }}
-          </div>
+          {{ item.title }}
+        </div>
       </div>
     </div>
     <div class="copyright">源码自然版权所有@2023 湘豫CP备 19005950号-1</div>
@@ -18,7 +18,9 @@
 import { ref} from 'vue'
 import { queryNewListApi } from '@/api/news'
 import { useRouter } from 'vue-router'
+import themeStore from '@/store/module/theme'
 
+const useThemeStore = themeStore()
 const NewList = ref<any>([])
 const getNewList = async () =>{
   const res:any = await queryNewListApi()
@@ -32,25 +34,23 @@ const router = useRouter()
 const toNewsDetail = (id: number) => {
   router.push({
     path: '/detail/' + id,
-
   })
 }
 </script>
 
 <style lang="scss" scoped>
 .footer {
-  // position: fixed;
-  // bottom: 0;
-  height: 300px;
   width: 100%;
-  // background-color: #252527;
+  height: 300px;
   background: url('../../assets//images/footer.png') no-repeat;
   background-size: cover;
   display: flex;
   flex-direction: column;
   align-items: center;
-  // justify-content: center;
-  color: #333333;
+  color: var(--text-color);
+  position: relative;
+  transition: all 0.3s;
+
   .footer-nav {
     display: flex;
     margin-top: 120px;
@@ -59,6 +59,7 @@ const toNewsDetail = (id: number) => {
       text-align: center;
       font-size: 18px;
       cursor: pointer;
+      transition: all 0.3s;
     }
     .item:nth-child(2) {
       border-left: 1px solid #333333;
@@ -68,11 +69,73 @@ const toNewsDetail = (id: number) => {
       color: #0bd7c6;
     }
   }
+
   .copyright {
     margin-top: 80px;
   }
+
   .report {
     margin-top: 0.1042rem;
   }
+
+  &.dark-layout {
+    background: var(--card-bg-color);
+    border-top: 1px solid var(--border-color);
+    color: var(--text-color);
+    // height: auto;
+    padding: 60px 0;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 1420px;
+      height: 3px;
+      background: var(--gradient-color);
+    }
+
+    .footer-nav {
+      position: absolute;
+      left: calc(50% - 1420px/2 );
+      top: 60px;
+      flex-direction: column !important;
+      gap: 20px;
+      margin-top: 0;
+
+      .item {
+        width: auto;
+        padding: 0 20px;
+        border: none;
+        opacity: 0.9;
+        transition: all 0.3s;
+        color: var(--text-color);
+        font-weight: 500;
+        text-align: left;
+
+        &:hover {
+          color: var(--primary-color);
+          opacity: 1;
+        }
+      }
+    }
+
+    .copyright, .report {
+      position: absolute;
+      left: calc(50% - 1420px/2 + 20px);
+      color: var(--text-color);
+      opacity: 0.8;
+      font-weight: 500;
+    }
+
+    .copyright {
+      top: 140px;
+    }
+
+    .report {
+      top: 160px;
+    }
+  }
 }
 </style>
diff --git a/src/Layout/tabbar/index.vue b/src/Layout/tabbar/index.vue
index 45ab916..165407e 100644
--- a/src/Layout/tabbar/index.vue
+++ b/src/Layout/tabbar/index.vue
@@ -26,6 +26,35 @@
         </div>
       </div>
       <div class="right" v-if="!useUserStore.token">
+        <div class="theme-switch">
+          <el-popover
+            v-model:visible="showThemePopover"
+            placement="bottom"
+            :width="200"
+            trigger="manual"
+          >
+            <template #reference>
+              <el-icon class="theme-icon" @click="showThemePopover = !showThemePopover">
+                <Setting />
+              </el-icon>
+            </template>
+            <div class="theme-popover">
+              <div class="theme-title">主题设置</div>
+              <div class="theme-list">
+                <div
+                  v-for="theme in useThemeStore.themes"
+                  :key="theme.name"
+                  class="theme-item"
+                  :class="{ active: currentThemeName === theme.name }"
+                  @click="handleThemeChange(theme.name)"
+                >
+                  <div class="theme-color" :style="{ backgroundColor: theme.primaryColor }"></div>
+                  <span class="theme-name">{{ theme.name }}</span>
+                </div>
+              </div>
+            </div>
+          </el-popover>
+        </div>
         <div
           class="registered gradient"
           @click="$router.push('/login?registered=true')"
@@ -35,6 +64,35 @@
         <div class="login" @click="$router.push('/login')">登录</div>
       </div>
       <div class="right" v-else>
+        <div class="theme-switch">
+          <el-popover
+            v-model:visible="showThemePopover"
+            placement="bottom"
+            :width="200"
+            trigger="manual"
+          >
+            <template #reference>
+              <el-icon class="theme-icon" @click="showThemePopover = !showThemePopover">
+                <Setting />
+              </el-icon>
+            </template>
+            <div class="theme-popover">
+              <div class="theme-title">主题设置</div>
+              <div class="theme-list">
+                <div
+                  v-for="theme in useThemeStore.themes"
+                  :key="theme.name"
+                  class="theme-item"
+                  :class="{ active: currentThemeName === theme.name }"
+                  @click="handleThemeChange(theme.name)"
+                >
+                  <div class="theme-color" :style="{ backgroundColor: theme.primaryColor }"></div>
+                  <span class="theme-name">{{ theme.name }}</span>
+                </div>
+              </div>
+            </div>
+          </el-popover>
+        </div>
         <div class="avater">
           <img
             :src="setImageUrl(useUserStore.userInfo.avatar)"
@@ -69,13 +127,28 @@ import { useRouter, useRoute } from 'vue-router'
 import { onMounted, ref, watch } from 'vue'
 import userStore from '@/store/module/user'
 import settingStore from '@/store/module/setting'
+import themeStore from '@/store/module/theme'
 import Item from './components/item.vue'
 import defaultUserAvater from '@/assets/images/default.png'
+import { Setting } from '@element-plus/icons-vue'
+
 const useUserStore = userStore()
 const useSettingStore = settingStore()
+const useThemeStore = themeStore()
 const $router = useRouter()
 const $route = useRoute()
 const flog = ref(false)
+
+// 主题相关
+const currentThemeName = ref(useThemeStore.currentTheme.name)
+
+const handleThemeChange = (themeName: string) => {
+  const selectedTheme = useThemeStore.themes.find(t => t.name === themeName)
+  if (selectedTheme) {
+    useThemeStore.setTheme(selectedTheme)
+  }
+}
+
 onMounted(() => {
   window.addEventListener('scroll', () => {
     if (window.scrollY >= 50) {
@@ -108,6 +181,8 @@ watch(
   },
 )
 // getLogoSetting()
+
+const showThemePopover = ref(false)
 </script>
 
 <style lang="scss" scoped>
@@ -138,12 +213,86 @@ watch(
 .tabbar {
   position: fixed;
   top: 0;
-  z-index: 1;
-  height: 80px;
+  left: 0;
   width: 100%;
-  background-color: transparent;
-  animation-duration: 0.3s;
-  animation-name: tabber-to;
+  z-index: 999;
+  transition: all 0.3s;
+  // background-color: var(--background-color);
+  border-bottom: 1px solid var(--border-color);
+  .container {
+    width: $base-container-width;
+    height: 80px;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .left {
+      display: flex;
+      align-items: center;
+      .logo {
+        width: 200px;
+        height: 80px;
+        display: flex;
+        align-items: center;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+      .menu {
+        margin-left: 40px;
+        :deep(.el-menu) {
+          background-color: transparent;
+          border: none;
+          .el-menu-item {
+            color: var(--text-color);
+            &:hover {
+              color: var(--primary-color);
+              background-color: transparent !important;
+            }
+            &.is-active {
+              color: var(--primary-color);
+              background-color: transparent !important;
+            }
+          }
+        }
+      }
+    }
+    .right {
+      display: flex;
+      align-items: center;
+      .theme-switcher {
+        margin-right: 20px;
+      }
+      .user-info {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        color: var(--text-color);
+        .avatar {
+          width: 40px;
+          height: 40px;
+          border-radius: 50%;
+          margin-right: 10px;
+          border: 1px solid var(--border-color);
+        }
+        .username {
+          font-size: 14px;
+          margin-right: 5px;
+        }
+        .el-icon {
+          font-size: 12px;
+          transition: transform 0.3s;
+        }
+        &:hover {
+          color: var(--primary-color);
+          .el-icon {
+            transform: rotate(180deg);
+          }
+        }
+      }
+    }
+  }
 }
 
 .tabbar-active {
@@ -151,33 +300,56 @@ watch(
   top: 0;
   height: 80px;
   width: 100%;
-  background-color: #fff;
+  background-color: var(--card-bg-color);
   animation-duration: 0.3s;
   animation-name: tabber;
   z-index: 999;
-  box-shadow: 0px 0px 43px rgba(0, 0, 0, 0.2);
+  box-shadow: 0px 0px 43px rgba(0, 0, 0, 0.1);
+  border-bottom: 1px solid var(--border-color);
+  .container {
+    width: $base-container-width;
+    height: 80px;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+     .menu {
+        margin-left: 40px;
+        :deep(.el-menu) {
+          background-color: transparent;
+          border: none;
+          .el-menu-item {
+            color: var(--text-color);
+            &:hover {
+              color: var(--primary-color);
+              background-color: transparent !important;
+            }
+            &.is-active {
+              color: var(--primary-color);
+              background-color: transparent !important;
+            }
+          }
+        }
+      }
+  }
 }
 
 @keyframes tabber {
   0% {
-    // transform: translateY(-80px);
     background-color: transparent;
   }
 
   100% {
-    // transform: translateY(0);
-    background-color: #fff;
+    background-color: var(--card-bg-color);
   }
 }
 
 @keyframes tabber-to {
   0% {
-    // transform: translateY(-80px);
-    background-color: #fff;
+    background-color: var(--card-bg-color);
   }
 
   100% {
-    // transform: translateY(0);
     background-color: transparent;
   }
 }
@@ -208,15 +380,20 @@ watch(
       color: #fff;
     }
     .login {
-      color: #1d2129;
+      color: var(--text-color);
       margin-left: 20px;
-      border: 1px solid #e5e6eb;
+      border: 1px solid var(--border-color);
+      &:hover {
+        color: var(--primary-color);
+        border-color: var(--primary-color);
+      }
     }
     .avater {
       width: 35px;
       height: 35px;
       border-radius: 50%;
       overflow: hidden;
+      border: 1px solid var(--border-color);
       img {
         width: 100%;
         height: 100%;
@@ -237,7 +414,7 @@ watch(
 
       li {
         padding: 12px 20px;
-        color: #1d2129;
+        color: var(--text-color);
         font-size: 14px;
         cursor: pointer;
         transition: all 0.2s;
@@ -245,7 +422,7 @@ watch(
       }
 
       li:hover {
-        color: #0033f7;
+        color: var(--primary-color);
         transform: translateY(-5px);
       }
 
@@ -259,7 +436,7 @@ watch(
         width: 5px;
         height: 5px;
         border-radius: 50%;
-        background-color: #fff;
+        background-color: var(--primary-color);
       }
     }
 
@@ -300,8 +477,132 @@ watch(
 :deep(.el-menu-item) {
   background-color: transparent;
   border-bottom: none;
+  &:hover {
+    background-color: transparent !important;
+  }
+  &.is-active {
+    background-color: transparent !important;
+  }
 }
 .el-dropdown-link {
   white-space: nowrap;
 }
+
+.theme-switch {
+  margin-right: 20px;
+  .theme-icon {
+    font-size: 20px;
+    color: var(--text-color);
+    cursor: pointer;
+    transition: all 0.3s;
+    &:hover {
+      color: var(--primary-color);
+      transform: rotate(90deg);
+    }
+  }
+}
+
+.theme-popover {
+  .theme-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--text-color);
+    margin-bottom: 15px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid var(--border-color);
+  }
+  
+  .theme-list {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    
+    .theme-item {
+      display: flex;
+      align-items: center;
+      padding: 8px 12px;
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 0.3s;
+      
+      &:hover {
+        background-color: var(--background-color);
+      }
+      
+      &.active {
+        background-color: var(--background-color);
+        .theme-name {
+          color: var(--primary-color);
+        }
+      }
+      
+      .theme-color {
+        width: 20px;
+        height: 20px;
+        border-radius: 4px;
+        margin-right: 10px;
+        border: 1px solid var(--border-color);
+      }
+      
+      .theme-name {
+        color: var(--text-color);
+        font-size: 14px;
+      }
+    }
+  }
+}
+
+.right {
+  display: flex;
+  align-items: center;
+  div {
+    width: 108px;
+    height: 40px;
+    text-align: center;
+    line-height: 40px;
+    border-radius: 5px;
+    font-size: 14px;
+    cursor: pointer;
+  }
+  .registered {
+    color: #fff;
+    background: var(--gradient-color);
+    border-radius: 20px;
+    transition: all 0.3s;
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    }
+  }
+  .login {
+    color: var(--text-color);
+    margin-left: 20px;
+    border: 1px solid var(--border-color);
+    border-radius: 20px;
+    transition: all 0.3s;
+    &:hover {
+      color: var(--primary-color);
+      border-color: var(--primary-color);
+      transform: translateY(-2px);
+    }
+  }
+  .avater {
+    width: 35px;
+    height: 35px;
+    border-radius: 50%;
+    overflow: hidden;
+    border: 1px solid var(--border-color);
+    transition: all 0.3s;
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+    margin-right: 20px;
+    &:hover {
+      transform: translateY(-2px);
+      border-color: var(--primary-color);
+    }
+  }
+}
 </style>
diff --git a/src/assets/images/bl.png b/src/assets/images/bl.png
new file mode 100644
index 0000000..c5b1f76
Binary files /dev/null and b/src/assets/images/bl.png differ
diff --git a/src/assets/images/bzbanner.png b/src/assets/images/bzbanner.png
new file mode 100644
index 0000000..b114682
Binary files /dev/null and b/src/assets/images/bzbanner.png differ
diff --git a/src/assets/images/hl.png b/src/assets/images/hl.png
new file mode 100644
index 0000000..937ccbc
Binary files /dev/null and b/src/assets/images/hl.png differ
diff --git a/src/assets/images/pk.png b/src/assets/images/pk.png
new file mode 100644
index 0000000..24dbb54
Binary files /dev/null and b/src/assets/images/pk.png differ
diff --git a/src/assets/images/signup-bg.jpg b/src/assets/images/signup-bg.jpg
new file mode 100644
index 0000000..ff7611c
Binary files /dev/null and b/src/assets/images/signup-bg.jpg differ
diff --git a/src/main.ts b/src/main.ts
index 95fb7d0..d8b92df 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -12,16 +12,19 @@ import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
 import gloablComponent from './components/index'
 // 引入全局样式
 import '@/styles/index.scss'
+import 'element-plus/theme-chalk/dark/css-vars.css' // 引入Element Plus暗黑主题
+import './styles/dark.scss' // 引入自定义暗黑主题
+import themeStore from './store/module/theme'
 
 // 引入仓库
-import pinia from '@/store/index'
+import { createPinia } from 'pinia'
 // 引入路由
-import router from './permissions'
+import router from './router'
 import '@/utils/rem.js'
 import defaultImage from '@/directives/defaultImage'
 // 创建vue实例
 const app = createApp(App)
-app.use(pinia)
+const pinia = createPinia()
 
 // 注册全局指令
 app.directive('default-image', defaultImage)
@@ -33,6 +36,7 @@ app.use(ElementPlus, {
 // 注册全局组件
 app.use(gloablComponent)
 app.use(router)
+app.use(pinia)
 
 // app.use(G6)
 // 挂载点
@@ -42,3 +46,7 @@ import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(key, component)
 }
+
+// 初始化主题
+const useThemeStore = themeStore()
+useThemeStore.initTheme()
diff --git a/src/store/module/theme.ts b/src/store/module/theme.ts
new file mode 100644
index 0000000..6c3fdf6
--- /dev/null
+++ b/src/store/module/theme.ts
@@ -0,0 +1,53 @@
+import { defineStore } from 'pinia'
+import { themes, type Theme } from '@/styles/themes'
+
+export default defineStore('theme', {
+  state: () => {
+    return {
+      currentTheme: themes[0],
+      themes: themes,
+      isDark: false
+    }
+  },
+  actions: {
+    setTheme(theme: Theme) {
+      this.currentTheme = theme
+      // 更新CSS变量
+      document.documentElement.style.setProperty('--primary-color', theme.primaryColor)
+      document.documentElement.style.setProperty('--secondary-color', theme.secondaryColor)
+      document.documentElement.style.setProperty('--background-color', theme.backgroundColor)
+      document.documentElement.style.setProperty('--text-color', theme.textColor)
+      document.documentElement.style.setProperty('--gradient-color', theme.gradientColor)
+      document.documentElement.style.setProperty('--card-bg-color', theme.cardBgColor)
+      document.documentElement.style.setProperty('--border-color', theme.borderColor)
+      document.documentElement.style.setProperty('--menu-text-color', theme.menuTextColor)
+      document.documentElement.style.setProperty('--menu-active-color', theme.menuActiveColor)
+      
+      // 更新body背景色
+      document.body.style.backgroundColor = theme.backgroundColor
+      document.body.style.color = theme.textColor
+
+      // 切换暗黑模式
+      this.isDark = theme.name === '暗夜主题' || theme.name === '暗夜绿主题'
+      if (this.isDark) {
+        document.documentElement.classList.add('dark')
+      } else {
+        document.documentElement.classList.remove('dark')
+      }
+
+      // 保存主题到本地存储
+      localStorage.setItem('theme', theme.name)
+    },
+
+    // 初始化主题
+    initTheme() {
+      const savedTheme = localStorage.getItem('theme')
+      if (savedTheme) {
+        const theme = this.themes.find(t => t.name === savedTheme)
+        if (theme) {
+          this.setTheme(theme)
+        }
+      }
+    }
+  }
+}) 
\ No newline at end of file
diff --git a/src/styles/dark.scss b/src/styles/dark.scss
new file mode 100644
index 0000000..08f95af
--- /dev/null
+++ b/src/styles/dark.scss
@@ -0,0 +1,147 @@
+// Element Plus 暗黑主题变量覆盖
+html.dark {
+  // 常用颜色
+  --el-color-primary: var(--primary-color);
+  --el-color-primary-light-3: var(--primary-color);
+  --el-color-primary-light-5: var(--primary-color);
+  --el-color-primary-light-7: var(--primary-color);
+  --el-color-primary-light-8: var(--primary-color);
+  --el-color-primary-light-9: var(--primary-color);
+  --el-color-primary-dark-2: var(--primary-color);
+  
+  // 文字颜色
+  --el-text-color-primary: var(--text-color);
+  --el-text-color-regular: var(--text-color);
+  --el-text-color-secondary: rgba(255, 255, 255, 0.7);
+  --el-text-color-placeholder: rgba(255, 255, 255, 0.3);
+  --el-text-color-disabled: rgba(255, 255, 255, 0.3);
+  
+  // 边框颜色
+  --el-border-color: var(--border-color);
+  --el-border-color-light: var(--border-color);
+  --el-border-color-lighter: var(--border-color);
+  --el-border-color-extra-light: var(--border-color);
+  
+  // 填充颜色
+  --el-fill-color: var(--card-bg-color);
+  --el-fill-color-light: var(--card-bg-color);
+  --el-fill-color-lighter: var(--card-bg-color);
+  --el-fill-color-extra-light: var(--card-bg-color);
+  --el-fill-color-dark: var(--card-bg-color);
+  --el-fill-color-darker: var(--card-bg-color);
+  
+  // 背景颜色
+  --el-bg-color: var(--background-color);
+  --el-bg-color-overlay: var(--card-bg-color);
+  
+  // 遮罩颜色
+  --el-mask-color: rgba(0, 0, 0, 0.8);
+  
+  // 组件深色背景
+  --el-bg-color-page: var(--background-color);
+  
+  // 弹窗背景
+  --el-popup-bg-color: var(--card-bg-color);
+  
+  // 禁用状态
+  --el-disabled-bg-color: var(--card-bg-color);
+  --el-disabled-text-color: rgba(255, 255, 255, 0.3);
+  --el-disabled-border-color: var(--border-color);
+}
+
+// 全局组件暗黑适配
+html.dark {
+  // 表格
+  .el-table {
+    --el-table-bg-color: var(--card-bg-color);
+    --el-table-tr-bg-color: var(--card-bg-color);
+    --el-table-header-bg-color: var(--background-color);
+    --el-table-border-color: var(--border-color);
+    
+    th.el-table__cell {
+      background-color: var(--background-color);
+    }
+  }
+  
+  // 分页
+  .el-pagination {
+    --el-pagination-button-bg-color: var(--card-bg-color);
+    --el-pagination-hover-color: var(--primary-color);
+  }
+  
+  // 表单
+  .el-form {
+    .el-form-item__label {
+      color: var(--text-color);
+    }
+  }
+  
+  // 输入框
+  .el-input {
+    --el-input-bg-color: var(--card-bg-color);
+    --el-input-border-color: var(--border-color);
+    --el-input-hover-border-color: var(--primary-color);
+    --el-input-focus-border-color: var(--primary-color);
+  }
+  
+  // 选择器
+  .el-select {
+    .el-input {
+      --el-select-input-focus-border-color: var(--primary-color);
+    }
+  }
+  
+  // 下拉菜单
+  .el-dropdown-menu {
+    --el-dropdown-menuItem-hover-fill: var(--card-bg-color);
+    --el-dropdown-menuItem-hover-color: var(--primary-color);
+  }
+  
+  // 对话框
+  .el-dialog {
+    --el-dialog-bg-color: var(--card-bg-color);
+    --el-dialog-border-color: var(--border-color);
+    
+    .el-dialog__header {
+      border-bottom: 1px solid var(--border-color);
+    }
+  }
+  
+  // 卡片
+  .el-card {
+    --el-card-bg-color: var(--card-bg-color);
+    border-color: var(--border-color);
+    
+    .el-card__header {
+      border-bottom: 1px solid var(--border-color);
+    }
+  }
+  
+  // 标签
+  .el-tag {
+    --el-tag-bg-color: transparent;
+    --el-tag-border-color: var(--border-color);
+    
+    &.el-tag--primary {
+      --el-tag-bg-color: transparent;
+      --el-tag-border-color: var(--primary-color);
+    }
+  }
+  
+  // 按钮
+  .el-button {
+    &.el-button--primary {
+      --el-button-bg-color: var(--primary-color) !important;
+      --el-button-border-color: var(--primary-color) !important;
+    }
+    
+    &.el-button--default {
+      --el-button-bg-color: var(--card-bg-color) !important;
+      --el-button-border-color: var(--border-color) !important;
+      --el-button-hover-bg-color: var(--primary-color) !important;
+      --el-button-hover-border-color: var(--primary-color) !important;
+      --el-button-active-bg-color: var(--primary-color) !important;
+      --el-button-active-border-color: var(--primary-color) !important;
+    }
+  }
+} 
\ No newline at end of file
diff --git a/src/styles/index.scss b/src/styles/index.scss
index a142426..473f1ed 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,5 +1,10 @@
 // 引入清除浏览器默认样式文件
 @import './reset.scss';
+@import './variables.scss';
+@import './dark.scss';
+@import './light-blue.scss';
+@import './light-purple.scss';
+
 :root {
   --el-color-primary: #0BD7C6;
 }
@@ -8,6 +13,11 @@
   margin: 0 auto;
   // background-color: #c2acac;
 }
+.container-100{
+  width: 100%;
+  margin: 0 auto;
+  // background-color: #c2acac;
+}
 .gradient{
   background: linear-gradient(90deg, rgba(66,217,172,1) 0%, rgba(0,208,208,1)  100%);
 }
diff --git a/src/styles/light-blue.scss b/src/styles/light-blue.scss
new file mode 100644
index 0000000..c74200d
--- /dev/null
+++ b/src/styles/light-blue.scss
@@ -0,0 +1,147 @@
+// Element Plus 白蓝主题变量覆盖
+html.light-blue {
+  // 常用颜色
+  --el-color-primary: #1890ff;
+  --el-color-primary-light-3: #40a9ff;
+  --el-color-primary-light-5: #69c0ff;
+  --el-color-primary-light-7: #91d5ff;
+  --el-color-primary-light-8: #bae7ff;
+  --el-color-primary-light-9: #e6f7ff;
+  --el-color-primary-dark-2: #096dd9;
+  
+  // 文字颜色
+  --el-text-color-primary: #ffffff;
+  --el-text-color-regular: #ffffff;
+  --el-text-color-secondary: rgba(255, 255, 255, 0.7);
+  --el-text-color-placeholder: rgba(255, 255, 255, 0.3);
+  --el-text-color-disabled: rgba(255, 255, 255, 0.3);
+  
+  // 边框颜色
+  --el-border-color: rgba(255, 255, 255, 0.1);
+  --el-border-color-light: rgba(255, 255, 255, 0.1);
+  --el-border-color-lighter: rgba(255, 255, 255, 0.1);
+  --el-border-color-extra-light: rgba(255, 255, 255, 0.1);
+  
+  // 填充颜色
+  --el-fill-color: #1d1e1f;
+  --el-fill-color-light: #1d1e1f;
+  --el-fill-color-lighter: #1d1e1f;
+  --el-fill-color-extra-light: #1d1e1f;
+  --el-fill-color-dark: #1d1e1f;
+  --el-fill-color-darker: #1d1e1f;
+  
+  // 背景颜色
+  --el-bg-color: #141414;
+  --el-bg-color-overlay: #1d1e1f;
+  
+  // 遮罩颜色
+  --el-mask-color: rgba(0, 0, 0, 0.8);
+  
+  // 组件深色背景
+  --el-bg-color-page: #141414;
+  
+  // 弹窗背景
+  --el-popup-bg-color: #1d1e1f;
+  
+  // 禁用状态
+  --el-disabled-bg-color: #1d1e1f;
+  --el-disabled-text-color: rgba(255, 255, 255, 0.3);
+  --el-disabled-border-color: rgba(255, 255, 255, 0.1);
+}
+
+// 全局组件白蓝主题适配
+html.light-blue {
+  // 表格
+  .el-table {
+    --el-table-bg-color: #1d1e1f;
+    --el-table-tr-bg-color: #1d1e1f;
+    --el-table-header-bg-color: #141414;
+    --el-table-border-color: rgba(255, 255, 255, 0.1);
+    
+    th.el-table__cell {
+      background-color: #141414;
+    }
+  }
+  
+  // 分页
+  .el-pagination {
+    --el-pagination-button-bg-color: #1d1e1f;
+    --el-pagination-hover-color: #1890ff;
+  }
+  
+  // 表单
+  .el-form {
+    .el-form-item__label {
+      color: #ffffff;
+    }
+  }
+  
+  // 输入框
+  .el-input {
+    --el-input-bg-color: #1d1e1f;
+    --el-input-border-color: rgba(255, 255, 255, 0.1);
+    --el-input-hover-border-color: #1890ff;
+    --el-input-focus-border-color: #1890ff;
+  }
+  
+  // 选择器
+  .el-select {
+    .el-input {
+      --el-select-input-focus-border-color: #1890ff;
+    }
+  }
+  
+  // 下拉菜单
+  .el-dropdown-menu {
+    --el-dropdown-menuItem-hover-fill: #1d1e1f;
+    --el-dropdown-menuItem-hover-color: #1890ff;
+  }
+  
+  // 对话框
+  .el-dialog {
+    --el-dialog-bg-color: #1d1e1f;
+    --el-dialog-border-color: rgba(255, 255, 255, 0.1);
+    
+    .el-dialog__header {
+      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    }
+  }
+  
+  // 卡片
+  .el-card {
+    --el-card-bg-color: #1d1e1f;
+    border-color: rgba(255, 255, 255, 0.1);
+    
+    .el-card__header {
+      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    }
+  }
+  
+  // 标签
+  .el-tag {
+    --el-tag-bg-color: #1d1e1f;
+    --el-tag-border-color: rgba(255, 255, 255, 0.1);
+    
+    &.el-tag--primary {
+      --el-tag-bg-color: #1890ff;
+      --el-tag-border-color: #1890ff;
+    }
+  }
+  
+  // 按钮
+  .el-button {
+    &.el-button--primary {
+      --el-button-bg-color: #1890ff !important;
+      --el-button-border-color: #1890ff !important;
+    }
+    
+    &.el-button--default {
+      --el-button-bg-color: #1d1e1f !important;
+      --el-button-border-color: rgba(255, 255, 255, 0.1) !important;
+      --el-button-hover-bg-color: #1890ff !important;
+      --el-button-hover-border-color: #1890ff !important;
+      --el-button-active-bg-color: #1890ff !important;
+      --el-button-active-border-color: #1890ff !important;
+    }
+  }
+} 
\ No newline at end of file
diff --git a/src/styles/light-purple.scss b/src/styles/light-purple.scss
new file mode 100644
index 0000000..a22e01e
--- /dev/null
+++ b/src/styles/light-purple.scss
@@ -0,0 +1,147 @@
+// Element Plus 白紫主题变量覆盖
+html.light-purple {
+  // 常用颜色
+  --el-color-primary: #B46EFD;
+  --el-color-primary-light-3: #C08EFD;
+  --el-color-primary-light-5: #CCADFE;
+  --el-color-primary-light-7: #D8CBFE;
+  --el-color-primary-light-8: #E1DAFE;
+  --el-color-primary-light-9: #F5F0FF;
+  --el-color-primary-dark-2: #684FFF;
+  
+  // 文字颜色
+  --el-text-color-primary: #ffffff;
+  --el-text-color-regular: #ffffff;
+  --el-text-color-secondary: rgba(255, 255, 255, 0.7);
+  --el-text-color-placeholder: rgba(255, 255, 255, 0.3);
+  --el-text-color-disabled: rgba(255, 255, 255, 0.3);
+  
+  // 边框颜色
+  --el-border-color: rgba(255, 255, 255, 0.1);
+  --el-border-color-light: rgba(255, 255, 255, 0.1);
+  --el-border-color-lighter: rgba(255, 255, 255, 0.1);
+  --el-border-color-extra-light: rgba(255, 255, 255, 0.1);
+  
+  // 填充颜色
+  --el-fill-color: #1d1e1f;
+  --el-fill-color-light: #1d1e1f;
+  --el-fill-color-lighter: #1d1e1f;
+  --el-fill-color-extra-light: #1d1e1f;
+  --el-fill-color-dark: #1d1e1f;
+  --el-fill-color-darker: #1d1e1f;
+  
+  // 背景颜色
+  --el-bg-color: #141414;
+  --el-bg-color-overlay: #1d1e1f;
+  
+  // 遮罩颜色
+  --el-mask-color: rgba(0, 0, 0, 0.8);
+  
+  // 组件深色背景
+  --el-bg-color-page: #141414;
+  
+  // 弹窗背景
+  --el-popup-bg-color: #1d1e1f;
+  
+  // 禁用状态
+  --el-disabled-bg-color: #1d1e1f;
+  --el-disabled-text-color: rgba(255, 255, 255, 0.3);
+  --el-disabled-border-color: rgba(255, 255, 255, 0.1);
+}
+
+// 全局组件白紫主题适配
+html.light-purple {
+  // 表格
+  .el-table {
+    --el-table-bg-color: #1d1e1f;
+    --el-table-tr-bg-color: #1d1e1f;
+    --el-table-header-bg-color: #141414;
+    --el-table-border-color: rgba(255, 255, 255, 0.1);
+    
+    th.el-table__cell {
+      background-color: #141414;
+    }
+  }
+  
+  // 分页
+  .el-pagination {
+    --el-pagination-button-bg-color: #1d1e1f;
+    --el-pagination-hover-color: #B46EFD;
+  }
+  
+  // 表单
+  .el-form {
+    .el-form-item__label {
+      color: #ffffff;
+    }
+  }
+  
+  // 输入框
+  .el-input {
+    --el-input-bg-color: #1d1e1f;
+    --el-input-border-color: rgba(255, 255, 255, 0.1);
+    --el-input-hover-border-color: #B46EFD;
+    --el-input-focus-border-color: #B46EFD;
+  }
+  
+  // 选择器
+  .el-select {
+    .el-input {
+      --el-select-input-focus-border-color: #B46EFD;
+    }
+  }
+  
+  // 下拉菜单
+  .el-dropdown-menu {
+    --el-dropdown-menuItem-hover-fill: #1d1e1f;
+    --el-dropdown-menuItem-hover-color: #B46EFD;
+  }
+  
+  // 对话框
+  .el-dialog {
+    --el-dialog-bg-color: #1d1e1f;
+    --el-dialog-border-color: rgba(255, 255, 255, 0.1);
+    
+    .el-dialog__header {
+      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    }
+  }
+  
+  // 卡片
+  .el-card {
+    --el-card-bg-color: #1d1e1f;
+    border-color: rgba(255, 255, 255, 0.1);
+    
+    .el-card__header {
+      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    }
+  }
+  
+  // 标签
+  .el-tag {
+    --el-tag-bg-color: #1d1e1f;
+    --el-tag-border-color: rgba(255, 255, 255, 0.1);
+    
+    &.el-tag--primary {
+      --el-tag-bg-color: #B46EFD;
+      --el-tag-border-color: #B46EFD;
+    }
+  }
+  
+  // 按钮
+  .el-button {
+    &.el-button--primary {
+      --el-button-bg-color: #B46EFD !important;
+      --el-button-border-color: #B46EFD !important;
+    }
+    
+    &.el-button--default {
+      --el-button-bg-color: #1d1e1f !important;
+      --el-button-border-color: rgba(255, 255, 255, 0.1) !important;
+      --el-button-hover-bg-color: #B46EFD !important;
+      --el-button-hover-border-color: #B46EFD !important;
+      --el-button-active-bg-color: #B46EFD !important;
+      --el-button-active-border-color: #B46EFD !important;
+    }
+  }
+} 
\ No newline at end of file
diff --git a/src/styles/themes.ts b/src/styles/themes.ts
new file mode 100644
index 0000000..26a62bd
--- /dev/null
+++ b/src/styles/themes.ts
@@ -0,0 +1,75 @@
+export interface Theme {
+  name: string;
+  primaryColor: string;
+  secondaryColor: string;
+  backgroundColor: string;
+  textColor: string;
+  gradientColor: string;
+  cardBgColor: string;
+  borderColor: string;
+  menuTextColor: string;
+  menuActiveColor: string;
+}
+
+export const themes: Theme[] = [
+  {
+    name: '默认主题',
+    primaryColor: '#0bd7c6',
+    secondaryColor: '#0033f7',
+    backgroundColor: '#ffffff',
+    textColor: '#333333',
+    gradientColor: 'linear-gradient(to right, #0bd7c6, #0033f7)',
+    cardBgColor: '#ffffff',
+    borderColor: '#e5e6eb',
+    menuTextColor: '#1d2129',
+    menuActiveColor: '#0033f7'
+  },
+  {
+    name: '白蓝主题',
+    primaryColor: '#1890ff',
+    secondaryColor: '#096dd9',
+    backgroundColor: '#ffffff',
+    textColor: '#1d2129',
+    gradientColor: 'linear-gradient(to right, #1890ff, #096dd9)',
+    cardBgColor: '#ffffff',
+    borderColor: '#e5e6eb',
+    menuTextColor: '#1d2129',
+    menuActiveColor: '#1890ff'
+  },
+  {
+    name: '白紫主题',
+    primaryColor: '#B46EFD',
+    secondaryColor: '#684FFF',
+    backgroundColor: '#ffffff',
+    textColor: '#1d2129',
+    gradientColor: 'linear-gradient(to right, #B46EFD, #684FFF)',
+    cardBgColor: '#ffffff',
+    borderColor: '#e5e6eb',
+    menuTextColor: '#1d2129',
+    menuActiveColor: '#B46EFD'
+  },
+  {
+    name: '暗夜主题',
+    primaryColor: '#1055fc',
+    secondaryColor: '#e03d12',
+    backgroundColor: '#141414',
+    textColor: '#ffffff',
+    gradientColor: 'linear-gradient(to right, #1055fc, #e03d12)',
+    cardBgColor: '#1f1f1f',
+    borderColor: '#434343',
+    menuTextColor: 'rgba(255, 255, 255, 0.85)',
+    menuActiveColor: '#1055fc'
+  },
+  {
+    name: '暗夜绿主题',
+    primaryColor: '#61F7EE',
+    secondaryColor: '#2370E6',
+    backgroundColor: '#141414',
+    textColor: '#ffffff',
+    gradientColor: 'linear-gradient(to right, #61F7EE, #2CE2AF, #2370E6)',
+    cardBgColor: '#1f1f1f',
+    borderColor: '#434343',
+    menuTextColor: 'rgba(255, 255, 255, 0.85)',
+    menuActiveColor: '#61F7EE'
+  }
+]; 
\ No newline at end of file
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
new file mode 100644
index 0000000..85be8f2
--- /dev/null
+++ b/src/styles/variables.scss
@@ -0,0 +1,62 @@
+:root {
+  --primary-color: #0bd7c6;
+  --secondary-color: #0033f7;
+  --background-color: transparent;
+  --text-color: #333333;
+  --gradient-color: linear-gradient(to right, #0bd7c6, #0033f7);
+  --card-bg-color: #ffffff;
+  --border-color: #e5e6eb;
+  --menu-text-color: #1d2129;
+  --menu-active-color: #0033f7;
+}
+$el-button-bg-color: #0bd7c6;
+
+$base-container-width: 1420px;
+
+// 使用CSS变量
+.gradient {
+  background: var(--gradient-color);
+}
+
+.text-primary {
+  color: var(--primary-color);
+}
+
+.text-secondary {
+  color: var(--secondary-color);
+}
+
+.bg-primary {
+  background-color: var(--primary-color);
+}
+
+.bg-secondary {
+  background-color: var(--secondary-color);
+}
+
+// 暗黑主题适配
+body {
+  background-color: var(--background-color);
+  color: var(--text-color);
+  transition: all 0.3s;
+}
+
+.el-menu {
+  --el-menu-bg-color: var(--card-bg-color) !important;
+  --el-menu-text-color: var(--menu-text-color) !important;
+  --el-menu-hover-text-color: var(--menu-active-color) !important;
+  --el-menu-active-color: var(--menu-active-color) !important;
+  border-color: var(--border-color) !important;
+}
+
+.el-card {
+  --el-card-bg-color: var(--card-bg-color) !important;
+  --el-card-border-color: var(--border-color) !important;
+}
+
+.el-button {
+  --el-button-bg-color: var($el-button-bg-color) !important;
+  --el-button-border-color: var(--border-color) !important;
+  --el-button-hover-border-color: var(--primary-color) !important;
+  --el-button-hover-bg-color: var(--primary-color) !important;
+} 
\ No newline at end of file
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 9810f2c..40c4470 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,21 +1,83 @@
 <template>
-  <div class="container-1420" v-if="isLoading">
-    <div class="banner">
-      <div class="title">{{ reacProjectList[0].compName }}火热报名中</div>
-      <div class="description">
-        <div v-html="reacProjectList[0].compInfo"></div>
+  <div
+    :class="{
+      'container-1420': useThemeStore.currentTheme.name !== '白蓝主题' && useThemeStore.currentTheme.name !== '白紫主题',
+      'container-100': useThemeStore.currentTheme.name === '白蓝主题' || useThemeStore.currentTheme.name === '白紫主题',
+    }"
+    v-if="isLoading"
+  >
+    <div
+      class="banner"
+      :class="{
+        'dark-layout': useThemeStore.isDark,
+        'light-blue-layout': useThemeStore.currentTheme.name === '白蓝主题',
+        'light-purple-layout': useThemeStore.currentTheme.name === '白紫主题',
+        'light-green-layout': useThemeStore.currentTheme.name === '暗夜绿主题',
+      }"
+    >
+      <div class="banner-left">
+        <div class="href" v-if="useThemeStore.isDark">
+          <a href="https://www.baidu.com">https://www.baidu.com</a>
+          <div>网址</div>
+        </div>
+        <div class="title">
+          {{ reacProjectList[0].compName }}
+          <br v-if="useThemeStore.isDark" />
+          火热报名中
+        </div>
+        <div class="description">
+          <div v-html="reacProjectList[0].compInfo"></div>
+        </div>
+        <div
+          class="application gradient"
+          @click="toDetail(reacProjectList[0].id)"
+        >
+          立即报名
+        </div>
       </div>
-      <div
-        class="application gradient"
-        @click="toDetail(reacProjectList[0].id)"
-      >
-        立即报名
+      <div class="banner-right">
+        <img
+          src="../../assets/images/pk.png"
+          alt="Banner Image"
+          v-if="useThemeStore.currentTheme.name === '暗夜主题'"
+        />
+        <img
+          src="../../assets/images/hl.png"
+          alt="Banner Image"
+          v-else-if="useThemeStore.currentTheme.name === '暗夜绿主题'"
+        />
+        <img src="../../assets/images/bl.png" alt="Banner Image" v-else />
       </div>
     </div>
     <!-- 比赛列表 -->
-
+    <div class="content" v-if="useThemeStore.currentTheme.name === '白蓝主题'">
+      <ul>
+        <li>
+          <div class="title">1830+</div>
+          <div class="description">已报名人数</div>
+        </li>
+        <li>
+          <div class="title">220</div>
+          <div class="description">比赛数</div>
+        </li>
+        <li>
+          <div class="title">390</div>
+          <div class="description">项目数</div>
+        </li>
+        <li>
+          <div class="title">830+</div>
+          <div class="description">获奖数</div>
+        </li>
+      </ul>
+    </div>
     <!-- 新闻列表 -->
-    <div class="news-list">
+    <div
+      class="news-list"
+      :class="{
+        'light-blue-news': useThemeStore.currentTheme.name === '白蓝主题',
+        'light-purple-news': useThemeStore.currentTheme.name === '白紫主题',
+      }"
+    >
       <div class="news-title">
         <div class="top">
           <div>新闻资讯</div>
@@ -35,34 +97,41 @@
           >
             {{ item.name }}
           </div>
-          <div
-            class="item"
-        
-            @click="router.push('/news')"
-          >
-           更多
-          </div>
+          <div class="item" @click="router.push('/news')">更多</div>
         </div>
         <div class="newa-main">
-          <div class="left">
-            <img src="../../assets/images/news.png" alt="" style="width: 100%; height: 100%" />
+          <div
+            class="left"
+            v-if="useThemeStore.currentTheme.name === '默认主题' || useThemeStore.currentTheme.name === '暗夜主题'"
+          >
+            <img
+              :src="useThemeStore.isDark ? pkImage : newsImage"
+              alt=""
+              style="width: 100%; height: 100%"
+            />
           </div>
-          <div class="right">
+          <div
+            class="right"
+            :class="{
+              'full-width': useThemeStore.currentTheme.name === '暗夜绿主题',
+            }"
+          >
             <div class="title">{{ newInfo.name }}</div>
             <div class="description">
               <!-- 我是新闻描述,我是新闻描述,我是新闻描述 -->
             </div>
             <div class="newa-main-list">
               <ul>
-                <li v-for="item in childrenNewList" :key="item.id" @click="toNewsDetail(item.id)">
+                <li
+                  v-for="item in childrenNewList"
+                  :key="item.id"
+                  @click="toNewsDetail(item.id)"
+                >
+                <div class="img" v-if="useThemeStore.currentTheme.name === '白蓝主题' || useThemeStore.currentTheme.name === '白紫主题'"><img src="../../assets/images/orange.png" alt=""></div>
                   <div class="info">
                     {{ item.title }}
                   </div>
                   <div class="time">{{ item.createTime }}</div>
-                  
-                  <!-- <div class="name">
-                    {{ item.createBy_dictText }}
-                  </div> -->
                 </li>
               </ul>
             </div>
@@ -70,17 +139,24 @@
         </div>
       </div>
     </div>
+    <!-- 报名板块 -->
   </div>
 </template>
 
 <script lang="ts" setup>
-
 import { ref } from 'vue'
 import { getRaceList } from '@/api/race'
 import { useRouter } from 'vue-router'
 import { ElLoading } from 'element-plus'
 import { getColumnListApi, queryEssayListApi } from '@/api/news'
+import themeStore from '@/store/module/theme'
+
+// 动态导入图片
+const pkImage = new URL('@/assets/images/pk.png', import.meta.url).href
+const newsImage = new URL('@/assets/images/news.png', import.meta.url).href
+
 const router = useRouter()
+const useThemeStore = themeStore()
 const reacProjectList = ref<any>([])
 const isLoading = ref(false)
 
@@ -123,16 +199,15 @@ const toDetail = (id: number) => {
 const toNewsDetail = (id: number) => {
   router.push({
     path: '/detail/' + id,
-
   })
 }
 // 获取新闻栏目
 const newList = ref<any>([])
 const getNewsList = async () => {
   const res: any = await getColumnListApi()
- // console.log(res)
+  // console.log(res)
   newList.value = res.result.slice(0, 4)
- // console.log(newList.value, 'newList.value')
+  // console.log(newList.value, 'newList.value')
   newInfo.value = newList.value[0]
   getNewInfo(newList.value[0].id)
 }
@@ -145,7 +220,7 @@ const childrenNewList = ref<any>([])
 const getNewInfo = async (id: any) => {
   const res: any = await queryEssayListApi(id)
   childrenNewList.value = res.result.records
- // console.log(childrenNewList, 'childrenNewList')
+  // console.log(childrenNewList, 'childrenNewList')
 }
 
 // 切换tab
@@ -158,84 +233,411 @@ const toggleTab = (item: any, index: number) => {
 <script lang="ts">
 export default {
   name: 'Home', // 必须显式设置
-};
+}
 </script>
 <style lang="scss" scoped>
 .banner {
   position: relative;
   width: 100%;
   height: 692px;
-  // background: radial-gradient(
-  //   circle,
-  //   rgba(131, 255, 197, 1) 0%,
-  //   rgba(255, 255, 255, 1) 50%
-  // );
-  background: url('../../assets/images/banner1.png') no-repeat;
-  background-size: cover;
   display: flex;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
-  .title {
-    font-size: 50px;
-    font-weight: 600;
-    color: #333333;
+  justify-content: center;
+  padding: 0 100px;
+  background-image: url('../../assets/images/banner1.png');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+
+  &:not(.dark-layout):not(.light-blue-layout):not(.light-purple-layout) {
+    .banner-left {
+      position: relative;
+      z-index: 2;
+      width: 100%;
+      text-align: center;
+      .title {
+        font-size: 50px;
+        font-weight: 600;
+        color: var(--text-color);
+        margin-bottom: 37px;
+        line-height: 65px;
+        margin-top: 20px;
+      }
+
+      .description {
+        width: 1074px;
+        text-align: center;
+        font-size: 20px;
+        color: var(--text-color);
+        opacity: 0.65;
+        line-height: 32px;
+        margin-bottom: 50px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+      }
+      .href {
+        display: flex;
+        align-items: center;
+        a {
+          background: linear-gradient(90deg, #61f7ee, #2ce2af, #2370e6);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          font-size: 40px;
+          font-weight: 600;
+        }
+        div {
+          background: linear-gradient(90deg, #fcf69c, #fdca43, #fcf69c);
+          color: #3d1100;
+          width: 74px;
+          height: 37px;
+          border-radius: 5px;
+          margin-left: 20px;
+          font-size: 18px;
+          text-align: center;
+          line-height: 37px;
+        }
+      }
+      .application {
+        width: 272px;
+        height: 64px;
+        text-align: center;
+        line-height: 64px;
+        border-radius: 10px;
+        font-size: 24px;
+        cursor: pointer;
+        color: #fff;
+        background: var(--gradient-color);
+        transition: all 0.3s;
+        margin: 0 auto;
+
+        &:hover {
+          transform: translateY(-2px);
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        }
+      }
+    }
+
+    .banner-right {
+      display: none;
+    }
   }
-  .description {
-    width: 1074px;
-    text-align: center;
-    font-size: 20px;
-    color: #666;
-    margin-top: 37px;
-    line-height: 32px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
+
+  &.dark-layout {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+
+    background: var(--background-color);
+    background-image: none !important;
+
+    .banner-left {
+      flex: 1;
+      text-align: left;
+      padding-right: 60px;
+
+      .title {
+        font-size: 50px;
+        font-weight: 600;
+        color: var(--text-color);
+        margin-bottom: 37px;
+        line-height: 65px;
+        margin-top: 20px;
+      }
+
+      .description {
+        width: 100%;
+        text-align: left;
+        font-size: 20px;
+        color: var(--text-color);
+        opacity: 0.65;
+        line-height: 32px;
+        margin-bottom: 50px;
+        overflow: visible;
+        -webkit-line-clamp: unset;
+        -webkit-box-orient: unset;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+      }
+
+      .application {
+        width: 272px;
+        height: 64px;
+        text-align: center;
+        line-height: 64px;
+        border-radius: 10px;
+        font-size: 24px;
+        color: #fff;
+        cursor: pointer;
+        background: var(--gradient-color);
+        transition: all 0.3s;
+        margin: 0;
+
+        &:hover {
+          transform: translateY(-2px);
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        }
+      }
+
+      .href {
+        display: flex;
+        align-items: center;
+        margin-bottom: 20px;
+        a {
+          background: linear-gradient(90deg, #61f7ee, #2ce2af, #2370e6);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          font-size: 40px;
+          font-weight: 600;
+        }
+        div {
+          background: linear-gradient(90deg, #fcf69c, #fdca43, #fcf69c);
+          color: #3d1100;
+          width: 74px;
+          height: 37px;
+          border-radius: 5px;
+          margin-left: 20px;
+          font-size: 18px;
+          text-align: center;
+          line-height: 37px;
+        }
+      }
+    }
+
+    .banner-right {
+      display: flex;
+      flex: 1;
+      height: 65%;
+      align-items: center;
+      justify-content: center;
+
+      img {
+        max-width: 100%;
+        max-height: 100%;
+        object-fit: contain;
+        border-radius: 12px;
+        // box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+      }
+    }
   }
-  .application {
-    width: 272px;
-    height: 64px;
-    text-align: center;
-    line-height: 64px;
-    border-radius: 10px;
-    font-size: 24px;
-    color: #fff;
-    cursor: pointer;
-    margin-top: 50px;
+
+  &.light-blue-layout {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+
+    background: var(--background-color);
+    background-image: none !important;
+
+    .banner-left {
+      flex: 1;
+      text-align: left;
+      padding-right: 60px;
+      margin-left: 180px;
+
+      .title {
+        font-size: 50px;
+        font-weight: 600;
+        color: var(--text-color);
+        margin-bottom: 37px;
+        line-height: 65px;
+        margin-top: 20px;
+      }
+
+      .description {
+        width: 100%;
+        text-align: left;
+        font-size: 20px;
+        color: var(--text-color);
+        opacity: 0.65;
+        line-height: 32px;
+        margin-bottom: 50px;
+        overflow: visible;
+        -webkit-line-clamp: unset;
+        -webkit-box-orient: unset;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+      }
+
+      .application {
+        width: 272px;
+        height: 64px;
+        text-align: center;
+        line-height: 64px;
+        border-radius: 10px;
+        font-size: 24px;
+        color: #fff;
+        cursor: pointer;
+        background: var(--gradient-color);
+        transition: all 0.3s;
+        margin: 0;
+
+        &:hover {
+          transform: translateY(-2px);
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        }
+      }
+
+      .href {
+        display: flex;
+        align-items: center;
+        margin-bottom: 20px;
+        a {
+          background: linear-gradient(90deg, #61f7ee, #2ce2af, #2370e6);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          font-size: 40px;
+          font-weight: 600;
+        }
+        div {
+          background: linear-gradient(90deg, #fcf69c, #fdca43, #fcf69c);
+          color: #3d1100;
+          width: 74px;
+          height: 37px;
+          border-radius: 5px;
+          margin-left: 20px;
+          font-size: 18px;
+          text-align: center;
+          line-height: 37px;
+        }
+      }
+    }
+
+    .banner-right {
+      display: flex;
+      width: 845px;
+      height: 65%;
+      align-items: center;
+      justify-content: center;
+
+      img {
+        max-width: 100%;
+        max-height: 100%;
+        object-fit: contain;
+        border-radius: 12px;
+        // box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+      }
+    }
+    .news-list {
+      width: 1200px;
+    }
   }
-  .nav-title {
-    position: absolute;
-    bottom: 0;
-    color: #1e2033;
-    .top {
-      font-size: 40px;
-      font-weight: 600;
-      text-align: center;
+
+  &.light-purple-layout {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+
+    background: var(--background-color);
+    background-image: url(../../assets/images/bzbanner.png);
+
+    .banner-left {
+      flex: 1;
+      text-align: left;
+      padding-right: 60px;
+      margin-left: 180px;
+
+      .title {
+        font-size: 50px;
+        font-weight: 600;
+        color: var(--text-color);
+        margin-bottom: 37px;
+        line-height: 65px;
+        margin-top: 20px;
+      }
+
+      .description {
+        width: 100%;
+        text-align: left;
+        font-size: 20px;
+        color: var(--text-color);
+        opacity: 0.65;
+        line-height: 32px;
+        margin-bottom: 50px;
+        overflow: visible;
+        -webkit-line-clamp: unset;
+        -webkit-box-orient: unset;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+      }
+
+      .application {
+        width: 272px;
+        height: 64px;
+        text-align: center;
+        line-height: 64px;
+        border-radius: 10px;
+        font-size: 24px;
+        color: #fff;
+        cursor: pointer;
+        background: linear-gradient(90deg, #B46EFD, #684FFF);
+        transition: all 0.3s;
+        margin: 0;
+
+        &:hover {
+          transform: translateY(-2px);
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        }
+      }
     }
-    .bottom {
-      font-size: 16px;
-      text-align: center;
-      margin-top: 10px;
+
+    .banner-right {
+      display: flex;
+      width: 845px;
+      height: 65%;
+      align-items: center;
+      justify-content: center;
+
+      img {
+        max-width: 100%;
+        max-height: 100%;
+        object-fit: contain;
+        border-radius: 12px;
+      }
+    }
+    .news-list {
+      width: 1200px;
     }
   }
 }
+
+// 白蓝主题特殊样式
+:deep(.light) {
+  .banner {
+    width: 100vw;
+    background-color: #ffffff;
+    margin-left: calc(-50vw + 50%);
+    margin-right: calc(-50vw + 50%);
+    background-image: none;
+  }
+}
 .race-list {
   position: relative;
   width: 100%;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-template-rows: repeat(2, 1fr);
-  // gap: 10px;
   margin-top: 40px;
   .item {
     width: 340px;
     height: 360px;
-    // background-color: pink;
-    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.06);
+    background-color: var(--card-bg-color);
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
     cursor: pointer;
     border-radius: 10px;
+    border: 1px solid var(--border-color);
     transition: all 0.2s;
     .image {
       width: 100%;
@@ -249,24 +651,27 @@ export default {
       padding: 0 8px;
       .reac-title {
         margin-top: 19px;
-        color: #c9c9c9;
+        color: var(--text-color);
+        opacity: 0.45;
         font-size: 12px;
       }
       .reac-project {
         font-size: 16px;
         font-weight: 600;
-        color: #333333;
+        color: var(--text-color);
         margin-top: 10px;
       }
       .time {
         font-size: 14px;
-        color: #8c8b8b;
+        color: var(--text-color);
+        opacity: 0.65;
         margin-top: 40px;
       }
     }
   }
   .item:hover {
     transform: translateY(-5px);
+    border-color: var(--primary-color);
   }
   .item:nth-child(n) {
     margin-top: 20px;
@@ -275,15 +680,14 @@ export default {
     position: absolute;
     right: 20px;
     top: -20px;
-    color: #0bd7c6;
+    color: var(--primary-color);
     cursor: pointer;
     font-size: 14px;
   }
 }
 .news-list {
   margin-top: 170px;
-  background: url('../../assets/images/bg2.png') no-repeat;
-  background-size: cover;
+  background: var(--background-color);
   .news-title {
     .top {
       font-size: 40px;
@@ -292,6 +696,7 @@ export default {
       display: flex;
       align-items: center;
       justify-content: center;
+      color: var(--text-color);
       div {
         display: flex;
         align-items: center;
@@ -301,10 +706,8 @@ export default {
       div:last-child {
         cursor: pointer;
         transition: all 0.2s;
-
-
         &:hover {
-          color: #0bd7c6;
+          color: var(--primary-color);
           transform: scale(1.2);
         }
       }
@@ -313,49 +716,59 @@ export default {
       font-size: 16px;
       text-align: center;
       margin-top: 10px;
+      color: var(--text-color);
+      opacity: 0.65;
     }
   }
   .newa-panel {
     width: 100%;
     height: 630px;
-    background: rgba(255, 255, 255, 0.1);
+    background: var(--card-bg-color);
     backdrop-filter: blur(10px);
     box-shadow: 2px 6px 14px rgba(0, 0, 0, 0.25);
+    border: 1px solid var(--border-color);
     margin-top: 25px;
-    // padding: 46px 180px 70px 180px;
     padding-top: 46px;
     display: flex;
     flex-direction: column;
     align-items: center;
+    border-radius: 20px;
+    overflow: hidden;
+
     .tab {
       display: flex;
       justify-content: space-between;
       align-items: center;
+      width: 90%;
       .item {
         width: 152px;
         height: 70px;
         border-radius: 10px;
         text-align: center;
         line-height: 70px;
-        color: #1e2033;
+        color: var(--text-color);
         font-size: 18px;
-        box-shadow: 7px 7px 22px -10px rgba(0, 0, 0, 0.22);
+        background: var(--card-bg-color);
+        border: 1px solid var(--border-color);
         cursor: pointer;
         transition: all 0.2s;
         margin-right: 48px;
       }
       .item:hover {
         transform: scale(1.1);
+        background: var(--gradient-color);
       }
       .item:last-child {
         margin: 0;
       }
       .active {
         color: #fff;
+        background: var(--primary-color);
+        background: var(--gradient-color);
       }
     }
     .newa-main {
-      width: 1200px;
+      width: 90%;
       height: 465px;
       padding: 58px 54px 19px 25px;
       display: flex;
@@ -364,78 +777,398 @@ export default {
       .left {
         width: 546px;
         height: 388px;
-        background-color: #d9d9d9;
+        background-color: #1f1f1f;
         border-radius: 15px;
         overflow: hidden;
+        img {
+          border-radius: 10px;
+        }
       }
       .right {
         flex: 1;
         height: 388px;
         margin-left: 89px;
         padding: 15px 0;
+
+        &.full-width {
+          margin-left: 0;
+          width: 100%;
+        }
+
         .title {
           font-size: 24px;
           font-weight: 600;
-          color: #1e2033;
+          color: var(--text-color);
         }
         .description {
           font-size: 14px;
           margin-top: 10px;
-          color: #1e2033;
+          color: var(--text-color);
+          opacity: 0.65;
         }
         .newa-main-list {
           width: 100%;
           height: 270px;
-          // background-color: pink;
           margin-top: 38px;
           ul {
             width: 100%;
             height: 100%;
-            // display: flex;
-            // flex-wrap: wrap;
-            justify-content: space-between;
-            // align-items: center;
             li {
-              // width: 227px;
               width: 100%;
               height: 65px;
               cursor: pointer;
               display: flex;
+              align-items: center;
+              justify-content: space-between;
+              padding: 0 20px;
+              border-bottom: 1px solid var(--border-color);
+              border-radius: 8px;
+
+              &:last-child {
+                border-bottom: none;
+              }
+
+              &:hover {
+                background-color: rgba(97, 247, 238, 0.1);
+              }
+
               .time {
                 font-size: 14px;
-                color: #1e2033;
-                margin-left: 20px;
-              }
-              .info::before {
-                content: ' ';
-                display: block;
-                position: absolute;
-                top: 0;
-                left: 0;
-                width: 6px;
-                height: 13px;
-                background-color: #319245;
+                color: var(--text-color);
+                opacity: 0.45;
               }
               .info {
                 position: relative;
-
-                // margin-top: 12px;
                 font-size: 14px;
-                color: #1e2033;
-                // line-height: 18px;
-                padding-left: 13px;
+                color: var(--text-color);
+                flex: 1;
+                margin-right: 20px;
 
+                &:hover {
+                  color: var(--primary-color);
+                }
               }
-              .name{
-                font-size: 14px;
-                margin-left: 20px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.light-blue-news {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  .newa-panel {
+    width: 1110px;
+    height: auto !important;
+    border: none;
+    box-shadow: none;
+    .newa-main{
+      width: 100% !important;
+    height: auto !important;
 
+    }
+  }
+  .tab {
+    .item {
+      width: 152px;
+      height: 70px;
+      border-radius: 8px;
+      margin-right: 48px;
+      border: none;
+      box-shadow: 0.01042rem 0.03125rem 0.07292rem rgba(0, 0, 0, 0.25);
+    }
+  }
+  .newa-main {
+  padding: 0 !important;
+    .right {
+    height: auto !important;
+
+      .title{
+        display: none !important;
+      }
+      margin-left: 0 !important;
+      .newa-main-list {
+        height: auto !important;
+
+        // overflow: hidden !important;
+        ul {
+        display: flex;
+        flex-wrap: wrap;
+          li {
+            padding: 0 !important;
+          flex-direction: column !important;
+        align-items: start !important;
+        // box-shadow: 0.01042rem 0.03125rem 0.07292rem rgba(0, 0, 0, 0.25);
+            border: none !important;
+          justify-content: start !important;
+            width: 350px !important;
+            height: 358px !important;
+            transition: all 0.2s !important;
+            .img{
+              width: 100%;
+              height: 200px;
+              // height: 100%;
+              img{
+                width: 100%;
+                height: 100%;
               }
             }
+            .info{
+              margin-top: 10px;
+              color: #292D33;
+              height: 50px;
+              font-size: 18px !important;
+              font-weight: 600 !important;
+              // height: 30px !important;
+              flex: none !important;
+              padding: 0 10px;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              display: -webkit-box;
+              -webkit-line-clamp: 2;
+              -webkit-box-orient: vertical;
+              line-height: 25px;
+            }
+            .time{
+              margin-top: 10px;
+              padding: 0 10px;
+            }
+            &:not(:nth-child(3n)){
+              margin-right: 30px;
+            }
+            &:hover{
+              background: #fff !important;
+              transform: translateY(-5px) !important;
+              box-shadow: 0px -4px 18px 1px rgba(0,0,0,0.15);
+
+            }
           }
         }
       }
     }
   }
 }
+.light-purple-news {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  .newa-panel {
+    width: 1110px;
+    height: auto !important;
+    border: none;
+    box-shadow: none;
+    .newa-main{
+      width: 100% !important;
+      height: auto !important;
+    }
+  }
+  .tab {
+    .item {
+      width: 152px;
+      height: 70px;
+      border-radius: 8px;
+      margin-right: 48px;
+      border: none;
+      box-shadow: 0.01042rem 0.03125rem 0.07292rem rgba(0, 0, 0, 0.25);
+    }
+  }
+  .newa-main {
+    padding: 0 !important;
+    .right {
+      height: auto !important;
+      .title{
+        display: none !important;
+      }
+      margin-left: 0 !important;
+      .newa-main-list {
+        height: auto !important;
+        ul {
+          display: flex;
+          flex-wrap: wrap;
+          li {
+            padding: 0 !important;
+            flex-direction: column !important;
+            align-items: start !important;
+            border: none !important;
+            justify-content: start !important;
+            width: 350px !important;
+            height: 358px !important;
+            transition: all 0.2s !important;
+            .img{
+              width: 100%;
+              height: 200px;
+              img{
+                width: 100%;
+                height: 100%;
+              }
+            }
+            .info{
+              margin-top: 10px;
+              color: #292D33;
+              height: 50px;
+              font-size: 18px !important;
+              font-weight: 600 !important;
+              flex: none !important;
+              padding: 0 10px;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              display: -webkit-box;
+              -webkit-line-clamp: 2;
+              -webkit-box-orient: vertical;
+              line-height: 25px;
+            }
+            .time{
+              margin-top: 10px;
+              padding: 0 10px;
+            }
+            &:not(:nth-child(3n)){
+              margin-right: 30px;
+            }
+            &:hover{
+              background: #fff !important;
+              transform: translateY(-5px) !important;
+              box-shadow: 0px -4px 18px 1px rgba(0,0,0,0.15);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.signup-section {
+  padding: 40px 0;
+  background-color: var(--card-bg-color);
+  border-radius: 12px;
+  margin: 20px 0;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s;
+
+  .signup-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 40px;
+    gap: 40px;
+
+    .signup-text {
+      flex: 1;
+      text-align: left;
+
+      h2 {
+        font-size: 28px;
+        color: var(--text-color);
+        margin-bottom: 16px;
+        font-weight: 600;
+      }
+
+      p {
+        font-size: 16px;
+        color: var(--text-color);
+        opacity: 0.8;
+        margin-bottom: 24px;
+        line-height: 1.6;
+      }
+
+      .signup-button {
+        display: inline-block;
+        padding: 12px 32px;
+        background: var(--gradient-color);
+        color: white;
+        border-radius: 25px;
+        font-size: 16px;
+        font-weight: 500;
+        text-decoration: none;
+        transition: all 0.3s;
+        border: none;
+        cursor: pointer;
+
+        &:hover {
+          transform: translateY(-2px);
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        }
+      }
+    }
+
+    .signup-image {
+      flex: 1;
+      max-width: 500px;
+      height: 300px;
+      border-radius: 8px;
+      overflow: hidden;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        transition: transform 0.3s;
+
+        &:hover {
+          transform: scale(1.05);
+        }
+      }
+    }
+  }
+
+  &:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  }
+}
+
+// 在暗黑主题下调整样式
+:deep(.dark) {
+  .signup-section {
+    background-color: var(--card-bg-color);
+    border: 1px solid var(--border-color);
+
+    .signup-content {
+      .signup-text {
+        h2 {
+          color: var(--text-color);
+        }
+        p {
+          color: var(--text-color);
+        }
+      }
+    }
+  }
+}
+.content {
+  width: 100%;
+  // left: -240px;
+  position: relative;
+  height: 244px;
+  background-color: #185cff;
+  display: flex;
+  justify-content: center;
+  ul {
+    width: 1420px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    li {
+      width: 25%;
+      color: #fff;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      .title {
+        font-size: 40px;
+        font-weight: 600;
+      }
+      .description {
+        font-size: 16px;
+        margin-top: 20px;
+      }
+      &:not(:last-child) {
+        border-right: 1px solid #ffffff44;
+      }
+    }
+  }
+}
 </style>
diff --git a/src/views/news/index.vue b/src/views/news/index.vue
index 2cd8816..87a5060 100644
--- a/src/views/news/index.vue
+++ b/src/views/news/index.vue
@@ -67,38 +67,41 @@ const setImageUrl = (url: string) => {
   margin-top: 100px;
   .news-list {
     width: 100%;
-    // height: 900px;
-    // background-color: #f2f3f5;
     padding: 15px;
-    border: 1px solid #f2f3f5;
+    border: 1px solid var(--border-color);
+    background-color: var(--card-bg-color);
     border-radius: 5px;
     .item {
       .news-title {
         font-size: 24px;
         font-weight: 700;
+        color: var(--text-color);
       }
       .children {
         margin: 20px 0;
         .son-item {
           width: 100%;
           height: 100px;
-          background-color: #fff;
+          background-color: var(--card-bg-color);
           padding: 15px;
           display: flex;
-          border-bottom: 1px solid rgba(228, 230, 235, 0.5);
+          border-bottom: 1px solid var(--border-color);
           justify-content: space-between;
           cursor: pointer;
+          transition: all 0.3s;
           .left {
             width: 1000px;
             .title {
               font-size: 18px;
               font-weight: 700;
-              color: #4f5153;
+              color: var(--text-color);
+              transition: color 0.3s;
             }
             .content {
               margin-top: 8px;
               font-size: 13px;
-              color: #8a919f;
+              color: var(--text-color);
+              opacity: 0.65;
               display: -webkit-box;
               -webkit-line-clamp: 1;
               -webkit-box-orient: vertical;
@@ -107,7 +110,8 @@ const setImageUrl = (url: string) => {
             .time {
               margin-top: 8px;
               font-size: 12px;
-              color: #8a919f;
+              color: var(--text-color);
+              opacity: 0.45;
               display: flex;
             }
           }
@@ -119,10 +123,15 @@ const setImageUrl = (url: string) => {
             img {
               width: 100%;
               height: 100%;
+              border-radius: 4px;
+              border: 1px solid var(--border-color);
             }
           }
           &:hover {
-            background-color: #f7f8fa;
+            background-color: var(--background-color);
+            .title {
+              color: var(--primary-color);
+            }
           }
         }
       }
@@ -135,27 +144,29 @@ const setImageUrl = (url: string) => {
   top: 100px;
   z-index: 999;
   width: 150px;
-  // height: 300px;
-  background-color: #f2f3f5;
+  background-color: var(--card-bg-color);
+  border: 1px solid var(--border-color);
   padding: 10px;
   border-radius: 5px;
   .item {
     height: 45px;
-    // text-align: center;
     line-height: 22px;
     font-size: 16px;
     padding: 10px;
     border-radius: 5px;
     cursor: pointer;
     margin: 5px 0;
+    color: var(--text-color);
+    transition: all 0.3s;
     &:hover {
-      background-color: #0bd7c628;
-      color: #0bd7c6;
+      background-color: var(--primary-color);
+      color: #ffffff;
+      opacity: 0.8;
     }
   }
   .active {
-    background-color: #0bd7c628;
-    color: #0bd7c6;
+    background-color: var(--primary-color);
+    color: #ffffff;
   }
 }
 </style>
diff --git a/src/views/raceInfo/index.vue b/src/views/raceInfo/index.vue
index a16b987..4bc0cf2 100644
--- a/src/views/raceInfo/index.vue
+++ b/src/views/raceInfo/index.vue
@@ -308,9 +308,9 @@ const scrollToPosition = () => {
   .top-image {
     width: 100%;
     height: 300px;
-    background-color: skyblue;
+    background: var(--background-color);
     text-align: center;
-    color: #fff;
+    color: var(--text-color);
     font-size: 32px;
     font-weight: 700;
     line-height: 300px;
@@ -319,16 +319,14 @@ const scrollToPosition = () => {
     width: 100%;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
-    // grid-template-rows: repeat(2, 1fr);
-    // gap: 10px;
-    // margin-top: 10px;
     .item {
       width: 340px;
       height: 360px;
-      // background-color: pink;
+      background-color: var(--card-bg-color);
       box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.06);
       cursor: pointer;
       border-radius: 10px;
+      border: 1px solid var(--border-color);
       transition: all 0.2s;
       .image {
         width: 100%;
@@ -336,19 +334,21 @@ const scrollToPosition = () => {
         img {
           width: 100%;
           height: 100%;
+          border-radius: 4px;
         }
       }
       .reac-info {
         padding: 0 8px;
         .reac-title {
           margin-top: 19px;
-          color: #c9c9c9;
+          color: var(--text-color);
+          opacity: 0.65;
           font-size: 12px;
         }
         .reac-project {
           font-size: 16px;
           font-weight: 600;
-          color: #333333;
+          color: var(--text-color);
           margin-top: 10px;
           line-height: 20px;
           height: 60px;
@@ -359,11 +359,12 @@ const scrollToPosition = () => {
         }
         .time {
           font-size: 14px;
-          color: #8c8b8b;
+          color: var(--text-color);
+          opacity: 0.65;
           margin-top: 30px;
         }
         .niandu {
-          color: #1e2033;
+          color: var(--text-color);
           font-size: 18px;
           margin-top: 20px;
           font-weight: 600;
@@ -375,6 +376,7 @@ const scrollToPosition = () => {
     }
     .item:hover {
       transform: translateY(-5px);
+      border-color: var(--primary-color);
     }
     .item:nth-child(n) {
       margin-top: 20px;
@@ -391,12 +393,13 @@ const scrollToPosition = () => {
       width: 300px;
       margin-left: 40px;
       .title {
-        color: #1e2033;
+        color: var(--text-color);
         font-size: 28px;
         font-weight: 600;
       }
       .description {
-        color: #1e2033;
+        color: var(--text-color);
+        opacity: 0.65;
         font-size: 14px;
         margin-top: 15px;
       }
@@ -406,8 +409,7 @@ const scrollToPosition = () => {
           position: relative;
           width: 100%;
           height: 140px;
-          // background-color: pink;
-          color: #333333;
+          color: var(--text-color);
           padding: 15px;
           display: flex;
           flex-direction: column;
@@ -415,8 +417,13 @@ const scrollToPosition = () => {
           box-shadow: 0rem 0rem 0.05208rem rgba(0, 0, 0, 0.06);
           margin-top: 10px;
           cursor: pointer;
+          background: var(--card-bg-color);
+          border: 1px solid var(--border-color);
+          border-radius: 4px;
+          transition: all 0.3s;
           .year {
             font-size: 12px;
+            opacity: 0.65;
           }
           .name {
             width: 130px;
@@ -426,6 +433,7 @@ const scrollToPosition = () => {
           }
           .time {
             font-size: 12px;
+            opacity: 0.45;
           }
           .go-to {
             position: absolute;
@@ -436,9 +444,9 @@ const scrollToPosition = () => {
             line-height: 28px;
             text-align: center;
             font-size: 14px;
-            color: #f6f5fb;
-            background: url('../../assets/images/left-top.png') no-repeat;
-            background-size: contain;
+            color: #ffffff;
+            background: var(--primary-color);
+            border-radius: 0 4px 0 4px;
           }
           .icon {
             position: absolute;
@@ -450,6 +458,14 @@ const scrollToPosition = () => {
             img {
               width: 100%;
               height: 100%;
+              opacity: 0.8;
+            }
+          }
+          &:hover {
+            transform: translateY(-2px);
+            border-color: var(--primary-color);
+            .name {
+              color: var(--primary-color);
             }
           }
         }
@@ -474,12 +490,14 @@ const scrollToPosition = () => {
               display: flex;
               .label {
                 font-size: 16px;
-                color: #aaa;
+                color: var(--text-color);
+                opacity: 0.45;
                 width: 100px;
               }
               .text {
                 font-size: 16px;
                 font-weight: 600;
+                color: var(--text-color);
               }
             }
             li:first-child {
@@ -499,7 +517,8 @@ const scrollToPosition = () => {
         margin-top: 25px;
         .label {
           font-size: 16px;
-          color: #aaa;
+          color: var(--text-color);
+          opacity: 0.45;
         }
         .deaceiption {
           font-size: 16px;
@@ -507,6 +526,7 @@ const scrollToPosition = () => {
           line-height: 26px;
           margin-top: 15px;
           height: 300px;
+          color: var(--text-color);
         }
         .file {
           margin-top: 25px;
@@ -519,12 +539,16 @@ const scrollToPosition = () => {
     width: 100%;
     font-size: 14px;
     line-height: 22px;
-    border: 1px solid #ccc;
+    border: 1px solid var(--border-color);
+    background-color: var(--card-bg-color);
     padding: 20px;
     margin-top: 20px;
+    color: var(--text-color);
     p {
       img {
         width: 100%;
+        border-radius: 4px;
+        border: 1px solid var(--border-color);
       }
     }
   }
@@ -532,6 +556,12 @@ const scrollToPosition = () => {
 :deep(.el-card) {
   width: 100%;
   height: 100%;
+  background-color: var(--card-bg-color);
+  border-color: var(--border-color);
+  color: var(--text-color);
+  .el-card__header {
+    border-bottom: 1px solid var(--border-color);
+  }
 }
 img {
   width: 100%;