Skip to content

yangchao / brains-h5

Go to a project
Commit 90108fa1 by yuhac
Options

update

1 parent 58896321
Inline Side-by-side
Showing with 982 additions and 12 deletions
package-lock.json
This diff could not be displayed because it is too large.
src/components/Message/index.js
......@@ -4,25 +4,26 @@ import Message from './index.vue'
const messageBox = Vue.extend(Message)
Message.install = function (options) {
if(options === undefined || options === null){
if (options === undefined || options === null) {
options = {
title : '标题' ,
content : '弹窗内容'
title: '标题',
content: '弹窗内容',
}
}else if(typeof options === 'string' || typeof options === 'number'){
} else if (typeof options === 'string' || typeof options === 'number') {
options = {
title : options.title ,
content : options.content
title: options.title,
content: options.content,
cb: options.cb
}
}
let instance = new messageBox({
data : options
data: options
}).$mount()
document.body.appendChild(instance.$el)
Vue.nextTick(()=>{
Vue.nextTick(() => {
instance.visible = true;
})
}
......
src/components/Message/index.vue
......@@ -6,7 +6,7 @@
<div class="weui-dialog__hd">{{ title }}</div>
<div class="weui-dialog__bd">{{ content }}</div>
<div class="weui-dialog__ft">
<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary" @click="visible=false">确定</a>
<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary" @click="confirm">确定</a>
</div>
</div>
</div>
......@@ -19,7 +19,14 @@
return{
visible : true ,
content : '' ,
title : ''
title : '',
cb:null
}
},
methods:{
confirm(){
this.visible=false;
this.cb && this.cb();
}
}
}
......
src/router/index.js
......@@ -95,6 +95,43 @@ const constantRouterMap = [
component : _import('pi/answerPi') ,
name : 'answerPi' ,
},
//记忆宫殿
{
path : '/pidRemember/index' ,
component : _import('pidRemember/index') ,
name : 'pidRemember' ,
},
{
path : '/pidRemember/sysTrain' ,
component : _import('pidRemember/sysTrain') ,
name : 'sysTrain'
},
{
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/letterCode' ,
component : _import('activeBrain/letterCode') ,
name : 'letterCode'
},
{
path : '/activeBrain/heart' ,
component : _import('activeBrain/heart') ,
name : 'heart'
},
//结果
{
path : '/home/result' ,
......
src/views/activeBrain/heart.vue 0 → 100644
<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: (currentLevel === item.level)}"
@click="changLevel(item)"
>{{item.level_name}}</div>
</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]}}</div>
<div class="btn" v-if="tab_index != this.tabList.length-1">
<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>{{1}}</span>
</div>
<div class="data-item">
正确数量：
<span>{{1}}</span>
</div>
<div class="data-item">
正确率：
<span>{{0}}%</span>
</div>
<div class="data-item">
用时：
<span>{{0}}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>
</template>
<script>
import BaseCasePage from "../../framework/core/baseCasePage";
import CaseUtil from "../../framework/service/base/caseUtil";
export default new BaseCasePage({
data() {
return {
gameState: "not",
currentLevel: 1,
configList: [
{
level: 1,
level_name: "五分钟",
limit_remember_time: 300
},
{
level: 2,
level_name: "十分钟",
limit_remember_time: 600
}
],
tabList: ["五湖四海", "天南地北", "称心如意", "得心应手", "无懈可击"],
tab_index: 0,
count_time: 300,
timer: null
};
},
methods: {
runCount() {
this.timer = setInterval(() => {
console.log(this.count_time)
if ((this.count_time > 0 && this.gameState === 'progress')) {
this.count_time = this.count_time - 1;
} else {
clearInterval(this.timer);
this.timer = null;
this.count_time = 0;
this.$message({
type: "error",
content: "游戏结束!",
cb:()=>{
this.updateGameState("end");
}
});
return;
}
}, 1000);
},
jump(path, query = {}) {
this.$router.push({
path,
query
});
},
changLevel(item) {
this.currentLevel = item.level;
this.count_time = item.limit_remember_time;
},
updateGameState(state) {
this.gameState = state;
},
updateTabIndex() {
if (this.tab_index >= this.tabList.length - 1) {
this.$message({
type: "error",
content: "到底啦!"
});
return;
}
this.tab_index++;
},
start(){
this.updateGameState('progress');
this.runCount();
},
next() {
this.updateTabIndex();
},
ignore() {
this.updateTabIndex();
},
end() {
this.updateGameState("end");
},
backHome() {
this.jump("/");
},
again() {
this.jump("/activeBrain/heart");
}
},
mounted() {
}
});
</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;
}
.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/activeBrain/index.vue 0 → 100644
<template>
<div class="content">
<div class="title">活力大脑</div>
<div class="box">
<div class="line" @click="start('numCode')">
<image class="icon" />
<span>数字代码</span>
</div>
<div class="line up" @click="start('letterCode')">
<image class="icon" />
<span>字母代码</span>
</div>
<div class="line ub" @click="start('heart')">
<image class="icon" />
<span>心有灵犀</span>
</div>
</div>
</div>
</template>
<script>
import BaseCasePage from "../../framework/core/baseCasePage";
import CaseUtil from "../../framework/service/base/caseUtil";
export default new BaseCasePage({
name: "index",
data() {
return {
level: 0,
}
},
methods: {
changLevel(level) {
if (level !== this.level) {
this.level = level;
}
},
start(pathName) {
CaseUtil.goToTrain(`/activeBrain/${pathName}`,this);
}
},
mounted() {
}
})
</script>
<style scoped>
.content {
display: flex;
flex-direction: column;
padding-top: 48px;
align-items: center;
}
.title {
color: #1685ff;
font-size: 34px;
font-weight: bold;
margin-bottom: 50px;
}
.box .line{
display: flex;
align-items: center;
justify-content: center;
width: 320px;
height: 100px;
border-radius: 20px;
color: #fff;
font-size: 26px;
background: rgba(251,147,148,.8);
margin-top: 60px;
}
.box .line.up {
background: rgba(90,161,253,.7);
}
.box .line.ub {
background: rgba(35,35,35,.9);
}
.start {
margin-top: 60px;
width: 500px;
height: 80px;
border-radius: 40px;
font-size: 32px;
}
</style>
src/views/activeBrain/letterCode.vue 0 → 100644
<template>
<div class="content">
<div class="list">
<div class="item" v-for="(item,index) in list" :key="index">
<div class="box">
<img class="img" />
<div class="info">
<p class="title">{{item.name}}</p>
<p class="text">{{item.d1}}</p>
<p class="text">{{item.d2}}</p>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import BaseCasePage from "../../framework/core/baseCasePage";
import CaseUtil from "../../framework/service/base/caseUtil";
export default new BaseCasePage({
data() {
return {
list: [
{
name: "a",
d1: "静：笔",
d2: "动：用毛笔在...上面"
},
{
name: "b",
d1: "静：笔",
d2: "动：用毛笔在...上面"
},
{
name: "c",
d1: "静：笔",
d2: "动：用毛笔在...上面"
},
{
name: "d",
d1: "静：笔",
d2: "动：用毛笔在...上面"
},
{
name: "e",
d1: "静：笔",
d2: "动：用毛笔在...上面"
},
{
name: "f",
d1: "静：笔",
d2: "动：用毛笔在...上面"
}
]
};
},
methods: {},
mounted() {}
});
</script>
<style scoped>
.list {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: flex-start;
}
.list .item {
width: 50%;
padding: 16px;
}
.list .box .img {
display: block;
width: 100%;
height: 230px;
background: #333;
border-radius: 20px;
}
.list .box .info {
margin-top: 24px;
width: 100%;
height: 200px;
border-radius: 20px;
background: rgb(225,238,255);
border: 2px solid rgb(146,169,198);
color: rgb(45,48,55);
font-size: 26px;
padding: 20px;
}
.list .box .info .title {
font-size: 34px;
text-align: center;
font-weight: bold;
}
.list .box .info .text {
margin-top: 20px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.box .line {
display: flex;
align-items: center;
justify-content: center;
width: 320px;
height: 100px;
border-radius: 20px;
color: #fff;
font-size: 26px;
background: rgba(251, 147, 148, 0.8);
margin-top: 60px;
}
.box .line.sp {
background: rgba(90, 161, 253, 0.7);
}
.start {
margin-top: 60px;
width: 500px;
height: 80px;
border-radius: 40px;
font-size: 32px;
}
</style>
src/views/activeBrain/numCode.vue 0 → 100644
<template>
<div class="content">
<div class="list">
<div class="item" v-for="(item,index) in list" :key="index">
<div class="box">
<img class="img" />
<div class="info">
<p class="title">{{item.name}}</p>
<p class="text">{{item.d1}}</p>
<p class="text">{{item.d2}}</p>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import BaseCasePage from "../../framework/core/baseCasePage";
import CaseUtil from "../../framework/service/base/caseUtil";
export default new BaseCasePage({
data() {
return {
list: [
{
name: "1",
d1: "静：连衣裙",
d2: "动：用裙摆扫一扫用摆扫一扫"
},
{
name: "1",
d1: "静：连衣裙",
d2: "动：用裙摆扫一扫用摆扫一扫"
},
{
name: "1",
d1: "静：连衣裙",
d2: "动：用裙摆扫一扫用摆扫一扫"
},
{
name: "1",
d1: "静：连衣裙",
d2: "动：用裙摆扫一扫用摆扫一扫"
},
{
name: "1",
d1: "静：连衣裙",
d2: "动：用裙摆扫一扫用摆扫一扫"
},
{
name: "1",
d1: "静：连衣裙",
d2: "动：用裙摆扫一扫用摆扫一扫"
}
]
};
},
methods: {},
mounted() {}
});
</script>
<style scoped>
.list {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: flex-start;
}
.list .item {
width: 50%;
padding: 16px;
}
.list .box .img {
display: block;
width: 100%;
height: 230px;
background: #333;
border-radius: 20px;
}
.list .box .info {
margin-top: 24px;
width: 100%;
height: 200px;
border-radius: 20px;
background: rgb(225,238,255);
border: 2px solid rgb(146,169,198);
color: rgb(45,48,55);
font-size: 26px;
padding: 20px;
}
.list .box .info .title {
font-size: 34px;
text-align: center;
font-weight: bold;
}
.list .box .info .text {
margin-top: 20px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.box .line {
display: flex;
align-items: center;
justify-content: center;
width: 320px;
height: 100px;
border-radius: 20px;
color: #fff;
font-size: 26px;
background: rgba(251, 147, 148, 0.8);
margin-top: 60px;
}
.box .line.sp {
background: rgba(90, 161, 253, 0.7);
}
.start {
margin-top: 60px;
width: 500px;
height: 80px;
border-radius: 40px;
font-size: 32px;
}
</style>
src/views/home/index.vue
......@@ -45,11 +45,11 @@
},
{
label: '活力大脑',
path: '/randomLetter/index'
path: '/activeBrain/index'
},
{
label: '记忆宫殿',
path: '/pi/index'
path: '/pidRemember/index'
},
],
speed: [
......
src/views/pidRemember/index.vue 0 → 100644
<template>
<div class="content">
<div class="title">记忆宫殿</div>
<div class="box">
<div class="line" @click="start('sysTrain')">
<image class="icon" />
<span>平台记忆宫殿训练</span>
</div>
<div class="line sp" @click="start('myTrain')">
<image class="icon" />
<span>我的记忆宫殿</span>
</div>
</div>
</div>
</template>
<script>
import BaseCasePage from "../../framework/core/baseCasePage";
import CaseUtil from "../../framework/service/base/caseUtil";
export default new BaseCasePage({
name: "index",
data() {
return {
level: 0,
}
},
methods: {
changLevel(level) {
if (level !== this.level) {
this.level = level;
}
},
start(pathName) {
CaseUtil.goToTrain(`/pidRemember/${pathName}`,this);
}
},
mounted() {
}
})
</script>
<style scoped>
.content {
display: flex;
flex-direction: column;
padding-top: 48px;
align-items: center;
}
.title {
color: #1685ff;
font-size: 34px;
font-weight: bold;
margin-bottom: 50px;
}
.box .line{
display: flex;
align-items: center;
justify-content: center;
width: 320px;
height: 100px;
border-radius: 20px;
color: #fff;
font-size: 26px;
background: rgba(251,147,148,.8);
margin-top: 60px;
}
.box .line.sp {
background: rgba(90,161,253,.7);
}
.start {
margin-top: 60px;
width: 500px;
height: 80px;
border-radius: 40px;
font-size: 32px;
}
</style>
src/views/pidRemember/myTrain.vue 0 → 100644
<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>
</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">{{index + 1}}:</span>
<input type="text" class="input" :value="item" />
</div>
</div>
</div>
</div>
</template>
<script>
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(() => "");
}
});
</script>
<style scoped>
.content {
padding-top: 80px;
}
.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;
}
.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 {
font-size: 36px;
}
.write-area > .item .input {
border: 0;
outline: none;
border-bottom: 1px solid rgb(58, 58, 58);
}
</style>
src/views/pidRemember/sysTrain.vue 0 → 100644
<template>
<div class="content">
<div class="title">
{{
!startState ? '请记住图中地点桩位置及其顺序' : '请依次点击复位图中的地点桩'
}}
<div v-if="startState">结束训练</div>
</div>
<div class="box">
<image class="img" />
</div>
<div class="tab-area" v-if="startState">
<div :class="item.hit && 'active'" v-for="(item,index) in tabList" :key="index">{{item.value}}</div>
</div>
<el-button v-if="!startState" type="primary" class="start" @click="start">记忆完成</el-button>
</div>
</template>
<script>
import BaseCasePage from "../../framework/core/baseCasePage";
import CaseUtil from "../../framework/service/base/caseUtil";
export default new BaseCasePage({
name: "index",
data() {
return {
level: 0,
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 }
],
startState: false
};
},
methods: {
changLevel(level) {
if (level !== this.level) {
this.level = level;
}
},
start() {
this.startState = true;
}
},
mounted() {}
});
</script>
<style scoped>
.content {
padding-top: 80px;
}
.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 {
height: 580px;
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;
}
</style>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!