Skip to content

yangchao / brains-h5

Go to a project
Commit 77a56385 by yeran
Options

update

1 parent 8e6e8daa
Inline Side-by-side
Showing with 154 additions and 146 deletions
src/views/pidRemember/myTrain.vue
<template>
<div class="wrapper">
<div class="content" v-if="!startState">
<div class="title">我的记忆宫殿</div>
<div class="tab-area">
<div class="item" v-for="(item,index) in tabList" :key="index">
<div :class="item.hit ? 'circle active':'circle'" @click="select(item)">{{item.value}}</div>
<div class="wrapper">
<div class="content" v-if="!startState">
<div class="title">我的记忆宫殿</div>
<div class="tab-area">
<div class="item" v-for="(item,index) in tabList" :key="index">
<div :class="item.hit ? 'circle active':'circle'" @click="select(item)">{{item.value}}</div>
</div>
</div>
<el-button type="primary" class="start" @click="start">设置</el-button>
</div>
</div>
<el-button type="primary" class="start" @click="start">开始训练</el-button>
</div>
<div class="content" v-else>
<div class="title">{{targetLetter}}</div>
<div class="write-area">
<div class="item" v-for="(item,index) in writeList" :key="index">
<span class="label-name">{{index + 1}}:</span>
<input type="text" class="input" :value="item" />
<div class="content" v-else>
<div class="title">{{targetLetter}}</div>
<div class="write-area">
<div class="item" v-for="(item,index) in writeList" :key="index">
<span class="label-name">{{index + 1}}:</span>
<input type="text" class="input" :value="item"/>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import BaseCasePage from "../../framework/core/baseCasePage";
import CaseUtil from "../../framework/service/base/caseUtil";
import BaseCasePage from "../../framework/core/baseCasePage";
import CaseUtil from "../../framework/service/base/caseUtil";
export default new BaseCasePage({
name: "index",
data() {
return {
level: 0,
targetLetter:'A',
tabList: [
{ value: "A", hit: true },
{ value: "B", hit: false },
{ value: "C", hit: false },
{ value: "D", hit: false },
{ value: "E", hit: false },
{ value: "F", hit: false },
{ value: "G", hit: false },
{ value: "H", hit: false },
{ value: "I", hit: false },
{ value: "J", hit: false },
{ value: "K", hit: false },
{ value: "L", hit: false },
{ value: "M", hit: false },
{ value: "N", hit: false },
{ value: "O", hit: false },
{ value: "P", hit: false },
{ value: "Q", hit: false },
{ value: "R", hit: false },
{ value: "S", hit: false },
{ value: "T", hit: false },
{ value: "U", hit: false },
{ value: "V", hit: false },
{ value: "W", hit: false },
{ value: "X", hit: false },
{ value: "Y", hit: false },
{ value: "Z", hit: false }
],
writeList: [],
startState: false
};
},
methods: {
select(item) {
this.tabList.forEach(v => {
v.hit = false;
});
item.hit = true;
this.targetLetter = item.value;
},
changLevel(level) {
if (level !== this.level) {
this.level = level;
}
},
start() {
this.startState = true;
}
},
created() {
this.writeList = Array.apply(null, Array(30)).map(() => "");
}
});
export default new BaseCasePage({
name: "index",
data() {
return {
level: 0,
targetLetter: 'A',
tabList: [
{value: "A", hit: true},
{value: "B", hit: false},
{value: "C", hit: false},
{value: "D", hit: false},
{value: "E", hit: false},
{value: "F", hit: false},
{value: "G", hit: false},
{value: "H", hit: false},
{value: "I", hit: false},
{value: "J", hit: false},
{value: "K", hit: false},
{value: "L", hit: false},
{value: "M", hit: false},
{value: "N", hit: false},
{value: "O", hit: false},
{value: "P", hit: false},
{value: "Q", hit: false},
{value: "R", hit: false},
{value: "S", hit: false},
{value: "T", hit: false},
{value: "U", hit: false},
{value: "V", hit: false},
{value: "W", hit: false},
{value: "X", hit: false},
{value: "Y", hit: false},
{value: "Z", hit: false}
],
writeList: [],
startState: false
};
},
methods: {
select(item) {
this.tabList.forEach(v => {
v.hit = false;
});
item.hit = true;
this.targetLetter = item.value;
},
changLevel(level) {
if (level !== this.level) {
this.level = level;
}
},
start() {
this.startState = true;
}
},
created() {
this.writeList = Array.apply(null, Array(30)).map(() => "");
}
});
</script>
<style scoped>
.content {
padding-top: 80px;
}
.content {
padding-top: 80px;
}
.title {
color: #333;
font-size: 36px;
padding: 0 20px;
margin-bottom: 60px;
text-align: center;
}
.title {
color: #333;
font-size: 36px;
padding: 0 20px;
margin-bottom: 60px;
text-align: center;
}
.start {
position: fixed;
left: 50%;
bottom: 40px;
width: 500px;
height: 80px;
transform: translateX(-50%);
border-radius: 40px;
font-size: 32px;
}
.start {
position: fixed;
left: 50%;
bottom: 40px;
width: 500px;
height: 80px;
transform: translateX(-50%);
border-radius: 40px;
font-size: 32px;
}
.tab-area {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
}
.tab-area > .item {
width: 25%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 30px;
}
.tab-area > .item .circle {
width: 90px;
height: 90px;
line-height: 90px;
text-align: center;
font-size: 36px;
border-radius: 50%;
border: 1px solid rgb(58, 58, 58);
}
.tab-area > .item .circle.active {
background: rgba(93, 163, 251);
color: #fff;
border: 0;
}
.write-area {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
}
.write-area > .item {
width: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.write-area > .item .label-name {
font-size: 36px;
}
.write-area > .item .input {
border: 0;
outline: none;
border-bottom: 1px solid rgb(58, 58, 58);
}
.tab-area {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
}
.tab-area > .item {
width: 25%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 30px;
}
.tab-area > .item .circle {
width: 90px;
height: 90px;
line-height: 90px;
text-align: center;
font-size: 36px;
border-radius: 50%;
border: 1px solid rgb(58, 58, 58);
}
.tab-area > .item .circle.active {
background: rgba(93, 163, 251);
color: #fff;
border: 0;
}
.write-area {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
}
.write-area > .item {
width: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.write-area > .item .label-name {
font-size: 36px;
}
.write-area > .item .input {
border: 0;
outline: none;
border-bottom: 1px solid rgb(58, 58, 58);
}
</style>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!