Skip to content

yangchao / brains-h5

Go to a project
Commit 7ffb3ac5 by yangchao
Options

update

1 parent 8d06eb9f
Expand all
Inline Side-by-side
Showing with 266 additions and 239 deletions
src/router/index.js
......@@ -75,6 +75,11 @@ const constantRouterMap = [
component : _import('pi/index') ,
name : 'pi' ,
},
{
path : '/pi/answerPi' ,
component : _import('pi/answerPi') ,
name : 'answerPi' ,
},
//结果
{
path : '/home/result' ,
......
src/views/home/result.vue
......@@ -54,7 +54,7 @@
this.correctNumber = this.$route.query.correctNumber;
this.number = this.$route.query.number;
this.type = this.$route.query.type;
if(this.type == 1) {
if(this.type == 1 || this.type == 3) {
this.myAnswer = this.$store.state.myNumberAnswer;
this.correctAnswer = this.$store.state.randomNumber;
}else if(this.type==2) {
......
src/views/pi/answerPi.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: "answerPi",
data() {
return {
answerLength: 0,
answer: [],
focus: 0,
correctAnswer: [],
correctNumber: 0
}
},
methods:{
//提交
submit() {
this.answer.forEach((v,i)=>{
if(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,
type: 3
}
})
},
//前插一位
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/pi/index.vue
......@@ -16,7 +16,9 @@
</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-data" v-for="(item,index) in numberList">
<div class="number-item" :key="index" :style="{borderRightColor: item.border?'#666':''}">{{item.num}}</div>
</div>
</div>
<div class="start" @click="accomplish">记忆完成</div>
......@@ -24,250 +26,25 @@
</template>
<script>
import {pi} from '@/utils/pi'
export default {
name: "index",
data() {
return {
checked: 0,
number: [
{
num: 1,
border: false
},
{
num: 4,
border: false
},
{
num: 1,
border: false
},
{
num: 5,
border: false
},
{
num: 9,
border: false
},
{
num: 2,
border: false
},
{
num: 6,
border: false
},
{
num: 5,
border: false
},
{
num: 3,
border: false
},
{
num: 5,
border: false
},
{
num: 8,
border: false
},
{
num: 9,
border: false
},
{
num: 7,
border: false
},
{
num: 9,
border: false
},
{
num: 3,
border: false
},{
num: 2,
border: false
},
{
num: 3,
border: false
},
{
num: 8,
border: false
},
{
num: 4,
border: false
},
{
num: 6,
border: false
},
{
num: 2,
border: false
},
{
num: 6,
border: false
},{
num: 4,
border: false
},
{
num: 3,
border: false
},
{
num: 3,
border: false
},
{
num: 8,
border: false
},
{
num: 3,
border: false
},
{
num: 2,
border: false
},
{
num: 7,
border: false
},
{
num: 9,
border: false
},
{
num: 5,
border: false
},
{
num: 0,
border: false
},
{
num: 2,
border: false
},
{
num: 8,
border: false
},
{
num: 8,
border: false
},
{
num: 4,
border: false
},
{
num: 1,
border: false
},
{
num: 9,
border: false
},
{
num: 7,
border: false
},
{
num: 1,
border: false
},
{
num: 6,
border: false
},
{
num: 9,
border: false
},
{
num: 3,
border: false
},
{
num: 9,
border: false
},
{
num: 9,
border: false
},
{
num: 3,
border: false
},
{
num: 7,
border: false
},
{
num: 5,
border: false
},
{
num: 1,
border: false
},
{
num: 0,
border: false
},
{
num: 5,
border: false
},
{
num: 8,
border: false
},
{
num: 2,
border: false
},
{
num: 0,
border: false
},
{
num: 9,
border: false
},
{
num: 7,
border: false
},
]
number: 0,
numberList: []
}
},
methods: {
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;
}
......@@ -276,9 +53,19 @@
},
accomplish() {
this.$router.push({
path: '/randomNumber/answerNumber'
path: '/pi/answerPi',
query: {
number: 200
}
})
}
},
mounted() {
this.numberList = pi;
this.numberList.forEach(v=>{
v.border = false
})
this.$store.state.randomNumber = this.numberList;
}
}
</script>
......@@ -321,10 +108,16 @@
.number-list {
display: flex;
flex-wrap: wrap;
margin-top: 20px;
/*margin-top: 20px;*/
}
.number-data {
width: 5%;
display: flex;
align-items: center;
justify-content: center;
}
.number-item {
width: 40px;
width: 90%;
height: 50px;
display: flex;
align-items: center;
......
src/views/randomLetter/startMemoryLetter.vue
......@@ -16,7 +16,9 @@
</div>
<div class="number-list">
<div class="number-item" v-for="(item,index) in letterList" :key="index" :style="{borderRightColor: item.border?'#666':''}">{{item.num}}</div>
<div class="number-data" v-for="(item,index) in letterList">
<div class="number-item" :key="index" :style="{borderRightColor: item.border?'#666':''}">{{item.num}}</div>
</div>
</div>
<div class="start" @click="goAnswer">记忆完成</div>
......@@ -113,8 +115,14 @@
flex-wrap: wrap;
margin-top: 20px;
}
.number-data {
width: 5%;
display: flex;
align-items: center;
justify-content: center;
}
.number-item {
width: 40px;
width: 90%;
height: 50px;
display: flex;
align-items: center;
......
src/views/randomNumber/startMemory.vue
......@@ -16,7 +16,10 @@
</div>
<div class="number-list">
<div class="number-item" v-for="(item,index) in numberList" :key="index" :style="{borderRightColor: item.border?'#666':''}">{{item.num}}</div>
<div class="number-data" v-for="(item,index) in numberList">
<div class="number-item" :key="index" :style="{borderRightColor: item.border?'#666':''}">{{item.num}}</div>
</div>
</div>
<div class="start" @click="goAnswer">记忆完成</div>
......@@ -113,8 +116,14 @@
flex-wrap: wrap;
margin-top: 20px;
}
.number-data {
width: 5%;
display: flex;
align-items: center;
justify-content: center;
}
.number-item {
width: 40px;
width: 90%;
height: 50px;
display: flex;
align-items: center;
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!