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 @@
<div class="weui-dialog__hd">{{ title }}</div>
<div class="weui-dialog__bd">{{ content }}</div>
<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>
</div>
</div>
......@@ -14,19 +16,24 @@
</template>
<script>
export default{
data(){
return{
visible : true ,
content : '' ,
title : '',
cb:null
export default {
data() {
return {
visible: true,
content: '',
title: '',
cb: null,
cancel: null
}
},
methods:{
confirm(){
this.visible=false;
this.cb && this.cb();
methods: {
confirm() {
this.visible = false;
this.cb && this.cb();
},
doCancel() {
this.visible = false;
this.cancel && this.cancel();
}
}
}
......@@ -42,10 +49,12 @@
bottom: 0;
background: rgba(0, 0, 0, 0.6);
}
.weui-dialog__hd {
padding: 40px 80px 30px;
font-size: 32px;/*px*/
font-size: 32px; /*px*/
}
.weui-dialog {
position: fixed;
z-index: 5000;
......@@ -60,22 +69,25 @@
border-radius: 3px;
overflow: hidden;
}
.weui-dialog__bd {
padding: 0 20px 40px;
min-height: 80px;
font-size: 28px;/*px*/
font-size: 28px; /*px*/
line-height: 1.3;
word-wrap: break-word;
word-break: break-all;
color: #999999;
}
.weui-dialog__ft {
position: relative;
line-height: 96px;
font-size: 32px;/*px*/
font-size: 32px; /*px*/
display: -webkit-box;
display: -webkit-flex;
display: flex;
.weui-dialog__btn {
display: block;
-webkit-box-flex: 1;
......@@ -85,7 +97,8 @@
text-decoration: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
position: relative;
&:after{
&:after {
content: " ";
position: absolute;
left: 0;
......@@ -102,4 +115,4 @@
}
}
</style>
\ No newline at end of file
</style>
src/router/index.js
......@@ -8,216 +8,221 @@ Vue.use(Router);
import Layout from '../views/layout/Layout.vue'
const constantRouterMap = [
{
path: '/404', name: '404', component: _import('errorPage/404')
},
{
path: '/',
component: Layout ,
children : [
{
path : '/' ,
component : _import('home/index') ,
name : 'index' ,
},
{
path: '/404', name: '404', component: _import('errorPage/404')
},
{
path: '/',
component: Layout,
children: [
{
path: '/',
component: _import('home/index'),
name: 'index',
},
//原点凝视
{
path : '/stareOrigin/index' ,
component : _import('stareOrigin/index') ,
name : 'stareOrigin' ,
},
{
path : '/stareOrigin/startOrigin' ,
component : _import('stareOrigin/startOrigin') ,
name : 'startOrigin' ,
path: '/stareOrigin/index',
component: _import('stareOrigin/index'),
name: 'stareOrigin',
},
{
path: '/stareOrigin/startOrigin',
component: _import('stareOrigin/startOrigin'),
name: 'startOrigin',
},
//之子运动
{
path : '/zhiExercise/index' ,
component : _import('zhiExercise/index') ,
name : 'zhiExercise' ,
},
{
path : '/zhiExercise/zhiDrill' ,
component : _import('zhiExercise/zhiDrill') ,
name : 'zhiDrill' ,
path: '/zhiExercise/index',
component: _import('zhiExercise/index'),
name: 'zhiExercise',
},
{
path: '/zhiExercise/zhiDrill',
component: _import('zhiExercise/zhiDrill'),
name: 'zhiDrill',
},
{
path : '/zhiExercise/zhiAnswer' ,
component : _import('zhiExercise/zhiAnswer') ,
name : 'zhiAnswer' ,
path: '/zhiExercise/zhiAnswer',
component: _import('zhiExercise/zhiAnswer'),
name: 'zhiAnswer',
},
//随机数字
{
path : '/randomNumber/index' ,
component : _import('randomNumber/index') ,
name : 'randomNumber' ,
},
{
path : '/randomNumber/startMemory' ,
component : _import('randomNumber/startMemory') ,
name : 'startMemory' ,
path: '/randomNumber/index',
component: _import('randomNumber/index'),
name: 'randomNumber',
},
{
path : '/randomNumber/answerNumber' ,
component : _import('randomNumber/answerNumber') ,
name : 'answerNumber' ,
path: '/randomNumber/startMemory',
component: _import('randomNumber/startMemory'),
name: 'startMemory',
},
{
path: '/randomNumber/answerNumber',
component: _import('randomNumber/answerNumber'),
name: 'answerNumber',
},
//随机字母
{
path : '/randomLetter/index' ,
component : _import('randomLetter/index') ,
name : 'randomLetter' ,
path: '/randomLetter/index',
component: _import('randomLetter/index'),
name: 'randomLetter',
},
{
path : '/randomLetter/startMemoryLetter' ,
component : _import('randomLetter/startMemoryLetter') ,
name : 'startMemoryLetter' ,
path: '/randomLetter/startMemoryLetter',
component: _import('randomLetter/startMemoryLetter'),
name: 'startMemoryLetter',
},
{
path : '/randomLetter/answerLetter' ,
component : _import('randomLetter/answerLetter'),
name : 'answerLetter' ,
path: '/randomLetter/answerLetter',
component: _import('randomLetter/answerLetter'),
name: 'answerLetter',
},
//圆周率
{
path : '/pi/index' ,
component : _import('pi/index') ,
name : 'pi' ,
path: '/pi/index',
component: _import('pi/index'),
name: 'pi',
},
{
path : '/pi/preLearn' ,
component : _import('pi/preLearn') ,
name : 'piPreLearn' ,
path: '/pi/preLearn',
component: _import('pi/preLearn'),
name: 'piPreLearn',
},
{
path : '/pi/answerPi' ,
component : _import('pi/answerPi') ,
name : 'answerPi' ,
path: '/pi/answerPi',
component: _import('pi/answerPi'),
name: 'answerPi',
},
//记忆宫殿
{
path : '/pidRemember/index' ,
component : _import('pidRemember/index') ,
name : 'pidRemember' ,
path: '/pidRemember/index',
component: _import('pidRemember/index'),
name: 'pidRemember',
},
{
path : '/pidRemember/sysTrain' ,
component : _import('pidRemember/sysTrain') ,
name : 'sysTrain'
path: '/pidRemember/sysTrainSelect',
component: _import('pidRemember/sysTrainSelect'),
name: 'sysTrainSelect'
},
{
path : '/pidRemember/myTrain' ,
component : _import('pidRemember/myTrain') ,
name : 'myTrain'
path: '/pidRemember/sysTrain',
component: _import('pidRemember/sysTrain'),
name: 'sysTrain'
},
//活力大脑
{
path : '/activeBrain/index' ,
component : _import('activeBrain/index') ,
name : 'activeBrain' ,
{
path: '/pidRemember/myTrain',
component: _import('pidRemember/myTrain'),
name: 'myTrain'
},
//活力大脑
{
path: '/activeBrain/index',
component: _import('activeBrain/index'),
name: 'activeBrain',
},
{
path : '/activeBrain/numCode' ,
component : _import('activeBrain/numCode') ,
name : 'numCode'
path: '/activeBrain/numCode',
component: _import('activeBrain/numCode'),
name: 'numCode'
},
{
path : '/activeBrain/letterCode' ,
component : _import('activeBrain/letterCode') ,
name : 'letterCode'
path: '/activeBrain/letterCode',
component: _import('activeBrain/letterCode'),
name: 'letterCode'
},
{
path : '/activeBrain/heart' ,
component : _import('activeBrain/heart') ,
name : 'heart'
path: '/activeBrain/heart',
component: _import('activeBrain/heart'),
name: 'heart'
},
//结果
{
path : '/home/result' ,
component : _import('home/result') ,
name : 'result' ,
path: '/home/result',
component: _import('home/result'),
name: 'result',
},
//正向速算
{
path : '/forward/index' ,
component : _import('forward/index') ,
name : 'forwardIndex' ,
path: '/forward/index',
component: _import('forward/index'),
name: 'forwardIndex',
},
{
path : '/forward/forwardAnswer' ,
component : _import('forward/forwardAnswer') ,
name : 'forwardAnswer' ,
path: '/forward/forwardAnswer',
component: _import('forward/forwardAnswer'),
name: 'forwardAnswer',
},
{
path : '/forward/forwardResult' ,
component : _import('forward/forwardResult') ,
name : 'forwardResult' ,
path: '/forward/forwardResult',
component: _import('forward/forwardResult'),
name: 'forwardResult',
},
//逆向速算
{
path : '/reserve/index' ,
component : _import('reserve/index') ,
name : 'reserveIndex' ,
path: '/reserve/index',
component: _import('reserve/index'),
name: 'reserveIndex',
},
{
path : '/reserve/reserveAnswer' ,
component : _import('reserve/reserveAnswer') ,
name : 'reserveAnswer' ,
path: '/reserve/reserveAnswer',
component: _import('reserve/reserveAnswer'),
name: 'reserveAnswer',
},
{
path : '/reserve/reserveResult' ,
component : _import('reserve/reserveResult') ,
name : 'reserveResult' ,
path: '/reserve/reserveResult',
component: _import('reserve/reserveResult'),
name: 'reserveResult',
},
//快速阅读
{
path : '/fastReading/index' ,
component : _import('fastReading/index') ,
name : 'fastReadingIndex' ,
path: '/fastReading/index',
component: _import('fastReading/index'),
name: 'fastReadingIndex',
},
{
path : '/fastReading/readArticle' ,
component : _import('fastReading/readArticle') ,
name : 'fastReadingReadArticle' ,
path: '/fastReading/readArticle',
component: _import('fastReading/readArticle'),
name: 'fastReadingReadArticle',
},
{
path : '/fastReading/answerQuestion' ,
component : _import('fastReading/answerQuestion') ,
name : 'fastReadingAnswerQuestion' ,
path: '/fastReading/answerQuestion',
component: _import('fastReading/answerQuestion'),
name: 'fastReadingAnswerQuestion',
},
{
path : '/fastReading/readResult' ,
component : _import('fastReading/readResult') ,
name : 'readResult' ,
path: '/fastReading/readResult',
component: _import('fastReading/readResult'),
name: 'readResult',
},
//国学经典
{
path : '/studiesChina/preLearn' ,
component : _import('studiesChina/preLearn') ,
name : 'preLearn' ,
path: '/studiesChina/preLearn',
component: _import('studiesChina/preLearn'),
name: 'preLearn',
},
{
path : '/studiesChina/index' ,
component : _import('studiesChina/index') ,
name : 'studiesChinaIndex' ,
path: '/studiesChina/index',
component: _import('studiesChina/index'),
name: 'studiesChinaIndex',
},
{
path : '/studiesChina/answerStudies' ,
component : _import('studiesChina/answerStudies') ,
name : 'answerStudies' ,
path: '/studiesChina/answerStudies',
component: _import('studiesChina/answerStudies'),
name: 'answerStudies',
},
{
path : '/studiesChina/studiesResult' ,
component : _import('studiesChina/studiesResult') ,
name : 'studiesResult' ,
path: '/studiesChina/studiesResult',
component: _import('studiesChina/studiesResult'),
name: 'studiesResult',
},
]
},
{ path: '*', redirect: '/404' }
]
},
{path: '*', redirect: '/404'}
]
export default new Router({
routes: constantRouterMap,
mode: 'history'
routes: constantRouterMap,
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>
<div class="wrapper">
<div class="content" v-if="gameState === 'not'">
<div class="title">心有灵犀</div>
<div class="m-selector">
<div v-for="(item, index) in configList" :key="index" :index="index" :item="item">
<div
class="item"
:class="{active: (currentInfo.level === item.level)}"
@click="changLevel(item)"
>{{item.level_name}}</div>
<div class="wrapper">
<div class="content" v-if="gameState === 'not'">
<div class="title">心有灵犀</div>
<div class="m-selector">
<div v-for="(item, index) in configList" :key="index" :index="index" :item="item">
<div
class="item"
:class="{active: (currentInfo.level === item.level)}"
@click="changLevel(item)"
>{{item.level_name}}
</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="container" v-if="gameState === 'progress'">
<div class="title">心有灵犀</div>
<div class="box">
<div class="time">{{count_time}}s</div>
<div class="tab">{{tabList[tab_index].value || ''}}</div>
<div class="btn">
<el-button class="btn-ignore" @click="ignore">跳过</el-button>
<el-button type="primary" class="btn-start" @click="next">下一题</el-button>
</div>
<!-- <div class="btn" v-if="tab_index == this.tabList.length-1">
<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 class="container" v-if="gameState === 'progress'">
<div class="title">心有灵犀</div>
<div class="box">
<div class="time">{{count_time}}s</div>
<div class="tab">{{tabList[tab_index].value || ''}}</div>
<div class="btn">
<el-button class="btn-ignore" @click="ignore">跳过</el-button>
<el-button type="primary" class="btn-start" @click="next">正确（NEXT）</el-button>
</div>
<!-- <div class="btn" v-if="tab_index == this.tabList.length-1">
<el-button type="primary" class="btn-end" @click="end">结束本局</el-button>
</div> -->
</div>
</div>
<div class="data-item">
用时：
<span>{{result_info.time}}s</span>
<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 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 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>
</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";
import { guessWordListAPI } from "@/api/recreation";
import {guessWordListAPI} from "@/api/recreation";
export default new BaseCasePage({
data() {
return {
gameState: "not",
currentInfo: {
level: 1,
limit_remember_time: 300
},
configList: [
{
level: 1,
level_name: "五分钟",
limit_remember_time: 300
export default new BaseCasePage({
data() {
return {
gameState: "not",
currentInfo: {
level: 1,
limit_remember_time: 300
},
configList: [
{
level: 1,
level_name: "五分钟",
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
};
},
{
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: {
getList() {
guessWordListAPI().then(res => {
if (res.error == 0 && res.data) {
this.tabList = res.data;
} else {
this.tabList = [];
}
});
},
clearData() {
clearInterval(this.timer);
this.timer = null;
this.count_time = 300;
},
gameOver() {
this.$message({
type: "error",
content: "游戏结束!",
cb: () => {
this.end();
}
});
},
runCount() {
this.timer = setInterval(() => {
this.result_info.time++;
if (this.count_time > 0 && this.gameState === "progress") {
this.count_time = this.count_time - 1;
} else if (
this.$route.name === "heart" &&
this.gameState === "progress"
) {
this.clearData();
this.gameOver();
return;
} else {
this.clearData();
methods: {
getList() {
guessWordListAPI().then(res => {
if (res.error == 0 && res.data) {
this.tabList = res.data;
} else {
this.tabList = [];
}
});
},
clearData() {
clearInterval(this.timer);
this.timer = null;
this.count_time = 300;
},
gameOver() {
this.$message({
type: "error",
content: "游戏结束!",
cb: () => {
this.end();
}
});
},
runCount() {
this.timer = setInterval(() => {
this.result_info.time++;
if (this.count_time > 0 && this.gameState === "progress") {
this.count_time = this.count_time - 1;
} else if (
this.$route.name === "heart" &&
this.gameState === "progress"
) {
this.clearData();
this.gameOver();
return;
} else {
this.clearData();
}
}, 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--------------------");
}
}, 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>
<style scoped>
.content {
padding-top: 48px;
display: flex;
flex-direction: column;
align-items: center;
}
.container {
padding-top: 48px;
}
.title {
color: #1685ff;
text-align: center;
font-size: 34px;
font-weight: bold;
margin-bottom: 50px;
}
.box {
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;
}
.content {
padding-top: 48px;
display: flex;
flex-direction: column;
align-items: center;
}
.container {
padding-top: 48px;
}
.title {
color: #1685ff;
text-align: center;
font-size: 34px;
font-weight: bold;
margin-bottom: 50px;
}
.data-list {
margin-bottom: 120px;
}
.box {
position: relative;
}
.data-item {
text-align: center;
margin-top: 30px;
font-size: 26px;
color: #333;
}
.box .time {
position: absolute;
right: 40px;
top: 0;
color: #1685ff;
font-size: 28px;
}
.data-item span {
color: #1f72ff;
}
.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 {
margin-bottom: 120px;
}
.data-item {
text-align: center;
margin-top: 30px;
font-size: 26px;
color: #333;
}
.data-item span {
color: #1f72ff;
}
</style>
src/views/home/index.vue
......@@ -49,7 +49,7 @@
},
{
label: '记忆宫殿',
path: '/pidRemember/index'
path: '/pidRemember/index?id=11&model_id=10'
},
],
speed: [
......
src/views/pidRemember/index.vue
......@@ -2,12 +2,12 @@
<div class="content">
<div class="title">记忆宫殿</div>
<div class="box">
<div class="line" @click="start('sysTrain')">
<image class="icon" />
<div class="line" @click="start('sysTrainSelect')">
<img class="icon"/>
<span>平台记忆宫殿训练</span>
</div>
<div class="line sp" @click="start('myTrain')">
<image class="icon" />
<div class="line sp" @click="start('myTrain')">
<img class="icon"/>
<span>我的记忆宫殿</span>
</div>
</div>
......@@ -32,7 +32,7 @@
}
},
start(pathName) {
CaseUtil.goToTrain(`/pidRemember/${pathName}`,this);
CaseUtil.goToTrain(`/pidRemember/${pathName}`, this);
}
},
mounted() {
......@@ -56,7 +56,8 @@
font-weight: bold;
margin-bottom: 50px;
}
.box .line{
.box .line {
display: flex;
align-items: center;
justify-content: center;
......@@ -65,12 +66,14 @@
border-radius: 20px;
color: #fff;
font-size: 26px;
background: rgba(251,147,148,.8);
background: rgba(251, 147, 148, .8);
margin-top: 60px;
}
.box .line.sp {
background: rgba(90,161,253,.7);
background: rgba(90, 161, 253, .7);
}
.start {
margin-top: 60px;
width: 500px;
......
src/views/pidRemember/myTrain.vue
......@@ -204,7 +204,7 @@
}
.write-area > .item {
width:50%;
width: 50%;
display: flex;
align-items: center;
justify-content: center;
......
src/views/pidRemember/sysTrain.vue
<template>
<div class="content">
<div class="title">
{{
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 class="content">
<div class="title-01">
记忆宫殿训练
</div>
<div class="data-item">
正确数量：
<span>{{correct_num}}</span>
<div class="title">
{{
gameState==='not' ? '请记住图中地点桩位置及其顺序' : '请依次点击复位图中的地点桩'
}}
<div v-if="gameState === 'progress'" @click="next">结束训练</div>
</div>
</div>
<div class="btn">
<el-button type="primary" class="btn-ignore" @click="backHome">返回首页</el-button>
</div>
<div class="box" @click="handleClick">
<div class="dot-area" v-if="gameState === 'not'">
<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>
</template>
<script>
import BaseCasePage from "../../framework/core/baseCasePage";
import CaseUtil from "../../framework/service/base/caseUtil";
import BaseCasePage from "../../framework/core/baseCasePage";
export default new BaseCasePage({
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;
import {pics} from '../../utils/sysTrainData';
if (this.fillList.length === 10) {
this.gameOVer();
return;
}
this.fillList.push({
x: e.offsetX,
y: e.offsetY,
label: this.fillList.length + 1
});
this.tabList[this.fillList.length - 1].hit = true;
console.log(e)
let top = e.offsetY + "px";
let left = e.offsetX + "px";
let box = document.querySelector(".box");
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");
export default new BaseCasePage({
name: "index",
data() {
return {
tabSelectList: [],
tabIndex: 0,
dotData: {},
level: 0,
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.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;
box.appendChild(dot);
},
changLevel(level) {
if (level !== this.level) {
this.level = level;
}
},
updateGameState(state) {
this.gameState = state;
},
start() {
this.fillList = [];
this.updateGameState("progress");
}
},
mounted() {}
});
if (this.fillList.length === 10) {
this.next();
return;
}
this.fillList.push({
x: e.offsetX,
y: e.offsetY,
label: this.fillList.length + 1
});
this.tabList[this.fillList.length - 1].hit = true;
let top = e.offsetY + "px";
let left = e.offsetX + "px";
let box = document.querySelector(".box");
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");
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>
<style scoped>
.content {
padding-top: 80px;
}
.data-list {
margin-bottom: 60px;
display: flex;
justify-content: space-around;
}
.content {
padding-top: 8px;
}
.title-01 {
color: #333;
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 {
text-align: center;
margin-top: 30px;
font-size: 26px;
color: #333;
}
.box > p {
width: 20px;
height: 20px;
background: red;
border-radius: 50%;
position: absolute;
}
.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;
}
.box .img {
width: 100%;
height: 500px;
background: #666;
}
.title {
color: #333;
font-size: 30px;
padding: 0 20px;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
.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;
}
.start {
position: fixed;
left: 50%;
bottom: 40px;
width: 500px;
height: 80px;
transform: translateX(-50%);
border-radius: 40px;
font-size: 32px;
}
.btn {
display: flex;
align-items: center;
justify-content: center;
}
.btn-ignore {
width: 300px;
height: 80px;
}
.tab-area {
position: fixed;
left: 50%;
bottom: 160px;
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 {
display: flex;
align-items: center;
justify-content: center;
}
.btn-ignore {
width: 300px;
height: 80px;
}
</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!