Browse Source

完成了答题界面的功能以及对应的结算界面的跳转

milestone-20251107-股票知识测评
chenzhen 2 months ago
parent
commit
4f90d38c7b
  1. 36
      package-lock.json
  2. BIN
      src/assets/enter.jpg
  3. BIN
      src/assets/home.jpg
  4. BIN
      src/assets/return.jpg
  5. 6
      src/router/index.js
  6. 53
      src/views/HomeView.vue
  7. 93
      src/views/ResultView.vue
  8. 1385
      src/views/TextView.vue

36
package-lock.json

@ -65,6 +65,7 @@
"resolved": "https://registry.npmmirror.com/@babel/core/-/core-7.28.5.tgz",
"integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
"dev": true,
"peer": true,
"dependencies": {
"@babel/code-frame": "^7.27.1",
"@babel/generator": "^7.28.5",
@ -2446,6 +2447,7 @@
"resolved": "https://registry.npmmirror.com/@vue/cli-service/-/cli-service-5.0.9.tgz",
"integrity": "sha512-yTX7GVyM19tEbd+y5/gA6MkVKA6K61nVYHYAivD61Hx6odVFmQsaC3/R3cWAHM1P5oVKCevBbumPljbT+tFG2w==",
"dev": true,
"peer": true,
"dependencies": {
"@babel/helper-compilation-targets": "^7.12.16",
"@soda/friendly-errors-webpack-plugin": "^1.8.0",
@ -2952,6 +2954,7 @@
"resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.15.0.tgz",
"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
"dev": true,
"peer": true,
"bin": {
"acorn": "bin/acorn"
},
@ -3006,6 +3009,7 @@
"resolved": "https://registry.npmmirror.com/ajv/-/ajv-6.12.6.tgz",
"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
"dev": true,
"peer": true,
"dependencies": {
"fast-deep-equal": "^3.1.1",
"fast-json-stable-stringify": "^2.0.0",
@ -3499,6 +3503,7 @@
"url": "https://github.com/sponsors/ai"
}
],
"peer": true,
"dependencies": {
"baseline-browser-mapping": "^2.8.19",
"caniuse-lite": "^1.0.30001751",
@ -4142,6 +4147,7 @@
"resolved": "https://registry.npmmirror.com/css-loader/-/css-loader-6.11.0.tgz",
"integrity": "sha512-CTJ+AEQJjq5NzLga5pE39qdiSV56F8ywCIsqNIRF0r7BDgWsN25aazToqAFg7ZrtA/U016xudB3ffgweORxX7g==",
"dev": true,
"peer": true,
"dependencies": {
"icss-utils": "^5.1.0",
"postcss": "^8.4.33",
@ -4227,6 +4233,7 @@
"resolved": "https://registry.npmmirror.com/ajv/-/ajv-8.17.1.tgz",
"integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
"dev": true,
"peer": true,
"dependencies": {
"fast-deep-equal": "^3.1.3",
"fast-uri": "^3.0.1",
@ -5005,6 +5012,7 @@
"integrity": "sha512-VHZ8gX+EDfz+97jGcgyGCyRia/dPOd6Xh9yPv8Bl1+SoaIwD+a/vlrOmGRUyOYu7MwUhc7CxqeaDZU13S4+EpA==",
"deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
"dev": true,
"peer": true,
"dependencies": {
"@babel/code-frame": "7.12.11",
"@eslint/eslintrc": "^0.4.3",
@ -5182,6 +5190,7 @@
"resolved": "https://registry.npmmirror.com/ajv/-/ajv-8.17.1.tgz",
"integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
"dev": true,
"peer": true,
"dependencies": {
"fast-deep-equal": "^3.1.3",
"fast-uri": "^3.0.1",
@ -7396,6 +7405,7 @@
"resolved": "https://registry.npmmirror.com/ajv/-/ajv-8.17.1.tgz",
"integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
"dev": true,
"peer": true,
"dependencies": {
"fast-deep-equal": "^3.1.3",
"fast-uri": "^3.0.1",
@ -8127,6 +8137,7 @@
"url": "https://github.com/sponsors/ai"
}
],
"peer": true,
"dependencies": {
"nanoid": "^3.3.11",
"picocolors": "^1.1.1",
@ -10005,6 +10016,7 @@
"resolved": "https://registry.npmmirror.com/ajv/-/ajv-8.17.1.tgz",
"integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
"dev": true,
"peer": true,
"dependencies": {
"fast-deep-equal": "^3.1.3",
"fast-uri": "^3.0.1",
@ -10552,6 +10564,7 @@
"resolved": "https://registry.npmmirror.com/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz",
"integrity": "sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==",
"dev": true,
"peer": true,
"dependencies": {
"de-indent": "^1.0.2",
"he": "^1.2.0"
@ -10618,6 +10631,7 @@
"resolved": "https://registry.npmmirror.com/webpack/-/webpack-5.102.1.tgz",
"integrity": "sha512-7h/weGm9d/ywQ6qzJ+Xy+r9n/3qgp/thalBbpOi5i223dPXKi04IBtqPN9nTd+jBc7QKfvDbaBnFipYp4sJAUQ==",
"dev": true,
"peer": true,
"dependencies": {
"@types/eslint-scope": "^3.7.7",
"@types/estree": "^1.0.8",
@ -10750,6 +10764,7 @@
"resolved": "https://registry.npmmirror.com/ajv/-/ajv-8.17.1.tgz",
"integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
"dev": true,
"peer": true,
"dependencies": {
"fast-deep-equal": "^3.1.3",
"fast-uri": "^3.0.1",
@ -10862,6 +10877,7 @@
"resolved": "https://registry.npmmirror.com/ajv/-/ajv-8.17.1.tgz",
"integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
"dev": true,
"peer": true,
"dependencies": {
"fast-deep-equal": "^3.1.3",
"fast-uri": "^3.0.1",
@ -10965,6 +10981,7 @@
"resolved": "https://registry.npmmirror.com/ajv/-/ajv-8.17.1.tgz",
"integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
"dev": true,
"peer": true,
"dependencies": {
"fast-deep-equal": "^3.1.3",
"fast-uri": "^3.0.1",
@ -11288,6 +11305,7 @@
"resolved": "https://registry.npmmirror.com/@babel/core/-/core-7.28.5.tgz",
"integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
"dev": true,
"peer": true,
"requires": {
"@babel/code-frame": "^7.27.1",
"@babel/generator": "^7.28.5",
@ -13042,6 +13060,7 @@
"resolved": "https://registry.npmmirror.com/@vue/cli-service/-/cli-service-5.0.9.tgz",
"integrity": "sha512-yTX7GVyM19tEbd+y5/gA6MkVKA6K61nVYHYAivD61Hx6odVFmQsaC3/R3cWAHM1P5oVKCevBbumPljbT+tFG2w==",
"dev": true,
"peer": true,
"requires": {
"@babel/helper-compilation-targets": "^7.12.16",
"@soda/friendly-errors-webpack-plugin": "^1.8.0",
@ -13473,7 +13492,8 @@
"version": "8.15.0",
"resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.15.0.tgz",
"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
"dev": true
"dev": true,
"peer": true
},
"acorn-import-phases": {
"version": "1.0.4",
@ -13509,6 +13529,7 @@
"resolved": "https://registry.npmmirror.com/ajv/-/ajv-6.12.6.tgz",
"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
"dev": true,
"peer": true,
"requires": {
"fast-deep-equal": "^3.1.1",
"fast-json-stable-stringify": "^2.0.0",
@ -13854,6 +13875,7 @@
"resolved": "https://registry.npmmirror.com/browserslist/-/browserslist-4.27.0.tgz",
"integrity": "sha512-AXVQwdhot1eqLihwasPElhX2tAZiBjWdJ9i/Zcj2S6QYIjkx62OKSfnobkriB81C3l4w0rVy3Nt4jaTBltYEpw==",
"dev": true,
"peer": true,
"requires": {
"baseline-browser-mapping": "^2.8.19",
"caniuse-lite": "^1.0.30001751",
@ -14327,6 +14349,7 @@
"resolved": "https://registry.npmmirror.com/css-loader/-/css-loader-6.11.0.tgz",
"integrity": "sha512-CTJ+AEQJjq5NzLga5pE39qdiSV56F8ywCIsqNIRF0r7BDgWsN25aazToqAFg7ZrtA/U016xudB3ffgweORxX7g==",
"dev": true,
"peer": true,
"requires": {
"icss-utils": "^5.1.0",
"postcss": "^8.4.33",
@ -14365,6 +14388,7 @@
"resolved": "https://registry.npmmirror.com/ajv/-/ajv-8.17.1.tgz",
"integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
"dev": true,
"peer": true,
"requires": {
"fast-deep-equal": "^3.1.3",
"fast-uri": "^3.0.1",
@ -14942,6 +14966,7 @@
"resolved": "https://registry.npmmirror.com/eslint/-/eslint-7.32.0.tgz",
"integrity": "sha512-VHZ8gX+EDfz+97jGcgyGCyRia/dPOd6Xh9yPv8Bl1+SoaIwD+a/vlrOmGRUyOYu7MwUhc7CxqeaDZU13S4+EpA==",
"dev": true,
"peer": true,
"requires": {
"@babel/code-frame": "7.12.11",
"@eslint/eslintrc": "^0.4.3",
@ -15156,6 +15181,7 @@
"resolved": "https://registry.npmmirror.com/ajv/-/ajv-8.17.1.tgz",
"integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
"dev": true,
"peer": true,
"requires": {
"fast-deep-equal": "^3.1.3",
"fast-uri": "^3.0.1",
@ -16708,6 +16734,7 @@
"resolved": "https://registry.npmmirror.com/ajv/-/ajv-8.17.1.tgz",
"integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
"dev": true,
"peer": true,
"requires": {
"fast-deep-equal": "^3.1.3",
"fast-uri": "^3.0.1",
@ -17248,6 +17275,7 @@
"version": "8.5.6",
"resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.5.6.tgz",
"integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
"peer": true,
"requires": {
"nanoid": "^3.3.11",
"picocolors": "^1.1.1",
@ -18593,6 +18621,7 @@
"resolved": "https://registry.npmmirror.com/ajv/-/ajv-8.17.1.tgz",
"integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
"dev": true,
"peer": true,
"requires": {
"fast-deep-equal": "^3.1.3",
"fast-uri": "^3.0.1",
@ -19000,6 +19029,7 @@
"resolved": "https://registry.npmmirror.com/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz",
"integrity": "sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==",
"dev": true,
"peer": true,
"requires": {
"de-indent": "^1.0.2",
"he": "^1.2.0"
@ -19050,6 +19080,7 @@
"resolved": "https://registry.npmmirror.com/webpack/-/webpack-5.102.1.tgz",
"integrity": "sha512-7h/weGm9d/ywQ6qzJ+Xy+r9n/3qgp/thalBbpOi5i223dPXKi04IBtqPN9nTd+jBc7QKfvDbaBnFipYp4sJAUQ==",
"dev": true,
"peer": true,
"requires": {
"@types/eslint-scope": "^3.7.7",
"@types/estree": "^1.0.8",
@ -19083,6 +19114,7 @@
"resolved": "https://registry.npmmirror.com/ajv/-/ajv-8.17.1.tgz",
"integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
"dev": true,
"peer": true,
"requires": {
"fast-deep-equal": "^3.1.3",
"fast-uri": "^3.0.1",
@ -19181,6 +19213,7 @@
"resolved": "https://registry.npmmirror.com/ajv/-/ajv-8.17.1.tgz",
"integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
"dev": true,
"peer": true,
"requires": {
"fast-deep-equal": "^3.1.3",
"fast-uri": "^3.0.1",
@ -19260,6 +19293,7 @@
"resolved": "https://registry.npmmirror.com/ajv/-/ajv-8.17.1.tgz",
"integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
"dev": true,
"peer": true,
"requires": {
"fast-deep-equal": "^3.1.3",
"fast-uri": "^3.0.1",

BIN
src/assets/enter.jpg

After

Width: 792  |  Height: 159  |  Size: 54 KiB

BIN
src/assets/home.jpg

After

Width: 1920  |  Height: 1040  |  Size: 713 KiB

BIN
src/assets/return.jpg

After

Width: 102  |  Height: 129  |  Size: 5.2 KiB

6
src/router/index.js

@ -4,6 +4,7 @@ import TestView from '@/views/TestView.vue'
import TextView from '@/views/TextView.vue'
import ReportView from '@/views/ReportView.vue'
import ProblemView from '@/views/ProblemView.vue'
import ResultView from '@/views/ResultView.vue'
// import { component } from 'vue/types/umd'
import HomeView from '@/views/HomeView.vue'
@ -26,6 +27,11 @@ const routes = [
component: TextView
},
{
path: '/result',
name: 'ResultView',
component: ResultView
},
{
path: '/report',
name: 'ReportView',
component: ReportView

53
src/views/HomeView.vue

@ -1,7 +1,7 @@
<template>
<div>
<router-link to="/text" class="center">
<span class="text">进入测试系统</span>
<img src="../assets/enter.jpg" alt="进入测试" class="image">
</router-link>
</div>
</template>
@ -24,42 +24,39 @@ export default {
box-sizing: border-box;
}
div{
div {
position: relative;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #f5f5f5;
background-image: url('@/assets/home.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.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;
.image {
position: absolute;
/* 方法1:使用具体像素值定位 */
bottom: 80px; /* 距离底部100px */
right: 54%;
width: 200px; /* 初始大小 */
height: 160px;
object-fit: contain;
transition: all 0.3s ease;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
border: 2px solid #2c3e50;
text-decoration: none;
border-radius: 10px;
}
.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;
.center:hover .image {
transform: scale(1.2); /* 鼠标悬停时放大 */
filter: brightness(1.1);
}
/*
.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;
}
position: relative;
display: flex;
justify-content: center;
align-items: center;
} */
</style>

93
src/views/ResultView.vue

@ -0,0 +1,93 @@
<template>
<div class="home">
<div class="top">
<router-link to="/"><img src="../assets/return.jpg" alt="返回" class="ret"></router-link>
<h1>📈股票知识评测系统</h1>
<p>全方面评估您的股票投资知识水平获取个性化学习建议</p>
</div>
<div class="content">
<p class="p1">恭喜您完成测评</p>
<!-- <el-icon-circle-check></el-icon-circle-check> -->
</div>
<div class="p2">
<router-link to="/report">查看分析报告</router-link>
</div>
</div>
</template>
<script>
export default{
name: 'ResultView',
data() {
return {
};
},
methods:{
show(){
this.$router.path('/report');
}
}
}
</script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.top {
background: linear-gradient(135deg, #0c4a6e 100%);
color: white;
padding: 30px;
margin-bottom: 30px;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
position: relative;
overflow: hidden;
/* text-align: center; */
}
.top h1 {
font-size: 2.2em;
margin-bottom: 10px;
background: none;
}
.top p {
font-size: 1.1em;
opacity: 0.9;
background: none;
}
.ret{
width: 30px;
height: 50px;
float: left;
}
.home {
min-height: 100vh;
width: 100%;
background-color: #24293c;
overflow: auto;
padding: 20px;
}
.content {
float: left;
width:100%;
height: 720px;
border: #183954 solid 2px;
border-radius: 10px;
color: #f1f5f9;
padding: 20px 40px 50px;
margin-right: 20px;
background-color: #2a3147;
}
.p1{
font-size: 40px;
text-align: center;
}
.home .p2{
height: 100px;
width: 200px;
background-color: #22608b;
color: white;
}
</style>

1385
src/views/TextView.vue
File diff suppressed because it is too large
View File

Loading…
Cancel
Save