Skip to content

yangchao / brains-h5

Go to a project
Commit 332ab49a by yeran
Options

update

1 parent de67e660
Inline Side-by-side
Showing with 948 additions and 658 deletions
src/components/Message/index.vue
...@@ -6,6 +6,8 @@ ...@@ -6,6 +6,8 @@
<div class="weui-dialog__hd">{{ title }}</div> <div class="weui-dialog__hd">{{ title }}</div>
<div class="weui-dialog__bd">{{ content }}</div> <div class="weui-dialog__bd">{{ content }}</div>
<div class="weui-dialog__ft"> <div class="weui-dialog__ft">
<a v-if="cancel" href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary"
@click="doCancel">取消</a>
<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary" @click="confirm">确定</a> <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary" @click="confirm">确定</a>
</div> </div>
</div> </div>
...@@ -14,19 +16,24 @@ ...@@ -14,19 +16,24 @@
</template> </template>
<script> <script>
export default{ export default {
data(){ data() {
return{ return {
visible : true , visible: true,
content : '' , content: '',
title : '', title: '',
cb:null cb: null,
cancel: null
} }
}, },
methods:{ methods: {
confirm(){ confirm() {
this.visible=false; this.visible = false;
this.cb && this.cb(); this.cb && this.cb();
},
doCancel() {
this.visible = false;
this.cancel && this.cancel();
} }
} }
} }
...@@ -42,10 +49,12 @@ ...@@ -42,10 +49,12 @@
bottom: 0; bottom: 0;
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.6);
} }
.weui-dialog__hd { .weui-dialog__hd {
padding: 40px 80px 30px; padding: 40px 80px 30px;
font-size: 32px;/*px*/ font-size: 32px; /*px*/
} }
.weui-dialog { .weui-dialog {
position: fixed; position: fixed;
z-index: 5000; z-index: 5000;
...@@ -60,22 +69,25 @@ ...@@ -60,22 +69,25 @@
border-radius: 3px; border-radius: 3px;
overflow: hidden; overflow: hidden;
} }
.weui-dialog__bd { .weui-dialog__bd {
padding: 0 20px 40px; padding: 0 20px 40px;
min-height: 80px; min-height: 80px;
font-size: 28px;/*px*/ font-size: 28px; /*px*/
line-height: 1.3; line-height: 1.3;
word-wrap: break-word; word-wrap: break-word;
word-break: break-all; word-break: break-all;
color: #999999; color: #999999;
} }
.weui-dialog__ft { .weui-dialog__ft {
position: relative; position: relative;
line-height: 96px; line-height: 96px;
font-size: 32px;/*px*/ font-size: 32px; /*px*/
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
.weui-dialog__btn { .weui-dialog__btn {
display: block; display: block;
-webkit-box-flex: 1; -webkit-box-flex: 1;
...@@ -85,7 +97,8 @@ ...@@ -85,7 +97,8 @@
text-decoration: none; text-decoration: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
position: relative; position: relative;
&:after{
&:after {
content: " "; content: " ";
position: absolute; position: absolute;
left: 0; left: 0;
...@@ -102,4 +115,4 @@ ...@@ -102,4 +115,4 @@
} }
} }
</style> </style>
\ No newline at end of file
src/router/index.js
...@@ -8,216 +8,221 @@ Vue.use(Router); ...@@ -8,216 +8,221 @@ Vue.use(Router);
import Layout from '../views/layout/Layout.vue' import Layout from '../views/layout/Layout.vue'
const constantRouterMap = [ const constantRouterMap = [
{ {
path: '/404', name: '404', component: _import('errorPage/404') path: '/404', name: '404', component: _import('errorPage/404')
}, },
{ {
path: '/', path: '/',
component: Layout , component: Layout,
children : [ children: [
{ {
path : '/' , path: '/',
component : _import('home/index') , component: _import('home/index'),
name : 'index' , name: 'index',
}, },
//原点凝视 //原点凝视
{
path : '/stareOrigin/index' ,
component : _import('stareOrigin/index') ,
name : 'stareOrigin' ,
},
{ {
path : '/stareOrigin/startOrigin' , path: '/stareOrigin/index',
component : _import('stareOrigin/startOrigin') , component: _import('stareOrigin/index'),
name : 'startOrigin' , name: 'stareOrigin',
},
{
path: '/stareOrigin/startOrigin',
component: _import('stareOrigin/startOrigin'),
name: 'startOrigin',
}, },
//之子运动 //之子运动
{
path : '/zhiExercise/index' ,
component : _import('zhiExercise/index') ,
name : 'zhiExercise' ,
},
{ {
path : '/zhiExercise/zhiDrill' , path: '/zhiExercise/index',
component : _import('zhiExercise/zhiDrill') , component: _import('zhiExercise/index'),
name : 'zhiDrill' , name: 'zhiExercise',
},
{
path: '/zhiExercise/zhiDrill',
component: _import('zhiExercise/zhiDrill'),
name: 'zhiDrill',
}, },
{ {
path : '/zhiExercise/zhiAnswer' , path: '/zhiExercise/zhiAnswer',
component : _import('zhiExercise/zhiAnswer') , component: _import('zhiExercise/zhiAnswer'),
name : 'zhiAnswer' , name: 'zhiAnswer',
}, },
//随机数字 //随机数字
{
path : '/randomNumber/index' ,
component : _import('randomNumber/index') ,
name : 'randomNumber' ,
},
{ {
path : '/randomNumber/startMemory' , path: '/randomNumber/index',
component : _import('randomNumber/startMemory') , component: _import('randomNumber/index'),
name : 'startMemory' , name: 'randomNumber',
}, },
{ {
path : '/randomNumber/answerNumber' , path: '/randomNumber/startMemory',
component : _import('randomNumber/answerNumber') , component: _import('randomNumber/startMemory'),
name : 'answerNumber' , name: 'startMemory',
},
{
path: '/randomNumber/answerNumber',
component: _import('randomNumber/answerNumber'),
name: 'answerNumber',
}, },
//随机字母 //随机字母
{ {
path : '/randomLetter/index' , path: '/randomLetter/index',
component : _import('randomLetter/index') , component: _import('randomLetter/index'),
name : 'randomLetter' , name: 'randomLetter',
}, },
{ {
path : '/randomLetter/startMemoryLetter' , path: '/randomLetter/startMemoryLetter',
component : _import('randomLetter/startMemoryLetter') , component: _import('randomLetter/startMemoryLetter'),
name : 'startMemoryLetter' , name: 'startMemoryLetter',
}, },
{ {
path : '/randomLetter/answerLetter' , path: '/randomLetter/answerLetter',
component : _import('randomLetter/answerLetter'), component: _import('randomLetter/answerLetter'),
name : 'answerLetter' , name: 'answerLetter',
}, },
//圆周率 //圆周率
{ {
path : '/pi/index' , path: '/pi/index',
component : _import('pi/index') , component: _import('pi/index'),
name : 'pi' , name: 'pi',
}, },
{ {
path : '/pi/preLearn' , path: '/pi/preLearn',
component : _import('pi/preLearn') , component: _import('pi/preLearn'),
name : 'piPreLearn' , name: 'piPreLearn',
}, },
{ {
path : '/pi/answerPi' , path: '/pi/answerPi',
component : _import('pi/answerPi') , component: _import('pi/answerPi'),
name : 'answerPi' , name: 'answerPi',
}, },
//记忆宫殿 //记忆宫殿
{ {
path : '/pidRemember/index' , path: '/pidRemember/index',
component : _import('pidRemember/index') , component: _import('pidRemember/index'),
name : 'pidRemember' , name: 'pidRemember',
}, },
{ {
path : '/pidRemember/sysTrain' , path: '/pidRemember/sysTrainSelect',
component : _import('pidRemember/sysTrain') , component: _import('pidRemember/sysTrainSelect'),
name : 'sysTrain' name: 'sysTrainSelect'
}, },
{ {
path : '/pidRemember/myTrain' , path: '/pidRemember/sysTrain',
component : _import('pidRemember/myTrain') , component: _import('pidRemember/sysTrain'),
name : 'myTrain' name: 'sysTrain'
}, },
//活力大脑 {
{ path: '/pidRemember/myTrain',
path : '/activeBrain/index' , component: _import('pidRemember/myTrain'),
component : _import('activeBrain/index') , name: 'myTrain'
name : 'activeBrain' , },
//活力大脑
{
path: '/activeBrain/index',
component: _import('activeBrain/index'),
name: 'activeBrain',
}, },
{ {
path : '/activeBrain/numCode' , path: '/activeBrain/numCode',
component : _import('activeBrain/numCode') , component: _import('activeBrain/numCode'),
name : 'numCode' name: 'numCode'
}, },
{ {
path : '/activeBrain/letterCode' , path: '/activeBrain/letterCode',
component : _import('activeBrain/letterCode') , component: _import('activeBrain/letterCode'),
name : 'letterCode' name: 'letterCode'
}, },
{ {
path : '/activeBrain/heart' , path: '/activeBrain/heart',
component : _import('activeBrain/heart') , component: _import('activeBrain/heart'),
name : 'heart' name: 'heart'
}, },
//结果 //结果
{ {
path : '/home/result' , path: '/home/result',
component : _import('home/result') , component: _import('home/result'),
name : 'result' , name: 'result',
}, },
//正向速算 //正向速算
{ {
path : '/forward/index' , path: '/forward/index',
component : _import('forward/index') , component: _import('forward/index'),
name : 'forwardIndex' , name: 'forwardIndex',
}, },
{ {
path : '/forward/forwardAnswer' , path: '/forward/forwardAnswer',
component : _import('forward/forwardAnswer') , component: _import('forward/forwardAnswer'),
name : 'forwardAnswer' , name: 'forwardAnswer',
}, },
{ {
path : '/forward/forwardResult' , path: '/forward/forwardResult',
component : _import('forward/forwardResult') , component: _import('forward/forwardResult'),
name : 'forwardResult' , name: 'forwardResult',
}, },
//逆向速算 //逆向速算
{ {
path : '/reserve/index' , path: '/reserve/index',
component : _import('reserve/index') , component: _import('reserve/index'),
name : 'reserveIndex' , name: 'reserveIndex',
}, },
{ {
path : '/reserve/reserveAnswer' , path: '/reserve/reserveAnswer',
component : _import('reserve/reserveAnswer') , component: _import('reserve/reserveAnswer'),
name : 'reserveAnswer' , name: 'reserveAnswer',
}, },
{ {
path : '/reserve/reserveResult' , path: '/reserve/reserveResult',
component : _import('reserve/reserveResult') , component: _import('reserve/reserveResult'),
name : 'reserveResult' , name: 'reserveResult',
}, },
//快速阅读 //快速阅读
{ {
path : '/fastReading/index' , path: '/fastReading/index',
component : _import('fastReading/index') , component: _import('fastReading/index'),
name : 'fastReadingIndex' , name: 'fastReadingIndex',
}, },
{ {
path : '/fastReading/readArticle' , path: '/fastReading/readArticle',
component : _import('fastReading/readArticle') , component: _import('fastReading/readArticle'),
name : 'fastReadingReadArticle' , name: 'fastReadingReadArticle',
}, },
{ {
path : '/fastReading/answerQuestion' , path: '/fastReading/answerQuestion',
component : _import('fastReading/answerQuestion') , component: _import('fastReading/answerQuestion'),
name : 'fastReadingAnswerQuestion' , name: 'fastReadingAnswerQuestion',
}, },
{ {
path : '/fastReading/readResult' , path: '/fastReading/readResult',
component : _import('fastReading/readResult') , component: _import('fastReading/readResult'),
name : 'readResult' , name: 'readResult',
}, },
//国学经典 //国学经典
{ {
path : '/studiesChina/preLearn' , path: '/studiesChina/preLearn',
component : _import('studiesChina/preLearn') , component: _import('studiesChina/preLearn'),
name : 'preLearn' , name: 'preLearn',
}, },
{ {
path : '/studiesChina/index' , path: '/studiesChina/index',
component : _import('studiesChina/index') , component: _import('studiesChina/index'),
name : 'studiesChinaIndex' , name: 'studiesChinaIndex',
}, },
{ {
path : '/studiesChina/answerStudies' , path: '/studiesChina/answerStudies',
component : _import('studiesChina/answerStudies') , component: _import('studiesChina/answerStudies'),
name : 'answerStudies' , name: 'answerStudies',
}, },
{ {
path : '/studiesChina/studiesResult' , path: '/studiesChina/studiesResult',
component : _import('studiesChina/studiesResult') , component: _import('studiesChina/studiesResult'),
name : 'studiesResult' , name: 'studiesResult',
}, },
] ]
}, },
{ path: '*', redirect: '/404' } {path: '*', redirect: '/404'}
] ]
export default new Router({ export default new Router({
routes: constantRouterMap, routes: constantRouterMap,
mode: 'history' mode: 'history'
}) })
src/utils/sysTrainData.js 0 → 100644
let pics = {
A: {
img: 'http://static.ledouya.com/20200224/141319_1582524951911.jpg',
dot: [
{x: 24, y: 180, label: 1},
{x: 110, y: 120, label: 2},
{x: 122, y: 64, label: 3},
{x: 162, y: 24, label: 4},
{x: 230, y: 180, label: 5},
{x: 292, y: 104, label: 6},
{x: 300, y: 40, label: 7},
{x: 180, y: 140, label: 8},
{x: 240, y: 60, label: 9},
{x: 20, y: 20, label: 10}
]
},
B: {
img: 'http://static.ledouya.com/20200224/141319_1582524951911.jpg',
dot: [
{x: 24, y: 180, label: 1},
{x: 110, y: 120, label: 2},
{x: 122, y: 64, label: 3},
{x: 162, y: 24, label: 4},
{x: 230, y: 180, label: 5},
{x: 292, y: 104, label: 6},
{x: 300, y: 40, label: 7},
{x: 180, y: 140, label: 8},
{x: 240, y: 60, label: 9},
{x: 20, y: 20, label: 10}
]
},
C: {
img: 'http://static.ledouya.com/20200224/141319_1582524951911.jpg',
dot: [
{x: 24, y: 180, label: 1},
{x: 110, y: 120, label: 2},
{x: 122, y: 64, label: 3},
{x: 162, y: 24, label: 4},
{x: 230, y: 180, label: 5},
{x: 292, y: 104, label: 6},
{x: 300, y: 40, label: 7},
{x: 180, y: 140, label: 8},
{x: 240, y: 60, label: 9},
{x: 20, y: 20, label: 10}
]
},
D: {
img: 'http://static.ledouya.com/20200224/141319_1582524951911.jpg',
dot: [
{x: 24, y: 180, label: 1},
{x: 110, y: 120, label: 2},
{x: 122, y: 64, label: 3},
{x: 162, y: 24, label: 4},
{x: 230, y: 180, label: 5},
{x: 292, y: 104, label: 6},
{x: 300, y: 40, label: 7},
{x: 180, y: 140, label: 8},
{x: 240, y: 60, label: 9},
{x: 20, y: 20, label: 10}
]
},
E: {
img: 'http://static.ledouya.com/20200224/141319_1582524951911.jpg',
dot: [
{x: 24, y: 180, label: 1},
{x: 110, y: 120, label: 2},
{x: 122, y: 64, label: 3},
{x: 162, y: 24, label: 4},
{x: 230, y: 180, label: 5},
{x: 292, y: 104, label: 6},
{x: 300, y: 40, label: 7},
{x: 180, y: 140, label: 8},
{x: 240, y: 60, label: 9},
{x: 20, y: 20, label: 10}
]
}
};
export {pics}
src/views/activeBrain/heart.vue
<template> <template>
<div class="wrapper"> <div class="wrapper">
<div class="content" v-if="gameState === 'not'"> <div class="content" v-if="gameState === 'not'">
<div class="title">心有灵犀</div> <div class="title">心有灵犀</div>
<div class="m-selector"> <div class="m-selector">
<div v-for="(item, index) in configList" :key="index" :index="index" :item="item"> <div v-for="(item, index) in configList" :key="index" :index="index" :item="item">
<div <div
class="item" class="item"
:class="{active: (currentInfo.level === item.level)}" :class="{active: (currentInfo.level === item.level)}"
@click="changLevel(item)" @click="changLevel(item)"
>{{item.level_name}}</div> >{{item.level_name}}
</div>
</div>
</div>
<el-button type="primary" class="start" @click="start">开始训练</el-button>
</div> </div>
</div> <div class="container" v-if="gameState === 'progress'">
<el-button type="primary" class="start" @click="start">开始训练</el-button> <div class="title">心有灵犀</div>
</div> <div class="box">
<div class="container" v-if="gameState === 'progress'"> <div class="time">{{count_time}}s</div>
<div class="title">心有灵犀</div> <div class="tab">{{tabList[tab_index].value || ''}}</div>
<div class="box"> <div class="btn">
<div class="time">{{count_time}}s</div> <el-button class="btn-ignore" @click="ignore">跳过</el-button>
<div class="tab">{{tabList[tab_index].value || ''}}</div> <el-button type="primary" class="btn-start" @click="next">正确（NEXT）</el-button>
<div class="btn"> </div>
<el-button class="btn-ignore" @click="ignore">跳过</el-button> <!-- <div class="btn" v-if="tab_index == this.tabList.length-1">
<el-button type="primary" class="btn-start" @click="next">下一题</el-button> <el-button type="primary" class="btn-end" @click="end">结束本局</el-button>
</div> </div> -->
<!-- <div class="btn" v-if="tab_index == this.tabList.length-1"> </div>
<el-button type="primary" class="btn-end" @click="end">结束本局</el-button>
</div> -->
</div>
</div>
<div class="container" v-if="gameState === 'end'">
<div class="title">心有灵犀</div>
<div class="data-list">
<div class="data-item">
正确数量：
<span>{{result_info.correct_num}}</span>
</div>
<div class="data-item">
错误数量：
<span>{{result_info.error_num}}</span>
</div>
<div class="data-item">
正确率：
<span>{{(result_info.correct_num / tabList.length) * 100}}%</span>
</div> </div>
<div class="data-item"> <div class="container" v-if="gameState === 'end'">
用时： <div class="title">心有灵犀</div>
<span>{{result_info.time}}s</span> <div class="data-list">
<div class="data-item">
正确数量：
<span>{{result_info.correct_num}}</span>
</div>
<div class="data-item">
错误数量：
<span>{{result_info.error_num}}</span>
</div>
<div class="data-item">
正确率：
<span>{{(result_info.correct_num / tabList.length) * 100}}%</span>
</div>
<div class="data-item">
用时：
<span>{{result_info.time}}s</span>
</div>
</div>
<div class="btn">
<el-button class="btn-ignore" @click="backHome">返回首页</el-button>
<el-button type="primary" class="btn-start" @click="again">再来一局</el-button>
</div>
</div> </div>
</div>
<div class="btn">
<el-button class="btn-ignore" @click="backHome">返回首页</el-button>
<el-button type="primary" class="btn-start" @click="again">再来一局</el-button>
</div>
</div> </div>
</div>
</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";
import { guessWordListAPI } from "@/api/recreation"; import {guessWordListAPI} from "@/api/recreation";
export default new BaseCasePage({ export default new BaseCasePage({
data() { data() {
return { return {
gameState: "not", gameState: "not",
currentInfo: { currentInfo: {
level: 1, level: 1,
limit_remember_time: 300 limit_remember_time: 300
}, },
configList: [ configList: [
{ {
level: 1, level: 1,
level_name: "五分钟", level_name: "五分钟",
limit_remember_time: 300 limit_remember_time: 300
},
{
level: 2,
level_name: "十分钟",
limit_remember_time: 600
}
],
tabList: [],
result_info: {
error_num: 0,
correct_num: 0,
time: 0
},
tab_index: 0,
count_time: 300,
timer: null
};
}, },
{ methods: {
level: 2, getList() {
level_name: "十分钟", guessWordListAPI().then(res => {
limit_remember_time: 600 if (res.error == 0 && res.data) {
} this.tabList = res.data;
], } else {
tabList: [], this.tabList = [];
result_info: { }
error_num: 0, });
correct_num: 0, },
time: 0 clearData() {
}, clearInterval(this.timer);
tab_index: 0, this.timer = null;
count_time: 300, this.count_time = 300;
timer: null },
}; gameOver() {
}, this.$message({
methods: { type: "error",
getList() { content: "游戏结束!",
guessWordListAPI().then(res => { cb: () => {
if (res.error == 0 && res.data) { this.end();
this.tabList = res.data; }
} else { });
this.tabList = []; },
} runCount() {
}); this.timer = setInterval(() => {
}, this.result_info.time++;
clearData() { if (this.count_time > 0 && this.gameState === "progress") {
clearInterval(this.timer); this.count_time = this.count_time - 1;
this.timer = null; } else if (
this.count_time = 300; this.$route.name === "heart" &&
}, this.gameState === "progress"
gameOver() { ) {
this.$message({ this.clearData();
type: "error", this.gameOver();
content: "游戏结束!", return;
cb: () => { } else {
this.end(); this.clearData();
} }
}); }, 1000);
}, },
runCount() { jump(path, query = {}) {
this.timer = setInterval(() => { this.$router.push({
this.result_info.time++; path,
if (this.count_time > 0 && this.gameState === "progress") { query
this.count_time = this.count_time - 1; });
} else if ( },
this.$route.name === "heart" && changLevel(item) {
this.gameState === "progress" this.currentInfo.level = item.level;
) { this.currentInfo.limit_remember_time = item.limit_remember_time;
this.clearData(); this.count_time = item.limit_remember_time;
this.gameOver(); },
return; updateGameState(state) {
} else { this.gameState = state;
this.clearData(); },
updateTabIndex() {
if (this.tab_index >= this.tabList.length - 1) {
this.gameOver();
return;
}
this.tab_index++;
},
start() {
this.tab_index = 0;
this.result_info = {
error_num: 0,
correct_num: 0,
time: 0
};
this.updateGameState("progress");
this.runCount();
},
next() {
this.result_info.correct_num += 1;
this.updateTabIndex();
},
ignore() {
this.result_info.error_num += 1;
this.updateTabIndex();
},
end() {
this.updateGameState("end");
this.clearData();
},
backHome() {
this.jump("/");
},
again() {
this.updateGameState('not');
this.clearData();
}
},
mounted() {
this.getList();
},
beforeDestroy() {
console.log("beforeDestroy--------------------");
},
destroyed() {
console.log("destroyed--------------------");
} }
}, 1000); });
},
jump(path, query = {}) {
this.$router.push({
path,
query
});
},
changLevel(item) {
this.currentInfo.level = item.level;
this.currentInfo.limit_remember_time = item.limit_remember_time;
this.count_time = item.limit_remember_time;
},
updateGameState(state) {
this.gameState = state;
},
updateTabIndex() {
if (this.tab_index >= this.tabList.length - 1) {
this.gameOver();
return;
}
this.tab_index++;
},
start() {
this.tab_index = 0;
this.result_info = {
error_num: 0,
correct_num: 0,
time: 0
};
this.updateGameState("progress");
this.runCount();
},
next() {
this.result_info.correct_num += 1;
this.updateTabIndex();
},
ignore() {
this.result_info.error_num += 1;
this.updateTabIndex();
},
end() {
this.updateGameState("end");
this.clearData();
},
backHome() {
this.jump("/");
},
again() {
this.updateGameState('not');
this.clearData();
}
},
mounted() {
this.getList();
},
beforeDestroy() {
console.log("beforeDestroy--------------------");
},
destroyed() {
console.log("destroyed--------------------");
}
});
</script> </script>
<style scoped> <style scoped>
.content { .content {
padding-top: 48px; padding-top: 48px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
.container {
padding-top: 48px; .container {
} padding-top: 48px;
.title { }
color: #1685ff;
text-align: center; .title {
font-size: 34px; color: #1685ff;
font-weight: bold; text-align: center;
margin-bottom: 50px; font-size: 34px;
} font-weight: bold;
.box { margin-bottom: 50px;
position: relative; }
}
.box .time {
position: absolute;
right: 40px;
top: 0;
color: #1685ff;
font-size: 28px;
}
.tab {
height: 600px;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid rgba(35, 35, 35, 0.9);
font-size: 50px;
letter-spacing: 12px;
}
.btn {
padding-top: 60px;
display: flex;
align-items: center;
justify-content: center;
}
.btn-start,
.btn-ignore {
width: 300px;
height: 80px;
}
.btn-end {
width: 400px;
height: 80px;
}
.start {
margin-top: 60px;
width: 500px;
height: 80px;
border-radius: 40px;
font-size: 32px;
}
.data-list { .box {
margin-bottom: 120px; position: relative;
} }
.data-item { .box .time {
text-align: center; position: absolute;
margin-top: 30px; right: 40px;
font-size: 26px; top: 0;
color: #333; color: #1685ff;
} font-size: 28px;
}
.data-item span { .tab {
color: #1f72ff; height: 600px;
} display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid rgba(35, 35, 35, 0.9);
font-size: 50px;
letter-spacing: 12px;
}
.btn {
padding-top: 60px;
display: flex;
align-items: center;
justify-content: center;
}
.btn-start,
.btn-ignore {
width: 300px;
height: 80px;
}
.btn-end {
width: 400px;
height: 80px;
}
.start {
margin-top: 60px;
width: 500px;
height: 80px;
border-radius: 40px;
font-size: 32px;
}
.data-list {
margin-bottom: 120px;
}
.data-item {
text-align: center;
margin-top: 30px;
font-size: 26px;
color: #333;
}
.data-item span {
color: #1f72ff;
}
</style> </style>
src/views/home/index.vue
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
}, },
{ {
label: '记忆宫殿', label: '记忆宫殿',
path: '/pidRemember/index' path: '/pidRemember/index?id=11&model_id=10'
}, },
], ],
speed: [ speed: [
......
src/views/pidRemember/index.vue
...@@ -2,12 +2,12 @@ ...@@ -2,12 +2,12 @@
<div class="content"> <div class="content">
<div class="title">记忆宫殿</div> <div class="title">记忆宫殿</div>
<div class="box"> <div class="box">
<div class="line" @click="start('sysTrain')"> <div class="line" @click="start('sysTrainSelect')">
<image class="icon" /> <img class="icon"/>
<span>平台记忆宫殿训练</span> <span>平台记忆宫殿训练</span>
</div> </div>
<div class="line sp" @click="start('myTrain')"> <div class="line sp" @click="start('myTrain')">
<image class="icon" /> <img class="icon"/>
<span>我的记忆宫殿</span> <span>我的记忆宫殿</span>
</div> </div>
</div> </div>
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
} }
}, },
start(pathName) { start(pathName) {
CaseUtil.goToTrain(`/pidRemember/${pathName}`,this); CaseUtil.goToTrain(`/pidRemember/${pathName}`, this);
} }
}, },
mounted() { mounted() {
...@@ -56,7 +56,8 @@ ...@@ -56,7 +56,8 @@
font-weight: bold; font-weight: bold;
margin-bottom: 50px; margin-bottom: 50px;
} }
.box .line{
.box .line {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
...@@ -65,12 +66,14 @@ ...@@ -65,12 +66,14 @@
border-radius: 20px; border-radius: 20px;
color: #fff; color: #fff;
font-size: 26px; font-size: 26px;
background: rgba(251,147,148,.8); background: rgba(251, 147, 148, .8);
margin-top: 60px; margin-top: 60px;
} }
.box .line.sp { .box .line.sp {
background: rgba(90,161,253,.7); background: rgba(90, 161, 253, .7);
} }
.start { .start {
margin-top: 60px; margin-top: 60px;
width: 500px; width: 500px;
......
src/views/pidRemember/myTrain.vue
...@@ -204,7 +204,7 @@ ...@@ -204,7 +204,7 @@
} }
.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;
......
src/views/pidRemember/sysTrain.vue
<template> <template>
<div class="content"> <div class="content">
<div class="title"> <div class="title-01">
{{ 记忆宫殿训练
gameState==='not' ? '请记住图中地点桩位置及其顺序' : '请依次点击复位图中的地点桩'
}}
<div v-if="gameState === 'progress'" @click="gameOVer">结束训练</div>
</div>
<div class="box" @click="handleClick">
<div class="dot-area" v-if="gameState === 'not' || gameState === 'end'">
<div
class="dot"
v-for="(item,index) in dotList"
:key="index"
:style="{left:item.x+'px',top:item.y+'px'}"
>{{item.label}}</div>
</div>
<img class="img" src="http://static.ledouya.com/20200224/141319_1582524951911.jpg" />
</div>
<div class="tab-area" v-if="gameState === 'progress'">
<div :class="item.hit && 'active'" v-for="(item,index) in tabList" :key="index">{{item.value}}</div>
</div>
<el-button v-if="gameState === 'not'" type="primary" class="start" @click="start">记忆完成</el-button>
<div class="container" v-if="gameState === 'end'">
<div class="data-list">
<div class="data-item">
勾选数量：
<span>{{fillList.length}}</span>
</div> </div>
<div class="data-item"> <div class="title">
正确数量： {{
<span>{{correct_num}}</span> gameState==='not' ? '请记住图中地点桩位置及其顺序' : '请依次点击复位图中的地点桩'
}}
<div v-if="gameState === 'progress'" @click="next">结束训练</div>
</div> </div>
</div> <div class="box" @click="handleClick">
<div class="btn"> <div class="dot-area" v-if="gameState === 'not'">
<el-button type="primary" class="btn-ignore" @click="backHome">返回首页</el-button> <div
</div> class="dot"
v-for="(item,index) in dotData.dot"
:key="index"
:style="{left:item.x+'px',top:item.y+'px'}"
>{{item.label}}
</div>
</div>
<img class="img" :src="dotData.img"/>
</div>
<div class="tab-area" v-if="gameState === 'progress'">
<div :class="item.hit && 'active'" v-for="(item,index) in tabList" :key="index">{{item.value}}</div>
</div>
<el-button class="start" type="primary" v-if="gameState === 'progress'" @click="next">
{{tabIndex<(tabSelectList.length-1)?'下一张':'结束训练'}}
</el-button>
<el-button v-if="gameState === 'not'" type="primary" class="start" @click="start">记忆完成</el-button>
</div> </div>
</div>
</template> </template>
<script> <script>
import BaseCasePage from "../../framework/core/baseCasePage"; import BaseCasePage from "../../framework/core/baseCasePage";
import CaseUtil from "../../framework/service/base/caseUtil";
export default new BaseCasePage({ import {pics} from '../../utils/sysTrainData';
name: "index",
data() {
return {
level: 0,
dotList: [
{ x: 24, y: 180, label: 1 },
{ x: 110, y: 120, label: 2 },
{ x: 122, y: 64, label: 3 },
{ x: 162, y: 24, label: 4 },
{ x: 230, y: 180, label: 5 },
{ x: 292, y: 104, label: 6 },
{ x: 300, y: 40, label: 7 },
{ x: 180, y: 140, label: 8 },
{ x: 240, y: 60, label: 9 },
{ x: 20, y: 20, label: 10 }
],
correct_num: 0,//正确数量
offset_num:10,//偏移值6个像素
tabList: [
{ value: 1, hit: false },
{ value: 2, hit: false },
{ value: 3, hit: false },
{ value: 4, hit: false },
{ value: 5, hit: false },
{ value: 6, hit: false },
{ value: 7, hit: false },
{ value: 8, hit: false },
{ value: 9, hit: false },
{ value: 10, hit: false }
],
fillList: [],
gameState: "not"
};
},
methods: {
backHome() {
this.$router.push("/");
},
result() {
this.fillList.map((num, index) => {
let dot = this.dotList[index];
if (dot) {
console.log('x:--',dot.x- this.offset_num,num.x,dot.x+ this.offset_num,'正确坐标：'+dot.x)
console.log('y:--',dot.y- this.offset_num,num.y,dot.y+ this.offset_num,'正确坐标：'+dot.y)
if ((dot.x - this.offset_num < num.x && num.x < dot.x + this.offset_num) && (dot.y - this.offset_num < num.y && num.y < dot.y + this.offset_num)) {
this.correct_num +=1;
} else {
console.log("not--");
}
}
});
},
gameOVer() {
this.$message({
type: "error",
content: "游戏结束",
cb: () => {
this.result();
let childList = document.querySelectorAll(".circle");
for (var i = 0, len = childList.length; i < len; i++) {
document.querySelector(".box").removeChild(childList[i]);
}
this.updateGameState("end");
}
});
},
handleClick(e) {
if (this.gameState === "not") return;
if (this.fillList.length === 10) { export default new BaseCasePage({
this.gameOVer(); name: "index",
return; data() {
} return {
this.fillList.push({ tabSelectList: [],
x: e.offsetX, tabIndex: 0,
y: e.offsetY, dotData: {},
label: this.fillList.length + 1 level: 0,
}); correct_num: 0,//正确数量
this.tabList[this.fillList.length - 1].hit = true; offset_num: 10,//偏移值6个像素
console.log(e) tabList: [
let top = e.offsetY + "px"; {value: 1, hit: false},
let left = e.offsetX + "px"; {value: 2, hit: false},
let box = document.querySelector(".box"); {value: 3, hit: false},
let dot = document.createElement("p"); {value: 4, hit: false},
let styleStr = `width:30px;height:30px;border: 2px solid red;border-radius: 50%;position: absolute;left:${left};top:${top};`; {value: 5, hit: false},
dot.classList.add("circle"); {value: 6, hit: false},
{value: 7, hit: false},
{value: 8, hit: false},
{value: 9, hit: false},
{value: 10, hit: false}
],
fillList: [],
gameState: "not"
};
},
methods: {
backHome() {
this.$router.push("/");
},
result() {
this.fillList.map((num, index) => {
let dot = this.dotData.dot[index];
if (dot) {
console.log('x:--', dot.x - this.offset_num, num.x, dot.x + this.offset_num, '正确坐标：' + dot.x)
console.log('y:--', dot.y - this.offset_num, num.y, dot.y + this.offset_num, '正确坐标：' + dot.y)
if ((dot.x - this.offset_num < num.x && num.x < dot.x + this.offset_num) && (dot.y - this.offset_num < num.y && num.y < dot.y + this.offset_num)) {
this.correct_num += 1;
} else {
console.log("not--");
}
}
});
},
handleClick(e) {
if (this.gameState === "not") return;
dot.style.cssText = styleStr; if (this.fillList.length === 10) {
box.appendChild(dot); this.next();
}, return;
changLevel(level) { }
if (level !== this.level) { this.fillList.push({
this.level = level; x: e.offsetX,
} y: e.offsetY,
}, label: this.fillList.length + 1
updateGameState(state) { });
this.gameState = state; this.tabList[this.fillList.length - 1].hit = true;
}, let top = e.offsetY + "px";
start() { let left = e.offsetX + "px";
this.fillList = []; let box = document.querySelector(".box");
this.updateGameState("progress"); let dot = document.createElement("p");
} let styleStr = `width:30px;height:30px;border: 2px solid red;border-radius: 50%;position: absolute;left:${left};top:${top};`;
}, dot.classList.add("circle");
mounted() {}
}); dot.style.cssText = styleStr;
box.appendChild(dot);
},
updateGameState(state) {
this.gameState = state;
},
start() {
this.fillList = [];
this.updateGameState("progress");
},
initTabData() {
this.dotData = pics[this.tabSelectList[this.tabIndex]];
this.updateGameState('not');
},
next() {
this.$message({
type: "success",
content: "是否立即提交",
cb: () => {
if (this.tabIndex < (this.tabSelectList.length - 1)) {
this.tabIndex += 1;
this.initTabData();
} else { // 结束训练
this.result();
let childList = document.querySelectorAll(".circle");
for (let i = 0, len = childList.length; i < len; i++) {
document.querySelector(".box").removeChild(childList[i]);
}
this.updateGameState("end");
}
},
cancel: () => {
console.log('--cancel---')
}
});
}
},
mounted() {
this.tabSelectList = JSON.parse(this.$route.query.labels);
this.initTabData();
}
});
</script> </script>
<style scoped> <style scoped>
.content { .content {
padding-top: 80px; padding-top: 8px;
} }
.data-list {
margin-bottom: 60px; .title-01 {
display: flex; color: #333;
justify-content: space-around; font-size: 40px;
} display: flex;
align-items: center;
justify-content: center;
}
.data-list {
margin-bottom: 60px;
display: flex;
justify-content: space-around;
}
.data-item {
text-align: center;
margin-top: 30px;
font-size: 26px;
color: #333;
}
.data-item span {
color: #1f72ff;
}
.dot {
width: 60px;
height: 60px;
line-height: 50px;
text-align: center;
border: 6px solid #db3b21;
border-radius: 50%;
position: absolute;
color: #fff;
font-size: 24px;
}
.title {
color: #333;
font-size: 30px;
padding: 0 20px;
margin-top: 18px;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
.title > div {
color: rgb(238, 147, 147);
}
.box {
position: relative;
}
.data-item { .box > p {
text-align: center; width: 20px;
margin-top: 30px; height: 20px;
font-size: 26px; background: red;
color: #333; border-radius: 50%;
} position: absolute;
}
.data-item span { .box .img {
color: #1f72ff; width: 100%;
} height: 500px;
.dot { background: #666;
width: 60px; }
height: 60px;
line-height: 50px;
text-align: center;
border: 6px solid #db3b21;
border-radius: 50%;
position: absolute;
color: #fff;
font-size: 24px;
}
.title { .start {
color: #333; position: fixed;
font-size: 30px; left: 50%;
padding: 0 20px; bottom: 40px;
margin-bottom: 20px; width: 500px;
display: flex; height: 80px;
align-items: center; transform: translateX(-50%);
justify-content: space-between; border-radius: 40px;
} font-size: 32px;
.title > div { }
color: rgb(238, 147, 147);
}
.box {
position: relative;
}
.box > p {
width: 20px;
height: 20px;
background: red;
border-radius: 50%;
position: absolute;
}
.box .img {
width: 100%;
height: 500px;
background: #666;
}
.start {
position: fixed;
left: 50%;
bottom: 40px;
width: 500px;
height: 80px;
transform: translateX(-50%);
border-radius: 40px;
font-size: 32px;
}
.tab-area {
position: fixed;
left: 50%;
bottom: 80px;
width: 90%;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: space-around;
}
.tab-area > div {
width: 58px;
height: 58px;
line-height: 58px;
text-align: center;
border-radius: 50%;
border: 1px solid rgb(129, 129, 129);
}
.tab-area > div.active {
background: rgba(244, 172, 185);
border: 0;
}
.dot-area {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 10;
}
.btn { .tab-area {
display: flex; position: fixed;
align-items: center; left: 50%;
justify-content: center; bottom: 160px;
} width: 90%;
.btn-ignore { transform: translateX(-50%);
width: 300px; display: flex;
height: 80px; align-items: center;
} justify-content: space-around;
}
.tab-area > div {
width: 58px;
height: 58px;
line-height: 58px;
text-align: center;
border-radius: 50%;
border: 1px solid rgb(129, 129, 129);
}
.tab-area > div.active {
background: rgba(244, 172, 185);
border: 0;
}
.dot-area {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 10;
}
.btn {
display: flex;
align-items: center;
justify-content: center;
}
.btn-ignore {
width: 300px;
height: 80px;
}
</style> </style>
src/views/pidRemember/sysTrainSelect.vue 0 → 100644
<template>
<div class="wrapper">
<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.label}}</div>
</div>
</div>
<el-button type="primary" class="start" @click="start">设置</el-button>
</div>
</template>
<script>
import BaseCasePage from "../../framework/core/baseCasePage";
export default new BaseCasePage({
name: "index",
data() {
return {
tabList: [
{label: "A", hit: true, value: 1},
{label: "B", hit: false, value: 2},
{label: "C", hit: false, value: 3},
{label: "D", hit: false, value: 4},
{label: "E", hit: false, value: 5},
],
};
},
methods: {
select(item) {
item.hit = !item.hit;
// this.tabList.forEach(v => {
// v.hit = false;
// });
// item.hit = true;
},
start() {
let array = [];
this.tabList.forEach((value, index) => {
if (value.hit) {
array.push(value.label);
}
});
if (!array.length) return;
this.$router.push({
path: '/pidRemember/sysTrain',
query: {
id: this.caseAlias,
model_id: this.modelAlias,
labels: JSON.stringify(array)
}
})
}
},
});
</script>
<style scoped>
.content {
padding-top: 80px;
display: flex;
flex-direction: column;
align-items: 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;
}
.submit-btn {
width: 500px;
height: 80px;
border-radius: 40px;
font-size: 32px;
margin: 20px 0 80px;
}
.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;
font-size: 36px;
width: 242px;
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!