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 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') |
|||
@ -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