Browse Source
Merge branch 'daijiajun/feature-20251107115823-股票知识测评' of http://39.101.133.168:8807/majun/Knowledge_Test_Vue into chenzhen/feature-20251107115823-股票知识测评
backup-before-author-change
Merge branch 'daijiajun/feature-20251107115823-股票知识测评' of http://39.101.133.168:8807/majun/Knowledge_Test_Vue into chenzhen/feature-20251107115823-股票知识测评
backup-before-author-change
yufenghao
2 months ago
12 changed files with 502 additions and 29 deletions
-
61package-lock.json
-
3package.json
-
206src/App.vue
-
31src/components/Layout/Header.vue
-
50src/components/Layout/Sidebar.vue
-
36src/components/Question/QuestionSearch.vue
-
69src/components/Question/QuestionTable.vue
-
38src/components/Tabs/TabNavigation.vue
-
37src/router/index.js
-
0src/views/HomeView.vue
-
0src/views/QuestionManage.vue
-
0src/views/WrongQuestion.vue
@ -1,28 +1,212 @@ |
|||
<!--全局样式--> |
|||
<template> |
|||
<div id="app"> |
|||
<img alt="Vue logo" src="./assets/logo.png"> |
|||
<HelloWorld msg="Welcome to Your Vue.js 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> |
|||
</template> |
|||
|
|||
<script> |
|||
import HelloWorld from './components/HelloWorld.vue' |
|||
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: { |
|||
HelloWorld |
|||
Header, |
|||
Sidebar, |
|||
TabNavigation, |
|||
QuestionSearch, |
|||
QuestionTable |
|||
}, |
|||
data() { |
|||
return { |
|||
activeTab: 'question' |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style>/* 保持原有的全局样式 */ |
|||
* { |
|||
margin: 0; |
|||
padding: 0; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
body { |
|||
font-family: 'Arial', sans-serif; |
|||
background-color: #f5f5f5; |
|||
} |
|||
|
|||
<style> |
|||
#app { |
|||
font-family: Avenir, Helvetica, Arial, sans-serif; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
text-align: center; |
|||
color: #2c3e50; |
|||
margin-top: 60px; |
|||
width: 100%; |
|||
height: 100vh; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.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; |
|||
} |
|||
|
|||
.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; |
|||
} |
|||
|
|||
.tabs { |
|||
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; |
|||
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; |
|||
} |
|||
|
|||
.btn-red.small { |
|||
padding: 4px 10px; |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.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> |
|||
@ -0,0 +1,31 @@ |
|||
<!--头部组件--> |
|||
<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> |
|||
@ -0,0 +1,50 @@ |
|||
<!--侧边栏组件--> |
|||
<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> |
|||
@ -0,0 +1,36 @@ |
|||
<!--搜索区域--> |
|||
<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> |
|||
@ -0,0 +1,69 @@ |
|||
<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> |
|||
@ -0,0 +1,38 @@ |
|||
<!--标签页导航--> |
|||
<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> |
|||
@ -0,0 +1,37 @@ |
|||
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' |
|||
|
|||
Vue.use(VueRouter) |
|||
|
|||
const routes = [ |
|||
{ |
|||
path: '/', |
|||
redirect: '/questions' |
|||
}, |
|||
{ |
|||
path: '/questions', |
|||
name: 'QuestionManage', |
|||
component: QuestionManage |
|||
}, |
|||
{ |
|||
path: '/users', |
|||
name: 'UserStatistics', |
|||
component: UserStatistics |
|||
}, |
|||
{ |
|||
path: '/wrong-questions', |
|||
name: 'WrongQuestion', |
|||
component: WrongQuestion |
|||
} |
|||
] |
|||
|
|||
const router = new VueRouter({ |
|||
mode: 'history', |
|||
base: process.env.BASE_URL, |
|||
routes |
|||
}) |
|||
|
|||
export default router |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue