样式

src/assets/style/main.css

@@ -1,5 +1,53 @@
 @import "tailwindcss";
 
+
+/* 默认浅色主题 (Light) */
+:root {
+  --bg-primary: #ffffff;
+  --bg-secondary: #f5f7fa;
+  --bg-card: #ffffff;
+  --text-primary: #303133;
+  --text-secondary: #606266;
+  --text-tertiary: #909399;
+  --border-color: #dcdfe6;
+  
+  /* 品牌色 */
+  --primary-color: #02409b;
+  --primary-hover: #02307a;
+  --primary-soft: rgba(2, 64, 155, 0.1);
+  
+  /* 特定组件背景 (根据您的代码适配) */
+  --header-bg: #ffffff;
+  --header-border: #e4e7ed;
+  --item-card-bg: #ffffff;
+  --item-card-border: #e4e7ed;
+  --item-icon-bg: linear-gradient(135deg, rgba(2, 64, 155, 0.1) 0%, rgba(2, 64, 155, 0.02) 100%);
+}
+
+/* 深色主题 (Dark) */
+[data-theme='dark'] {
+  --bg-primary: #0b0f2e; /* 对应您代码中的 rgb(11, 15, 46) */
+  --bg-secondary: #131928;
+  --bg-card: #131928;
+  --text-primary: #eaf1ff;
+  --text-secondary: #c7ced9;
+  --text-tertiary: #869ac2;
+  --border-color: #262360;
+  
+  /* 品牌色 (深色模式下可能需要稍微亮一点，或者保持一致) */
+  --primary-color: #4285f4; 
+  --primary-hover: #66a3ff;
+  --primary-soft: rgba(66, 133, 244, 0.15);
+  
+  /* 特定组件背景 */
+  --header-bg: #010612; /* 对应 header.vue 中的 bg-[#010612] */
+  --header-border: #131928;
+  --item-card-bg: rgb(11, 15, 46);
+  --item-card-border: #262360;
+  --item-icon-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 100%);
+}
+
+
 @layer base {
   html,
   body,
@@ -10,6 +58,9 @@
   }
 
   body {
+    background-color: var(--bg-primary);
+  color: var(--text-primary);
+  transition: background-color 0.3s, color 0.3s;
     margin: 0;
   }
 }

src/components/home/header.vue

@@ -5,11 +5,7 @@
     <div class="flex items-center justify-between px-5 md:px-20 h-15">
       <div class="flex items-center gap-2 cursor-pointer" @click="goHome">
         <img :src="logo" alt="logo" class="w-9 h-9 rounded-md" />
-        <span
-          style="text-wrap-mode: nowrap"
-          class="text-[#02409b] text-[20px] font-bold hidden lg:flex"
-          >KERUI DEEPOIL</span
-        >
+        <img :src="logo2" alt="logo" class="h-10 hidden lg:flex" />
         <span class="text-[#828182] text-[14px]" style="text-wrap-mode: nowrap"
           >智慧经营平台</span
         >
@@ -479,6 +475,7 @@ import { Icon } from "@iconify/vue";
 import { ref, computed, onMounted, onBeforeUnmount } from "vue";
 import { useRouter } from "vue-router";
 import logo from "@/assets/images/logo.png";
+import logo2 from "@/assets/images/logo2.png";
 import person from "@/assets/images/person.png";
 import { useUserStoreWithOut } from "@/stores/useUserStore";
 const userStore = useUserStoreWithOut();

src/stores/useThemeStore.ts

@@ -0,0 +1,38 @@
+// src/stores/useThemeStore.ts
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+export const useThemeStore = defineStore("theme", () => {
+  // 默认从 localStorage 读取，如果没有则根据系统偏好或默认 'light'
+  const theme = ref<"light" | "dark">(
+    (localStorage.getItem("theme") as "light" | "dark") || "light",
+  );
+
+  const setTheme = (newTheme: "light" | "dark") => {
+    theme.value = newTheme;
+    localStorage.setItem("theme", newTheme);
+    updateHtmlAttribute();
+  };
+
+  const toggleTheme = () => {
+    setTheme(theme.value === "light" ? "dark" : "light");
+  };
+
+  // 更新 html 标签的 data-theme 属性，以便 CSS 选择器生效
+  const updateHtmlAttribute = () => {
+    if (theme.value === "dark") {
+      document.documentElement.setAttribute("data-theme", "dark");
+    } else {
+      document.documentElement.removeAttribute("data-theme");
+    }
+  };
+
+  // 初始化时执行一次
+  updateHtmlAttribute();
+
+  return {
+    theme,
+    setTheme,
+    toggleTheme,
+  };
+});

src/views/index.vue

@@ -21,10 +21,7 @@
               }"
             >
               <div class="hero-copy carousel-caption">
-                <div class="hero-script text-[68px] font-italic text-[#0c4eb5]">
-                  HELLO
-                </div>
-                <p class="hero-text mt-6 text-[24px] text-[#5f6f83]">
+                <p class="hero-text mt-6 text-[30px]! text-[#5f6f83]">
                   {{ slide.text }}
                 </p>
               </div>
@@ -768,7 +765,7 @@ const filteredSections = computed(() => {
 const slides = ref([
   {
     image: banner2,
-    text: "",
+    text: "数字化转型，驱动未来增长",
   },
   {
     image: banner1,
@@ -1497,14 +1494,14 @@ onUnmounted(() => {
 }
 
 .platform-app--active {
-  /* background: linear-gradient(
+  background: linear-gradient(
     90deg,
-    rgba(76, 103, 224, 0.2),
+    rgba(76, 103, 224, 0.5),
     rgba(23, 30, 58, 0.88)
   );
   color: #f4f7ff;
   border-color: rgba(129, 145, 255, 0.44);
-  box-shadow: inset 0 0 0 1px rgba(159, 173, 255, 0.08); */
+  box-shadow: inset 0 0 0 1px rgba(159, 173, 255, 0.08);
   font-weight: 700;
 }
 

src/views/login.vue

@@ -21,7 +21,7 @@
         <h1 class="text-2xl font-bold text-center">登录</h1>
 
         <!-- 用户名密码登陆 -->
-        <!-- <div>
+        <div>
           <el-form
             :model="form"
             :rules="rules"
@@ -62,7 +62,7 @@
               >
             </div>
           </div>
-        </div> -->
+        </div>
 
         <!-- 钉钉登陆 -->
         <div class="text-center">