Skip to content

yangchao / brains-h5

Go to a project
Commit 7946703d by yangchao
Options

update

1 parent f5daa4be
Inline Side-by-side
Showing with 456 additions and 125 deletions
src/router/index.js
......@@ -48,6 +48,11 @@ const constantRouterMap = [
component : _import('randomNumber/startMemory') ,
name : 'startMemory' ,
},
{
path : '/randomNumber/answerNumber' ,
component : _import('randomNumber/answerNumber') ,
name : 'answerNumber' ,
},
//随机字母
{
path : '/randomLetter/index' ,
......@@ -59,12 +64,23 @@ const constantRouterMap = [
component : _import('randomLetter/startMemoryLetter') ,
name : 'startMemoryLetter' ,
},
{
path : '/randomLetter/answerLetter' ,
component : _import('randomLetter/answerLetter'),
name : 'answerLetter' ,
},
//圆周率
{
path : '/pi/index' ,
component : _import('pi/index') ,
name : 'pi' ,
}
},
//结果
{
path : '/home/result' ,
component : _import('home/result') ,
name : 'result' ,
},
]
},
{ path: '*', redirect: '/404' }
......
src/store/index.js
......@@ -11,7 +11,9 @@ const state = {
const store = new Vuex.Store({
modules : {
app
app,
randomNumber: [],
myNumberAnswer: []
},
state
})
......
src/views/home/result.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.txt}}</div>
</div>
</div>
<div class="answer">正确答案</div>
<div class="list">
<div class="item" v-for="(item,index) in correctAnswer">
<div class="data-2">{{item.num}}</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: "result",
data() {
return {
answer: 100,
myAnswer: [],
correctAnswer: [],
number: 0,
correctNumber: 0,
percentage: 0
}
},
methods: {
goback() {
this.$router.push({
path: '/'
})
}
},
mounted() {
this.myAnswer = this.$store.state.myNumberAnswer;
this.correctAnswer = this.$store.state.randomNumber;
if(this.$route.query&&this.$route.query.number) {
this.correctNumber = this.$route.query.correctNumber;
this.number = this.$route.query.number;
this.percentage = (this.correctNumber/this.number*100).toFixed(2);
}
}
}
</script>
<style scoped>
.content {
padding: 48px 24px;
}
.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>
src/views/pi/index.vue
......@@ -19,7 +19,7 @@
<div class="number-item" v-for="(item,index) in number" :key="index" :style="{borderRightColor: item.border?'#666':''}">{{item.num}}</div>
</div>
<div class="start">记忆完成</div>
<div class="start" @click="accomplish">记忆完成</div>
</div>
</template>
......@@ -273,6 +273,11 @@
}
})
}
},
accomplish() {
this.$router.push({
path: '/randomNumber/answerNumber'
})
}
}
}
......
src/views/randomLetter/answerLetter.vue 0 → 100644
<template>
<div>字母答题</div>
</template>
<script>
export default {
name: "answerLetter"
}
</script>
<style scoped>
</style>
src/views/randomLetter/startMemoryLetter.vue
......@@ -19,7 +19,7 @@
<div class="number-item" v-for="(item,index) in number" :key="index" :style="{borderRightColor: item.border?'#666':''}">{{item.num}}</div>
</div>
<div class="start">记忆完成</div>
<div class="start" @click="goAnswer">记忆完成</div>
</div>
</template>
......@@ -161,6 +161,9 @@
}
})
}
},
goAnswer(){
}
}
}
......
src/views/randomNumber/answerNumber.vue 0 → 100644
<template>
<div class="content">
<div class="title">
<div>随机数字</div>
<div class="submit" @click="submit">提交</div>
</div>
<div class="next-pre">
<div class="label">辅助操作</div>
<div class="btn-operation" @click="pre">前插一位</div>
<div class="btn-operation" @click="next">后插一位</div>
</div>
<div class="answer-list">
<div class="item" v-for="(item,index) in answer">
<div class="data" :style="{background: item.focus?'#409eff':''}" @click="changeFocus(index)">{{item.txt}}</div>
</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">删除</div>
<div class="item zero" @click="input(0)">0</div>
</div>
</div>
</template>
<script>
export default {
name: "answerNumber",
data() {
return {
answerLength: 0,
answer: [],
focus: 0,
correctAnswer: [],
correctNumber: 0
}
},
methods:{
//提交
submit() {
this.answer.forEach((v,i)=>{
if(v.txt == this.correctAnswer[i].num) {
console.log(v.txt,this.correctAnswer[i].num);
this.correctNumber = this.correctNumber + 1;
}
})
this.$store.state.myNumberAnswer = this.answer;
this.$router.push({
path: '/home/result',
query: {
number: this.answerLength,
correctNumber: this.correctNumber
}
})
},
//前插一位
pre() {
this.answer[this.focus].focus = false;
this.answer.splice(this.focus,0,{
txt: '',
focus: false,
})
this.answer[this.focus].focus = true;
this.answer.length = this.answerLength;
},
//后插一位
next(){
this.answer.splice(this.focus+1,0,{
txt: '',
focus: false,
})
this.answer.length = this.answerLength;
},
//点击改变焦点
changeFocus(i){
this.answer[this.focus].focus = false;
this.answer[i].focus = true;
this.focus = i;
},
input(val) {
this.answer[this.focus].txt = val;
if(this.focus < this.answer.length-1) {
this.answer[this.focus].focus = false;
this.focus ++ ;
this.answer[this.focus].focus = true;
}
}
},
mounted() {
this.correctAnswer = this.$store.state.randomNumber;
if(this.$route.query&&this.$route.query.number) {
this.answerLength = this.$route.query.number;
for(let i=0; i< this.answerLength; i++) {
this.answer.push({
txt: '',
focus: i == 0 ? true : false,
})
}
}
}
}
</script>
<style scoped>
.content {
padding: 30px 24px;
}
.title {
display: flex;
align-items: center;
justify-content: space-between;
color: #333;
font-size: 30px;
}
.title .submit {
width: 100px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
color: #409eff;
border: 2px solid #409eff;
border-radius: 8px;
}
.next-pre {
display: flex;
align-items: center;
margin: 20px 0;
}
.next-pre .label {
font-size: 30px;
color: #333;
margin-right: 30px;
}
.next-pre .btn-operation {
width: 160px;
height: 60px;
background: #409eff;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 28px;
margin-right: 20px;
border-radius: 8px;
}
.answer-list {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.answer-list .item {
width: 5%;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
}
.answer-list .item .data {
width: 90%;
height: 100%;
border-bottom: 2px solid #666;
display: flex;
align-items: center;
justify-content: center;
}
.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: 48%;
background: #f56c6c;
}
.btn-list .zero {
width: 48%;
}
</style>
src/views/randomNumber/index.vue
......@@ -19,8 +19,19 @@
},
methods: {
start() {
if(!this.number || this.number <= 0) {
alert('请输入正确的个数');
return;
}
if(this.number>320) {
alert('记忆数量必须小于或等于320');
return;
}
this.$router.push({
path : '/randomNumber/startMemory'
path : '/randomNumber/startMemory',
query: {
number: this.number
}
})
}
}
......
src/views/randomNumber/startMemory.vue
......@@ -16,10 +16,10 @@
</div>
<div class="number-list">
<div class="number-item" v-for="(item,index) in number" :key="index" :style="{borderRightColor: item.border?'#666':''}">{{item.num}}</div>
<div class="number-item" v-for="(item,index) in numberList" :key="index" :style="{borderRightColor: item.border?'#666':''}">{{item.num}}</div>
</div>
<div class="start">记忆完成</div>
<div class="start" @click="goAnswer">记忆完成</div>
</div>
</template>
......@@ -29,139 +29,46 @@
data() {
return {
checked: 0,
number: [
{
num: 2,
border: false
},
{
num: 6,
border: false
},
{
num: 7,
border: false
},
{
num: 3,
border: false
},
{
num: 5,
border: false
},
{
num: 3,
border: false
},
{
num: 5,
border: false
},
{
num: 5,
border: false
},
{
num: 2,
border: false
},
{
num: 6,
border: false
},
{
num: 7,
border: false
},
{
num: 3,
border: false
},
{
num: 5,
border: false
},
{
num: 3,
border: false
},
{
num: 5,
border: false
},{
num: 2,
border: false
},
{
num: 6,
border: false
},
{
num: 7,
border: false
},
{
num: 3,
border: false
},
{
num: 5,
border: false
},
{
num: 3,
border: false
},
{
num: 5,
border: false
},{
num: 2,
border: false
},
{
num: 6,
border: false
},
{
num: 7,
border: false
},
{
num: 3,
border: false
},
{
num: 5,
border: false
},
{
num: 3,
border: false
},
{
num: 5,
border: false
},
]
number: 0,
numberList: []
}
},
methods: {
//去答题
goAnswer() {
this.$router.push({
path: '/randomNumber/answerNumber',
query: {
number: this.number
}
})
},
change(val) {
if(this.checked == val) return;
this.checked = val;
this.number.forEach(v=>{
this.numberList.forEach(v=>{
v.border = false
})
if(this.checked != 0) {
this.number.forEach((vv,ii)=>{
this.numberList.forEach((vv,ii)=>{
if((ii+1)%val == 0) {
vv.border = true;
}
})
}
}
},
mounted() {
if(this.$route.query&&this.$route.query.number) {
this.number = this.$route.query.number;
for(let i=0;i<this.number;i++) {
this.numberList.push({
num: Math.floor ( Math.random ( ) * 10 ),
border: false
})
this.$store.state.randomNumber = this.numberList;
}
}
}
}
</script>
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!