chenzhen
2 months ago
14 changed files with 2245 additions and 422 deletions
-
7package-lock.json
-
218src/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
-
3src/main.js
-
29src/router/index.js
-
65src/views/HomeView.vue
-
0src/views/QuestionManage.vue
-
179src/views/TestView.vue
-
1942src/views/TextHtml.html
-
0src/views/WrongQuestion.vue
@ -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> |
|
||||
@ -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> |
|
||||
@ -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> |
|
||||
@ -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> |
|
||||
@ -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> |
|
||||
@ -1,8 +1,11 @@ |
|||||
import Vue from 'vue' |
import Vue from 'vue' |
||||
import App from './App.vue' |
import App from './App.vue' |
||||
|
// import router from '../src/router/index'
|
||||
|
import router from './router/index' |
||||
|
|
||||
Vue.config.productionTip = false |
Vue.config.productionTip = false |
||||
|
|
||||
new Vue({ |
new Vue({ |
||||
|
router, |
||||
render: h => h(App), |
render: h => h(App), |
||||
}).$mount('#app') |
}).$mount('#app') |
||||
@ -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> |
||||
@ -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> |
||||
1942
src/views/TextHtml.html
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
Write
Preview
Loading…
Cancel
Save
Reference in new issue