Skip to content

yangchao / brains-h5

Go to a project
Commit 945a7ee0 by yangchao
Options

update

1 parent bb6b406a
Inline Side-by-side
Showing with 1133 additions and 3 deletions
src/router/index.js
......@@ -118,6 +118,43 @@ const constantRouterMap = [
component : _import('reserve/reserveResult') ,
name : 'reserveResult' ,
},
//快速阅读
{
path : '/fastReading/index' ,
component : _import('fastReading/index') ,
name : 'fastReadingIndex' ,
},
{
path : '/fastReading/readArticle' ,
component : _import('fastReading/readArticle') ,
name : 'fastReadingReadArticle' ,
},
{
path : '/fastReading/answerQuestion' ,
component : _import('fastReading/answerQuestion') ,
name : 'fastReadingAnswerQuestion' ,
},
{
path : '/fastReading/readResult' ,
component : _import('fastReading/readResult') ,
name : 'readResult' ,
},
//国学经典
{
path : '/studiesChnia/index' ,
component : _import('studiesChnia/index') ,
name : 'studiesChniaIndex' ,
},
{
path : '/studiesChnia/answerStudies' ,
component : _import('studiesChnia/answerStudies') ,
name : 'answerStudies' ,
},
{
path : '/studiesChnia/studiesResult' ,
component : _import('studiesChnia/studiesResult') ,
name : 'studiesResult' ,
},
]
},
{ path: '*', redirect: '/404' }
......
src/store/index.js
......@@ -18,6 +18,7 @@ const store = new Vuex.Store({
myLetterAnswer: [], //我的随机字母答案
forwardAnswer: [], //正向速算结果
reserveAnswer: [], //逆向速算结果
articleAnswer: [], //阅读理解结果
},
state
})
......
src/utils/article.js 0 → 100644
let article = [
{
text: '<p style="text-align: center;"><span style="font-size: 18px;"><strong>厨与医</strong></span><br/></p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px; text-indent: 2em; line-height: 32px; font-size: 17px; font-family: 微软雅黑; white-space: normal; background-color: rgb(255, 255, 255);"><span style="font-family: 宋体; font-size: 14px; background-color: rgb(255, 255, 255);">新加坡有我的一位朋友，叫何振亚。他颇有财富，且待人热诚。我在新加坡旅行时住在他家。他最让人羡慕的不是他有钱，而是他有个好厨子。</span><br/><span style="font-family: 宋体; font-size: 14px; background-color: rgb(255, 255, 255);">　　何振亚的厨子是马来西亚籍的“粤人”，是个单身女郎。她身材高挑、眉清目秀，三十余岁，等闲人看不出她有什么好手艺，她是那种天生会做菜的人。</span><br/><span style="font-family: 宋体; font-size: 14px; background-color: rgb(255, 255, 255);">　　这梁妹不像一般仆人要做很多事，她主要的工作就是做一日三餐。我住在何家，第一天早上起床，早餐是西式的，两个荷包蛋、两根香肠、一杯咖啡、一杯牛奶或果汁。她的做法是中式的，蛋煎两面，两面皆为蛋白包住，却透明如看见蛋黄——这才是中国式的“荷包蛋”，不是西式的一面蛋，而那德国香肠是梁妹自灌的，属于中西合璧的美味。</span><br/><span style="font-family: 宋体; font-size: 14px; background-color: rgb(255, 255, 255);">　　正吃早餐的时候，何振亚说：“不要小看了这鸡蛋，你看这鸡蛋接近正圆形，火候恰到好处，这不是技术问题。梁妹是个律己极严的厨师，她煎蛋的时候只要蛋明显地歪了，就自己吃掉，不肯端上桌，一定要煎到接近正圆形，毫无瑕疵才肯拿出来。我起初不能适应她的工作方式，久了反而欣赏她的态度，她简直不是厨子，而是一位了不起的生活艺术家。”</span><br/><span style="font-family: 宋体; font-size: 14px; background-color: rgb(255, 255, 255);">　　梁妹不仅此也，她常做一道糖醋高丽菜，假如没有上好的镇江醋，她是拒绝做的，而且一棵高丽菜，叶子大部分切去，只留下靠菜梗又厚实又坚硬的部分，切成正方形，每一个方形一样大，两寸见方，炒出来的高丽菜透明有如白玉，嚼在口中清脆作响。真是从寻常菜肴中见出功夫，那么可想而知做大菜时她的用心。有一回，何振亚摆酒席，梁妹忙了整整一天，每道菜都好到让人嚼到舌头。</span><br/><span style="font-family: 宋体; font-size: 14px; background-color: rgb(255, 255, 255);">　　其中有一道叉烧，令我记忆深刻，端上来时热腾腾的，外皮甚脆，嚼之作声，内部却是细嫩无比。梁妹说：“你要测验广东馆子的师傅行不行，不必吃别的菜，叫一客叉烧来吃便可以打分数。对广东人来说，叉烧是最基本的功夫。”</span><br/><span style="font-family: 宋体; font-size: 14px; background-color: rgb(255, 255, 255);">　　梁妹来自马来西亚乡下，未受过什么教育，我和她聊天时忍不住问起她烹饪的事，她说是自己于做菜有兴趣，觉得煎一个好蛋也是令人快乐的事。</span><br/><span style="font-family: 宋体; font-size: 14px; background-color: rgb(255, 255, 255);">　　我在何家住了一个星期，总觉得有个好厨子是人生一快，后来在新加坡的事多已淡忘，唯独梁妹的菜让我印象至为深刻。我不禁想起以前的法国大臣塔列朗奉命到维也纳开会，路易十八问他最需要什么，他说：“祈皇上赐臣一御厨。”因为对法国人来说，没有好的厨子，外交就免谈了。</span><br/><span style="font-family: 宋体; font-size: 14px; background-color: rgb(255, 255, 255);">　　以前，袁子才家的厨子王小余说：“作厨如作医，以吾一心诊百物之宜。”又说，“能大而不能小者，气粗也；能啬而不能华者，才弱也。且味固不在大小、华啬间也。能，则一芹一菹皆珍怪；不能，则虽黄雀鲊三楹，无益也。”一个好厨子做的芹菜，绝对胜过坏厨子做的熊掌。</span></p>',
questionList: [
{
question: '新加坡有我的一位朋友，叫（）',
answer: ['A、何振东','B、何振亚','C、何亚正','D、何正正'],
correctAnswer: 'B、何振亚'
},
{
question: '他颇有财富，且待人热诚。我在新加坡（）时住在他家。',
answer: ['A、工作','B、开会','C、旅行','D、参观'],
correctAnswer: 'C、旅行'
},
{
question: '何振亚的厨子是（）籍的"粤人"，是个单身女郎。',
answer: ['A、马来西亚','B、新加坡','C、菲律宾','D、柬埔寨'],
correctAnswer: 'A、马来西亚'
},
{
question: '何振亚的厨师大概多少岁呢？',
answer: ['A、二十余岁','B、三十余岁','C、四十余岁','D、五十余岁'],
correctAnswer: 'B、三十余岁'
},
{
question: '我第一天住在何家吃的早餐中，没有的是：',
answer: ['A、荷包蛋','B、香肠','C、咖啡','D、面包'],
correctAnswer: 'D、面包'
},
{
question: '为什么我觉得她简直不是厨子，而是一位了不起的生活艺术家？',
answer: ['A、因为她热爱生活','B、因为我欣赏他的工作态度','C、因为我觉得她太会做饭菜了','D、因为她本来也是一位艺术家'],
correctAnswer: 'B、因为我欣赏他的工作态度'
},
{
question: '梁妹犹不仅此也，她常常做一道糖醋高丽菜，假如没有上好的（），她是拒绝的。',
answer: ['A、陈醋','B、保宁醋','C、镇江醋','D、阆州醋'],
correctAnswer: 'C、镇江醋'
},
{
question: '一颗高丽菜，叶子大部分切去，只留下靠菜梗又硬实又坚硬的部分，切成（）',
answer: ['A、圆形','B、正方形','C、长方形','D、三角形'],
correctAnswer: '\'B、正方形'
},
{
question: '我在何家住了（），总觉得有个好厨子是人生一快，后来在新加坡的事多已淡忘，唯独梁妹的菜让我印象至为深刻。',
answer: ['A、一个星期','B、两个星期','C、三个星期','D、一个月'],
correctAnswer: 'A、一个星期'
},
{
question: '以前，（）家的厨子王小余说：“做厨如做医，以吾一心诊百物之宜”。',
answer: ['A、何振亚','B、我','C、袁子才','D、李子才'],
correctAnswer: 'C、袁子才'
}
]
}
]
export {article}
src/views/fastReading/answerQuestion.vue 0 → 100644
<template>
<div class="content">
<div class="title">
<div class="circle">第{{circle}}轮</div>
<div class="blue">第{{subject_number}}/10题</div>
<div class="blue">{{count_time}}s</div>
<div class="submit-btn" @click="submit">提交</div>
</div>
<div class="question-list">
<div class="question-item" v-for="(item,index) in questionList" v-if="(index+1) == subject_number">
<div class="question">{{index+1}}、{{item.question}}</div>
<div v-for="(i) in item.answer" class="answer">
<input v-model="myAnswer" type="radio" :value="i" :name="i" />{{i}}
</div>
</div>
</div>
<div class="operation">
<div class="item item-3" v-if="subject_number<=1">上一题</div>
<div class="item item-1" v-if="subject_number>1" @click="pre">上一题</div>
<div class="item item-2" v-if="subject_number<questionList.length" @click="next()">下一题</div>
<div class="item item-4" v-if="subject_number>=questionList.length">下一题</div>
</div>
</div>
</template>
<script>
import {article} from "../../utils/article";
export default {
name: "answerQuestion",
data() {
return {
circle: 1,
subject_number: 1,
count_time: 100,
questionList: [],
myAnswer: ''
}
},
methods: {
pre() {
if(this.subject_number>1) {
this.myAnswer = this.questionList[this.subject_number-2].myAnswer;
this.subject_number = this.subject_number - 1;
}
},
next() {
if(this.subject_number<this.questionList.length) {
this.questionList[this.subject_number-1].myAnswer = this.myAnswer?this.myAnswer:'未作答';
this.myAnswer = this.questionList[this.subject_number].myAnswer;
this.subject_number = this.subject_number + 1;
}
},
submit() {
this.questionList[this.subject_number-1].myAnswer = this.myAnswer;
this.$store.state.articleAnswer = this.questionList;
this.$router.push({
path: '/fastReading/readResult',
query: {
time: this.count_time
}
})
},
countDown() {
this.timer = setInterval(()=>{
if(this.count_time > 0) {
this.count_time = this.count_time - 1;
}else {
clearInterval(this.timer);
}
},1000)
},
},
mounted() {
this.count_time = this.$route.query.time;
this.countDown();
article[0].questionList.forEach((v,i)=>{
this.questionList.push({
question: v.question,
answer: v.answer,
myAnswer: '未作答',
correctAnswer: v.correctAnswer
})
})
}
}
</script>
<style scoped>
.content {
padding: 30px 24px;
}
.title {
display: flex;
align-items: center;
}
.circle {
font-size: 30px;
color: #333;
}
.blue {
font-size: 30px;
color: #017af7;
margin-left: 20px;
}
.submit-btn {
width: 100px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
color: #017af7;
font-size: 28px;
border: 2px solid #017af7;
border-radius: 8px;
margin-left: auto;
}
.question-list {
margin-top: 30px;
}
.question-item {
}
.question {
color: #333;
font-size: 30px;
}
.answer {
text-indent: 40px;
font-size: 28px;
color: #333;
margin-top: 20px;
display: flex;
align-items: center;
padding-left: 40px;
}
.operation {
width: 400px;
position: fixed;
bottom: 120px;
display: flex;
left: 50%;
transform: translateX(-50%);
align-items: center;
justify-content: space-between;
}
.operation .item {
width: 196px;
height: 80px;
color: white;
font-size: 28px;
display: flex;
align-items: center;
justify-content: center;
}
.operation .item-1 {
border-bottom-left-radius: 40px;
border-top-left-radius: 40px;
background: #409eff;
}
.operation .item-2 {
border-bottom-right-radius: 40px;
border-top-right-radius: 40px;
background: #409eff;
}
.operation .item-3 {
border-bottom-left-radius: 40px;
border-top-left-radius: 40px;
color: #999;
border: 2px solid #999;
}
.operation .item-4 {
border-bottom-right-radius: 40px;
border-top-right-radius: 40px;
color: #999;
border: 2px solid #999;
}
</style>
src/views/fastReading/index.vue 0 → 100644
<template>
<div class="content">
<div class="title">
<img src="http://static.ledouya.com/Fk710hlqAbi7huKxkcjHCyL5JFrr" alt="">
<div>项目意义</div>
</div>
<div class="explain">阅读是获取知识的重要方式，文章速读是注意力、文字感知力、理解力、
记忆力的重要训练项目，是提高获取知识速度和准确性、提高阅读效率的有效手段。</div>
<div class="explain">Reading is an important way to acquire knowledge.
Speed reading is an important training item for attention, text perception,
comprehension and memory. It is an effective means to improve the speed and
accuracy of knowledge acquisition and improve reading efficiency.</div>
<div class="title">
<img src="http://static.ledouya.com/FryIuOQ3IISAuLpLRHvq4Gv6FWRF" alt="">
<div>比赛规则</div>
</div>
<div class="explain">
1、选手在“国际脑力运动”线上平台报名参加脑力世界杯并选中本项比赛。
</div>
<div class="explain">
1. Athlete register Intellectual World Cup on the "International Intellectual Sports" online platform and select this discipline.
</div>
<div class="explain">
2、所有选手在“国际脑力运动”线上平台上点击进入本项目比赛倒计时页面，倒计时归零后立即开始比赛。
</div>
<div class="explain">
2. All athletes clicked into the countdown page on the "International Intellectual Sports"
online platform, and the competition began immediately after the countdown returned to zero.
</div>
<div class="explain">
3、比赛分三轮进行，每两轮比赛之间开展中场活动。每轮比赛速读1篇2000字左右文章，选手阅读文章后，
点击“开始答题”，系统自动给出10道单项选择题测试理解率，选手须在15分钟内完成阅读和答题。
</div>
<div class="explain">
3. The game is carried out in three rounds, and midfield activities are carried out between the two rounds. Athlete reads an
article about 2000 words in each round, after reading, then click the "begin to answer" button, and answer 10 questions within 15 minutes.
</div>
<div class="explain">
4、待所有选手答题结束后，系统自动统计并公布本项目所有选手和战队的成绩。
</div>
<div class="explain">
4. After the end of this discipline, the system automatically calculates and releases the result.
</div>
<div class="title">
<img src="http://static.ledouya.com/Fm8ujNQDlQ1Q2tmyO8ydNqVQTTjj" alt="">
<div>评判标准</div>
</div>
<div class="blue">获胜依据</div>
<div class="blue">Scoring rules</div>
<div class="explain">
1.数量分：选择正确1题得85分；
</div>
<div class="explain">
1. Quantity points: 85 points for each right answer;
</div>
<div class="explain">
2.时间分：在15分钟内完成阅读和答题后剩余1秒得2分。
</div>
<div class="explain">
2. Time points: 2 points for the remaining 1 second after the submission in 15 minutes.
</div>
<div class="explain">
3.总分高者胜，总相同则用时少者胜。
</div>
<div class="explain">
3. A high score wins, if the total score is the same, less time wins.
</div>
<div class="blue">选手成绩</div>
<div class="blue">Personal score</div>
<div class="explain">
1.若选手答题正确率低于80%，则选手得分=数量分。
</div>
<div class="explain">
1.If the correct answer rate is less than 80%, the athlete's score is equal to the quantity points.
</div>
<div class="explain">
2.若选手答题正确率达到80%，则选手得分=数量分+时间分。
</div>
<div class="explain">
2. When athlete’s answer 80% correctly , the score is equal to the quantity points plus time points.
</div>
<div class="explain">
3.取最高分轮次的成绩参与排名。
</div>
<div class="explain">
3. The highest round score is the final score.
</div>
<div class="start" @click="start">开始训练</div>
</div>
</template>
<script>
export default {
name: "index",
methods: {
start() {
this.$router.push({
path: '/fastReading/readArticle'
})
}
}
}
</script>
<style scoped>
.content {
padding: 30px 24px 120px;
}
.title {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin-bottom: 30px;
}
.title img {
width: 40px;
height: 40px;
margin-right: 10px;
}
.title div {
font-size: 30px;
color: #168CFF;
font-weight: bold;
}
.explain {
color: #666;
font-size: 26px;
line-height: 50px;
text-indent: 52px;
margin-bottom: 20px;
}
.blue {
font-size: 26px;
color: #409eff;
margin-bottom: 10px;
}
.start {
width: 500px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
color: white;
background: #409eff;
border-radius: 40px;
position: fixed;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
}
</style>
src/views/fastReading/readArticle.vue 0 → 100644
<template>
<div class="content">
<div class="title">第1轮 <span>{{count_time}}s</span></div>
<div class="article" v-html="content"></div>
<div class="start" @click="start">阅读完成</div>
</div>
</template>
<script>
import {article} from "../../utils/article";
export default {
name: "readArticle",
data() {
return {
content: article[0].text,
count_time: 900,
timer: ''
}
},
methods: {
start() {
this.$router.push({
path: '/fastReading/answerQuestion',
query: {
time: this.count_time
}
})
},
countDown() {
this.timer = setInterval(()=>{
if(this.count_time > 0) {
this.count_time = this.count_time - 1;
}else {
clearInterval(this.timer);
}
},1000)
},
},
mounted() {
this.countDown()
}
}
</script>
<style scoped>
.content {
padding: 30px 24px;
}
.title {
font-size: 30px;
color: #333;
}
.title span {
color: #409eff;
margin-left: 20px;
}
.article {
margin-top: 30px;
}
.start {
margin: 60px auto ;
width: 500px;
height: 80px;
border-radius: 40px;
font-size: 32px;
background: #409EFF;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
</style>
src/views/fastReading/readResult.vue 0 → 100644
<template>
<div class="content">
<div class="title">正向速算答题记录</div>
<div class="data-list">
<div class="data-item" style="width: 1000%">正向速算：<span>得分{{score}}</span></div>
</div>
<div class="data-list">
<div class="data-item">答题数量：<span>{{number}}</span></div>
<div class="data-item">正确数量：<span>{{correctNumber}}</span></div>
<div class="data-item">答题用时：<span>{{900-residue_time}}s</span></div>
<div class="data-item">剩余时间：<span>{{residue_time}}s</span></div>
<div class="data-item">正确率：<span>{{percentage}}%</span></div>
</div>
<div class="answer">答案对比</div>
<div class="answer-list">
<div class="answer-item" v-for="(item,index) in answerList">
<div class="subject">{{index+1}}、{{item.question}}</div>
<div class="subject" style="text-indent: 20px">你的答案：<span>{{item.myAnswer}}</span></div>
<div class="subject" style="text-indent: 20px">正确答案：{{item.correctAnswer}}</div>
</div>
</div>
<div class="operation">
<div class="item item-1">再来一局</div>
<div class="item item-2" @click="goback()">返回列表</div>
</div>
</div>
</template>
<script>
export default {
name: "readResult",
data() {
return {
score: 0, //分数
number: '100', //答题数量
correctNumber: 0, //正确数量
percentage: 0, //正确率
answerList: [],
residue_time: '', //剩余时间
}
},
methods: {
goback() {
this.$router.push({
path: '/'
})
}
},
created() {
this.residue_time = this.$route.query.time;
this.answerList = this.$store.state.articleAnswer;
this.number = this.answerList.length;
this.answerList.forEach(v=>{
if(v.myAnswer == v.correctAnswer) {
this.correctNumber = this.correctNumber + 1;
}
})
this.score = this.correctNumber * 19;
this.percentage = (this.correctNumber/this.number*100).toFixed(2);
}
}
</script>
<style scoped>
.content {
padding: 30px 24px 200px;
}
.title {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
color: #000;
margin-bottom: 20px;
}
.data-list {
display: flex;
flex-wrap: wrap;
}
.data-item {
width: 50%;
margin-top: 20px;
font-size: 28px;
color: #333;
}
.data-item span {
color: #1f72ff;
}
.answer {
background: #409eff;
width: 150px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 26px;
margin-top: 30px;
margin-bottom: 15px;
border-radius: 8px;
}
.answer-list {
}
.answer-item .subject {
margin-bottom: 10px;
font-size: 28px;
color: #333;
}
.answer-item .subject span {
color: red;
}
.operation {
width: 400px;
position: fixed;
bottom: 120px;
display: flex;
left: 50%;
transform: translateX(-50%);
align-items: center;
justify-content: space-between;
}
.operation .item {
width: 196px;
height: 80px;
background: #409eff;
color: white;
font-size: 28px;
display: flex;
align-items: center;
justify-content: center;
}
.operation .item-1 {
border-bottom-left-radius: 40px;
border-top-left-radius: 40px;
}
.operation .item-2 {
border-bottom-right-radius: 40px;
border-top-right-radius: 40px;
}
</style>
src/views/home/index.vue
......@@ -13,7 +13,7 @@
<div :key="index" class="item" @click="linkTo(item.path)">{{item.label}}</div>
</div>
</div>
<div class="label">心算类</div>
<div class="label">比赛训练</div>
<div class="list">
<div class="item-parent" v-for="(item, index) in heartCount">
<div :key="index" class="item" @click="linkTo(item.path)">{{item.label}}</div>
......@@ -30,7 +30,7 @@
{
label: '国学经典',
path: ''
path: '/studiesChnia/index'
},
{
label: '随机数字',
......@@ -72,6 +72,10 @@
label: '逆向训练',
path: '/reserve/index'
},
{
label: '阅读理解',
path: '/fastReading/index'
},
]
}
},
......
src/views/home/result.vue
......@@ -22,7 +22,7 @@
</div>
</div>
<div class="operation">
<div class="item item-1">再来一局</div>
<div class="item item-1" @click="again">再来一局</div>
<div class="item item-2" @click="goback()">返回列表</div>
</div>
</div>
......@@ -47,6 +47,19 @@
this.$router.push({
path: '/'
})
},
again() {
let url = '';
if(this.type == 1) {
url = '/randomNumber/index';
}else if(this.type == 2) {
url = '/randomLetter/index'
}else {
url = '/pi/index'
}
this.$router.push({
path: url
})
}
},
mounted() {
......
src/views/studiesChnia/answerStudies.vue 0 → 100644
<template>
<div class="content">
<div class="title">
<div class="circle">国学经典默写1/3</div>
<div class="submit-btn" @click="submit">提交</div>
</div>
<div class="list">
<div class="item" v-for="(item,index) in article">
<div class="text" v-if="item.text">{{item.text}}</div>
<div class="text-2" v-else>
<input class="text-1" v-model="item.value" type="text" @input="input()">
</div>
</div>
</div>
<div class="operation">
<div class="item item-3" v-if="subject_number<=1">上一题</div>
<div class="item item-1" v-if="subject_number>1" @click="pre">上一题</div>
<div class="item item-2" v-if="subject_number<questionList.length" @click="next()">下一题</div>
<div class="item item-4" v-if="subject_number>=questionList.length">下一题</div>
</div>
</div>
</template>
<script>
export default {
name: "answerStudies",
data(){
return {
content: '关关雎鸠，在河之洲。窈窕淑女，君子好逑。参差荇菜，左右流之。' +
'窈窕淑女，寤寐求之。求之不得，寤寐思服。悠哉悠哉，辗转反侧。参差荇菜，' +
'左右采之。窈窕淑女，琴瑟友之。参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。',
subject_number: 1,
questionList: [],
article: [],
correctAnswer: '',
myAnswer: ''
}
},
methods: {
submit() {
this.article.forEach(v=>{
if(!v.text) {
this.myAnswer = this.myAnswer + v.value;
}
})
this.$router.push({
path: '/studiesChnia/studiesResult',
query: {
myAnswer: this.myAnswer,
correctAnswer: this.correctAnswer
}
})
},
pre() {
},
next() {
},
input(e) {
}
},
mounted() {
for(let i=0;i<this.content.length;i++) {
if(i>20 && i<60) {
this.article.push({
text: '',
value: ''
})
this.correctAnswer = this.correctAnswer + this.content.charAt(i);
}else {
this.article.push({
text: this.content.charAt(i),
value: ''
})
}
}
console.log(this.correctAnswer,'this.correctAnswer');
}
}
</script>
<style scoped>
.content {
padding: 30px 24px;
}
.title {
display: flex;
align-items: center;
}
.circle {
font-size: 30px;
color: #333;
}
.submit-btn {
width: 100px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
color: #017af7;
font-size: 28px;
border: 2px solid #017af7;
border-radius: 8px;
margin-left: auto;
}
.list {
margin-top: 30px;
display: flex;
flex-wrap: wrap;
}
.item {
width: 8.3333%;
display: flex;
align-items: center;
justify-content: center;
}
.text {
width: 90%;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 2px solid #333;
color: #333;
font-size: 30px;
}
.text-2 {
width: 90%;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 2px solid #409eff;
color: #333;
font-size: 30px;
}
.text-1 {
width: 100%;
height: 100%;
display: flex;
text-align: center;
border: 0px;
outline:none;
cursor: pointer;
}
.operation {
width: 400px;
position: fixed;
bottom: 120px;
display: flex;
left: 50%;
transform: translateX(-50%);
align-items: center;
justify-content: space-between;
}
.operation .item {
width: 196px;
height: 80px;
color: white;
font-size: 28px;
display: flex;
align-items: center;
justify-content: center;
}
.operation .item-1 {
border-bottom-left-radius: 40px;
border-top-left-radius: 40px;
background: #409eff;
}
.operation .item-2 {
border-bottom-right-radius: 40px;
border-top-right-radius: 40px;
background: #409eff;
}
.operation .item-3 {
border-bottom-left-radius: 40px;
border-top-left-radius: 40px;
color: #999;
border: 2px solid #999;
}
.operation .item-4 {
border-bottom-right-radius: 40px;
border-top-right-radius: 40px;
color: #999;
border: 2px solid #999;
}
</style>
src/views/studiesChnia/index.vue 0 → 100644
<template>
<div class="content">
<div class="title">国学经典默写设置</div>
<div class="number">记忆等级
<input type="number" placeholder="请输入记忆数量" class="input" v-model="number">
级
</div>
<el-button type="primary" class="start" @click="start">开始训练</el-button>
</div>
</template>
<script>
export default {
name: "index",
data() {
return {
number: 3
}
},
methods: {
start() {
if(this.number>10 || this.number<3) {
alert('等级为3到10之间的正整数');
return;
}
this.$router.push({
path : '/studiesChnia/answerStudies',
query: {
number: this.number
}
})
}
}
}
</script>
<style scoped>
.content {
display: flex;
flex-direction: column;
padding-top: 48px;
align-items: center;
}
.title {
color: #1685ff;
font-size: 34px;
font-weight: bold;
margin-bottom: 50px;
}
.number {
display: flex;
align-items: center;
font-size: 30px;
}
.input {
width: 300px;
margin: 0 12px;
height: 70px;
border: 2px solid #617e99;
padding-left: 10px;
border-radius: 4px;
}
.el-input__inner {
height: 90px;
}
.start {
margin-top: 60px;
width: 500px;
height: 80px;
border-radius: 40px;
font-size: 32px;
}
</style>
src/views/studiesChnia/studiesResult.vue 0 → 100644
<template>
<div class="content">
<div class="title">国学经典</div>
<div class="data-list">
<div class="data-item">答题数量：<span>{{number}}</span></div>
<div class="data-item">正确数量：<span>{{correctNumber}}</span></div>
<div class="data-item">正确率：<span>{{percentage}}%</span></div>
<div class="data-item">用时：<span>0分4秒98</span></div>
</div>
<div class="answer">你的答案</div>
<div class="list">
<div class="item" v-for="(item,index) in myAnswer">
<div class="data-1">{{item}}</div>
</div>
</div>
<div class="answer">正确答案</div>
<div class="list">
<div class="item" v-for="(item,index) in correctAnswer">
<div class="data-2">{{item}}</div>
</div>
</div>
<div class="operation">
<div class="item item-1" @click="again">再来一局</div>
<div class="item item-2" @click="goback()">返回列表</div>
</div>
</div>
</template>
<script>
export default {
name: "studiesResult",
data() {
return {
answer: 100,
myAnswer: '',
correctAnswer: '',
number: 0,
correctNumber: 0,
percentage: 0,
}
},
methods: {
goback() {
this.$router.push({
path: '/'
})
},
again() {
let url = '/studiesChnia/index';
this.$router.push({
path: url
})
}
},
mounted() {
this.correctAnswer = this.$route.query.correctAnswer;
this.myAnswer = this.$route.query.myAnswer;
this.number = this.correctAnswer.length;
for(let i=0;i<this.correctAnswer.length;i++) {
if(this.correctAnswer[i] == this.myAnswer[i]) {
this.correctNumber = this.correctNumber + 1;
}
}
this.percentage = (this.correctNumber/this.number*100).toFixed(2)
}
}
</script>
<style scoped>
.content {
padding: 48px 24px 120px;
}
.title {
width: 100%;
text-align: center;
font-size: 30px;
color: #222;
}
.data-list {
display: flex;
flex-wrap: wrap;
}
.data-item {
width: 50%;
margin-top: 20px;
font-size: 28px;
color: #333;
}
.data-item span {
color: #1f72ff;
}
.answer {
background: #409eff;
width: 150px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 26px;
margin-top: 30px;
margin-bottom: 15px;
border-radius: 8px;
}
.list {
display: flex;
flex-wrap: wrap;
}
.list .item {
width: 5%;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
}
.list .item .data-1 {
width: 90%;
height: 100%;
border-bottom: 2px solid #ff573f;
display: flex;
align-items: center;
justify-content: center;
}
.list .item .data-2 {
width: 90%;
height: 100%;
border-bottom: 2px solid #077907;
display: flex;
align-items: center;
justify-content: center;
}
.operation {
width: 400px;
position: fixed;
bottom: 120px;
display: flex;
left: 50%;
transform: translateX(-50%);
align-items: center;
justify-content: space-between;
}
.operation .item {
width: 196px;
height: 80px;
background: #409eff;
color: white;
font-size: 28px;
display: flex;
align-items: center;
justify-content: center;
}
.operation .item-1 {
border-bottom-left-radius: 40px;
border-top-left-radius: 40px;
}
.operation .item-2 {
border-bottom-right-radius: 40px;
border-top-right-radius: 40px;
}
</style>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!