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