diff --git a/.env.development b/.env.development
index 9fa84f9..399bf06 100644
--- a/.env.development
+++ b/.env.development
@@ -1,5 +1,5 @@
 # 页面标题
-VITE_APP_TITLE = 物联网管理系统
+VITE_APP_TITLE = 星汉研创科技
 
 # 开发环境配置
 VITE_APP_ENV = 'development'
diff --git a/.env.production b/.env.production
index 1894aef..8ef038f 100644
--- a/.env.production
+++ b/.env.production
@@ -1,5 +1,5 @@
 # 页面标题
-VITE_APP_TITLE = 物联网管理系统
+VITE_APP_TITLE = 星汉研创科技
 
 # 生产环境配置 晶全1
 VITE_APP_ENV = 'https://fuyuanshen.com/backend'
diff --git a/index.html b/index.html
index 47ca3f6..1b06228 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
     <meta name="renderer" content="webkit" />
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
     <link rel="icon" href="/favicon.ico" />
-    <title>物联网管理系统</title>
+    <title>星汉研创科技</title>
     <!--[if lt IE 11
       ]><script>
         window.location.href = '/html/ie.html';
diff --git a/package.json b/package.json
index bed5e76..7b9d0ee 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "$schema": "https://json.schemastore.org/package",
   "name": "fys",
   "version": "5.4.0-2.4.0",
-  "description": "物联网管理系统",
+  "description": "星汉研创科技",
   "author": "LionLi",
   "license": "MIT",
   "type": "module",
diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss
index 7410b6f..43ff48c 100644
--- a/src/assets/styles/sidebar.scss
+++ b/src/assets/styles/sidebar.scss
@@ -16,7 +16,7 @@
     -webkit-transition: width 0.28s;
     transition: width 0.28s;
     width: $base-sidebar-width !important;
-    background-color: $base-menu-background;
+    background: #2c3e50; // 精确匹配设计UI的背景色
     height: 100%;
     position: fixed;
     font-size: 0;
@@ -25,8 +25,15 @@
     left: 0;
     z-index: 1001;
     overflow: hidden;
-    -webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
-    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
+    // 使用CSS变量定义边框样式，支持动态修改
+    border-right: var(--sidebarBorderWidth) var(--sidebarBorderStyle) var(--sidebarBorderColor);
+    box-shadow: var(--sidebarBoxShadow);
+    
+    // 备用方案：如果CSS变量不支持，使用默认样式
+    @supports not (border-right: var(--sidebarBorderWidth) var(--sidebarBorderStyle) var(--sidebarBorderColor)) {
+      border-right: none;
+      box-shadow: 1px 0 4px rgba(0, 0, 0, 0.1);
+    }
 
     // reset element-ui css
     .horizontal-collapse-transition {
@@ -90,17 +97,23 @@
     .theme-dark .el-sub-menu__title {
       &:hover {
         background-color: $base-sub-menu-title-hover !important;
+        transition: all 0.3s ease;
       }
     }
     .sub-menu-title-noDropdown,
     .el-sub-menu__title {
       &:hover {
         background-color: rgba(0, 0, 0, 0.05) !important;
+        transition: all 0.3s ease;
       }
     }
 
     & .theme-dark .is-active > .el-sub-menu__title {
-      color: $base-menu-color-active !important;
+      color: #ffffff !important;
+      background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色
+      border-radius: 4px;
+      margin: 2px 8px;
+      box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
     }
 
     & .nest-menu .el-sub-menu > .el-sub-menu__title,
@@ -108,6 +121,7 @@
       min-width: $base-sidebar-width !important;
       &:hover {
         background-color: rgba(0, 0, 0, 0.1) !important;
+        transition: all 0.3s ease;
       }
     }
 
@@ -117,6 +131,7 @@
 
       &:hover {
         background-color: $base-sub-menu-hover !important;
+        transition: all 0.3s ease;
       }
     }
 
@@ -125,6 +140,7 @@
       &:hover {
         // you can use $sub-menuHover
         background-color: $base-menu-hover !important;
+        transition: all 0.3s ease;
       }
     }
     & .nest-menu .el-sub-menu > .el-sub-menu__title,
@@ -132,6 +148,7 @@
       &:hover {
         // you can use $sub-menuHover
         background-color: rgba(0, 0, 0, 0.04) !important;
+        transition: all 0.3s ease;
       }
     }
   }
@@ -232,3 +249,199 @@
     }
   }
 }
+
+// 自定义侧边栏样式类
+.sidebar-modern {
+  .sidebar-container {
+    background: linear-gradient(180deg, #2c3e50 0%, #34495e 100%);
+    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.2);
+    border-right: none;
+  }
+}
+
+.sidebar-minimal {
+  .sidebar-container {
+    background: #304156;
+    box-shadow: 1px 0 4px rgba(0, 0, 0, 0.1);
+    border-right: none;
+  }
+}
+
+.sidebar-elegant {
+  .sidebar-container {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    box-shadow: 3px 0 15px rgba(0, 0, 0, 0.25);
+    border-right: none;
+  }
+}
+
+// 激活菜单项的渐变效果
+.el-menu-item.is-active {
+  background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色
+  color: #ffffff !important;
+  border-radius: 4px;
+  margin: 2px 8px;
+  box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
+  transition: all 0.3s ease;
+}
+
+// 子菜单激活状态
+.el-sub-menu.is-active > .el-sub-menu__title {
+  background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色
+  color: #ffffff !important;
+  border-radius: 4px;
+  margin: 2px 8px;
+  box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
+  transition: all 0.3s ease;
+}
+
+// 更精确的菜单项样式匹配图片效果
+.sidebar-container {
+  // 确保背景色与图片一致
+  background: #2c3e50 !important;
+  
+  .el-menu-item {
+    &.is-active {
+      background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色
+      color: #ffffff !important;
+      border-radius: 4px;
+      margin: 2px 8px;
+      box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
+      transition: all 0.3s ease;
+    }
+  }
+  
+  .el-sub-menu {
+    &.is-active > .el-sub-menu__title {
+      background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色
+      color: #ffffff !important;
+      border-radius: 4px;
+      margin: 2px 8px;
+      box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
+      transition: all 0.3s ease;
+    }
+  }
+  
+  // 子菜单项激活状态（只有文字颜色变化，无背景）
+  .el-sub-menu .el-menu-item {
+    &.is-active {
+      background: transparent !important;
+      color: #409eff !important;
+      border-radius: 0;
+      margin: 0;
+      box-shadow: none;
+    }
+  }
+}
+
+// 精确匹配设计UI的样式类
+.sidebar-design-ui {
+  .sidebar-container {
+    background: #2c3e50 !important;
+    box-shadow: 1px 0 4px rgba(0, 0, 0, 0.1) !important;
+    border-right: none !important;
+  }
+  
+  .sidebar-logo-container {
+    background: #2c3e50 !important;
+  }
+  
+  .el-menu {
+    background: #2c3e50 !important;
+  }
+  
+  // 非激活菜单项样式
+  .el-menu-item,
+  .el-sub-menu__title {
+    color: #bfcbd9 !important;
+    
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.1) !important;
+    }
+  }
+  
+  // 激活的主菜单项（正确的渐变背景）
+  .el-menu-item.is-active,
+  .el-sub-menu.is-active > .el-sub-menu__title {
+    background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色
+    color: #ffffff !important;
+    border-radius: 4px;
+    margin: 2px 8px;
+    box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
+  }
+  
+  // 激活的子菜单项（只有蓝色文字，无背景）
+  .el-sub-menu .el-menu-item.is-active {
+    background: transparent !important;
+    color: #409eff !important;
+    border-radius: 0;
+    margin: 0;
+    box-shadow: none;
+  }
+  
+  // 子菜单背景色
+  .el-sub-menu .el-menu {
+    background: #1f2d3d !important;
+  }
+  
+  // 子菜单项悬停效果
+  .el-sub-menu .el-menu-item:hover {
+    background-color: rgba(0, 0, 0, 0.1) !important;
+  }
+  
+  // 主菜单项悬停效果
+  .el-menu-item:hover,
+  .el-sub-menu__title:hover {
+    background-color: rgba(0, 0, 0, 0.1) !important;
+  }
+}
+
+// 全局菜单样式匹配设计UI
+#app .sidebar-container {
+  // 确保背景色一致
+  background: #2c3e50 !important;
+  
+  // 菜单项基础样式
+  .el-menu-item,
+  .el-sub-menu__title {
+    color: #bfcbd9 !important;
+    
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.1) !important;
+    }
+  }
+  
+  // 激活的主菜单项
+  .el-menu-item.is-active,
+  .el-sub-menu.is-active > .el-sub-menu__title {
+    background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色
+    color: #ffffff !important;
+    border-radius: 4px;
+    margin: 2px 8px;
+    box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
+  }
+  
+  // 激活的子菜单项
+  .el-sub-menu .el-menu-item.is-active {
+    background: transparent !important;
+    color: #409eff !important;
+    border-radius: 0;
+    margin: 0;
+    box-shadow: none;
+  }
+  
+  // 子菜单背景
+  .el-sub-menu .el-menu {
+    background: #1f2d3d !important;
+  }
+  
+  // 图标颜色
+  .svg-icon {
+    color: inherit !important;
+  }
+  
+  // 箭头图标颜色
+  .el-sub-menu__icon-arrow {
+    color: inherit !important;
+  }
+}
diff --git a/src/assets/styles/variables.module.scss b/src/assets/styles/variables.module.scss
index 3aa871b..a7959e1 100644
--- a/src/assets/styles/variables.module.scss
+++ b/src/assets/styles/variables.module.scss
@@ -1,19 +1,28 @@
 // 全局SCSS变量
 :root {
-  --menuBg: #304156;
-  --menuColor: #bfcbd9;
-  --menuActiveText: #f4f4f5;
-  --menuHover: #263445;
+  --menuBg: #2c3e50; // 精确匹配图片中的深色背景
+  --menuColor: #bfcbd9; // 非激活菜单项的文字颜色
+  --menuActiveText: #ffffff; // 激活菜单项的文字颜色
+  --menuHover: #34495e; // 悬停时的背景色
 
-  --subMenuBg: #1f2d3d;
-  --subMenuActiveText: #f4f4f5;
-  --subMenuHover: #001528;
-  --subMenuTitleHover: #293444;
+  --subMenuBg: #1f2d3d; // 子菜单背景色
+  --subMenuActiveText: #409eff; // 激活子菜单项的文字颜色（蓝色）
+  --subMenuHover: #001528; // 子菜单悬停背景色
+  --subMenuTitleHover: #293444; // 子菜单标题悬停背景色
+
+  // 激活菜单项的渐变颜色 - 根据设计UI调整
+  --menuActiveGradient: linear-gradient(90deg, #0080EA 0%, #000F27 100%);
 
   --fixedHeaderBg: #ffffff;
   --tableHeaderBg: #f8f8f9;
   --tableHeaderTextColor: #515a6e;
 
+  // 侧边框样式变量 - 实现无边框但有阴影的效果
+  --sidebarBorderColor: transparent;
+  --sidebarBorderWidth: 0px;
+  --sidebarBorderStyle: solid;
+  --sidebarBoxShadow: 1px 0 4px rgba(0, 0, 0, 0.1);
+
   // ele
   --brder-color: #e8e8e8;
 
@@ -23,20 +32,29 @@
 }
 
 html.dark {
-  --menuBg: #1d1e1f;
+  --menuBg: #2c3e50; // 保持与浅色模式一致
   --menuColor: #bfcbd9;
-  --menuActiveText: #f4f4f5;
-  --menuHover: #171819;
+  --menuActiveText: #ffffff;
+  --menuHover: #34495e;
 
-  --subMenuBg: #1d1e1f;
-  --subMenuActiveText: #1d1e1f;
-  --subMenuHover: #171819;
-  --subMenuTitleHover: #171819;
+  --subMenuBg: #1f2d3d;
+  --subMenuActiveText: #409eff; // 激活子菜单项保持蓝色
+  --subMenuHover: #001528;
+  --subMenuTitleHover: #293444;
+
+  // 激活菜单项的渐变颜色 - 根据设计UI调整
+  --menuActiveGradient: linear-gradient(90deg, #0080EA 0%, #000F27 100%);
 
   --fixedHeaderBg: #171819;
   --tableHeaderBg: var(--el-bg-color);
   --tableHeaderTextColor: var(--el-text-color);
 
+  // 深色模式侧边框样式变量 - 实现无边框但有阴影的效果
+  --sidebarBorderColor: transparent;
+  --sidebarBorderWidth: 0px;
+  --sidebarBorderStyle: solid;
+  --sidebarBoxShadow: 1px 0 4px rgba(0, 0, 0, 0.15);
+
   // 覆盖ele 高亮当前行的标准暗色
   .el-tree-node__content {
     --el-color-primary-light-9: #262727;
diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue
index f51b3e1..cbc5048 100644
--- a/src/layout/components/Sidebar/Logo.vue
+++ b/src/layout/components/Sidebar/Logo.vue
@@ -34,7 +34,7 @@ defineProps({
   }
 });
 
-const title = ref('物联网管理系统');
+const title = ref('星汉研创科技');
 const settingsStore = useSettingsStore();
 const sideTheme = computed(() => settingsStore.sideTheme);
 </script>
@@ -54,7 +54,7 @@ const sideTheme = computed(() => settingsStore.sideTheme);
   width: 100%;
   height: 50px;
   line-height: 50px;
-  background: #2b2f3a;
+  background: #2c3e50; // 精确匹配设计UI的背景色
   text-align: center;
   overflow: hidden;
 
@@ -75,7 +75,7 @@ const sideTheme = computed(() => settingsStore.sideTheme);
       color: #fff;
       font-weight: 600;
       line-height: 50px;
-      font-size: 14px;
+      font-size: 16px; // 匹配设计UI的字体大小
       font-family:
         Avenir,
         Helvetica Neue,
diff --git a/src/views/index.vue b/src/views/index.vue
index 5035034..6ea13d0 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,36 +1,404 @@
 <template>
   <div class="app-container home">
-    <el-row :gutter="20">
-      <el-col :sm="24" :lg="12">
-        <div class="kfzIMG">
-          <img src="@/assets/images/kfz.png" alt="" class="kfIMG">
-          <p>功能开发中....敬请期待</p>
-        </div>
-      </el-col>
+    <!-- 面包屑导航 -->
+    <el-breadcrumb separator="/" class="breadcrumb">
+      <el-breadcrumb-item>
+        <span class="breadcrumb-dot active"></span>
+        首页
+      </el-breadcrumb-item>
+      <el-breadcrumb-item>
+        <span class="breadcrumb-dot"></span>
+        设备管理
+      </el-breadcrumb-item>
+    </el-breadcrumb>
 
+    <!-- 数据总览卡片 -->
+    <el-card class="data-overview-card" shadow="hover">
+      <template #header>
+        <div class="card-header">
+          <span class="card-title">数据总览</span>
+        </div>
+      </template>
+      <el-row :gutter="20">
+        <el-col :span="4" v-for="(item, index) in dataOverview" :key="index">
+          <div class="data-item">
+            <div class="data-icon" :style="{ backgroundColor: item.color }">
+              <el-icon><component :is="item.icon" /></el-icon>
+            </div>
+            <div class="data-content">
+              <div class="data-value">{{ item.value }}</div>
+              <div class="data-label">{{ item.label }}</div>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </el-card>
+
+    <!-- 设备统计卡片 -->
+    <el-row :gutter="20" class="device-stats">
+      <el-col :span="12">
+        <el-card class="device-card" shadow="hover">
+          <template #header>
+            <div class="card-header">
+              <span class="card-title">蓝牙设备</span>
+            </div>
+          </template>
+          <el-row :gutter="20">
+            <el-col :span="8" v-for="(item, index) in bluetoothStats" :key="index">
+              <div class="device-item">
+                <div class="device-value">{{ item.value }}</div>
+                <div class="device-label">{{ item.label }}</div>
+              </div>
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card class="device-card" shadow="hover">
+          <template #header>
+            <div class="card-header">
+              <span class="card-title">4G设备</span>
+            </div>
+          </template>
+          <el-row :gutter="20">
+            <el-col :span="8" v-for="(item, index) in g4Stats" :key="index">
+              <div class="device-item">
+                <div class="device-value">{{ item.value }}</div>
+                <div class="device-label">{{ item.label }}</div>
+              </div>
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
     </el-row>
-    <el-divider />
+
+    <!-- 地区分布图表 -->
+    <el-card class="region-chart-card" shadow="hover">
+      <template #header>
+        <div class="card-header">
+          <span class="card-title">设备使用频次地区分布</span>
+          <div class="chart-controls">
+            <el-select v-model="selectedMonth" placeholder="选择月份" size="small">
+              <el-option label="7月" value="7"></el-option>
+              <el-option label="8月" value="8"></el-option>
+              <el-option label="9月" value="9"></el-option>
+            </el-select>
+            <el-select v-model="selectedYear" placeholder="选择年份" size="small">
+              <el-option label="2025年" value="2025"></el-option>
+              <el-option label="2024年" value="2024"></el-option>
+            </el-select>
+          </div>
+        </div>
+      </template>
+      <div class="chart-container">
+        <div class="chart-bars">
+          <div 
+            v-for="(region, index) in regionData" 
+            :key="index" 
+            class="chart-bar-item"
+          >
+            <div class="bar-label">{{ region.name }}</div>
+            <div class="bar-container">
+              <div 
+                class="bar" 
+                :style="{ 
+                  height: (region.value / maxValue) * 200 + 'px',
+                  backgroundColor: region.color 
+                }"
+              ></div>
+            </div>
+            <div class="bar-value">{{ region.value }}</div>
+          </div>
+        </div>
+        <div class="chart-nav">
+          <el-button type="text" size="small">
+            <el-icon><ArrowRight /></el-icon>
+          </el-button>
+        </div>
+      </div>
+    </el-card>
   </div>
 </template>
 
 <script setup name="Index" lang="ts">
+import { ref, computed } from 'vue'
+import { 
+  Monitor, 
+  Connection, 
+  Warning, 
+  Plus, 
+  Bell,
+  ArrowRight 
+} from '@element-plus/icons-vue'
+
+// 数据总览
+const dataOverview = ref([
+  { label: '设备总量', value: '1,234', icon: 'Monitor', color: '#409eff' },
+  { label: '在线设备', value: '987', icon: 'Connection', color: '#67c23a' },
+  { label: '异常设备', value: '45', icon: 'Warning', color: '#e6a23c' },
+  { label: '新增绑定', value: '23', icon: 'Plus', color: '#f56c6c' },
+  { label: '设备报警', value: '12', icon: 'Bell', color: '#909399' }
+])
+
+// 蓝牙设备统计
+const bluetoothStats = ref([
+  { label: '总量', value: '856' },
+  { label: '在线', value: '723' },
+  { label: '新增绑定', value: '15' }
+])
+
+// 4G设备统计
+const g4Stats = ref([
+  { label: '总量', value: '378' },
+  { label: '在线', value: '264' },
+  { label: '新增绑定', value: '8' }
+])
+
+// 地区分布数据
+const regionData = ref([
+  { name: '北京', value: 156, color: '#409eff' },
+  { name: '上海', value: 134, color: '#67c23a' },
+  { name: '杭州', value: 98, color: '#e6a23c' }
+])
+
+// 计算最大值用于图表比例
+const maxValue = computed(() => {
+  return Math.max(...regionData.value.map(item => item.value))
+})
+
+// 选择器数据
+const selectedMonth = ref('7')
+const selectedYear = ref('2025')
 </script>
 
 <style lang="scss" scoped>
 .home {
-  .kfzIMG {
-    left: 50%;
-    top: 50%;
-    position: absolute;
-    transform: translate(-50%, 100%);
-    text-align: center;
+  padding: 20px;
+  background-color: #f5f7fa;
+  min-height: calc(100vh - 84px);
+
+  .breadcrumb {
+    margin-bottom: 20px;
+    padding: 10px 0;
+    
+    .breadcrumb-dot {
+      display: inline-block;
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      margin-right: 8px;
+      background-color: #c0c4cc;
+      
+      &.active {
+        background-color: #409eff;
+      }
+    }
   }
 
-  .kfIMG {
-    width: 60%;
+  .data-overview-card {
+    margin-bottom: 20px;
+    
+    .card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      
+      .card-title {
+        font-size: 16px;
+        font-weight: 600;
+        color: #303133;
+      }
+    }
+
+    .data-item {
+      display: flex;
+      align-items: center;
+      padding: 16px;
+      background: #fafafa;
+      border-radius: 8px;
+      transition: all 0.3s ease;
+
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      }
+
+      .data-icon {
+        width: 48px;
+        height: 48px;
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 12px;
+        color: white;
+        font-size: 20px;
+      }
+
+      .data-content {
+        flex: 1;
+
+        .data-value {
+          font-size: 24px;
+          font-weight: 700;
+          color: #303133;
+          line-height: 1.2;
+        }
+
+        .data-label {
+          font-size: 14px;
+          color: #909399;
+          margin-top: 4px;
+        }
+      }
+    }
+  }
+
+  .device-stats {
+    margin-bottom: 20px;
+
+    .device-card {
+      .card-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        
+        .card-title {
+          font-size: 16px;
+          font-weight: 600;
+          color: #303133;
+        }
+      }
+
+      .device-item {
+        text-align: center;
+        padding: 20px 0;
+
+        .device-value {
+          font-size: 28px;
+          font-weight: 700;
+          color: #409eff;
+          line-height: 1.2;
+        }
+
+        .device-label {
+          font-size: 14px;
+          color: #909399;
+          margin-top: 8px;
+        }
+      }
+    }
+  }
+
+  .region-chart-card {
+    .card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      
+      .card-title {
+        font-size: 16px;
+        font-weight: 600;
+        color: #303133;
+      }
+
+      .chart-controls {
+        display: flex;
+        gap: 12px;
+      }
+    }
+
+    .chart-container {
+      display: flex;
+      align-items: flex-end;
+      justify-content: space-between;
+      padding: 20px 0;
+      min-height: 250px;
+
+      .chart-bars {
+        display: flex;
+        align-items: flex-end;
+        gap: 40px;
+        flex: 1;
+
+        .chart-bar-item {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 8px;
+
+          .bar-label {
+            font-size: 14px;
+            color: #606266;
+            font-weight: 500;
+          }
+
+          .bar-container {
+            width: 60px;
+            height: 200px;
+            display: flex;
+            align-items: flex-end;
+            position: relative;
+
+            .bar {
+              width: 100%;
+              border-radius: 4px 4px 0 0;
+              transition: all 0.3s ease;
+              position: relative;
+
+              &:hover {
+                transform: scaleY(1.05);
+              }
+            }
+          }
+
+          .bar-value {
+            font-size: 16px;
+            font-weight: 600;
+            color: #303133;
+          }
+        }
+      }
+
+      .chart-nav {
+        display: flex;
+        align-items: center;
+        padding-left: 20px;
+      }
+    }
   }
 }
-.el-divider--horizontal{
-  border: none;
+
+// 响应式设计
+@media (max-width: 768px) {
+  .home {
+    padding: 10px;
+
+    .data-overview-card {
+      .data-item {
+        margin-bottom: 10px;
+      }
+    }
+
+    .device-stats {
+      .el-col {
+        margin-bottom: 20px;
+      }
+    }
+
+    .region-chart-card {
+      .chart-container {
+        .chart-bars {
+          gap: 20px;
+
+          .chart-bar-item {
+            .bar-container {
+              width: 40px;
+            }
+          }
+        }
+      }
+    }
+  }
 }
 </style>