From cf7bb0c197f01614dbfba96e78017fd75ca68271 Mon Sep 17 00:00:00 2001
From: chenzhen <19553350107@163.com>
Date: Sat, 8 Nov 2025 18:04:00 +0800
Subject: [PATCH] =?UTF-8?q?=E7=AD=94=E9=A2=98=E7=95=8C=E9=9D=A2=E8=BF=9B?=
 =?UTF-8?q?=E8=A1=8C=E4=BA=86=E8=AE=BE=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                          |    7 +-
 src/App.vue                                |  218 +---
 src/components/Layout/Header.vue           |   31 -
 src/components/Layout/Sidebar.vue          |   50 -
 src/components/Question/QuestionSearch.vue |   36 -
 src/components/Question/QuestionTable.vue  |   69 -
 src/components/Tabs/TabNavigation.vue      |   38 -
 src/main.js                                |    3 +
 src/router/index.js                        |   29 +-
 src/views/HomeView.vue                     |   65 +
 src/views/QuestionManage.vue               |    0
 src/views/TestView.vue                     |  179 +++
 src/views/TextHtml.html                    | 1942 ++++++++++++++++++++++++++++
 src/views/WrongQuestion.vue                |    0
 14 files changed, 2245 insertions(+), 422 deletions(-)
 delete mode 100644 src/components/Layout/Header.vue
 delete mode 100644 src/components/Layout/Sidebar.vue
 delete mode 100644 src/components/Question/QuestionSearch.vue
 delete mode 100644 src/components/Question/QuestionTable.vue
 delete mode 100644 src/components/Tabs/TabNavigation.vue
 delete mode 100644 src/views/QuestionManage.vue
 create mode 100644 src/views/TextHtml.html
 delete mode 100644 src/views/WrongQuestion.vue

diff --git a/package-lock.json b/package-lock.json
index 5441749..542642f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10527,8 +10527,9 @@
     },
     "node_modules/vue-router": {
       "version": "3.6.5",
-      "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-3.6.5.tgz",
-      "integrity": "sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ=="
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.6.5.tgz",
+      "integrity": "sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ==",
+      "license": "MIT"
     },
     "node_modules/vue-style-loader": {
       "version": "4.1.3",
@@ -18973,7 +18974,7 @@
     },
     "vue-router": {
       "version": "3.6.5",
-      "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-3.6.5.tgz",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.6.5.tgz",
       "integrity": "sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ=="
     },
     "vue-style-loader": {
diff --git a/src/App.vue b/src/App.vue
index 2fcc17c..86ad771 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,48 +1,15 @@
-<!--全局样式-->
 <template>
-  <div id="app">
-    <Header />
-    <div class="container">
-      <Sidebar />
-      <div class="content">
-        <div class="title">测评系统后台</div>
-        <TabNavigation :active-tab="activeTab" @update:activeTab="activeTab = $event" />
-
-        <!-- 内容区域 -->
-        <div v-if="activeTab === 'question'" class="question-management">
-          <QuestionSearch />
-          <QuestionTable />
-        </div>
-
-        <!-- 其他模块占位 -->
-        <div v-else class="placeholder">
-          <p>当前模块内容暂未开发</p>
-        </div>
-
-        <div class="footer-btn">
-          <button class="btn-red">应用</button>
-        </div>
-      </div>
-    </div>
+  <div>
+    <!-- <router-link to="/test" class="center">
+      <span class="text">进入测试系统</span>
+    </router-link> -->
+    <router-view></router-view>
   </div>
 </template>
 
 <script>
-import Header from './components/Layout/Header.vue'
-import Sidebar from './components/Layout/Sidebar.vue'
-import TabNavigation from './components/Tabs/TabNavigation.vue'
-import QuestionSearch from './components/Question/QuestionSearch.vue'
-import QuestionTable from './components/Question/QuestionTable.vue'
-
 export default {
   name: 'App',
-  components: {
-    Header,
-    Sidebar,
-    TabNavigation,
-    QuestionSearch,
-    QuestionTable
-  },
   data() {
     return {
       activeTab: 'question'
@@ -50,163 +17,50 @@ export default {
   }
 }
 </script>
-<style>/* 保持原有的全局样式 */
-* {
+
+<style scoped>
+/* * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
 
-body {
-  font-family: 'Arial', sans-serif;
-  background-color: #f5f5f5;
-}
-
-#app {
-  width: 100%;
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-
-.header {
-  height: 60px;
-  background-color: white;
+div{
+  min-height: 100vh;
   display: flex;
+  justify-content: center;
   align-items: center;
-  justify-content: flex-start;
-  padding-left: 20px;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-}
-
-.logo {
-  color: #e74c3c;
-  font-weight: bold;
-  font-size: 18px;
-}
-
-.container {
-  display: flex;
-  flex: 1;
-  overflow: hidden;
-}
-
-.content {
-  flex: 1;
-  padding: 20px;
-  background-color: white;
-  overflow-y: auto;
-}
-
-.title {
-  font-size: 20px;
-  margin-bottom: 20px;
-  color: #333;
+  background: #f5f5f5;
 }
 
-.tabs {
+.center{
+  width: 300px;
+  height: 120px;
+  background: linear-gradient(135deg, #667eea 0%, #000000 100%);
+  border-radius: 15px;
   display: flex;
-  gap: 10px;
-  margin-bottom: 20px;
-}
-
-.tab-btn {
-  padding: 8px 16px;
-  background-color: #e74c3c;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: opacity 0.3s;
-}
-
-.tab-btn:hover {
-  background-color: #c0392b;
-}
-
-.tab-btn.active {
-  opacity: 0.5;
-}
-
-.search-area {
-  display: flex;
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
-  margin-bottom: 20px;
-  gap: 20px;
-}
-
-.search-item {
-  display: flex;
-  flex-direction: column;
-  min-width: 160px;
-}
-
-.search-item label {
-  margin-bottom: 5px;
-  font-size: 14px;
-  color: #666;
-}
-
-.search-item select,
-.search-item input {
-  padding: 8px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  font-size: 14px;
-}
-
-.btn-group {
-  display: flex;
-  gap: 10px;
-}
-
-.btn-red {
-  padding: 8px 16px;
-  background-color: #e74c3c;
-  color: white;
-  border: none;
-  border-radius: 4px;
   cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  border: 2px solid #2c3e50;
+  text-decoration: none;
 }
 
-.btn-red.small {
-  padding: 4px 10px;
-  font-size: 12px;
+.center:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
+  background: linear-gradient(135deg, #764ba2 0%, #000000 100%);
+  text-decoration: none;
 }
 
-.table-container {
-  width: 100%;
-  border-collapse: collapse;
-  margin-top: 10px;
-}
-
-table {
-  width: 100%;
-  border-collapse: collapse;
-  background-color: white;
-}
-
-th,
-td {
-  padding: 12px;
-  text-align: left;
-  border-bottom: 1px solid #ddd;
-}
-
-th {
-  background-color: #f2f2f2;
-  font-weight: normal;
-  color: #333;
-}
-
-tr:hover {
-  background-color: #f9f9f9;
-}
-
-.footer-btn {
-  position: absolute;
-  bottom: 20px;
-  right: 20px;
-}
-</style>
+.text {
+  color: white;
+  font-size: 20px;
+  font-weight: bold;
+  text-align: center;
+  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
+  user-select: none;
+} */
+</style>
\ No newline at end of file
diff --git a/src/components/Layout/Header.vue b/src/components/Layout/Header.vue
deleted file mode 100644
index b782cbc..0000000
--- a/src/components/Layout/Header.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<!--头部组件-->
-<template>
-  <div class="header">
-    <div class="logo">Homily Link</div>
-  </div>
-</template>
-
-<script>
-export default {
-  // eslint-disable-next-line vue/multi-word-component-names
-  name: 'Header'
-}
-</script>
-
-<style scoped>
-.header {
-  height: 60px;
-  background-color: white;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  padding-left: 20px;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-}
-
-.logo {
-  color: #e74c3c;
-  font-weight: bold;
-  font-size: 18px;
-}
-</style>
diff --git a/src/components/Layout/Sidebar.vue b/src/components/Layout/Sidebar.vue
deleted file mode 100644
index 5674a5c..0000000
--- a/src/components/Layout/Sidebar.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<!--侧边栏组件-->
-<template>
-  <div class="sidebar">
-    <ul class="sidebar-menu">
-      <li>主页</li>
-      <li>发文章</li>
-      <li>我的内容</li>
-      <li>我的收藏</li>
-      <li>评论管理</li>
-      <li>账号设置</li>
-      <li class="active">测评管理</li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'SideBar'
-}
-</script>
-
-<style scoped>
-.sidebar {
-  width: 200px;
-  background-color: #f5f5f5;
-  height: 100%;
-  border-right: 1px solid #ddd;
-}
-
-.sidebar-menu {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.sidebar-menu li {
-  padding: 15px 20px;
-  cursor: pointer;
-  transition: background-color 0.3s;
-}
-
-.sidebar-menu li:hover {
-  background-color: #e0e0e0;
-}
-
-.sidebar-menu li.active {
-  background-color: #d1ecf1;
-  color: #007bff;
-}
-</style>
diff --git a/src/components/Question/QuestionSearch.vue b/src/components/Question/QuestionSearch.vue
deleted file mode 100644
index 65a34c1..0000000
--- a/src/components/Question/QuestionSearch.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<!--搜索区域-->
-<template>
-  <div class="search-area">
-    <div class="search-item">
-      <label>题目类型</label>
-      <select>
-        <option>股票知识</option>
-        <option>基金知识</option>
-        <option>投资策略</option>
-      </select>
-    </div>
-    <div class="search-item">
-      <label>题干查找</label>
-      <input type="text" placeholder="请输入题干关键词" />
-    </div>
-    <div class="search-item">
-      <label>课程推荐</label>
-      <select>
-        <option>量能擒牛</option>
-        <option>趋势交易</option>
-        <option>基本面分析</option>
-      </select>
-    </div>
-    <div class="btn-group">
-      <button class="btn-red">查找</button>
-      <button class="btn-red">新增题目</button>
-      <button class="btn-red">Excel导出</button>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'QuestionSearch'
-}
-</script>
diff --git a/src/components/Question/QuestionTable.vue b/src/components/Question/QuestionTable.vue
deleted file mode 100644
index 2d054ff..0000000
--- a/src/components/Question/QuestionTable.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<template>
-  <div class="table-container">
-    <table>
-      <thead>
-      <tr>
-        <th>ID</th>
-        <th>题干</th>
-        <th>题目类型</th>
-        <th>出错次数</th>
-        <th>出错率</th>
-        <th>推荐课程</th>
-        <th>操作</th>
-      </tr>
-      </thead>
-      <tbody>
-      <tr>
-        <td>1</td>
-        <td>以下哪项不是股票的基本特征？</td>
-        <td>股票知识</td>
-        <td>50</td>
-        <td>50%</td>
-        <td>量能擒牛</td>
-        <td>
-          <button class="btn-red small">查看</button>
-          <button class="btn-red small">修改</button>
-          <button class="btn-red small">删除</button>
-        </td>
-      </tr>
-      </tbody>
-    </table>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'QuestionTable'
-}
-</script>
-
-<style scoped>
-.table-container {
-  width: 100%;
-  border-collapse: collapse;
-  margin-top: 10px;
-}
-
-table {
-  width: 100%;
-  border-collapse: collapse;
-  background-color: white;
-}
-
-th,
-td {
-  padding: 12px;
-  text-align: left;
-  border-bottom: 1px solid #ddd;
-}
-
-th {
-  background-color: #f2f2f2;
-  font-weight: normal;
-  color: #333;
-}
-
-tr:hover {
-  background-color: #f9f9f9;
-}
-</style>
diff --git a/src/components/Tabs/TabNavigation.vue b/src/components/Tabs/TabNavigation.vue
deleted file mode 100644
index 1221fd0..0000000
--- a/src/components/Tabs/TabNavigation.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<!--标签页导航-->
-<template>
-  <div class="tabs">
-    <button
-        class="tab-btn"
-        :class="{ active: activeTab === 'user' }"
-        @click="$emit('update:activeTab', 'user')"
-    >
-      用户数据
-    </button>
-    <button
-        class="tab-btn"
-        :class="{ active: activeTab === 'wrong' }"
-        @click="$emit('update:activeTab', 'wrong')"
-    >
-      错题统计
-    </button>
-    <button
-        class="tab-btn"
-        :class="{ active: activeTab === 'question' }"
-        @click="$emit('update:activeTab', 'question')"
-    >
-      题库管理
-    </button>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'TabNavigation',
-  props: {
-    activeTab: {
-      type: String,
-      required: true
-    }
-  }
-}
-</script>
diff --git a/src/main.js b/src/main.js
index 63eb05f..cb7f765 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,8 +1,11 @@
 import Vue from 'vue'
 import App from './App.vue'
+// import router from '../src/router/index'
+import router from './router/index'
 
 Vue.config.productionTip = false
 
 new Vue({
+  router,
   render: h => h(App),
 }).$mount('#app')
diff --git a/src/router/index.js b/src/router/index.js
index a431489..e4ab0d3 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,30 +1,33 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import QuestionManage from '@/views/QuestionManage.vue'
-import UserStatistics from '@/views/UserStatistics.vue'
-import WrongQuestion from '@/views/WrongQuestion.vue'
+import TestView from '@/views/TestView.vue'
+import ReportView from '@/views/ReportView.vue'
+import ProblemView from '@/views/ProblemView.vue'
+// import { component } from 'vue/types/umd'
+import HomeView from '@/views/HomeView.vue'
 
 Vue.use(VueRouter)
 
 const routes = [
   {
     path: '/',
-    redirect: '/questions'
+    name: 'HomeView',
+    component: HomeView
   },
   {
-    path: '/questions',
-    name: 'QuestionManage',
-    component: QuestionManage
+    path: '/test',
+    name: 'TestView',
+    component: TestView
   },
   {
-    path: '/users',
-    name: 'UserStatistics',
-    component: UserStatistics
+    path: '/report',
+    name: 'ReportView',
+    component: ReportView
   },
   {
-    path: '/wrong-questions',
-    name: 'WrongQuestion',
-    component: WrongQuestion
+    path: '/problem',
+    name: 'ProblemView',
+    component: ProblemView
   }
 ]
 
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index e69de29..428add5 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <router-link to="/test" class="center">
+      <span class="text">进入测试系统</span>
+    </router-link>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App',
+  data() {
+    return {
+      activeTab: 'question'
+    }
+  }
+}
+</script>
+
+<style scoped>
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+div{
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #f5f5f5;
+}
+
+.center{
+  width: 300px;
+  height: 120px;
+  background: linear-gradient(135deg, #667eea 0%, #000000 100%);
+  border-radius: 15px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  border: 2px solid #2c3e50;
+  text-decoration: none;
+}
+
+.center:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
+  background: linear-gradient(135deg, #764ba2 0%, #000000 100%);
+  text-decoration: none;
+}
+
+.text {
+  color: white;
+  font-size: 20px;
+  font-weight: bold;
+  text-align: center;
+  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
+  user-select: none;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/QuestionManage.vue b/src/views/QuestionManage.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/src/views/TestView.vue b/src/views/TestView.vue
index e69de29..4b5e8da 100644
--- a/src/views/TestView.vue
+++ b/src/views/TestView.vue
@@ -0,0 +1,179 @@
+<template>
+    <div class="home">
+        <div class="top">
+            <span>
+                <h1>📈股票知识评测系统</h1>
+            </span>
+            <p>全方面评估您的股票投资知识水平，获取个性化学习建议</p>
+        </div>
+        <div class="content">
+            <div class="block">
+                <div class="schedule"></div>
+            </div>
+            <div class="text">
+                <div class="question">1、以下哪项不是股票的基本特征？</div>
+                <div class="options">
+                    <label class="option">
+                        <input type="radio" name="answer1" value="A">
+                        <span class="label">A. 收益性</span>
+                    </label>
+                    <label class="option">
+                        <input type="radio" name="answer1" value="B">
+                        <span class="label">B. 风险性</span>
+                    </label>
+                    <label class="option">
+                        <input type="radio" name="answer1" value="C">
+                        <span class="label">C. 流动性</span>
+                    </label>
+                    <label class="option">
+                        <input type="radio" name="answer1" value="D">
+                        <span class="label">D. 固定性</span>
+                    </label>
+                </div>
+            </div>
+            <div class="text">
+                <div class="question">2、以下哪项不是股票的基本特征？</div>
+                <div class="options">
+                    <label class="option">
+                        <input type="radio" name="answer2" value="A">
+                        <span class="label">A. 收益性</span>
+                    </label>
+                    <label class="option">
+                        <input type="radio" name="answer2" value="B">
+                        <span class="label">B. 风险性</span>
+                    </label>
+                    <label class="option">
+                        <input type="radio" name="answer2" value="C">
+                        <span class="label">C. 流动性</span>
+                    </label>
+                    <label class="option">
+                        <input type="radio" name="answer2" value="D">
+                        <span class="label">D. 固定性</span>
+                    </label>
+                </div>
+            </div>
+            <div>
+                <button onclick="nextPage" class="nextpage">下一页 -></button>
+            </div>
+        </div>
+        <div class="right">
+            <div class="hour">
+
+            </div>
+            <div class="all">
+
+            </div>
+            <div class="statistics">
+
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+
+</script>
+<style scoped>
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    /* background-color: #24293c; */
+}
+.home{
+    min-height: 100vh;
+    width: 100%;
+    background-color: #24293c;
+    overflow:auto;
+}
+.top{
+    background: linear-gradient(135deg, #0c4a6e 0%, #075985 100%);
+    color: white;
+    padding: 30px;
+    margin-bottom: 30px;
+    /* box-shadow: 0 10px 30px rgba(0,0,0,0.3); */
+    position: relative;
+    overflow: hidden;
+}
+h1,p{
+    background: linear-gradient(135deg, #0c4a6e 0%, #075985 100%);
+}
+.block {
+    background: rgba(139, 141, 145, 0.7);
+    width: 90%;
+    height: 10px;
+    border-radius: 5px;
+    margin:auto;
+    overflow: hidden;
+    position: relative;
+    box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
+}
+.schedule{
+    background: linear-gradient(90deg, #0ea5e9 0%, #38bdf8 100%);
+    height: 100%;
+    width: 15%;
+    transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
+    position: relative;
+}
+.content{
+    float: left;
+    height: 100%;
+    width: 60%;
+    border: #183954 solid 2px;
+    border-radius: 10px;
+    color: #f1f5f9;
+    padding: 20px 40px 50px;
+    margin: 30px;
+}
+.question{
+    font-size: 1.3em;
+    line-height: 1.8;
+    margin-bottom: 25px;
+    color: #f1f5f9;
+    font-weight: 500;
+}
+.option{
+    border: #183954 solid 2px;
+    border-radius: 10px;
+    width: 70%;
+    padding: 5px;
+    margin: 3px;
+}
+.options {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+}
+.text{
+    border: #183954 solid 2px;
+    border-radius: 10px;
+    padding: 20px 40px;
+    margin: 30px;
+}
+.hour,.all,.statistics{
+    width: 300px;
+    border: #183954 solid 2px;
+    border-radius: 10px;
+    padding: 5px;
+    margin: 3px;
+}
+.right{
+    float: right;
+    height: 100%;
+    width: 30%;
+    border: #183954 solid 2px;
+    border-radius: 10px;
+    color: #f1f5f9;
+    padding: 20px 40px 50px;
+    margin: 30px;
+}
+.nextpage{
+    width: 70px;
+    height: 30px;
+    background-color: #22608b;
+    color: #f1f5f9;
+    border-radius: 10px;
+    border: transparent 0px ;
+    margin: 5px;
+    float: right;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/TextHtml.html b/src/views/TextHtml.html
new file mode 100644
index 0000000..3033059
--- /dev/null
+++ b/src/views/TextHtml.html
@@ -0,0 +1,1942 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>股票知识测评系统</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Segoe UI', 'Microsoft YaHei', Arial, sans-serif;
+            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+            min-height: 100vh;
+            color: #e2e8f0;
+            line-height: 1.6;
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+
+        .header {
+            background: linear-gradient(135deg, #0c4a6e 0%, #075985 100%);
+            color: white;
+            padding: 30px;
+            border-radius: 15px;
+            margin-bottom: 30px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .header::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: radial-gradient(circle at top right, rgba(56, 189, 248, 0.2) 0%, transparent 40%);
+            pointer-events: none;
+        }
+
+        .header h1 {
+            font-size: 2.5em;
+            margin-bottom: 10px;
+            position: relative;
+            z-index: 1;
+        }
+
+        .header p {
+            font-size: 1.2em;
+            opacity: 0.9;
+            max-width: 600px;
+        }
+
+        .main-content {
+            display: grid;
+            grid-template-columns: 1fr 350px;
+            gap: 30px;
+            margin-bottom: 30px;
+        }
+
+        .question-area {
+            background: rgba(15, 23, 42, 0.7);
+            border-radius: 15px;
+            padding: 30px;
+            box-shadow: 0 8px 32px rgba(2, 8, 20, 0.4);
+            border: 1px solid rgba(56, 189, 248, 0.1);
+            backdrop-filter: blur(10px);
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+
+        .question-area:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 12px 40px rgba(2, 132, 199, 0.25);
+        }
+
+        .progress-bar {
+            background: rgba(30, 41, 59, 0.7);
+            height: 10px;
+            border-radius: 5px;
+            margin-bottom: 30px;
+            overflow: hidden;
+            position: relative;
+            box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
+        }
+
+        .progress-fill {
+            background: linear-gradient(90deg, #0ea5e9 0%, #38bdf8 100%);
+            height: 100%;
+            width: 20%;
+            transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
+            position: relative;
+        }
+
+        .progress-fill::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
+            animation: progressShine 2s infinite;
+        }
+
+        @keyframes progressShine {
+            0% { transform: translateX(-100%); }
+            100% { transform: translateX(100%); }
+        }
+
+        .question-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 25px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid rgba(56, 189, 248, 0.2);
+        }
+
+        .question-number {
+            background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%);
+            color: white;
+            padding: 8px 16px;
+            border-radius: 20px;
+            font-weight: bold;
+            box-shadow: 0 4px 6px rgba(2, 132, 199, 0.3);
+        }
+
+        .difficulty-badge {
+            padding: 6px 14px;
+            border-radius: 15px;
+            font-size: 0.9em;
+            font-weight: 600;
+            letter-spacing: 0.5px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+        }
+
+        .difficulty-easy {
+            background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
+            color: white;
+        }
+
+        .difficulty-medium {
+            background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
+            color: white;
+        }
+
+        .difficulty-hard {
+            background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
+            color: white;
+        }
+
+        .question-content {
+            font-size: 1.3em;
+            line-height: 1.8;
+            margin-bottom: 25px;
+            color: #f1f5f9;
+            font-weight: 500;
+        }
+
+        .options {
+            display: flex;
+            flex-direction: column;
+            gap: 15px;
+        }
+
+        .option {
+            background: rgba(30, 41, 59, 0.5);
+            border: 2px solid rgba(56, 189, 248, 0.2);
+            border-radius: 12px;
+            padding: 18px;
+            cursor: pointer;
+            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+            display: flex;
+            align-items: center;
+            gap: 15px;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .option::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 5px;
+            height: 100%;
+            background: #0ea5e9;
+            transform: translateX(-100%);
+            transition: transform 0.3s ease;
+        }
+
+        .option:hover {
+            background: rgba(30, 41, 59, 0.8);
+            border-color: #0ea5e9;
+            transform: translateX(8px);
+            box-shadow: 0 5px 15px rgba(2, 132, 199, 0.2);
+        }
+
+        .option:hover::before {
+            transform: translateX(0);
+        }
+
+        .option.selected {
+            background: linear-gradient(135deg, #0c4a6e 0%, #075985 100%);
+            border-color: #38bdf8;
+            color: white;
+            box-shadow: 0 5px 15px rgba(2, 132, 199, 0.3);
+        }
+
+        .option.selected::before {
+            transform: translateX(0);
+            background: #38bdf8;
+        }
+
+        .option input[type="radio"] {
+            width: 20px;
+            height: 20px;
+            accent-color: #38bdf8;
+        }
+
+        .option-label {
+            font-size: 1.1em;
+            flex: 1;
+            font-weight: 500;
+        }
+
+        .navigation {
+            display: flex;
+            justify-content: space-between;
+            margin-top: 30px;
+            gap: 15px;
+        }
+
+        .btn {
+            padding: 14px 28px;
+            border: none;
+            border-radius: 10px;
+            font-size: 1.1em;
+            cursor: pointer;
+            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+            font-weight: 600;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .btn::after {
+            content: '';
+            position: absolute;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 70%);
+            transform: scale(0);
+            transition: transform 0.5s ease;
+        }
+
+        .btn:hover::after {
+            transform: scale(1);
+        }
+
+        .btn-primary {
+            background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%);
+            color: white;
+            box-shadow: 0 4px 6px rgba(2, 132, 199, 0.3);
+        }
+
+        .btn-primary:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 6px 12px rgba(2, 132, 199, 0.4);
+        }
+
+        .btn-secondary {
+            background: rgba(30, 41, 59, 0.7);
+            color: #cbd5e1;
+            border: 1px solid rgba(56, 189, 248, 0.3);
+        }
+
+        .btn-secondary:hover {
+            background: rgba(30, 41, 59, 0.9);
+            transform: translateY(-3px);
+            box-shadow: 0 4px 8px rgba(2, 132, 199, 0.2);
+        }
+
+        .btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+            transform: none !important;
+            box-shadow: none !important;
+        }
+
+        .sidebar {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+
+        .sidebar-card {
+            background: rgba(15, 23, 42, 0.7);
+            border-radius: 15px;
+            padding: 25px;
+            box-shadow: 0 8px 32px rgba(2, 8, 20, 0.4);
+            border: 1px solid rgba(56, 189, 248, 0.1);
+            backdrop-filter: blur(10px);
+            transition: transform 0.3s ease;
+        }
+
+        .sidebar-card:hover {
+            transform: translateY(-5px);
+        }
+
+        .sidebar-card h3 {
+            color: #38bdf8;
+            margin-bottom: 20px;
+            font-size: 1.3em;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            padding-bottom: 10px;
+            border-bottom: 1px solid rgba(56, 189, 248, 0.2);
+        }
+
+        .question-grid {
+            display: grid;
+            grid-template-columns: repeat(5, 1fr);
+            gap: 10px;
+        }
+
+        .question-dot {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background: rgba(30, 41, 59, 0.7);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            font-weight: bold;
+            border: 1px solid rgba(56, 189, 248, 0.2);
+            color: #cbd5e1;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .question-dot::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: radial-gradient(circle, rgba(56, 189, 248, 0.3) 0%, transparent 70%);
+            transform: scale(0);
+            transition: transform 0.3s ease;
+        }
+
+        .question-dot:hover {
+            transform: scale(1.1);
+            border-color: #38bdf8;
+            color: white;
+        }
+
+        .question-dot:hover::before {
+            transform: scale(1);
+        }
+
+        .question-dot.answered {
+            background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%);
+            color: white;
+            box-shadow: 0 0 15px rgba(56, 189, 248, 0.5);
+        }
+
+        .question-dot.current {
+            background: linear-gradient(135deg, #0c4a6e 0%, #075985 100%);
+            color: white;
+            box-shadow: 0 0 15px rgba(56, 189, 248, 0.7);
+            transform: scale(1.1);
+        }
+
+        .stats-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 12px 0;
+            border-bottom: 1px solid rgba(56, 189, 248, 0.1);
+            transition: all 0.3s ease;
+        }
+
+        .stats-item:hover {
+            background: rgba(30, 41, 59, 0.3);
+            border-radius: 8px;
+            padding: 12px 10px;
+            transform: translateX(5px);
+        }
+
+        .stats-item:last-child {
+            border-bottom: none;
+        }
+
+        .stats-label {
+            color: #94a3b8;
+            font-size: 0.95em;
+        }
+
+        .stats-value {
+            font-weight: bold;
+            color: #38bdf8;
+            font-size: 1.1em;
+        }
+
+        .timer {
+            font-size: 1.3em;
+            font-weight: bold;
+            color: #38bdf8;
+            text-align: center;
+            padding: 15px;
+            background: rgba(30, 41, 59, 0.5);
+            border-radius: 10px;
+            margin-bottom: 20px;
+            border: 1px solid rgba(56, 189, 248, 0.2);
+            box-shadow: 0 0 15px rgba(56, 189, 248, 0.2);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .timer::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 3px;
+            background: linear-gradient(90deg, #0ea5e9, #38bdf8);
+            animation: timerProgress 1800s linear infinite;
+        }
+
+        @keyframes timerProgress {
+            0% { transform: translateX(-100%); }
+            100% { transform: translateX(100%); }
+        }
+
+        .result-modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(2, 6, 23, 0.9);
+            z-index: 1000;
+            backdrop-filter: blur(5px);
+        }
+
+        .result-content {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+            border-radius: 20px;
+            padding: 40px;
+            max-width: 800px;
+            width: 90%;
+            max-height: 90vh;
+            overflow-y: auto;
+            box-shadow: 0 25px 50px rgba(0,0,0,0.5);
+            border: 1px solid rgba(56, 189, 248, 0.2);
+            animation: modalAppear 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+        }
+
+        @keyframes modalAppear {
+            0% { opacity: 0; transform: translate(-50%, -45%); }
+            100% { opacity: 1; transform: translate(-50%, -50%); }
+        }
+
+        .score-display {
+            text-align: center;
+            margin-bottom: 30px;
+        }
+
+        .score-circle {
+            width: 200px;
+            height: 200px;
+            border-radius: 50%;
+            background: conic-gradient(#0ea5e9 0deg, #0ea5e9 var(--score-deg), rgba(30, 41, 59, 0.7) var(--score-deg));
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0 auto 20px;
+            position: relative;
+            box-shadow: 0 0 30px rgba(56, 189, 248, 0.3);
+        }
+
+        .score-circle::before {
+            content: '';
+            position: absolute;
+            width: 170px;
+            height: 170px;
+            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+            border-radius: 50%;
+        }
+
+        .score-text {
+            position: relative;
+            z-index: 1;
+            font-size: 2.5em;
+            font-weight: bold;
+            color: #38bdf8;
+            text-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
+        }
+
+        .analysis-section {
+            background: rgba(15, 23, 42, 0.5);
+            border-radius: 15px;
+            padding: 25px;
+            margin-bottom: 25px;
+            border: 1px solid rgba(56, 189, 248, 0.1);
+            transition: transform 0.3s ease;
+        }
+
+        .analysis-section:hover {
+            transform: translateY(-5px);
+        }
+
+        .analysis-section h4 {
+            color: #38bdf8;
+            margin-bottom: 20px;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            font-size: 1.2em;
+        }
+
+        .weakness-item {
+            background: rgba(239, 68, 68, 0.15);
+            border-left: 4px solid #ef4444;
+            padding: 15px;
+            margin-bottom: 15px;
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+
+        .weakness-item:hover {
+            transform: translateX(5px);
+            background: rgba(239, 68, 68, 0.25);
+        }
+
+        .course-recommendation {
+            background: linear-gradient(135deg, #0c4a6e 0%, #075985 100%);
+            border-radius: 15px;
+            padding: 25px;
+            color: white;
+            margin-bottom: 25px;
+            border: 1px solid rgba(56, 189, 248, 0.3);
+            box-shadow: 0 10px 25px rgba(2, 132, 199, 0.3);
+            transition: transform 0.3s ease;
+        }
+
+        .course-recommendation:hover {
+            transform: translateY(-5px);
+        }
+
+        .course-card {
+            background: rgba(255,255,255,0.15);
+            border-radius: 10px;
+            padding: 20px;
+            margin-bottom: 20px;
+            transition: all 0.3s ease;
+            border: 1px solid rgba(56, 189, 248, 0.2);
+        }
+
+        .course-card:hover {
+            background: rgba(255,255,255,0.25);
+            transform: translateX(5px);
+        }
+
+        .course-title {
+            font-weight: bold;
+            margin-bottom: 8px;
+            font-size: 1.1em;
+        }
+
+        .course-level {
+            background: rgba(255,255,255,0.3);
+            padding: 4px 12px;
+            border-radius: 15px;
+            font-size: 0.9em;
+            display: inline-block;
+            margin-bottom: 10px;
+        }
+
+        .admin-panel {
+            background: rgba(15, 23, 42, 0.7);
+            border-radius: 15px;
+            padding: 25px;
+            margin-top: 30px;
+            border: 1px solid rgba(56, 189, 248, 0.1);
+        }
+
+        .admin-panel h3 {
+            color: #38bdf8;
+            margin-bottom: 20px;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            font-size: 1.3em;
+            padding-bottom: 10px;
+            border-bottom: 1px solid rgba(56, 189, 248, 0.2);
+        }
+
+        .error-stats {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 20px;
+            margin-bottom: 25px;
+        }
+
+        .error-card {
+            background: linear-gradient(135deg, #7c2d12 0%, #dc2626 100%);
+            color: white;
+            padding: 20px;
+            border-radius: 12px;
+            text-align: center;
+            transition: all 0.3s ease;
+            border: 1px solid rgba(248, 113, 113, 0.3);
+            box-shadow: 0 5px 15px rgba(220, 38, 38, 0.3);
+        }
+
+        .error-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 8px 20px rgba(220, 38, 38, 0.4);
+        }
+
+        .error-rate {
+            font-size: 2em;
+            font-weight: bold;
+            margin-bottom: 5px;
+            text-shadow: 0 0 10px rgba(0,0,0,0.3);
+        }
+
+        .question-management {
+            background: rgba(15, 23, 42, 0.5);
+            border-radius: 12px;
+            padding: 25px;
+            border: 1px solid rgba(56, 189, 248, 0.1);
+            transition: all 0.3s ease;
+        }
+
+        .question-management:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 25px rgba(2, 132, 199, 0.2);
+        }
+
+        .question-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 15px;
+            border-bottom: 1px solid rgba(56, 189, 248, 0.1);
+            transition: all 0.3s ease;
+        }
+
+        .question-item:hover {
+            background: rgba(30, 41, 59, 0.3);
+            border-radius: 8px;
+            transform: translateX(5px);
+        }
+
+        .question-item:last-child {
+            border-bottom: none;
+        }
+
+        .error-count {
+            background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
+            color: white;
+            padding: 4px 12px;
+            border-radius: 15px;
+            font-size: 0.9em;
+            font-weight: bold;
+            box-shadow: 0 2px 4px rgba(220, 38, 38, 0.3);
+        }
+
+        .close-btn {
+            position: absolute;
+            top: 15px;
+            right: 15px;
+            background: none;
+            border: none;
+            font-size: 1.8em;
+            cursor: pointer;
+            color: #94a3b8;
+            transition: all 0.3s ease;
+            width: 40px;
+            height: 40px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 50%;
+        }
+
+        .close-btn:hover {
+            color: #f87171;
+            background: rgba(239, 68, 68, 0.1);
+            transform: rotate(90deg);
+        }
+
+        .tag {
+            display: inline-block;
+            background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%);
+            color: white;
+            padding: 5px 12px;
+            border-radius: 15px;
+            font-size: 0.85em;
+            margin-right: 8px;
+            margin-bottom: 8px;
+            font-weight: 500;
+            box-shadow: 0 2px 4px rgba(2, 132, 199, 0.3);
+        }
+
+        .tag.knowledge {
+            background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
+        }
+
+        .tag.skill {
+            background: linear-gradient(135deg, #ec4899 0%, #f472b6 100%);
+        }
+
+        .tag.risk {
+            background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
+        }
+
+        .chart-container {
+            background: rgba(15, 23, 42, 0.5);
+            border-radius: 12px;
+            padding: 25px;
+            margin-bottom: 25px;
+            height: 300px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+            border: 1px solid rgba(56, 189, 248, 0.1);
+            overflow: hidden;
+        }
+
+        .chart-container::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 5px;
+            background: linear-gradient(90deg, #0ea5e9, #38bdf8);
+        }
+
+        .chart-placeholder {
+            color: #64748b;
+            font-size: 1.2em;
+            text-align: center;
+        }
+
+        .action-buttons {
+            display: flex;
+            gap: 15px;
+            margin-top: 25px;
+            flex-wrap: wrap;
+        }
+
+        .btn-outline {
+            background: transparent;
+            border: 2px solid #38bdf8;
+            color: #38bdf8;
+            transition: all 0.3s ease;
+        }
+
+        .btn-outline:hover {
+            background: rgba(56, 189, 248, 0.1);
+            transform: translateY(-3px);
+            box-shadow: 0 4px 8px rgba(56, 189, 248, 0.2);
+        }
+
+        @media (max-width: 768px) {
+            .main-content {
+                grid-template-columns: 1fr;
+            }
+            
+            .question-grid {
+                grid-template-columns: repeat(6, 1fr);
+            }
+            
+            .header h1 {
+                font-size: 2em;
+            }
+            
+            .result-content {
+                padding: 25px;
+                width: 95%;
+            }
+
+            .score-circle {
+                width: 150px;
+                height: 150px;
+            }
+
+            .score-circle::before {
+                width: 120px;
+                height: 120px;
+            }
+
+            .score-text {
+                font-size: 2em;
+            }
+        }
+
+        .loading {
+            display: inline-block;
+            width: 20px;
+            height: 20px;
+            border: 3px solid rgba(30, 41, 59, 0.5);
+            border-top: 3px solid #38bdf8;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        .fade-in {
+            animation: fadeIn 0.5s ease-in;
+        }
+
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        .pulse {
+            animation: pulse 2s infinite;
+        }
+
+        @keyframes pulse {
+            0% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.4); }
+            70% { box-shadow: 0 0 0 10px rgba(56, 189, 248, 0); }
+            100% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0); }
+        }
+
+        .tooltip {
+            position: relative;
+            display: inline-block;
+        }
+
+        .tooltip .tooltiptext {
+            visibility: hidden;
+            width: 200px;
+            background: linear-gradient(135deg, #0c4a6e 0%, #075985 100%);
+            color: white;
+            text-align: center;
+            border-radius: 8px;
+            padding: 10px;
+            position: absolute;
+            z-index: 1;
+            bottom: 125%;
+            left: 50%;
+            margin-left: -100px;
+            opacity: 0;
+            transition: opacity 0.3s, transform 0.3s;
+            font-size: 0.9em;
+            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
+            border: 1px solid rgba(56, 189, 248, 0.3);
+        }
+
+        .tooltip .tooltiptext::after {
+            content: "";
+            position: absolute;
+            top: 100%;
+            left: 50%;
+            margin-left: -5px;
+            border-width: 5px;
+            border-style: solid;
+            border-color: #075985 transparent transparent transparent;
+        }
+
+        .tooltip:hover .tooltiptext {
+            visibility: visible;
+            opacity: 1;
+            transform: translateY(-5px);
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <!-- 头部区域 -->
+        <div class="header">
+            <h1>📈 股票知识测评系统</h1>
+            <p>全面评估您的股票投资知识水平，获取个性化学习建议</p>
+        </div>
+
+        <!-- 主要内容区域 -->
+        <div class="main-content">
+            <!-- 左侧答题区域 -->
+            <div class="question-area fade-in">
+                <!-- 进度条 -->
+                <div class="progress-bar">
+                    <div class="progress-fill" id="progressBar"></div>
+                </div>
+
+                <!-- 题目头部 -->
+                <div class="question-header">
+                    <span class="question-number" id="questionNumber">第 1 题</span>
+                    <div>
+                        <span class="difficulty-badge difficulty-easy" id="difficultyBadge">初级</span>
+                        <span class="tag knowledge" id="knowledgeTag">基础知识</span>
+                    </div>
+                </div>
+
+                <!-- 题目内容 -->
+                <div class="question-content" id="questionContent">
+                    以下哪项不是股票的基本特征？
+                </div>
+
+                <!-- 选项区域 -->
+                <div class="options" id="optionsContainer">
+                    <label class="option">
+                        <input type="radio" name="answer" value="A">
+                        <span class="option-label">A. 收益性</span>
+                    </label>
+                    <label class="option">
+                        <input type="radio" name="answer" value="B">
+                        <span class="option-label">B. 风险性</span>
+                    </label>
+                    <label class="option">
+                        <input type="radio" name="answer" value="C">
+                        <span class="option-label">C. 流动性</span>
+                    </label>
+                    <label class="option">
+                        <input type="radio" name="answer" value="D">
+                        <span class="option-label">D. 固定性</span>
+                    </label>
+                </div>
+
+                <!-- 导航按钮 -->
+                <div class="navigation">
+                    <button class="btn btn-secondary" id="prevBtn" disabled>
+                        ← 上一题
+                    </button>
+                    <button class="btn btn-primary" id="nextBtn">
+                        下一题 →
+                    </button>
+                </div>
+            </div>
+
+            <!-- 右侧边栏 -->
+            <div class="sidebar">
+                <!-- 计时器 -->
+                <div class="sidebar-card">
+                    <div class="timer" id="timer">
+                        ⏱️ 30:00
+                    </div>
+                </div>
+
+                <!-- 题目导航 -->
+                <div class="sidebar-card">
+                    <h3>📋 题目导航</h3>
+                    <div class="question-grid" id="questionGrid">
+                        <!-- 动态生成50个题目点 -->
+                    </div>
+                </div>
+
+                <!-- 答题统计 -->
+                <div class="sidebar-card">
+                    <h3>📊 答题统计</h3>
+                    <div class="stats-item">
+                        <span class="stats-label">已答题数</span>
+                        <span class="stats-value" id="answeredCount">0 / 50</span>
+                    </div>
+                    <div class="stats-item">
+                        <span class="stats-label">正确率</span>
+                        <span class="stats-value" id="accuracyRate">--%</span>
+                    </div>
+                    <div class="stats-item">
+                        <span class="stats-label">预计得分</span>
+                        <span class="stats-value" id="estimatedScore">-- / 100</span>
+                    </div>
+                    <div class="stats-item">
+                        <span class="stats-label">知识掌握度</span>
+                        <span class="stats-value" id="masteryLevel">--</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 后台管理面板 -->
+        <div class="admin-panel">
+            <h3>🔧 后台管理面板（题目分析与优化）</h3>
+            
+            <!-- 错误率统计 -->
+            <div class="error-stats" id="errorStats">
+                <div class="error-card">
+                    <div class="error-rate">45%</div>
+                    <div>技术指标题</div>
+                    <small>错误率最高</small>
+                </div>
+                <div class="error-card">
+                    <div class="error-rate">38%</div>
+                    <div>风险管理题</div>
+                    <small>需要优化</small>
+                </div>
+                <div class="error-card">
+                    <div class="error-rate">32%</div>
+                    <div>基本面分析</div>
+                    <small>中等难度</small>
+                </div>
+                <div class="error-card">
+                    <div class="error-rate">18%</div>
+                    <div>基础概念题</div>
+                    <small>掌握良好</small>
+                </div>
+            </div>
+
+            <!-- 题目管理 -->
+            <div class="question-management">
+                <h4>📝 题目管理（按错误率排序）</h4>
+                <div id="questionManagementList">
+                    <!-- 动态生成题目列表 -->
+                </div>
+            </div>
+
+            <!-- 图表分析 -->
+            <div class="chart-container">
+                <div class="chart-placeholder">
+                    📊 题目难度分布图<br>
+                    <small>（集成 Chart.js 或 ECharts 实现）</small>
+                </div>
+            </div>
+
+            <!-- 操作按钮 -->
+            <div class="action-buttons">
+                <button class="btn btn-primary" onclick="exportData()">📥 导出数据</button>
+                <button class="btn btn-outline" onclick="generateReport()">📄 生成报告</button>
+                <button class="btn btn-outline" onclick="optimizeQuestions()">🚀 智能优化</button>
+                <button class="btn btn-outline" onclick="previewQuestion()">👁️ 预览题目</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- 结果展示模态框 -->
+    <div class="result-modal" id="resultModal">
+        <div class="result-content">
+            <button class="close-btn" onclick="closeResultModal()">&times;</button>
+            
+            <div class="score-display">
+                <h2>🎉 测评完成！</h2>
+                <div class="score-circle" id="scoreCircle">
+                    <div class="score-text" id="finalScore">75</div>
+                </div>
+                <p id="scoreDescription">您的股票知识水平良好</p>
+            </div>
+
+            <!-- 分析报告 -->
+            <div class="analysis-section">
+                <h4>📊 详细分析报告</h4>
+                <div id="analysisContent">
+                    <div class="weakness-item">
+                        <strong>薄弱环节：技术指标分析</strong>
+                        <p>在MACD、KDJ等技术指标的理解和应用方面需要加强</p>
+                    </div>
+                    <div class="weakness-item">
+                        <strong>薄弱环节：风险管理</strong>
+                        <p>止损策略和仓位控制知识掌握不够扎实</p>
+                    </div>
+                    <div class="weakness-item">
+                        <strong>优势领域：基础概念</strong>
+                        <p>股票基本概念和交易规则掌握较好</p>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 课程推荐 -->
+            <div class="course-recommendation">
+                <h4>🎯 个性化课程推荐</h4>
+                <div id="courseRecommendations">
+                    <div class="course-card">
+                        <div class="course-title">📈 技术指标实战精讲</div>
+                        <span class="course-level">中级课程</span>
+                        <p>深入学习MACD、KDJ、RSI等常用技术指标</p>
+                        <small>匹配度：95% | 预计学习：20小时</small>
+                    </div>
+                    <div class="course-card">
+                        <div class="course-title">🛡️ 股票投资风险管理</div>
+                        <span class="course-level">高级课程</span>
+                        <p>系统学习仓位管理、止损策略、对冲技巧</p>
+                        <small>匹配度：88% | 预计学习：15小时</small>
+                    </div>
+                    <div class="course-card">
+                        <div class="course-title">📊 基本面分析进阶</div>
+                        <span class="course-level">中级课程</span>
+                        <p>财务报表分析、估值方法、行业研究</p>
+                        <small>匹配度：75% | 预计学习：25小时</small>
+                    </div>
+                </div>
+            </div>
+
+            <div class="action-buttons">
+                <button class="btn btn-primary" onclick="retakeQuiz()">🔄 重新测评</button>
+                <button class="btn btn-outline" onclick="viewDetailedReport()">📋 查看详细报告</button>
+                <button class="btn btn-outline" onclick="shareResults()">📤 分享结果</button>
+                <button class="btn btn-outline" onclick="startRecommendedCourse()">▶️ 开始学习</button>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // 题库数据（500道题，按分类和难度组织）
+        const questionBank = {
+            basic: { // 基础知识
+                easy: [
+                    {id: 1, question: "股票的本质是什么？", options: ["A. 债务凭证", "B. 所有权凭证", "C. 货币凭证", "D. 合同凭证"], answer: "B", explanation: "股票代表对公司部分所有权的凭证"},
+                    {id: 2, question: "以下哪项不是股票的基本特征？", options: ["A. 收益性", "B. 风险性", "C. 流动性", "D. 固定性"], answer: "D", explanation: "股票的收益不固定，具有风险性"},
+                    // ... 更多题目
+                ],
+                medium: [
+                    {id: 51, question: "市盈率(P/E)的计算公式是？", options: ["A. 股价/每股收益", "B. 总市值/净利润", "C. 股价/净资产", "D. 每股收益/股价"], answer: "A", explanation: "市盈率=股价/每股收益"},
+                    // ... 更多题目
+                ],
+                hard: [
+                    {id: 101, question: "Black-Scholes模型主要用于定价？", options: ["A. 股票", "B. 期货", "C. 期权", "D. 债券"], answer: "C", explanation: "Black-Scholes模型是期权定价模型"},
+                    // ... 更多题目
+                ]
+            },
+            technical: { // 技术分析
+                easy: [
+                    {id: 151, question: "K线图起源于哪个国家？", options: ["A. 美国", "B. 日本", "C. 英国", "D. 中国"], answer: "B", explanation: "K线图起源于日本，用于记录米价"},
+                    // ... 更多题目
+                ],
+                medium: [
+                    {id: 201, question: "MACD指标中的DIF线是？", options: ["A. 12日EMA-26日EMA", "B. 26日EMA-12日EMA", "C. 9日EMA", "D. 5日EMA"], answer: "A", explanation: "DIF=12日EMA-26日EMA"},
+                    // ... 更多题目
+                ],
+                hard: [
+                    {id: 251, question: "在波浪理论中，一个完整的循环包含多少个波浪？", options: ["A. 5个", "B. 8个", "C. 10个", "D. 13个"], answer: "B", explanation: "艾略特波浪理论：5升3降共8浪"},
+                    // ... 更多题目
+                ]
+            },
+            fundamental: { // 基本面分析
+                easy: [
+                    {id: 301, question: "ROE代表什么？", options: ["A. 总资产收益率", "B. 净资产收益率", "C. 销售利润率", "D. 成本利润率"], answer: "B", explanation: "ROE=净资产收益率=净利润/净资产"},
+                    // ... 更多题目
+                ],
+                medium: [
+                    {id: 351, question: "以下哪项不属于现金流量表中的现金流？", options: ["A. 经营活动现金流", "B. 投资活动现金流", "C. 筹资活动现金流", "D. 利润现金流"], answer: "D", explanation: "现金流分为经营、投资、筹资三类"},
+                    // ... 更多题目
+                ],
+                hard: [
+                    {id: 401, question: "DCF估值模型中的折现率通常使用？", options: ["A. 无风险利率", "B. 加权平均资本成本(WACC)", "C. 通货膨胀率", "D. 市场利率"], answer: "B", explanation: "DCF模型使用WACC作为折现率"},
+                    // ... 更多题目
+                ]
+            },
+            risk: { // 风险管理
+                easy: [
+                    {id: 451, question: "止损的主要目的是？", options: ["A. 最大化收益", "B. 控制风险", "C. 增加交易", "D. 降低成本"], answer: "B", explanation: "止损是为了限制潜在损失"},
+                    // ... 更多题目
+                ],
+                medium: [
+                    {id: 501, question: "VaR(风险价值)衡量的是？", options: ["A. 最大收益", "B. 最大损失", "C. 平均损失", "D. 预期收益"], answer: "B", explanation: "VaR衡量在给定置信水平下的最大可能损失"},
+                    // ... 更多题目
+                ]
+            }
+        };
+
+        // 全局变量
+        let currentQuestionIndex = 0;
+        let questions = []; // 当前问卷的50道题
+        let userAnswers = {};
+        let startTime = Date.now();
+        let timer = null;
+        let errorStats = {}; // 题目错误统计
+
+        // 初始化
+        document.addEventListener('DOMContentLoaded', function() {
+            generateQuestionnaire();
+            renderQuestion();
+            renderQuestionGrid();
+            startTimer();
+            updateStats();
+            renderAdminPanel();
+            
+            // 绑定事件
+            document.getElementById('nextBtn').addEventListener('click', nextQuestion);
+            document.getElementById('prevBtn').addEventListener('click', prevQuestion);
+            
+            // 选项点击事件
+            document.addEventListener('change', function(e) {
+                if (e.target.name === 'answer') {
+                    selectAnswer(e.target.value);
+                }
+            });
+        });
+
+        // 智能生成问卷（确保知识点覆盖和难度分布）
+        function generateQuestionnaire() {
+            questions = [];
+            
+            // 定义知识点分布
+            const distribution = {
+                basic: { easy: 8, medium: 6, hard: 3 },
+                technical: { easy: 5, medium: 8, hard: 5 },
+                fundamental: { easy: 5, medium: 5, hard: 3 },
+                risk: { easy: 3, medium: 3, hard: 1 }
+            };
+            
+            // 按分布从题库中随机选题
+            for (let category in distribution) {
+                for (let difficulty in distribution[category]) {
+                    const count = distribution[category][difficulty];
+                    const availableQuestions = questionBank[category][difficulty];
+                    const selected = getRandomQuestions(availableQuestions, count);
+                    selected.forEach(q => {
+                        q.category = category;
+                        q.difficulty = difficulty;
+                        questions.push(q);
+                    });
+                }
+            }
+            
+            // 打乱题目顺序
+            questions = shuffleArray(questions);
+            
+            console.log(`生成问卷：共${questions.length}道题`);
+            console.log('题目分布：', getQuestionDistribution());
+        }
+
+        // 从数组中随机选择指定数量的元素
+        function getRandomQuestions(array, count) {
+            const shuffled = [...array].sort(() => 0.5 - Math.random());
+            return shuffled.slice(0, count);
+        }
+
+        // 数组随机排序
+        function shuffleArray(array) {
+            const newArray = [...array];
+            for (let i = newArray.length - 1; i > 0; i--) {
+                const j = Math.floor(Math.random() * (i + 1));
+                [newArray[i], newArray[j]] = [newArray[j], newArray[i]];
+            }
+            return newArray;
+        }
+
+        // 获取题目分布统计
+        function getQuestionDistribution() {
+            const dist = {};
+            questions.forEach(q => {
+                const key = `${q.category}-${q.difficulty}`;
+                dist[key] = (dist[key] || 0) + 1;
+            });
+            return dist;
+        }
+
+        // 渲染当前题目
+        function renderQuestion() {
+            const question = questions[currentQuestionIndex];
+            if (!question) return;
+            
+            // 更新题目信息
+            document.getElementById('questionNumber').textContent = `第 ${currentQuestionIndex + 1} 题`;
+            document.getElementById('questionContent').textContent = question.question;
+            
+            // 更新难度标签
+            const difficultyBadge = document.getElementById('difficultyBadge');
+            difficultyBadge.textContent = getDifficultyText(question.difficulty);
+            difficultyBadge.className = `difficulty-badge difficulty-${question.difficulty}`;
+            
+            // 更新知识点标签
+            const knowledgeTag = document.getElementById('knowledgeTag');
+            knowledgeTag.textContent = getCategoryText(question.category);
+            
+            // 渲染选项
+            const optionsContainer = document.getElementById('optionsContainer');
+            optionsContainer.innerHTML = '';
+            question.options.forEach((option, index) => {
+                const label = document.createElement('label');
+                label.className = 'option';
+                label.innerHTML = `
+                    <input type="radio" name="answer" value="${option.charAt(0)}">
+                    <span class="option-label">${option}</span>
+                `;
+                optionsContainer.appendChild(label);
+            });
+            
+            // 恢复之前的选择
+            if (userAnswers[currentQuestionIndex] !== undefined) {
+                const radio = document.querySelector(`input[value="${userAnswers[currentQuestionIndex]}"]`);
+                if (radio) {
+                    radio.checked = true;
+                    radio.parentElement.classList.add('selected');
+                }
+            }
+            
+            // 更新导航按钮状态
+            document.getElementById('prevBtn').disabled = currentQuestionIndex === 0;
+            document.getElementById('nextBtn').textContent = 
+                currentQuestionIndex === questions.length - 1 ? '完成测评' : '下一题 →';
+            
+            // 更新进度条
+            updateProgressBar();
+            
+            // 更新题目网格高亮
+            updateQuestionGridHighlight();
+        }
+
+        // 获取难度文本
+        function getDifficultyText(difficulty) {
+            const map = { easy: '初级', medium: '中级', hard: '高级' };
+            return map[difficulty] || '未知';
+        }
+
+        // 获取分类文本
+        function getCategoryText(category) {
+            const map = { 
+                basic: '基础知识', 
+                technical: '技术分析', 
+                fundamental: '基本面分析', 
+                risk: '风险管理' 
+            };
+            return map[category] || '其他';
+        }
+
+        // 选择答案
+        function selectAnswer(value) {
+            userAnswers[currentQuestionIndex] = value;
+            
+            // 更新选项样式
+            document.querySelectorAll('.option').forEach(option => {
+                option.classList.remove('selected');
+            });
+            document.querySelector(`input[value="${value}"]`).parentElement.classList.add('selected');
+            
+            // 更新统计
+            updateStats();
+            
+            // 自动保存到本地存储
+            saveProgress();
+        }
+
+        // 下一题
+        function nextQuestion() {
+            if (currentQuestionIndex < questions.length - 1) {
+                currentQuestionIndex++;
+                renderQuestion();
+            } else {
+                // 完成测评
+                completeQuiz();
+            }
+        }
+
+        // 上一题
+        function prevQuestion() {
+            if (currentQuestionIndex > 0) {
+                currentQuestionIndex--;
+                renderQuestion();
+            }
+        }
+
+        // 更新进度条
+        function updateProgressBar() {
+            const progress = ((currentQuestionIndex + 1) / questions.length) * 100;
+            document.getElementById('progressBar').style.width = progress + '%';
+        }
+
+        // 更新题目网格高亮
+        function updateQuestionGridHighlight() {
+            document.querySelectorAll('.question-dot').forEach((dot, index) => {
+                dot.classList.remove('current');
+                if (index === currentQuestionIndex) {
+                    dot.classList.add('current');
+                }
+            });
+        }
+
+        // 渲染题目网格
+        function renderQuestionGrid() {
+            const grid = document.getElementById('questionGrid');
+            grid.innerHTML = '';
+            
+            for (let i = 0; i < questions.length; i++) {
+                const dot = document.createElement('div');
+                dot.className = 'question-dot tooltip';
+                dot.textContent = i + 1;
+                dot.onclick = () => jumpToQuestion(i);
+                
+                // 添加工具提示
+                const tooltip = document.createElement('span');
+                tooltip.className = 'tooltiptext';
+                tooltip.textContent = `${getCategoryText(questions[i].category)} - ${getDifficultyText(questions[i].difficulty)}`;
+                dot.appendChild(tooltip);
+                
+                grid.appendChild(dot);
+            }
+        }
+
+        // 跳转到指定题目
+        function jumpToQuestion(index) {
+            currentQuestionIndex = index;
+            renderQuestion();
+        }
+
+        // 更新答题统计
+        function updateStats() {
+            const answeredCount = Object.keys(userAnswers).length;
+            const totalQuestions = questions.length;
+            
+            document.getElementById('answeredCount').textContent = `${answeredCount} / ${totalQuestions}`;
+            
+            // 计算正确率（仅计算已答题）
+            let correctCount = 0;
+            for (let i in userAnswers) {
+                if (userAnswers[i] === questions[i].answer) {
+                    correctCount++;
+                }
+            }
+            
+            const accuracy = answeredCount > 0 ? Math.round((correctCount / answeredCount) * 100) : 0;
+            document.getElementById('accuracyRate').textContent = accuracy + '%';
+            
+            // 预计得分
+            const estimatedScore = Math.round((correctCount / totalQuestions) * 100);
+            document.getElementById('estimatedScore').textContent = `${estimatedScore} / 100`;
+            
+            // 掌握度评级
+            let mastery = '待评估';
+            if (answeredCount >= 10) {
+                if (accuracy >= 80) mastery = '优秀';
+                else if (accuracy >= 60) mastery = '良好';
+                else if (accuracy >= 40) mastery = '一般';
+                else mastery = '需加强';
+            }
+            document.getElementById('masteryLevel').textContent = mastery;
+            
+            // 更新题目网格状态
+            updateQuestionGridStatus();
+        }
+
+        // 更新题目网格状态
+        function updateQuestionGridStatus() {
+            document.querySelectorAll('.question-dot').forEach((dot, index) => {
+                if (userAnswers[index] !== undefined) {
+                    dot.classList.add('answered');
+                    // 根据正确性设置颜色
+                    if (userAnswers[index] === questions[index].answer) {
+                        dot.style.background = '#28a745';
+                    } else {
+                        dot.style.background = '#dc3545';
+                    }
+                }
+            });
+        }
+
+        // 计时器
+        function startTimer() {
+            const duration = 30 * 60; // 30分钟
+            let timeLeft = duration;
+            
+            timer = setInterval(() => {
+                const minutes = Math.floor(timeLeft / 60);
+                const seconds = timeLeft % 60;
+                
+                document.getElementById('timer').textContent = 
+                    `⏱️ ${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+                
+                if (timeLeft <= 0) {
+                    clearInterval(timer);
+                    completeQuiz();
+                }
+                timeLeft--;
+            }, 1000);
+        }
+
+        // 保存进度到本地存储
+        function saveProgress() {
+            const progress = {
+                currentQuestionIndex,
+                userAnswers,
+                startTime,
+                questions: questions.map(q => ({id: q.id, category: q.category, difficulty: q.difficulty}))
+            };
+            localStorage.setItem('quizProgress', JSON.stringify(progress));
+        }
+
+        // 完成测评
+        function completeQuiz() {
+            clearInterval(timer);
+            
+            // 计算得分
+            let correctCount = 0;
+            for (let i in userAnswers) {
+                if (userAnswers[i] === questions[i].answer) {
+                    correctCount++;
+                }
+            }
+            const finalScore = Math.round((correctCount / questions.length) * 100);
+            
+            // 生成错误统计
+            generateErrorStats();
+            
+            // 显示结果
+            showResult(finalScore);
+            
+            // 保存到后端（模拟）
+            saveResultsToBackend(finalScore);
+            
+            // 清除本地存储
+            localStorage.removeItem('quizProgress');
+        }
+
+        // 生成错误统计
+        function generateErrorStats() {
+            errorStats = {};
+            
+            for (let i in userAnswers) {
+                const question = questions[i];
+                const key = `${question.category}-${question.difficulty}`;
+                
+                if (!errorStats[key]) {
+                    errorStats[key] = { total: 0, wrong: 0, questions: [] };
+                }
+                
+                errorStats[key].total++;
+                if (userAnswers[i] !== question.answer) {
+                    errorStats[key].wrong++;
+                    errorStats[key].questions.push({
+                        id: question.id,
+                        question: question.question,
+                        userAnswer: userAnswers[i],
+                        correctAnswer: question.answer,
+                        explanation: question.explanation
+                    });
+                }
+            }
+            
+            // 计算错误率
+            for (let key in errorStats) {
+                errorStats[key].errorRate = Math.round((errorStats[key].wrong / errorStats[key].total) * 100);
+            }
+        }
+
+        // 显示结果
+        function showResult(score) {
+            const modal = document.getElementById('resultModal');
+            const scoreCircle = document.getElementById('scoreCircle');
+            const scoreText = document.getElementById('finalScore');
+            const description = document.getElementById('scoreDescription');
+            
+            // 设置分数
+            scoreText.textContent = score;
+            scoreCircle.style.setProperty('--score-deg', (score * 3.6) + 'deg');
+            
+            // 设置描述
+            let desc = '';
+            if (score >= 90) desc = '您的股票知识水平非常优秀！';
+            else if (score >= 80) desc = '您的股票知识水平良好！';
+            else if (score >= 60) desc = '您的股票知识水平中等，还有提升空间。';
+            else if (score >= 40) desc = '您的股票知识需要加强学习。';
+            else desc = '建议您系统学习股票基础知识。';
+            description.textContent = desc;
+            
+            // 生成分析报告
+            generateAnalysisReport();
+            
+            // 生成课程推荐
+            generateCourseRecommendations(score);
+            
+            // 显示模态框
+            modal.style.display = 'block';
+            document.body.style.overflow = 'hidden';
+        }
+
+        // 生成分析报告
+        function generateAnalysisReport() {
+            const analysisContent = document.getElementById('analysisContent');
+            analysisContent.innerHTML = '';
+            
+            // 按错误率排序
+            const sortedCategories = Object.entries(errorStats)
+                .sort((a, b) => b[1].errorRate - a[1].errorRate);
+            
+            sortedCategories.forEach(([key, stats]) => {
+                const [category, difficulty] = key.split('-');
+                const categoryText = getCategoryText(category);
+                
+                if (stats.errorRate > 50) {
+                    const weaknessDiv = document.createElement('div');
+                    weaknessDiv.className = 'weakness-item';
+                    weaknessDiv.innerHTML = `
+                        <strong>薄弱环节：${categoryText} (${getDifficultyText(difficulty)})</strong>
+                        <p>错误率：${stats.errorRate}% (共${stats.total}题，错${stats.wrong}题)</p>
+                        <small>建议：加强${categoryText}相关知识的学习</small>
+                    `;
+                    analysisContent.appendChild(weaknessDiv);
+                }
+            });
+            
+            // 添加优势领域
+            const strongCategories = sortedCategories.filter(([key, stats]) => stats.errorRate < 30);
+            if (strongCategories.length > 0) {
+                const strengthDiv = document.createElement('div');
+                strengthDiv.className = 'weakness-item';
+                strengthDiv.style.background = '#d4edda';
+                strengthDiv.style.borderLeftColor = '#28a745';
+                strengthDiv.innerHTML = '<strong>优势领域：</strong>';
+                
+                strongCategories.forEach(([key, stats]) => {
+                    const [category] = key.split('-');
+                    const p = document.createElement('p');
+                    p.textContent = `${getCategoryText(category)}：掌握较好（错误率${stats.errorRate}%）`;
+                    strengthDiv.appendChild(p);
+                });
+                
+                analysisContent.appendChild(strengthDiv);
+            }
+        }
+
+        // 生成课程推荐
+        function generateCourseRecommendations(score) {
+            const recommendations = document.getElementById('courseRecommendations');
+            recommendations.innerHTML = '';
+            
+            const courses = [
+                {
+                    title: '📈 技术指标实战精讲',
+                    level: '中级课程',
+                    description: '深入学习MACD、KDJ、RSI等常用技术指标',
+                    matchRate: Math.max(60, 100 - score + 20),
+                    duration: '20小时',
+                    category: 'technical'
+                },
+                {
+                    title: '🛡️ 股票投资风险管理',
+                    level: '高级课程',
+                    description: '系统学习仓位管理、止损策略、对冲技巧',
+                    matchRate: Math.max(70, 100 - score + 10),
+                    duration: '15小时',
+                    category: 'risk'
+                },
+                {
+                    title: '📊 基本面分析进阶',
+                    level: '中级课程',
+                    description: '财务报表分析、估值方法、行业研究',
+                    matchRate: Math.max(65, 95 - score + 15),
+                    duration: '25小时',
+                    category: 'fundamental'
+                },
+                {
+                    title: '📚 股票投资基础入门',
+                    level: '初级课程',
+                    description: '股票基本概念、交易规则、市场结构',
+                    matchRate: Math.max(80, 100 - score),
+                    duration: '10小时',
+                    category: 'basic'
+                }
+            ];
+            
+            // 根据得分和错误统计推荐课程
+            const recommendedCourses = [];
+            
+            // 如果基础题错误多，推荐基础课程
+            if (errorStats['basic-easy'] && errorStats['basic-easy'].errorRate > 40) {
+                recommendedCourses.push(courses.find(c => c.category === 'basic'));
+            }
+            
+            // 根据得分推荐相应难度的课程
+            if (score < 60) {
+                recommendedCourses.push(courses.find(c => c.category === 'basic'));
+            } else if (score < 80) {
+                recommendedCourses.push(courses.find(c => c.category === 'technical'));
+                recommendedCourses.push(courses.find(c => c.category === 'fundamental'));
+            } else {
+                recommendedCourses.push(courses.find(c => c.category === 'risk'));
+            }
+            
+            // 根据错误统计添加专项课程
+            for (let key in errorStats) {
+                const [category] = key.split('-');
+                if (errorStats[key].errorRate > 50 && category !== 'basic') {
+                    const course = courses.find(c => c.category === category);
+                    if (course && !recommendedCourses.includes(course)) {
+                        recommendedCourses.push(course);
+                    }
+                }
+            }
+            
+            // 去重并限制数量
+            const uniqueCourses = [...new Set(recommendedCourses)].slice(0, 3);
+            
+            uniqueCourses.forEach(course => {
+                const courseDiv = document.createElement('div');
+                courseDiv.className = 'course-card';
+                courseDiv.innerHTML = `
+                    <div class="course-title">${course.title}</div>
+                    <span class="course-level">${course.level}</span>
+                    <p>${course.description}</p>
+                    <small>匹配度：${course.matchRate}% | 预计学习：${course.duration}</small>
+                `;
+                recommendations.appendChild(courseDiv);
+            });
+        }
+
+        // 渲染后台管理面板
+        function renderAdminPanel() {
+            renderQuestionManagement();
+            renderErrorStats();
+        }
+
+        // 渲染题目管理列表
+        function renderQuestionManagement() {
+            const container = document.getElementById('questionManagementList');
+            container.innerHTML = '';
+            
+            // 模拟题目错误数据（实际应从后端获取）
+            const mockErrorData = [
+                {id: 1, question: "MACD金叉代表什么信号？", errorCount: 156, errorRate: 62},
+                {id: 2, question: "如何计算股票的市盈率？", errorCount: 134, errorRate: 54},
+                {id: 3, question: "什么是止损单？", errorCount: 98, errorRate: 45},
+                {id: 4, question: "K线图中的十字星表示？", errorCount: 87, errorRate: 42},
+                {id: 5, question: "ROE指标反映什么？", errorCount: 76, errorRate: 38}
+            ];
+            
+            mockErrorData.forEach(item => {
+                const div = document.createElement('div');
+                div.className = 'question-item';
+                div.innerHTML = `
+                    <div>
+                        <strong>${item.question}</strong>
+                        <div style="font-size: 0.9em; color: #6c757d; margin-top: 5px;">
+                            题目ID: ${item.id} | 分类: 技术分析
+                        </div>
+                    </div>
+                    <div style="text-align: right;">
+                        <div class="error-count">${item.errorCount}次错误</div>
+                        <div style="font-size: 0.9em; color: #dc3545; margin-top: 5px;">
+                            错误率: ${item.errorRate}%
+                        </div>
+                    </div>
+                `;
+                container.appendChild(div);
+            });
+        }
+
+        // 渲染错误统计
+        function renderErrorStats() {
+            const container = document.getElementById('errorStats');
+            // 这里可以根据实际数据动态更新错误统计卡片
+        }
+
+        // 关闭结果模态框
+        function closeResultModal() {
+            document.getElementById('resultModal').style.display = 'none';
+            document.body.style.overflow = 'auto';
+        }
+
+        // 保存结果到后端（模拟）
+        function saveResultsToBackend(score) {
+            const results = {
+                userId: 'user_' + Date.now(), // 模拟用户ID
+                score: score,
+                answers: userAnswers,
+                questionStats: questions.map((q, index) => ({
+                    questionId: q.id,
+                    category: q.category,
+                    difficulty: q.difficulty,
+                    userAnswer: userAnswers[index],
+                    correctAnswer: q.answer,
+                    isCorrect: userAnswers[index] === q.answer
+                })),
+                errorStats: errorStats,
+                duration: Math.floor((Date.now() - startTime) / 1000),
+                timestamp: new Date().toISOString()
+            };
+            
+            console.log('保存测评结果：', results);
+            
+            // 模拟API调用
+            // fetch('/api/quiz/results', {
+            //     method: 'POST',
+            //     headers: { 'Content-Type': 'application/json' },
+            //     body: JSON.stringify(results)
+            // });
+        }
+
+        // 后台管理功能
+        function exportData() {
+            alert('📥 导出功能：将错误统计数据导出为Excel/PDF格式');
+            // 实际实现：生成并下载报告文件
+        }
+
+        function generateReport() {
+            alert('📄 生成详细分析报告，包含题目分析、用户行为等');
+            // 实际实现：生成综合分析报告
+        }
+
+        function optimizeQuestions() {
+            alert('🚀 智能优化：根据错误率自动调整题目难度和顺序');
+            // 实际实现：AI算法优化题目
+        }
+
+        function previewQuestion() {
+            alert('👁️ 预览功能：查看题目在考生端的显示效果');
+            // 实际实现：打开题目预览窗口
+        }
+
+        // 结果页面功能
+        function retakeQuiz() {
+            if (confirm('确定要重新测评吗？当前进度将会丢失。')) {
+                location.reload();
+            }
+        }
+
+        function viewDetailedReport() {
+            alert('📋 查看包含每题分析、知识点掌握度等详细报告');
+            // 实际实现：打开详细报告页面
+        }
+
+        function shareResults() {
+            alert('📤 分享功能：生成分享链接或图片');
+            // 实际实现：社交媒体分享功能
+        }
+
+        function startRecommendedCourse() {
+            alert('▶️ 跳转到推荐课程学习页面');
+            // 实际实现：导航到课程页面
+        }
+
+        // 键盘导航
+        document.addEventListener('keydown', function(e) {
+            if (e.key === 'ArrowLeft') {
+                prevQuestion();
+            } else if (e.key === 'ArrowRight') {
+                nextQuestion();
+            } else if (e.key >= '1' && e.key <= '4') {
+                const optionIndex = parseInt(e.key) - 1;
+                const options = document.querySelectorAll('input[name="answer"]');
+                if (options[optionIndex]) {
+                    options[optionIndex].checked = true;
+                    selectAnswer(options[optionIndex].value);
+                }
+            }
+        });
+
+        // 窗口大小改变时重新渲染
+        window.addEventListener('resize', function() {
+            // 可以在这里添加响应式调整逻辑
+        });
+
+        // 页面卸载前保存进度
+        window.addEventListener('beforeunload', function(e) {
+            if (Object.keys(userAnswers).length > 0 && Object.keys(userAnswers).length < questions.length) {
+                saveProgress();
+                e.preventDefault();
+                e.returnValue = '您还有未完成的题目，确定要离开吗？';
+            }
+        });
+
+        // 模拟一些用户答题数据（用于演示错误统计）
+        setTimeout(() => {
+            // 模拟用户答错一些题目
+            const mockUserAnswers = {
+                0: 'A',  // 第1题答错
+                3: 'C',  // 第4题答错
+                7: 'B',  // 第8题答错
+                12: 'D', // 第13题答错
+                18: 'A'  // 第19题答错
+            };
+            
+            // 将模拟数据合并到用户答案中（仅用于演示）
+            Object.assign(userAnswers, mockUserAnswers);
+            updateStats();
+        }, 3000);
+
+        // 添加一些交互动画
+        document.addEventListener('DOMContentLoaded', function() {
+            // 为按钮添加点击波纹效果
+            document.querySelectorAll('.btn').forEach(button => {
+                button.addEventListener('click', function(e) {
+                    const ripple = document.createElement('span');
+                    const rect = this.getBoundingClientRect();
+                    const size = Math.max(rect.width, rect.height);
+                    const x = e.clientX - rect.left - size / 2;
+                    const y = e.clientY - rect.top - size / 2;
+                    
+                    ripple.style.width = ripple.style.height = size + 'px';
+                    ripple.style.left = x + 'px';
+                    ripple.style.top = y + 'px';
+                    ripple.classList.add('ripple');
+                    
+                    this.appendChild(ripple);
+                    
+                    setTimeout(() => ripple.remove(), 600);
+                });
+            });
+        });
+
+        // 添加CSS动画样式
+        const style = document.createElement('style');
+        style.textContent = `
+            @keyframes ripple {
+                to {
+                    transform: scale(4);
+                    opacity: 0;
+                }
+            }
+            
+            .ripple {
+                position: absolute;
+                border-radius: 50%;
+                background: rgba(255, 255, 255, 0.6);
+                transform: scale(0);
+                animation: ripple 0.6s linear;
+                pointer-events: none;
+            }
+            
+            .btn {
+                position: relative;
+                overflow: hidden;
+            }
+        `;
+        document.head.appendChild(style);
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/views/WrongQuestion.vue b/src/views/WrongQuestion.vue
deleted file mode 100644
index e69de29..0000000