Skip to content

yangchao / brains-h5

Go to a project
Commit 7b411f12 by yangchao
Options

update

1 parent 2266d47c
Inline Side-by-side
Showing with 315 additions and 3 deletions
src/router/index.js
......@@ -92,6 +92,16 @@ const constantRouterMap = [
component : _import('forward/index') ,
name : 'forwardIndex' ,
},
{
path : '/forward/forwardAnswer' ,
component : _import('forward/forwardAnswer') ,
name : 'forwardAnswer' ,
},
{
path : '/forward/forwardResult' ,
component : _import('forward/forwardResult') ,
name : 'forwardResult' ,
},
//逆向速算
{
path : '/reserve/index' ,
......
src/views/forward/forwardAnswer.vue 0 → 100644
<template>
<div class="content">
<div class="title">
<div class="circle">第{{circle}}轮</div>
<div class="blue">第{{subject_number}}题</div>
<div class="blue">{{time}}</div>
<div class="submit-btn" @click="submit">提交</div>
</div>
<div class="answer">
<div class="time">连加运算 {{time}}</div>
<div class="subject input">{{subject}}</div>
<div class="my-answer input"></div>
</div>
<div class="btn-list">
<div class="item" @click="input(1)">1</div>
<div class="item" @click="input(2)">2</div>
<div class="item" @click="input(3)">3</div>
<div class="item" @click="input(4)">4</div>
<div class="item" @click="input(5)">5</div>
<div class="item" @click="input(6)">6</div>
<div class="item" @click="input(7)">7</div>
<div class="item" @click="input(8)">8</div>
<div class="item" @click="input(9)">9</div>
<div class="item delete" @click="deleteAnswer">删除</div>
<div class="item negative" @click="input('-')">-</div>
<div class="item" @click="input(0)">0</div>
<div class="item next" @click="next">下一题</div>
</div>
</div>
</template>
<script>
export default {
name: "forwardAnswer",
data() {
return {
circle: 1, //第几轮
subject_number: 1, //第几题
time: '00:03:08', //倒计时
subject: '', //题目
myAnswer: '', //我的答案
correctAnswer: '', //正确答案
grade: 1, //运算等级 1级为两个两位数相加
}
},
methods: {
submit() {
this.$router.push({
path: '/forward/forwardResult'
})
},
deleteAnswer() {
},
input() {
},
//生成题目
createSubject() {
}
}
}
</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;
}
.answer {
padding: 0 24px;
margin-top: 30px;
}
.answer .time{
font-size: 28px;
color: #333;
}
.input {
width: 100%;
height: 70px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 20px;
font-size: 28px;
}
.subject {
border: 2px solid #017af7;
color: #017af7;
}
.my-answer {
border: 2px solid #333;
color: #333;
}
.btn-list {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 20px;
}
.btn-list .item {
width: 30%;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
color: white;
background: #409eff;
border-radius: 10px;
font-size: 30px;
margin-bottom: 20px;
}
.btn-list .delete {
width: 12.5%;
background: #f56c6c;
}
.btn-list .negative {
width: 12.5%;
}
.btn-list .next {
background: #f56c6c;
}
</style>
src/views/forward/forwardResult.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>98s</span></div>
<div class="data-item">剩余时间：<span>98s</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.subject}}</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: "forwardResult",
data() {
return {
score: '10', //分数
number: '100', //答题数量
correctNumber: '10', //正确数量
percentage: 10, //正确率
answerList: [
{
subject: '44+14',
myAnswer: '412',
correctAnswer: '58'
}
]
}
},
methods: {
goback() {
this.$router.push({
path: '/'
})
}
},
}
</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/forward/index.vue
......@@ -79,13 +79,20 @@
2. The highest round score is the final score.
</div>
<div class="start">开始训练</div>
<div class="start" @click="start">开始训练</div>
</div>
</template>
<script>
export default {
name: "index"
name: "index",
methods: {
start() {
this.$router.push({
path: '/forward/forwardAnswer'
})
}
}
}
</script>
......
src/views/home/result.vue
......@@ -69,7 +69,7 @@
<style scoped>
.content {
padding: 48px 24px;
padding: 48px 24px 120px;
}
.title {
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!