diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000..66dc25a
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,91 @@
+# 更新日志
+
+## [2024-12-14] - 界面全面重构
+
+### 🎨 重大视觉更新
+
+#### 全新设计系统
+- **配色方案**：采用专业教育主题配色
+  - 主色：深蓝(#1e3a8a) - 专业可信
+  - 辅助色：青色(#06b6d4) - 科技感
+  - 成功色：绿色(#10b981) - 积极向上
+  - 警告色：橙色(#f59e0b) - 注意提醒
+
+#### 登录页面完全重构
+- **新布局**：左右分割式设计
+  - 左侧(60%)：品牌展示区，包含Logo、平台介绍、统计数据展示
+  - 右侧(40%)：纯白背景登录区，简洁专业
+- **交互优化**：
+  - 统计卡片悬浮动画效果
+  - 优雅的表单验证反馈
+  - 快速体验按钮重新设计
+  - 响应式适配不同屏幕尺寸
+
+#### 主页界面革新
+- **仪表板布局**：专业管理系统风格
+  - 左侧固定导航栏(240px)：深色主题，用户信息展示
+  - 主内容区：顶部状态栏 + 数据统计 + 功能模块
+- **数据可视化**：
+  - 4个彩色统计卡片：今日评价、已完成、待处理、完成率
+  - 实时数据展示，不同类型使用不同色彩主题
+- **功能模块网格**：
+  - 大卡片设计，图标、标题、描述、操作按钮层次清晰
+  - 角色权限适配，教师专用模块标识
+  - "敬请期待"功能模块预告
+
+### 🔧 技术改进
+
+#### CSS架构优化
+- **设计系统变量**：统一的颜色、间距、圆角、阴影规范
+- **布局系统**：Flexbox和Grid布局的合理运用
+- **动画系统**：流畅的过渡效果和悬浮动画
+- **响应式设计**：适配1024px以下设备
+
+#### 组件化重构
+- 保持现有组件接口不变
+- 样式完全重写，符合新设计规范
+- 提升组件复用性和维护性
+
+### 📊 用户体验提升
+
+#### 视觉层次优化
+- 信息架构更加清晰
+- 色彩搭配专业协调
+- 字体层级合理分布
+
+#### 交互体验改进
+- 按钮状态反馈更明确
+- 卡片悬浮效果增强沉浸感
+- 导航状态清晰可见
+
+#### 专业性提升
+- 界面风格符合教育管理系统定位
+- 数据展示方式更加直观
+- 功能组织更加合理
+
+### 🛠️ 文件变更
+
+#### 更新文件
+- `src/assets/styles/variables.css` - 全新设计系统变量
+- `src/views/Login.vue` - 登录页面完全重构
+- `src/views/Home.vue` - 主页界面革新
+
+#### 兼容性
+- 保持所有现有功能接口不变
+- 路由结构保持一致
+- 数据流和状态管理无变化
+
+---
+
+## [2024-XX-XX] - 初始版本
+
+### ✨ 初始功能
+- 基础登录功能
+- 角色权限管理
+- 评价流程
+- 学生画像展示
+- 报告生成功能
+
+---
+
+*本项目遵循语义化版本规范，详细技术文档请参考README.md*
\ No newline at end of file
diff --git a/Readme.md b/Readme.md
index 65b931c..28d1710 100644
--- a/Readme.md
+++ b/Readme.md
@@ -1,8 +1,28 @@
-实践教学评价平台  
-产品需求文档（PRD）  
-版本：V1.0  
-撰写日期：2024-05-XX  
-撰写人：XXX  
+# 实践教学评价平台
+
+## 📋 项目概述
+
+这是一个专业的实践教学评价平台演示项目，支持企业、教师、行业协会专家、学生四类角色进行实践成果提交、评价、画像展示、报告生成等功能。
+
+## 🎨 最新界面设计
+
+### V2.0 界面重构特色
+- **现代仪表板设计**：专业的侧边栏导航 + 主内容区布局
+- **分割式登录页**：品牌展示区 + 简洁登录区的左右分割设计
+- **数据可视化**：实时统计卡片，彩色主题区分不同数据类型
+- **专业配色系统**：深蓝主色调，体现教育平台的专业性和可信度
+
+### 技术特色
+- **Vue3 + ElementPlus + ECharts**
+- **纯前端项目**：Mock数据，无后端依赖
+- **响应式设计**：适配不同屏幕尺寸
+- **现代CSS架构**：统一的设计系统变量
+
+---
+
+## 产品需求文档（PRD）
+版本：V2.0
+更新日期：2024-12-14  
 
 1. 文档目的  
 本 PRD 用于指导开发、测试、UI/UX、运维团队一次性、零偏差地实现《平台设计.docx》中提出的全部功能。任何需求冲突以本 PRD 为准。
diff --git a/src/assets/styles/variables.css b/src/assets/styles/variables.css
index 3903e43..ec5bc2c 100644
--- a/src/assets/styles/variables.css
+++ b/src/assets/styles/variables.css
@@ -1,28 +1,43 @@
 :root {
-  /* 主题色彩 */
-  --primary-color: #409eff;
-  --primary-light: #79bbff;
-  --primary-dark: #337ecc;
-  --success-color: #67c23a;
-  --warning-color: #e6a23c;
-  --danger-color: #f56c6c;
-  --info-color: #909399;
+  /* 教学平台专业配色 */
+  --primary: #1e3a8a;
+  --primary-light: #3b82f6;
+  --primary-lighter: #dbeafe;
+  --secondary: #06b6d4;
+  --secondary-light: #67e8f9;
+  --success: #10b981;
+  --success-light: #6ee7b7;
+  --warning: #f59e0b;
+  --warning-light: #fcd34d;
+  --danger: #ef4444;
+  --danger-light: #fca5a5;
 
-  /* 文字颜色 */
-  --text-primary: #303133;
-  --text-regular: #606266;
-  --text-secondary: #909399;
-  --text-placeholder: #c0c4cc;
+  /* 中性色 */
+  --dark: #1f2937;
+  --dark-light: #374151;
+  --gray: #6b7280;
+  --gray-light: #9ca3af;
+  --gray-lighter: #d1d5db;
+  --light: #f3f4f6;
+  --lighter: #f9fafb;
+  --white: #ffffff;
+
+  /* 文本颜色 */
+  --text-primary: var(--dark);
+  --text-secondary: var(--gray);
+  --text-muted: var(--gray-light);
+  --text-inverse: var(--white);
 
   /* 背景色 */
-  --bg-primary: #ffffff;
-  --bg-secondary: #f5f7fa;
-  --bg-tertiary: #ebeef5;
+  --bg-primary: var(--white);
+  --bg-secondary: var(--lighter);
+  --bg-dark: var(--dark);
+  --bg-sidebar: var(--dark);
 
-  /* 边框颜色 */
-  --border-light: #dcdfe6;
-  --border-base: #e4e7ed;
-  --border-dark: #d3d4d6;
+  /* 边框色 */
+  --border: var(--gray-lighter);
+  --border-light: #e5e7eb;
+  --border-dark: var(--gray-light);
 
   /* 间距 */
   --spacing-xs: 0.5rem;
@@ -38,11 +53,13 @@
   --radius-lg: 12px;
   --radius-xl: 16px;
 
-  /* 阴影 */
-  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
-  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
-  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1);
-  --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.15);
+  /* 阴影系统 */
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
 
   /* 字体 */
   --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
@@ -58,7 +75,17 @@
   --sidebar-width: 240px;
   --container-max-width: 1200px;
 
-  /* 渐变背景 */
-  --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  --gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+  /* 渐变色 */
+  --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
+  --gradient-brand: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+  --gradient-success: linear-gradient(135deg, var(--success) 0%, var(--success-light) 100%);
+
+  /* 布局尺寸 */
+  --sidebar-width: 240px;
+  --header-height: 64px;
+  --container-max: 1200px;
+
+  /* 动画 */
+  --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-slow: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
\ No newline at end of file
diff --git a/src/components/BaseCard.vue b/src/components/BaseCard.vue
index 86ddf04..6777fc4 100644
--- a/src/components/BaseCard.vue
+++ b/src/components/BaseCard.vue
@@ -37,14 +37,25 @@ export default {
 
 <style scoped>
 .base-card {
-  background: var(--bg-primary);
+  background: var(--bg-card);
   border-radius: var(--radius-lg);
   border: 1px solid var(--border-light);
   overflow: hidden;
+  transition: var(--transition-base);
+  position: relative;
+}
+
+.base-card:hover {
+  transform: translateY(-4px);
+  border-color: var(--border-primary);
 }
 
 .card-shadow {
-  box-shadow: var(--shadow-md);
+  box-shadow: var(--shadow-base);
+}
+
+.card-shadow:hover {
+  box-shadow: var(--shadow-lg);
 }
 
 .card-sm {
@@ -70,6 +81,13 @@ export default {
   font-weight: 600;
   color: var(--text-primary);
   margin: 0;
+  position: relative;
+  z-index: 1;
+  transition: var(--transition-base);
+}
+
+.base-card:hover .card-title {
+  color: var(--primary-color);
 }
 
 .card-footer {
diff --git a/src/components/PageLayout.vue b/src/components/PageLayout.vue
index 153ec40..9d9d038 100644
--- a/src/components/PageLayout.vue
+++ b/src/components/PageLayout.vue
@@ -44,6 +44,8 @@ export default {
 .page-layout {
   min-height: 100vh;
   background: var(--bg-secondary);
+  display: flex;
+  flex-direction: column;
 }
 
 .page-header {
@@ -51,6 +53,9 @@ export default {
   border-bottom: 1px solid var(--border-light);
   padding: var(--spacing-lg) 0;
   box-shadow: var(--shadow-sm);
+  position: sticky;
+  top: 0;
+  z-index: 100;
 }
 
 .header-content {
@@ -63,13 +68,15 @@ export default {
 }
 
 .page-title {
-  font-size: var(--font-size-xxl);
-  font-weight: 600;
+  font-size: calc(var(--font-size-xxl) * 1.2);
+  font-weight: 700;
   color: var(--text-primary);
   margin: 0;
+  position: relative;
 }
 
 .page-main {
+  flex: 1;
   padding: var(--spacing-lg);
 }
 
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 4c28508..7a8bf86 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,44 +1,200 @@
 <template>
-  <PageLayout title="实践教学评价平台">
-    <div class="home-container">
-      <div class="welcome-section">
-        <h2 class="welcome-text">欢迎，{{ user?.name }}</h2>
-        <p class="role-text">当前角色：{{ getRoleText(user?.role) }}</p>
-      </div>
-
-      <div class="entry-cards">
-        <BaseCard class="entry-card" @click="goToEvaluate">
-          <div class="card-content">
-            <div class="card-icon">
-              <EditPen :size="48" />
-            </div>
-            <h3 class="card-title">评价页面</h3>
-            <p class="card-description">进行实践成果评价</p>
+  <div class="dashboard">
+    <!-- 侧边栏 -->
+    <aside class="sidebar">
+      <div class="sidebar-content">
+        <!-- 用户信息 -->
+        <div class="user-profile">
+          <div class="avatar">
+            <User :size="24" />
           </div>
-        </BaseCard>
-
-        <BaseCard
-          v-if="user?.role === 'teacher'"
-          class="entry-card"
-          @click="goToPortrait"
-        >
-          <div class="card-content">
-            <div class="card-icon">
-              <User :size="48" />
-            </div>
-            <h3 class="card-title">学生能力评价画像</h3>
-            <p class="card-description">查看学生能力分析</p>
+          <div class="user-info">
+            <div class="user-name">{{ user?.name }}</div>
+            <div class="user-role">{{ getRoleText(user?.role) }}</div>
           </div>
-        </BaseCard>
-      </div>
+        </div>
 
-      <div class="logout-section">
-        <BaseButton @click="handleLogout" variant="outline">
-          退出登录
-        </BaseButton>
+        <!-- 导航菜单 -->
+        <nav class="nav-menu">
+          <div class="nav-group">
+            <div class="nav-title">功能模块</div>
+            <button
+              class="nav-item"
+              :class="{ active: $route.path === '/evaluate' }"
+              @click="goToEvaluate"
+            >
+              <EditPen :size="20" />
+              <span>评价管理</span>
+            </button>
+            <button
+              v-if="user?.role === 'teacher'"
+              class="nav-item"
+              :class="{ active: $route.path === '/portrait' }"
+              @click="goToPortrait"
+            >
+              <TrendCharts :size="20" />
+              <span>学生画像</span>
+            </button>
+            <button class="nav-item">
+              <Document :size="20" />
+              <span>报告中心</span>
+            </button>
+            <button class="nav-item">
+              <DataAnalysis :size="20" />
+              <span>数据统计</span>
+            </button>
+          </div>
+        </nav>
+
+        <!-- 退出按钮 -->
+        <div class="sidebar-footer">
+          <button class="logout-btn" @click="handleLogout">
+            <LogOut :size="20" />
+            <span>退出登录</span>
+          </button>
+        </div>
       </div>
-    </div>
-  </PageLayout>
+    </aside>
+
+    <!-- 主内容区 -->
+    <main class="main-content">
+      <!-- 顶部状态栏 -->
+      <header class="top-bar">
+        <div class="page-title">
+          <h1>仪表板</h1>
+          <p>欢迎回来，{{ user?.name }}</p>
+        </div>
+        <div class="header-actions">
+          <div class="time-display">
+            {{ new Date().toLocaleDateString('zh-CN', {
+              year: 'numeric',
+              month: 'long',
+              day: 'numeric',
+              weekday: 'long'
+            }) }}
+          </div>
+        </div>
+      </header>
+
+      <!-- 统计卡片 -->
+      <section class="stats-section">
+        <div class="stats-grid">
+          <div class="stat-card primary">
+            <div class="stat-icon">
+              <EditPen :size="24" />
+            </div>
+            <div class="stat-content">
+              <div class="stat-number">24</div>
+              <div class="stat-label">今日评价</div>
+            </div>
+          </div>
+          <div class="stat-card success">
+            <div class="stat-icon">
+              <CheckCircle :size="24" />
+            </div>
+            <div class="stat-content">
+              <div class="stat-number">156</div>
+              <div class="stat-label">已完成</div>
+            </div>
+          </div>
+          <div class="stat-card warning">
+            <div class="stat-icon">
+              <Clock :size="24" />
+            </div>
+            <div class="stat-content">
+              <div class="stat-number">8</div>
+              <div class="stat-label">待处理</div>
+            </div>
+          </div>
+          <div class="stat-card info">
+            <div class="stat-icon">
+              <TrendUp :size="24" />
+            </div>
+            <div class="stat-content">
+              <div class="stat-number">92%</div>
+              <div class="stat-label">完成率</div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- 功能模块 -->
+      <section class="modules-section">
+        <h2 class="section-title">快速访问</h2>
+        <div class="modules-grid">
+          <div class="module-card" @click="goToEvaluate">
+            <div class="module-header">
+              <div class="module-icon primary">
+                <EditPen :size="32" />
+              </div>
+              <div class="module-badge">主要功能</div>
+            </div>
+            <div class="module-content">
+              <h3 class="module-title">评价管理</h3>
+              <p class="module-description">开始新的实践成果评价，查看历史评价记录</p>
+              <div class="module-footer">
+                <span class="module-action">立即前往</span>
+                <ArrowRight :size="16" />
+              </div>
+            </div>
+          </div>
+
+          <div
+            v-if="user?.role === 'teacher'"
+            class="module-card"
+            @click="goToPortrait"
+          >
+            <div class="module-header">
+              <div class="module-icon secondary">
+                <TrendCharts :size="32" />
+              </div>
+              <div class="module-badge">教师专用</div>
+            </div>
+            <div class="module-content">
+              <h3 class="module-title">学生画像</h3>
+              <p class="module-description">查看学生能力分析，生成发展报告</p>
+              <div class="module-footer">
+                <span class="module-action">查看详情</span>
+                <ArrowRight :size="16" />
+              </div>
+            </div>
+          </div>
+
+          <div class="module-card coming-soon">
+            <div class="module-header">
+              <div class="module-icon muted">
+                <Document :size="32" />
+              </div>
+              <div class="module-badge coming">敬请期待</div>
+            </div>
+            <div class="module-content">
+              <h3 class="module-title">报告中心</h3>
+              <p class="module-description">生成和下载各类评价报告</p>
+              <div class="module-footer">
+                <span class="module-action muted">即将推出</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="module-card coming-soon">
+            <div class="module-header">
+              <div class="module-icon muted">
+                <DataAnalysis :size="32" />
+              </div>
+              <div class="module-badge coming">敬请期待</div>
+            </div>
+            <div class="module-content">
+              <h3 class="module-title">数据统计</h3>
+              <p class="module-description">查看平台使用统计和数据分析</p>
+              <div class="module-footer">
+                <span class="module-action muted">即将推出</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+  </div>
 </template>
 
 <script>
@@ -91,68 +247,392 @@ export default {
 </script>
 
 <style scoped>
-.home-container {
-  max-width: 800px;
-  margin: 0 auto;
+.dashboard {
+  display: flex;
+  min-height: 100vh;
+  background: var(--bg-secondary);
 }
 
-.welcome-section {
-  text-align: center;
-  margin-bottom: var(--spacing-xxl);
+/* 侧边栏 */
+.sidebar {
+  width: var(--sidebar-width);
+  background: var(--bg-sidebar);
+  color: var(--text-inverse);
+  border-right: 1px solid var(--border-dark);
+  display: flex;
+  flex-direction: column;
 }
 
-.welcome-text {
-  font-size: var(--font-size-xxl);
-  font-weight: 600;
-  color: var(--text-primary);
-  margin-bottom: var(--spacing-sm);
+.sidebar-content {
+  padding: var(--spacing-lg);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
 }
 
-.role-text {
+.user-profile {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+  padding: var(--spacing-lg);
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: var(--radius-lg);
+  margin-bottom: var(--spacing-xl);
+}
+
+.avatar {
+  width: 48px;
+  height: 48px;
+  background: var(--primary);
+  border-radius: var(--radius-lg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+}
+
+.user-name {
   font-size: var(--font-size-lg);
-  color: var(--text-secondary);
+  font-weight: 600;
+  margin-bottom: var(--spacing-xs);
 }
 
-.entry-cards {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  gap: var(--spacing-xl);
-  margin-bottom: var(--spacing-xxl);
+.user-role {
+  font-size: var(--font-size-sm);
+  opacity: 0.8;
 }
 
-.entry-card {
+.nav-menu {
+  flex: 1;
+}
+
+.nav-title {
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.6);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  margin-bottom: var(--spacing-md);
+}
+
+.nav-item {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+  padding: var(--spacing-md) var(--spacing-lg);
+  border: none;
+  background: none;
+  color: rgba(255, 255, 255, 0.8);
+  border-radius: var(--radius-md);
   cursor: pointer;
-  transition: all 0.3s ease;
+  transition: var(--transition);
+  margin-bottom: var(--spacing-sm);
+  font-size: var(--font-size-md);
 }
 
-.entry-card:hover {
-  transform: translateY(-4px);
-  box-shadow: var(--shadow-lg);
+.nav-item:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: white;
 }
 
-.card-content {
-  text-align: center;
+.nav-item.active {
+  background: var(--primary);
+  color: white;
+}
+
+.sidebar-footer {
+  margin-top: auto;
+  padding-top: var(--spacing-lg);
+}
+
+.logout-btn {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+  padding: var(--spacing-md) var(--spacing-lg);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  background: none;
+  color: rgba(255, 255, 255, 0.8);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: var(--transition);
+  font-size: var(--font-size-md);
+}
+
+.logout-btn:hover {
+  background: var(--danger);
+  border-color: var(--danger);
+  color: white;
+}
+
+/* 主内容区 */
+.main-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+}
+
+.top-bar {
+  background: var(--bg-primary);
+  border-bottom: 1px solid var(--border);
+  padding: var(--spacing-lg) var(--spacing-xl);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-shadow: var(--shadow-sm);
+}
+
+.page-title h1 {
+  font-size: calc(var(--font-size-xxl) * 1.2);
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0 0 var(--spacing-xs) 0;
+}
+
+.page-title p {
+  color: var(--text-secondary);
+  margin: 0;
+  font-size: var(--font-size-md);
+}
+
+.time-display {
+  color: var(--text-muted);
+  font-size: var(--font-size-sm);
+  background: var(--bg-secondary);
+  padding: var(--spacing-sm) var(--spacing-md);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border);
+}
+
+/* 统计卡片 */
+.stats-section {
   padding: var(--spacing-xl);
 }
 
-.card-icon {
-  color: var(--primary-color);
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: var(--spacing-lg);
+}
+
+.stat-card {
+  background: var(--bg-primary);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-xl);
+  box-shadow: var(--shadow);
+  border: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-lg);
+  transition: var(--transition);
+}
+
+.stat-card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg);
+}
+
+.stat-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: var(--radius-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+}
+
+.stat-card.primary .stat-icon {
+  background: var(--gradient-primary);
+}
+
+.stat-card.success .stat-icon {
+  background: var(--gradient-success);
+}
+
+.stat-card.warning .stat-icon {
+  background: linear-gradient(135deg, var(--warning) 0%, var(--warning-light) 100%);
+}
+
+.stat-card.info .stat-icon {
+  background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-light) 100%);
+}
+
+.stat-number {
+  font-size: calc(var(--font-size-xxl) * 1.5);
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: var(--spacing-xs);
+}
+
+.stat-label {
+  color: var(--text-secondary);
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+}
+
+/* 功能模块 */
+.modules-section {
+  padding: 0 var(--spacing-xl) var(--spacing-xl);
+}
+
+.section-title {
+  font-size: var(--font-size-xl);
+  font-weight: 600;
+  color: var(--text-primary);
   margin-bottom: var(--spacing-lg);
 }
 
-.card-title {
+.modules-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: var(--spacing-lg);
+}
+
+.module-card {
+  background: var(--bg-primary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-xl);
+  padding: var(--spacing-xl);
+  box-shadow: var(--shadow);
+  cursor: pointer;
+  transition: var(--transition-slow);
+  position: relative;
+  overflow: hidden;
+}
+
+.module-card:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-xl);
+  border-color: var(--primary);
+}
+
+.module-card.coming-soon {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.module-card.coming-soon:hover {
+  transform: none;
+  box-shadow: var(--shadow);
+  border-color: var(--border);
+}
+
+.module-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: var(--spacing-lg);
+}
+
+.module-icon {
+  width: 64px;
+  height: 64px;
+  border-radius: var(--radius-lg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+}
+
+.module-icon.primary {
+  background: var(--gradient-primary);
+}
+
+.module-icon.secondary {
+  background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-light) 100%);
+}
+
+.module-icon.muted {
+  background: var(--gray-light);
+}
+
+.module-badge {
+  background: var(--primary-lighter);
+  color: var(--primary);
+  padding: var(--spacing-xs) var(--spacing-sm);
+  border-radius: var(--radius-sm);
+  font-size: var(--font-size-xs);
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.module-badge.coming {
+  background: var(--gray-lighter);
+  color: var(--gray);
+}
+
+.module-title {
   font-size: var(--font-size-xl);
   font-weight: 600;
   color: var(--text-primary);
   margin-bottom: var(--spacing-md);
 }
 
-.card-description {
+.module-description {
   color: var(--text-secondary);
   font-size: var(--font-size-md);
+  line-height: 1.6;
+  margin-bottom: var(--spacing-lg);
 }
 
-.logout-section {
-  text-align: center;
+.module-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.module-action {
+  color: var(--primary);
+  font-weight: 500;
+  font-size: var(--font-size-sm);
+}
+
+.module-action.muted {
+  color: var(--text-muted);
+}
+
+/* 响应式设计 */
+@media (max-width: 1024px) {
+  .dashboard {
+    flex-direction: column;
+  }
+
+  .sidebar {
+    width: 100%;
+    height: auto;
+  }
+
+  .sidebar-content {
+    flex-direction: row;
+    padding: var(--spacing-md);
+  }
+
+  .user-profile {
+    margin-bottom: 0;
+    margin-right: var(--spacing-lg);
+  }
+
+  .nav-menu {
+    flex: 1;
+  }
+
+  .nav-group {
+    display: flex;
+    gap: var(--spacing-sm);
+  }
+
+  .nav-title {
+    display: none;
+  }
+
+  .sidebar-footer {
+    margin-top: 0;
+    margin-left: var(--spacing-lg);
+    padding-top: 0;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 09eeb8f..6fa0408 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -1,67 +1,55 @@
 <template>
-  <div class="homepage">
-    <!-- 顶部导航栏 -->
-    <header class="header">
-      <div class="header-content">
-        <div class="logo-section">
-          <School class="logo-icon" />
-          <span class="platform-title">实践教学评价平台</span>
+  <div class="login-page">
+    <!-- 左侧品牌展示区 -->
+    <div class="brand-section">
+      <div class="brand-content">
+        <!-- Logo和标题 -->
+        <div class="brand-header">
+          <div class="logo">
+            <School :size="48" />
+          </div>
+          <h1 class="brand-title">实践教学评价平台</h1>
+          <p class="brand-subtitle">智能化多角色协同评价系统</p>
         </div>
-        <div class="header-info">
-          <span class="version">V1.0</span>
-        </div>
-      </div>
-    </header>
 
-    <!-- 主要内容区域 -->
-    <main class="main-content">
-      <!-- 左侧功能介绍 -->
-      <div class="intro-section">
-        <div class="intro-content">
-          <h1 class="main-title">智能化实践教学评价系统</h1>
-          <p class="main-subtitle">支持多角色协同评价的综合性教学管理平台</p>
-
-          <div class="features-grid">
-            <div class="feature-card">
-              <div class="feature-icon">
-                <User />
-              </div>
-              <h3>多角色支持</h3>
-              <p>学生、教师、企业、专家四类用户</p>
-            </div>
-            <div class="feature-card">
-              <div class="feature-icon">
-                <TrendCharts />
-              </div>
-              <h3>智能分析</h3>
-              <p>能力画像与发展监测</p>
-            </div>
-            <div class="feature-card">
-              <div class="feature-icon">
-                <Document />
-              </div>
-              <h3>报告生成</h3>
-              <p>自动生成评价报告</p>
-            </div>
-            <div class="feature-card">
-              <div class="feature-icon">
-                <DataAnalysis />
-              </div>
-              <h3>数据可视化</h3>
-              <p>图表展示评价结果</p>
-            </div>
+        <!-- 统计数据展示 -->
+        <div class="stats-grid">
+          <div class="stat-item">
+            <div class="stat-number">1,234</div>
+            <div class="stat-label">注册学生</div>
+          </div>
+          <div class="stat-item">
+            <div class="stat-number">156</div>
+            <div class="stat-label">在线课程</div>
+          </div>
+          <div class="stat-item">
+            <div class="stat-number">8,567</div>
+            <div class="stat-label">完成评价</div>
+          </div>
+          <div class="stat-item">
+            <div class="stat-number">98%</div>
+            <div class="stat-label">满意度</div>
           </div>
         </div>
-      </div>
 
-      <!-- 右侧登录区域 -->
-      <div class="login-section">
+        <!-- 装饰性元素 -->
+        <div class="brand-decoration">
+          <svg viewBox="0 0 400 200" class="wave-svg">
+            <path d="M0,100 C100,20 200,180 400,100 L400,200 L0,200 Z" fill="rgba(255,255,255,0.1)"/>
+          </svg>
+        </div>
+      </div>
+    </div>
+
+    <!-- 右侧登录区域 -->
+    <div class="login-section">
+      <div class="login-container">
+        <div class="login-header">
+          <h2>欢迎回来</h2>
+          <p>请登录您的账户继续使用</p>
+        </div>
+
         <div class="login-card">
-          <div class="card-header">
-            <h2>系统登录</h2>
-            <p>请选择您的身份登录系统</p>
-          </div>
-
           <el-form
             ref="loginForm"
             :model="form"
@@ -71,7 +59,7 @@
             <el-form-item prop="username">
               <el-input
                 v-model="form.username"
-                placeholder="用户名"
+                placeholder="请输入用户名"
                 size="large"
                 clearable
               >
@@ -85,7 +73,7 @@
               <el-input
                 v-model="form.password"
                 type="password"
-                placeholder="密码"
+                placeholder="请输入密码"
                 size="large"
                 clearable
                 show-password
@@ -99,7 +87,7 @@
             <el-form-item prop="role">
               <el-select
                 v-model="form.role"
-                placeholder="选择角色"
+                placeholder="请选择您的角色"
                 size="large"
                 class="full-width"
               >
@@ -117,27 +105,32 @@
               @click="handleLogin"
               class="login-btn"
             >
-              登录
+              登录系统
             </el-button>
           </el-form>
 
-          <div class="demo-accounts">
-            <el-divider><span class="demo-title">快速体验</span></el-divider>
+          <div class="quick-login">
+            <div class="divider">
+              <span>快速体验</span>
+            </div>
             <div class="demo-buttons">
-              <el-button size="small" @click="quickLogin('student')">学生演示</el-button>
-              <el-button size="small" @click="quickLogin('teacher')">教师演示</el-button>
+              <button class="demo-btn" @click="quickLogin('student')">
+                <User :size="16" />
+                学生演示
+              </button>
+              <button class="demo-btn" @click="quickLogin('teacher')">
+                <Monitor :size="16" />
+                教师演示
+              </button>
             </div>
           </div>
         </div>
-      </div>
-    </main>
 
-    <!-- 底部信息 -->
-    <footer class="footer">
-      <div class="footer-content">
-        <p>&copy; 2024 实践教学评价平台 - 演示版本</p>
+        <div class="login-footer">
+          <p>&copy; 2024 实践教学评价平台 - 演示版本</p>
+        </div>
       </div>
-    </footer>
+    </div>
   </div>
 </template>
 
@@ -217,199 +210,275 @@ export default {
 </script>
 
 <style scoped>
-.homepage {
-  height: 100vh;
-  background: var(--gradient-primary);
-  display: grid;
-  grid-template-rows: 80px 1fr 60px;
+.login-page {
+  min-height: 100vh;
+  display: flex;
 }
 
-.header {
-  background: rgba(255, 255, 255, 0.1);
-  backdrop-filter: blur(10px);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+/* 左侧品牌展示区 */
+.brand-section {
+  flex: 1;
+  background: var(--gradient-brand);
+  color: var(--text-inverse);
+  position: relative;
+  overflow: hidden;
   display: flex;
   align-items: center;
+  justify-content: center;
 }
 
-.header-content {
-  max-width: var(--container-max-width);
-  margin: 0 auto;
-  padding: 0 var(--spacing-xl);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+.brand-content {
+  padding: var(--spacing-xxl);
+  text-align: center;
+  position: relative;
+  z-index: 2;
   width: 100%;
+  max-width: 500px;
 }
 
-.logo-section {
+.brand-header {
+  margin-bottom: var(--spacing-xxl);
+}
+
+.logo {
+  width: 80px;
+  height: 80px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: var(--radius-xl);
   display: flex;
   align-items: center;
-  gap: var(--spacing-sm);
+  justify-content: center;
+  margin: 0 auto var(--spacing-lg);
+  color: white;
+  backdrop-filter: blur(10px);
 }
 
-.logo-icon {
-  font-size: var(--font-size-xl);
-  color: var(--bg-primary);
+.brand-title {
+  font-size: calc(var(--font-size-xxl) * 2);
+  font-weight: 800;
+  margin-bottom: var(--spacing-md);
+  line-height: 1.2;
 }
 
-.platform-title {
-  font-size: var(--font-size-xl);
-  font-weight: 600;
-  color: var(--bg-primary);
-}
-
-.version {
-  color: var(--text-placeholder);
-  font-size: var(--font-size-sm);
-}
-
-.main-content {
-  display: grid;
-  grid-template-columns: 1fr 380px;
-  gap: var(--spacing-xl);
-  max-width: var(--container-max-width);
-  margin: 0 auto;
-  padding: var(--spacing-md) var(--spacing-xl);
-  align-items: center;
-}
-
-.intro-section {
-  color: var(--bg-primary);
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.main-title {
-  font-size: calc(var(--font-size-xxl) * 1.5);
-  font-weight: 700;
-  margin-bottom: var(--spacing-sm);
-  line-height: 1.3;
-}
-
-.main-subtitle {
+.brand-subtitle {
   font-size: var(--font-size-lg);
-  margin-bottom: var(--spacing-lg);
   opacity: 0.9;
+  margin-bottom: 0;
+  font-weight: 400;
 }
 
-.features-grid {
+.stats-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: var(--spacing-sm);
-  flex: 1;
+  gap: var(--spacing-lg);
+  margin-bottom: var(--spacing-xxl);
 }
 
-.feature-card {
+.stat-item {
   background: rgba(255, 255, 255, 0.1);
-  backdrop-filter: blur(10px);
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  padding: var(--spacing-lg);
   border-radius: var(--radius-lg);
-  padding: var(--spacing-md);
-  text-align: center;
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  transition: var(--transition);
 }
 
-.feature-icon {
+.stat-item:hover {
+  background: rgba(255, 255, 255, 0.15);
+  transform: translateY(-2px);
+}
+
+.stat-number {
   font-size: calc(var(--font-size-xxl) * 1.5);
-  margin-bottom: var(--spacing-md);
+  font-weight: 700;
+  margin-bottom: var(--spacing-xs);
   color: white;
 }
 
-.feature-card h3 {
-  font-size: var(--font-size-lg);
-  margin-bottom: var(--spacing-sm);
-  font-weight: 600;
-}
-
-.feature-card p {
-  opacity: 0.8;
+.stat-label {
   font-size: var(--font-size-sm);
+  opacity: 0.8;
+  font-weight: 500;
 }
 
+.brand-decoration {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 200px;
+}
+
+.wave-svg {
+  width: 100%;
+  height: 100%;
+}
+
+/* 右侧登录区域 */
 .login-section {
+  flex: 0 0 480px;
+  background: var(--bg-primary);
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
+  padding: var(--spacing-xxl);
+}
+
+.login-container {
+  width: 100%;
+  max-width: 400px;
+}
+
+.login-header {
+  text-align: center;
+  margin-bottom: var(--spacing-xxl);
+}
+
+.login-header h2 {
+  font-size: calc(var(--font-size-xxl) * 1.5);
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: var(--spacing-md);
+}
+
+.login-header p {
+  color: var(--text-secondary);
+  font-size: var(--font-size-md);
+  margin: 0;
 }
 
 .login-card {
   background: var(--bg-primary);
+  border: 1px solid var(--border);
   border-radius: var(--radius-xl);
-  padding: var(--spacing-xl);
-  box-shadow: var(--shadow-xl);
-  width: 100%;
-  max-width: 380px;
-}
-
-.card-header {
-  text-align: center;
+  padding: var(--spacing-xxl);
+  box-shadow: var(--shadow-lg);
   margin-bottom: var(--spacing-xl);
 }
 
-.card-header h2 {
-  font-size: var(--font-size-xxl);
-  font-weight: 600;
-  color: var(--text-primary);
-  margin-bottom: var(--spacing-sm);
-}
-
-.card-header p {
-  color: var(--text-secondary);
-}
-
-.login-form {
-  margin-bottom: var(--spacing-lg);
-}
-
 .login-form .el-form-item {
   margin-bottom: var(--spacing-lg);
 }
 
+.full-width {
+  width: 100%;
+}
+
 .input-icon {
-  color: var(--text-secondary);
+  color: var(--text-muted);
 }
 
 .login-btn {
   width: 100%;
-  height: 48px;
+  height: 52px;
+  background: var(--gradient-primary);
+  border: none;
+  border-radius: var(--radius-lg);
+  color: white;
   font-size: var(--font-size-lg);
   font-weight: 600;
+  cursor: pointer;
+  transition: var(--transition);
+  margin-top: var(--spacing-md);
 }
 
-.demo-accounts {
-  margin-top: var(--spacing-lg);
+.login-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg);
 }
 
-.demo-title {
-  color: var(--text-secondary);
+.login-btn:active {
+  transform: translateY(0);
+}
+
+.quick-login {
+  margin-top: var(--spacing-xl);
+}
+
+.divider {
+  text-align: center;
+  margin: var(--spacing-lg) 0;
+  position: relative;
+}
+
+.divider::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: var(--border);
+}
+
+.divider span {
+  background: var(--bg-primary);
+  padding: 0 var(--spacing-md);
+  color: var(--text-muted);
   font-size: var(--font-size-sm);
 }
 
 .demo-buttons {
   display: flex;
   gap: var(--spacing-sm);
+}
+
+.demo-btn {
+  flex: 1;
+  padding: var(--spacing-md);
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  color: var(--text-primary);
+  cursor: pointer;
+  transition: var(--transition);
+  display: flex;
+  align-items: center;
   justify-content: center;
-  margin-top: var(--spacing-md);
+  gap: var(--spacing-xs);
+  font-size: var(--font-size-sm);
 }
 
-.footer {
-  background: rgba(255, 255, 255, 0.1);
-  backdrop-filter: blur(10px);
-  border-top: 1px solid rgba(255, 255, 255, 0.2);
-  padding: var(--spacing-sm) 0;
+.demo-btn:hover {
+  background: var(--primary-lighter);
+  border-color: var(--primary);
+  color: var(--primary);
 }
 
-.footer-content {
-  max-width: var(--container-max-width);
-  margin: 0 auto;
-  padding: 0 var(--spacing-lg);
+.login-footer {
   text-align: center;
 }
 
-.footer-content p {
-  color: rgba(255, 255, 255, 0.8);
-  font-size: var(--font-size-sm);
+.login-footer p {
+  color: var(--text-muted);
+  font-size: var(--font-size-xs);
   margin: 0;
 }
+
+/* 响应式设计 */
+@media (max-width: 1024px) {
+  .login-section {
+    flex: 0 0 400px;
+  }
+}
+
+@media (max-width: 768px) {
+  .login-page {
+    flex-direction: column;
+  }
+
+  .brand-section {
+    flex: 0 0 300px;
+  }
+
+  .stats-grid {
+    grid-template-columns: repeat(4, 1fr);
+    gap: var(--spacing-sm);
+  }
+
+  .login-section {
+    flex: 1;
+    padding: var(--spacing-lg);
+  }
+}
 </style>
\ No newline at end of file