<template>
<view class="wrap">
<view class="timeGame">
<text class="time">时间 {{ gameTime }}</text>
</view>
<view class="listWrap">
<view
:class="[
'listWraps',
sdNum == 4
? 'listWrapsFour'
: sdNum == 5
? 'listWrapsFive'
: sdNum == 6
? 'listWrapsSix'
: ''
]"
v-if="sdNum == 4 || sdNum == 5 || sdNum == 6"
>
<view
:class="[
'items',
item.active == 'on' ? 'on' : item.active == 'error' ? 'error' : '',
activeOn == index ? 'active' : ''
]"
v-for="(item, index) in rightListOld"
:key="index"
@click="chooseNum(item, index)"
>
{{ item.num }}
</view>
</view>
<view class="listWraps listWrapsFour" v-else>
<view class="items" v-for="(item, index) in 16" :key="index" />
</view>
<view class="numberWrap" v-if="sdNum == 4 || sdNum == 5 || sdNum == 6">
<view class="title">填入数字，保证每一行列的数字不重复</view>
<view class="number">
<text
class="item"
@click="fillIn(item, index)"
v-for="(item, index) in numberList"
:key="index"
>{{ item }}</text
>
</view>
</view>
<view class="'numberWrap numberWrapFour'" v-else>
<view class="title">填入数字，保证每一行列的数字不重复</view>
<view class="number">
<text class="item" v-for="(item, index) in numberList" :key="index">{{ item }}</text>
</view>
</view>
</view>
<view class="zhezhao" v-if="zhezhaoShow">
<text class="bg" />
<view class="zhezhaoWrap" v-if="chooseShow">
<view class="title">选择难度</view>
<view class="btnWrap">
<view class="btn" @click="chooseLevel(4)">
<img class="img" src="@/static/image/sdBtn.png" alt="" />
<text class="name">简 单</text>
</view>
<view class="btn" @click="chooseLevel(5)">
<img class="img" src="@/static/image/sdBtn.png" alt="" />
<text class="name">普 通</text>
</view>
<view class="btn" @click="chooseLevel(6)">
<img class="img" src="@/static/image/sdBtn.png" alt="" />
<text class="name">困 难</text>
</view>
</view>
</view>
<view class="startGame" v-else>
<view class="btnWrap">
<view class="btn" @click="startGameFun">
<img class="img" src="@/static/image/sdBtn.png" alt="" />
<text class="name">开始游戏</text>
</view>
</view>
</view>
</view>
<view
:class="['zhezhao zhezhaoState', zhezhaoShowState == true ? 'on' : '']"
class="zhezhao zhezhaoState"
v-if="zhezhaoShowState"
>
<text class="bg" />
<view class="zhezhaoStateWrap">
<view v-if="zhezhaoIsSuccess">
<view class="title">完成训练!</view>
<view class="consuming">
<text class="name">耗时</text>
<text class="time">{{ timeMin }}</text>
<text class="name mr24">分</text>
<text class="time">{{ timeSeconds }}</text>
<text class="name ml24">秒</text>
</view>
</view>
<view v-else class="title overTime">游戏超时自动结束</view>
<view class="btnWrap">
<view class="btn" @click="trainAgain(1)">
<img class="img" src="@/static/image/sdBtn.png" alt="" />
<text class="name">再次训练</text>
</view>
<view class="btn" @click="trainAgain(2)">
<img class="img" src="@/static/image/sdBtn.png" alt="" />
<text class="name">退出训练</text>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { onShow, onHide } from '@dcloudio/uni-app'
//选择难度
const zhezhaoShow = ref(true)
const chooseShow = ref(true)
const sdNum = ref(0)
const sdNumOld = ref(0)
const rightListOld = ref([])
const randomNum = ref(0)
// const answerList = ref([])
const rowList = ref([
{
question: [
[0, 0, 0, 0],
[0, 2, 3, 1],
[0, 3, 2, 4],
[2, 1, 0, 3]
],
answer: [
[3, 4, 1, 2],
[4, 2, 3, 1],
[1, 3, 2, 4],
[2, 1, 4, 3]
],
itemList: [
'1-1',
'1-2',
'1-3',
'1-4',
'2-1',
'2-2',
'2-3',
'2-4',
'3-1',
'3-2',
'3-3',
'3-4',
'4-1',
'4-2',
'4-3',
'4-4'
],
state: [
'false',
'false',
'false',
'false',
'false',
'true',
'true',
'true',
'false',
'true',
'true',
'true',
'true',
'true',
'false',
'true'
]
},
{
question: [
[2, 0, 0, 3],
[3, 0, 2, 1],
[0, 2, 3, 0],
[0, 0, 0, 2]
],
answer: [
[2, 1, 4, 3],
[3, 4, 2, 1],
[1, 2, 3, 4],
[4, 3, 1, 2]
],
itemList: [
'1-1',
'1-2',
'1-3',
'1-4',
'2-1',
'2-2',
'2-3',
'2-4',
'3-1',
'3-2',
'3-3',
'3-4',
'4-1',
'4-2',
'4-3',
'4-4'
],
state: [
'true',
'false',
'false',
'true',
'true',
'false',
'true',
'true',
'false',
'true',
'true',
'false',
'false',
'false',
'false',
'true'
]
},
{
question: [
[1, 0, 0, 0],
[4, 2, 3, 0],
[0, 4, 1, 0],
[3, 1, 0, 2]
],
answer: [
[1, 3, 2, 4],
[4, 2, 3, 1],
[2, 4, 1, 3],
[3, 1, 4, 2]
],
itemList: [
'1-1',
'1-2',
'1-3',
'1-4',
'2-1',
'2-2',
'2-3',
'2-4',
'3-1',
'3-2',
'3-3',
'3-4',
'4-1',
'4-2',
'4-3',
'4-4'
],
state: [
'true',
'false',
'false',
'false',
'true',
'true',
'true',
'false',
'false',
'true',
'true',
'false',
'true',
'true',
'false',
'true'
]
},
{
question: [
[3, 0, 1, 0],
[0, 1, 2, 0],
[2, 0, 3, 0],
[0, 3, 0, 2]
],
answer: [
[3, 2, 1, 4],
[4, 1, 2, 3],
[2, 4, 3, 1],
[1, 3, 4, 2]
],
itemList: [
'1-1',
'1-2',
'1-3',
'1-4',
'2-1',
'2-2',
'2-3',
'2-4',
'3-1',
'3-2',
'3-3',
'3-4',
'4-1',
'4-2',
'4-3',
'4-4'
],
state: [
'true',
'false',
'true',
'false',
'false',
'true',
'true',
'false',
'true',
'false',
'true',
'false',
'false',
'true',
'false',
'true'
]
},
{
question: [
[0, 0, 3, 0],
[0, 2, 0, 1],
[0, 3, 2, 4],
[0, 4, 1, 0]
],
answer: [
[4, 1, 3, 2],
[3, 2, 4, 1],
[1, 3, 2, 4],
[2, 4, 1, 3]
],
itemList: [
'1-1',
'1-2',
'1-3',
'1-4',
'2-1',
'2-2',
'2-3',
'2-4',
'3-1',
'3-2',
'3-3',
'3-4',
'4-1',
'4-2',
'4-3',
'4-4'
],
state: [
'false',
'false',
'true',
'false',
'false',
'true',
'false',
'true',
'false',
'true',
'true',
'true',
'false',
'true',
'true',
'false'
]
},
{
question: [
[0, 1, 4, 0],
[4, 2, 0, 1],
[0, 0, 0, 0],
[0, 4, 2, 3]
],
answer: [
[3, 1, 4, 2],
[4, 2, 3, 1],
[2, 3, 1, 4],
[1, 4, 2, 3]
],
itemList: [
'1-1',
'1-2',
'1-3',
'1-4',
'2-1',
'2-2',
'2-3',
'2-4',
'3-1',
'3-2',
'3-3',
'3-4',
'4-1',
'4-2',
'4-3',
'4-4'
],
state: [
'false',
'true',
'true',
'false',
'true',
'true',
'false',
'true',
'false',
'false',
'false',
'false',
'false',
'true',
'true',
'true'
]
},
{
question: [
[1, 0, 4, 0],
[0, 2, 0, 3],
[0, 1, 3, 4],
[0, 0, 0, 1]
],
answer: [
[1, 3, 4, 2],
[4, 2, 1, 3],
[2, 1, 3, 4],
[3, 4, 2, 1]
],
itemList: [
'1-1',
'1-2',
'1-3',
'1-4',
'2-1',
'2-2',
'2-3',
'2-4',
'3-1',
'3-2',
'3-3',
'3-4',
'4-1',
'4-2',
'4-3',
'4-4'
],
state: [
'true',
'false',
'true',
'false',
'false',
'true',
'false',
'true',
'false',
'true',
'true',
'true',
'false',
'false',
'false',
'true'
]
},
{
question: [
[0, 0, 0, 3],
[0, 3, 4, 2],
[0, 1, 0, 0],
[4, 0, 3, 1]
],
answer: [
[2, 4, 1, 3],
[1, 3, 4, 2],
[3, 1, 2, 4],
[4, 2, 3, 1]
],
itemList: [
'1-1',
'1-2',
'1-3',
'1-4',
'2-1',
'2-2',
'2-3',
'2-4',
'3-1',
'3-2',
'3-3',
'3-4',
'4-1',
'4-2',
'4-3',
'4-4'
],
state: [
'false',
'false',
'false',
'true',
'false',
'true',
'true',
'true',
'false',
'true',
'false',
'false',
'true',
'false',
'true',
'true'
]
},
{
question: [
[2, 4, 0, 0],
[0, 1, 2, 0],
[4, 0, 1, 0],
[0, 3, 4, 2]
],
answer: [
[2, 4, 3, 1],
[3, 1, 2, 4],
[4, 2, 1, 3],
[1, 3, 4, 2]
],
itemList: [
'1-1',
'1-2',
'1-3',
'1-4',
'2-1',
'2-2',
'2-3',
'2-4',
'3-1',
'3-2',
'3-3',
'3-4',
'4-1',
'4-2',
'4-3',
'4-4'
],
state: [
'true',
'true',
'false',
'false',
'false',
'true',
'true',
'false',
'true',
'false',
'true',
'false',
'false',
'true',
'true',
'true'
]
},
{
question: [
[1, 4, 2, 0],
[0, 3, 1, 0],
[0, 2, 0, 0],
[4, 0, 3, 0]
],
answer: [
[1, 4, 2, 3],
[2, 3, 1, 4],
[3, 2, 4, 1],
[4, 1, 3, 2]
],
itemList: [
'1-1',
'1-2',
'1-3',
'1-4',
'2-1',
'2-2',
'2-3',
'2-4',
'3-1',
'3-2',
'3-3',
'3-4',
'4-1',
'4-2',
'4-3',
'4-4'
],
state: [
'true',
'true',
'true',
'false',
'false',
'true',
'true',
'false',
'false',
'true',
'false',
'false',
'true',
'false',
'true',
'false'
]
}
])
const rowListFive = ref([
{
question: [
[0, 2, 3, 0, 1],
[4, 1, 0, 0, 3],
[0, 0, 4, 1, 0],
[1, 5, 0, 3, 4],
[3, 0, 1, 0, 2]
],
answer: [
[5, 2, 3, 4, 1],
[4, 1, 5, 2, 3],
[2, 3, 4, 1, 5],
[1, 5, 2, 3, 4],
[3, 4, 1, 5, 2]
],
itemList: [
'1-1',
'1-2',
'1-3',
'1-4',
'1-5',
'2-1',
'2-2',
'2-3',
'2-4',
'2-5',
'3-1',
'3-2',
'3-3',
'3-4',
'3-5',
'4-1',
'4-2',
'4-3',
'4-4',
'4-5',
'5-1',
'5-2',
'5-3',
'5-4',
'5-5'
],
state: [
'false',
'true',
'true',
'false',
'true',
'true',
'true',
'false',
'false',
'true',
'false',
'false',
'true',
'true',
'false',
'true',
'true',
'false',
'true',
'true',
'true',
'false',
'true',
'false',
'true'
]
},
{
question: [
[3, 5, 0, 2, 0],
[2, 1, 0, 0, 4],
[0, 4, 2, 0, 3],
[1, 0, 0, 4, 2],
[0, 2, 0, 3, 5]
],
answer: [
[3, 5, 4, 2, 1],
[2, 1, 3, 5, 4],
[5, 4, 2, 1, 3],
[1, 3, 5, 4, 2],
[4, 2, 1, 3, 5]
],
itemList: [
'1-1',
'1-2',
'1-3',
'1-4',
'1-5',
'2-1',
'2-2',
'2-3',
'2-4',
'2-5',
'3-1',
'3-2',
'3-3',
'3-4',
'3-5',
'4-1',
'4-2',
'4-3',
'4-4',
'4-5',
'5-1',
'5-2',
'5-3',
'5-4',
'5-5'
],
state: [
'true',
'true',
'false',
'true',
'false',
'true',
'true',
'false',
'false',
'true',
'false',
'true',
'true',
'false',
'true',
'true',
'false',
'false',
'true',
'true',
'false',
'true',
'false',
'true',
'true'
]
},
{
question: [
[0, 5, 0, 2, 3],
[2, 3, 0, 0, 1],
[5, 1, 2, 0, 0],
[3, 4, 0, 1, 2],
[0, 0, 3, 4, 0]
],
answer: [
[4, 5, 1, 2, 3],
[2, 3, 4, 5, 1],
[5, 1, 2, 3, 4],
[3, 4, 5, 1, 2],
[1, 2, 3, 4, 5]
],
itemList: [
'1-1',
'1-2',
'1-3',
'1-4',
'1-5',
'2-1',
'2-2',
'2-3',
'2-4',
'2-5',
'3-1',
'3-2',
'3-3',
'3-4',
'3-5',
'4-1',
'4-2',
'4-3',
'4-4',
'4-5',
'5-1',
'5-2',
'5-3',
'5-4',
'5-5'
],
state: [
'false',
'true',
'false',
'true',
'true',
'true',
'true',
'false',
'false',
'true',
'true',
'true',
'true',
'false',
'false',
'true',
'true',
'false',
'true',
'true',
'false',
'false',
'true',
'true',
'false'
]
},
{
question: [
[5, 0, 2, 3, 0],
[0, 1, 0, 4, 2],
[4, 0, 3, 0, 5],
[1, 0, 0, 2, 3],
[0, 3, 1, 0, 4]
],
answer: [
[5, 4, 2, 3, 1],
[3, 1, 5, 4, 2],
[4, 2, 3, 1, 5],
[1, 5, 4, 2, 3],
[2, 3, 1, 5, 4]
],
itemList: [
'1-1',
'1-2',
'1-3',
'1-4',
'1-5',
'2-1',
'2-2',
'2-3',
'2-4',
'2-5',
'3-1',
'3-2',
'3-3',
'3-4',
'3-5',
'4-1',
'4-2',
'4-3',
'4-4',
'4-5',
'5-1',
'5-2',
'5-3',
'5-4',
'5-5'
],
state: [
'true',
'false',
'true',
'true',
'false',
'false',
'true',
'false',
'true',
'true',
'true',
'false',
'true',
'false',
'true',
'true',
'false',
'false',
'true',
'true',
'false',
'true',
'true',
'false',
'true'
]
},
{
question: [
[0, 5, 4, 3, 1],
[0, 1, 0, 5, 4],
[5, 0, 3, 0, 2],
[1, 2, 0, 0, 0],
[4, 0, 1, 0, 5]
],
answer: [
[2, 5, 4, 3, 1],
[3, 1, 2, 5, 4],
[5, 4, 3, 1, 2],
[1, 2, 5, 4, 3],
[4, 3, 1, 2, 5]
],
itemList: [
'1-1',
'1-2',
'1-3',
'1-4',
'1-5',
'2-1',
'2-2',
'2-3',
'2-4',
'2-5',
'3-1',
'3-2',
'3-3',
'3-4',
'3-5',
'4-1',
'4-2',
'4-3',
'4-4',
'4-5',
'5-1',
'5-2',
'5-3',
'5-4',
'5-5'
],
state: [
'false',
'true',
'true',
'true',
'true',
'false',
'true',
'false',
'true',
'true',
'true',
'false',
'true',
'false',
'true',
'true',
'true',
'false',
'false',
'false',
'true',
'false',
'true',
'false',
'true'
]
},
{
question: [
[3, 0, 2, 0, 1],
[0, 1, 0, 5, 0],
[5, 0, 4, 0, 3],
[0, 3, 0, 2, 4],
[2, 0, 1, 3, 5]
],
answer: [
[3, 5, 2, 4, 1],
[4, 1, 3, 5, 2],
[5, 2, 4, 1, 3],
[1, 3, 5, 2, 4],
[2, 4, 1, 3, 5]
],
itemList: [
'1-1',
'1-2',
'1-3',
'1-4',
'1-5',
'2-1',
'2-2',
'2-3',
'2-4',
'2-5',
'3-1',
'3-2',
'3-3',
'3-4',
'3-5',
'4-1',
'4-2',
'4-3',
'4-4',
'4-5',
'5-1',
'5-2',
'5-3',
'5-4',
'5-5'
],
state: [
'true',
'false',
'true',
'false',
'true',
'false',
'true',
'false',
'true',
'false',
'true',
'false',
'true',
'false',
'true',
'false',
'true',
'false',
'true',
'true',
'true',
'false',
'true',
'true',
'true'
]
},
{
question: [
[4, 0, 2, 5, 1],
[0, 1, 0, 3, 0],
[3, 0, 5, 0, 4],
[0, 4, 0, 2, 5],
[2, 5, 0, 0, 3]
],
answer: [
[4, 3, 2, 5, 1],
[5, 1, 4, 3, 2],
[3, 2, 5, 1, 4],
[1, 4, 3, 2, 5],
[2, 5, 1, 4, 3]
],
itemList: [
'1-1',
'1-2',
'1-3',
'1-4',
'1-5',
'2-1',
'2-2',
'2-3',
'2-4',
'2-5',
'3-1',
'3-2',
'3-3',
'3-4',
'3-5',
'4-1',
'4-2',
'4-3',
'4-4',
'4-5',
'5-1',
'5-2',
'5-3',
'5-4',
'5-5'
],
state: [
'true',
'false',
'true',
'true',
'true',
'false',
'true',
'false',
'true',
'false',
'true',
'false',
'true',
'false',
'true',
'false',
'true',
'false',
'true',
'true',
'true',
'true',
'false',
'false',
'true'
]
},
{
question: [
[2, 0, 0, 5, 1],
[0, 1, 0, 4, 3],
[0, 0, 5, 1, 2],
[1, 2, 0, 0, 5],
[3, 5, 1, 0, 0]
],
answer: [
[2, 4, 3, 5, 1],
[5, 1, 2, 4, 3],
[4, 3, 5, 1, 2],
[1, 2, 4, 3, 5],
[3, 5, 1, 2, 4]
],
itemList: [
'1-1',
'1-2',
'1-3',
'1-4',
'1-5',
'2-1',
'2-2',
'2-3',
'2-4',
'2-5',
'3-1',
'3-2',
'3-3',
'3-4',
'3-5',
'4-1',
'4-2',
'4-3',
'4-4',
'4-5',
'5-1',
'5-2',
'5-3',
'5-4',
'5-5'
],
state: [
'true',
'false',
'false',
'true',
'true',
'false',
'true',
'false',
'true',
'true',
'false',
'false',
'true',
'true',
'true',
'true',
'true',
'false',
'false',
'true',
'true',
'true',
'true',
'false',
'false'
]
},
{
question: [
[3, 2, 4, 0, 0],
[0, 1, 3, 0, 4],
[0, 0, 5, 1, 3],
[0, 3, 0, 4, 5],
[4, 0, 1, 3, 0]
],
answer: [
[3, 2, 4, 5, 1],
[5, 1, 3, 2, 4],
[2, 4, 5, 1, 3],
[1, 3, 2, 4, 5],
[4, 5, 1, 3, 2]
],
itemList: [
'1-1',
'1-2',
'1-3',
'1-4',
'1-5',
'2-1',
'2-2',
'2-3',
'2-4',
'2-5',
'3-1',
'3-2',
'3-3',
'3-4',
'3-5',
'4-1',
'4-2',
'4-3',
'4-4',
'4-5',
'5-1',
'5-2',
'5-3',
'5-4',
'5-5'
],
state: [
'true',
'true',
'true',
'false',
'false',
'false',
'true',
'true',
'false',
'true',
'false',
'false',
'true',
'true',
'true',
'false',
'true',
'false',
'true',
'true',
'true',
'false',
'true',
'true',
'false'
]
},
{
question: [
[0, 1, 0, 4, 5],
[5, 0, 2, 1, 0],
[1, 5, 0, 0, 2],
[3, 0, 1, 0, 4],
[0, 3, 0, 2, 1]
],
answer: [
[2, 1, 3, 4, 5],
[5, 4, 2, 1, 3],
[1, 5, 4, 3, 2],
[3, 2, 1, 5, 4],
[4, 3, 5, 2, 1]
],
itemList: [
'1-1',
'1-2',
'1-3',
'1-4',
'1-5',
'2-1',
'2-2',
'2-3',
'2-4',
'2-5',
'3-1',
'3-2',
'3-3',
'3-4',
'3-5',
'4-1',
'4-2',
'4-3',
'4-4',
'4-5',
'5-1',
'5-2',
'5-3',
'5-4',
'5-5'
],
state: [
'false',
'true',
'false',
'true',
'true',
'true',
'false',
'true',
'true',
'false',
'true',
'true',
'false',
'false',
'true',
'true',
'false',
'true',
'false',
'true',
'false',
'true',
'false',
'true',
'true'
]
}
])
const rowListSix = ref([
{
question: [
[0, 5, 0, 2, 0, 6],
[2, 4, 6, 0, 0, 3],
[1, 2, 4, 0, 6, 5],
[5, 6, 0, 4, 2, 1],
[4, 0, 0, 6, 3, 2],
[6, 0, 2, 0, 1, 0]
],
answer: [
[3, 5, 1, 2, 4, 6],
[2, 4, 6, 1, 5, 3],
[1, 2, 4, 3, 6, 5],
[5, 6, 3, 4, 2, 1],
[4, 1, 5, 6, 3, 2],
[6, 3, 2, 5, 1, 4]
],
itemList: [
'1-1',
'1-2',
'1-3',
'1-4',
'1-5',
'1-6',
'2-1',
'2-2',
'2-3',
'2-4',
'2-5',
'2-6',
'3-1',
'3-2',
'3-3',
'3-4',
'3-5',
'3-6',
'4-1',
'4-2',
'4-3',
'4-4',
'4-5',
'4-6',
'5-1',
'5-2',
'5-3',
'5-4',
'5-5',
'5-6',
'6-1',
'6-2',
'6-3',
'6-4',
'6-5',
'6-6'
],
state: [
'false',
'true',
'false',
'true',
'false',
'true',
'true',
'true',
'true',
'false',
'false',
'true',
'true',
'true',
'true',
'false',
'true',
'true',
'true',
'true',
'false',
'true',
'true',
'true',
'true',
'false',
'false',
'true',
'true',
'true',
'true',
'false',
'true',
'false',
'true',
'false'
]
},
{
question: [
[1, 3, 0, 2, 5, 6],
[0, 6, 0, 3, 0, 4],
[0, 5, 6, 1, 0, 2],
[3, 0, 2, 4, 6, 0],
[5, 0, 1, 0, 4, 0],
[6, 4, 3, 0, 2, 1]
],
answer: [
[1, 3, 4, 2, 5, 6],
[2, 6, 5, 3, 1, 4],
[4, 5, 6, 1, 3, 2],
[3, 1, 2, 4, 6, 5],
[5, 2, 1, 6, 4, 3],
[6, 4, 3, 5, 2, 1]
],
itemList: [
'1-1',
'1-2',
'1-3',
'1-4',
'1-5',
'1-6',
'2-1',
'2-2',
'2-3',
'2-4',
'2-5',
'2-6',
'3-1',
'3-2',
'3-3',
'3-4',
'3-5',
'3-6',
'4-1',
'4-2',
'4-3',
'4-4',
'4-5',
'4-6',
'5-1',
'5-2',
'5-3',
'5-4',
'5-5',
'5-6',
'6-1',
'6-2',
'6-3',
'6-4',
'6-5',
'6-6'
],
state: [
'true',
'true',
'false',
'true',
'true',
'true',
'false',
'true',
'false',
'true',
'false',
'true',
'false',
'true',
'true',
'true',
'false',
'true',
'true',
'false',
'true',
'true',
'true',
'false',
'true',
'false',
'true',
'false',
'true',
'false',
'true',
'true',
'true',
'false',
'true',
'true'
]
},
{
question: [
[5, 6, 0, 2, 3, 4],
[2, 0, 3, 0, 0, 5],
[0, 0, 2, 5, 4, 6],
[4, 5, 6, 1, 0, 0],
[3, 0, 0, 4, 0, 2],
[6, 2, 4, 0, 5, 1]
],
answer: [
[5, 6, 1, 2, 3, 4],
[2, 4, 3, 6, 1, 5],
[1, 3, 2, 5, 4, 6],
[4, 5, 6, 1, 2, 3],
[3, 1, 5, 4, 6, 2],
[6, 2, 4, 3, 5, 1]
],
itemList: [
'1-1',
'1-2',
'1-3',
'1-4',
'1-5',
'1-6',
'2-1',
'2-2',
'2-3',
'2-4',
'2-5',
'2-6',
'3-1',
'3-2',
'3-3',
'3-4',
'3-5',
'3-6',
'4-1',
'4-2',
'4-3',
'4-4',
'4-5',
'4-6',
'5-1',
'5-2',
'5-3',
'5-4',
'5-5',
'5-6',
'6-1',
'6-2',
'6-3',
'6-4',
'6-5',
'6-6'
],
state: [
'true',
'true',
'false',
'true',
'true',
'true',
'true',
'false',
'true',
'false',
'false',
'true',
'false',
'false',
'true',
'true',
'true',
'true',
'true',
'true',
'true',
'true',
'false',
'false',
'true',
'false',
'false',
'true',
'false',
'true',
'true',
'true',
'true',
'false',
'true',
'true'
]
},
{
question: [
[0, 0, 1, 0, 2, 5],
[0, 4, 5, 3, 1, 6],
[5, 2, 6, 0, 0, 3],
[1, 0, 0, 6, 5, 2],
[4, 5, 3, 2, 6, 0],
[6, 1, 0, 5, 0, 0]
],
answer: [
[3, 6, 1, 4, 2, 5],
[2, 4, 5, 3, 1, 6],
[5, 2, 6, 1, 4, 3],
[1, 3, 4, 6, 5, 2],
[4, 5, 3, 2, 6, 1],
[6, 1, 2, 5, 3, 4]
],
itemList: [
'1-1',
'1-2',
'1-3',
'1-4',
'1-5',
'1-6',
'2-1',
'2-2',
'2-3',
'2-4',
'2-5',
'2-6',
'3-1',
'3-2',
'3-3',
'3-4',
'3-5',
'3-6',
'4-1',
'4-2',
'4-3',
'4-4',
'4-5',
'4-6',
'5-1',
'5-2',
'5-3',
'5-4',
'5-5',
'5-6',
'6-1',
'6-2',
'6-3',
'6-4',
'6-5',
'6-6'
],
state: [
'false',
'false',
'true',
'false',
'true',
'true',
'false',
'true',
'true',
'true',
'true',
'true',
'true',
'true',
'true',
'false',
'false',
'true',
'true',
'false',
'false',
'true',
'true',
'true',
'true',
'true',
'true',
'true',
'true',
'false',
'true',
'true',
'false',
'true',
'false',
'false'
]
},
{
question: [
[0, 6, 4, 0, 5, 3],
[0, 3, 2, 4, 6, 1],
[3, 5, 6, 0, 0, 0],
[0, 0, 0, 5, 3, 6],
[4, 2, 3, 6, 1, 0],
[6, 1, 0, 3, 4, 0]
],
answer: [
[1, 6, 4, 2, 5, 3],
[5, 3, 2, 4, 6, 1],
[3, 5, 6, 1, 2, 4],
[2, 4, 1, 5, 3, 6],
[4, 2, 3, 6, 1, 5],
[6, 1, 5, 3, 4, 2]
],
itemList: [
'1-1',
'1-2',
'1-3',
'1-4',
'1-5',
'1-6',
'2-1',
'2-2',
'2-3',
'2-4',
'2-5',
'2-6',
'3-1',
'3-2',
'3-3',
'3-4',
'3-5',
'3-6',
'4-1',
'4-2',
'4-3',
'4-4',
'4-5',
'4-6',
'5-1',
'5-2',
'5-3',
'5-4',
'5-5',
'5-6',
'6-1',
'6-2',
'6-3',
'6-4',
'6-5',
'6-6'
],
state: [
'false',
'true',
'true',
'false',
'true',
'true',
'false',
'true',
'true',
'true',
'true',
'true',
'true',
'true',
'true',
'false',
'false',
'false',
'false',
'false',
'false',
'true',
'true',
'true',
'true',
'true',
'true',
'true',
'true',
'false',
'true',
'true',
'false',
'true',
'true',
'false'
]
},
{
question: [
[0, 5, 2, 1, 0, 6],
[3, 6, 1, 0, 5, 2],
[1, 4, 6, 0, 0, 0],
[0, 0, 0, 6, 1, 4],
[5, 1, 0, 2, 6, 3],
[6, 0, 3, 5, 4, 0]
],
answer: [
[4, 5, 2, 1, 3, 6],
[3, 6, 1, 4, 5, 2],
[1, 4, 6, 3, 2, 5],
[2, 3, 5, 6, 1, 4],
[5, 1, 4, 2, 6, 3],
[6, 2, 3, 5, 4, 1]
],
itemList: [
'1-1',
'1-2',
'1-3',
'1-4',
'1-5',
'1-6',
'2-1',
'2-2',
'2-3',
'2-4',
'2-5',
'2-6',
'3-1',
'3-2',
'3-3',
'3-4',
'3-5',
'3-6',
'4-1',
'4-2',
'4-3',
'4-4',
'4-5',
'4-6',
'5-1',
'5-2',
'5-3',
'5-4',
'5-5',
'5-6',
'6-1',
'6-2',
'6-3',
'6-4',
'6-5',
'6-6'
],
state: [
'false',
'true',
'true',
'true',
'false',
'true',
'true',
'true',
'true',
'false',
'true',
'true',
'true',
'true',
'true',
'false',
'false',
'false',
'false',
'false',
'false',
'true',
'true',
'true',
'true',
'true',
'false',
'true',
'true',
'true',
'true',
'false',
'true',
'true',
'true',
'false'
]
},
{
question: [
[4, 0, 1, 3, 0, 6],
[0, 5, 0, 1, 0, 2],
[1, 4, 0, 2, 3, 5],
[2, 3, 5, 0, 1, 4],
[3, 0, 4, 0, 2, 0],
[5, 0, 2, 4, 0, 3]
],
answer: [
[4, 2, 1, 3, 5, 6],
[6, 5, 3, 1, 4, 2],
[1, 4, 6, 2, 3, 5],
[2, 3, 5, 6, 1, 4],
[3, 6, 4, 5, 2, 1],
[5, 1, 2, 4, 6, 3]
],
itemList: [
'1-1',
'1-2',
'1-3',
'1-4',
'1-5',
'1-6',
'2-1',
'2-2',
'2-3',
'2-4',
'2-5',
'2-6',
'3-1',
'3-2',
'3-3',
'3-4',
'3-5',
'3-6',
'4-1',
'4-2',
'4-3',
'4-4',
'4-5',
'4-6',
'5-1',
'5-2',
'5-3',
'5-4',
'5-5',
'5-6',
'6-1',
'6-2',
'6-3',
'6-4',
'6-5',
'6-6'
],
state: [
'true',
'false',
'true',
'true',
'false',
'true',
'false',
'true',
'false',
'true',
'false',
'true',
'true',
'true',
'false',
'true',
'true',
'true',
'true',
'true',
'true',
'false',
'true',
'true',
'true',
'false',
'true',
'false',
'true',
'false',
'true',
'false',
'true',
'true',
'false',
'true'
]
},
{
question: [
[0, 0, 0, 3, 2, 0],
[3, 2, 0, 6, 1, 5],
[2, 4, 1, 5, 3, 0],
[0, 6, 3, 1, 4, 2],
[4, 1, 5, 0, 6, 3],
[0, 3, 2, 0, 0, 0]
],
answer: [
[1, 5, 6, 3, 2, 4],
[3, 2, 4, 6, 1, 5],
[2, 4, 1, 5, 3, 6],
[5, 6, 3, 1, 4, 2],
[4, 1, 5, 2, 6, 3],
[6, 3, 2, 4, 5, 1]
],
itemList: [
'1-1',
'1-2',
'1-3',
'1-4',
'1-5',
'1-6',
'2-1',
'2-2',
'2-3',
'2-4',
'2-5',
'2-6',
'3-1',
'3-2',
'3-3',
'3-4',
'3-5',
'3-6',
'4-1',
'4-2',
'4-3',
'4-4',
'4-5',
'4-6',
'5-1',
'5-2',
'5-3',
'5-4',
'5-5',
'5-6',
'6-1',
'6-2',
'6-3',
'6-4',
'6-5',
'6-6'
],
state: [
'false',
'false',
'false',
'true',
'true',
'false',
'true',
'true',
'false',
'true',
'true',
'true',
'true',
'true',
'true',
'true',
'true',
'false',
'false',
'true',
'true',
'true',
'true',
'true',
'true',
'true',
'true',
'false',
'true',
'true',
'false',
'true',
'true',
'false',
'false',
'false'
]
},
{
question: [
[3, 4, 1, 6, 0, 5],
[0, 0, 0, 0, 3, 4],
[4, 3, 0, 2, 6, 1],
[1, 2, 6, 0, 4, 3],
[2, 1, 0, 0, 0, 0],
[6, 0, 4, 3, 1, 2]
],
answer: [
[3, 4, 1, 6, 2, 5],
[5, 6, 2, 1, 3, 4],
[4, 3, 5, 2, 6, 1],
[1, 2, 6, 5, 4, 3],
[2, 1, 3, 4, 5, 6],
[6, 5, 4, 3, 1, 2]
],
itemList: [
'1-1',
'1-2',
'1-3',
'1-4',
'1-5',
'1-6',
'2-1',
'2-2',
'2-3',
'2-4',
'2-5',
'2-6',
'3-1',
'3-2',
'3-3',
'3-4',
'3-5',
'3-6',
'4-1',
'4-2',
'4-3',
'4-4',
'4-5',
'4-6',
'5-1',
'5-2',
'5-3',
'5-4',
'5-5',
'5-6',
'6-1',
'6-2',
'6-3',
'6-4',
'6-5',
'6-6'
],
state: [
'true',
'true',
'true',
'true',
'false',
'true',
'false',
'false',
'false',
'false',
'true',
'true',
'true',
'true',
'false',
'true',
'true',
'true',
'true',
'true',
'true',
'false',
'true',
'true',
'true',
'true',
'false',
'false',
'false',
'false',
'true',
'false',
'true',
'true',
'true',
'true'
]
},
{
question: [
[1, 0, 3, 4, 0, 6],
[4, 6, 0, 1, 5, 3],
[5, 1, 6, 0, 0, 0],
[0, 0, 0, 6, 1, 5],
[3, 4, 1, 0, 6, 2],
[6, 0, 5, 3, 0, 1]
],
answer: [
[1, 5, 3, 4, 2, 6],
[4, 6, 2, 1, 5, 3],
[5, 1, 6, 2, 3, 4],
[2, 3, 4, 6, 1, 5],
[3, 4, 1, 5, 6, 2],
[6, 2, 5, 3, 4, 1]
],
itemList: [
'1-1',
'1-2',
'1-3',
'1-4',
'1-5',
'1-6',
'2-1',
'2-2',
'2-3',
'2-4',
'2-5',
'2-6',
'3-1',
'3-2',
'3-3',
'3-4',
'3-5',
'3-6',
'4-1',
'4-2',
'4-3',
'4-4',
'4-5',
'4-6',
'5-1',
'5-2',
'5-3',
'5-4',
'5-5',
'5-6',
'6-1',
'6-2',
'6-3',
'6-4',
'6-5',
'6-6'
],
state: [
'true',
'false',
'true',
'true',
'false',
'true',
'true',
'true',
'false',
'true',
'true',
'true',
'true',
'true',
'true',
'false',
'false',
'false',
'false',
'false',
'false',
'true',
'true',
'true',
'true',
'true',
'true',
'false',
'true',
'true',
'true',
'false',
'true',
'true',
'false',
'true'
]
}
])
// 开始计时
const timmer = ref(null)
const gameTime = ref('00:00')
const startTime = ref(0)
const stopTime = ref(0)
const activeOn = ref(null)
const activeColumn = ref(null)
const activePerform = ref(null)
const numberList = ref([])
const zhezhaoShowState = ref(false)
// const zhezhaoShowState = ref(true)
const zhezhaoIsSuccess = ref(true)
const timeMin = ref('00')
const timeSeconds = ref('00')
onShow(() => {
zhezhaoShow.value = true
chooseShow.value = true
sdNum.value = 0
sdNumOld.value = 0
rightListOld.value = []
// answerList.value = []
timmer.value = null
gameTime.value = '00 : 00'
activeOn.value = null
activeColumn.value = null
activePerform.value = null
zhezhaoShowState.value = false
zhezhaoIsSuccess.value = true
timeMin.value = '00'
timeSeconds.value = '00'
startTime.value = 0
stopTime.value = 0
numberList.value = [1, 2, 3, 4]
})
onHide(() => {
clearInterval(timmer.value)
timmer.value = null
})
const playVideo = (str) => {
const maps = {
point: '/static/video/point.mp3',
empty: '/static/video/empty.mp3',
success: '/static/video/success.mp3'
}
let innerAudioContext = uni.createInnerAudioContext()
innerAudioContext.autoplay = true
innerAudioContext.src = maps[str]
innerAudioContext.onPlay(() => {
console.log('开始播放')
})
innerAudioContext.onEnded(() => {
console.log('开始播放')
innerAudioContext.destroy()
innerAudioContext = null
})
}
const chooseLevel = (num) => {
chooseShow.value = false
sdNumOld.value = num
}
const startGameFun = () => {
zhezhaoShow.value = false
sdNum.value = sdNumOld.value
if (sdNum.value == 4) {
numberList.value = [1, 2, 3, 4]
} else if (sdNum.value == 5) {
numberList.value = [1, 2, 3, 4, 5]
} else {
numberList.value = [1, 2, 3, 4, 5, 6]
}
generateShuDu()
}
const generateShuDu = () => {
const num = Math.floor(Math.random() * 10)
let rightListNew = []
let answerListOld = []
let itemList = []
let stateList = []
randomNum.value = num
if (sdNum.value == 4) {
rightListNew = rowList.value[randomNum.value].question
console.log(rowList.value[randomNum.value].answer)
answerListOld = rowList.value[randomNum.value].answer
itemList = rowList.value[randomNum.value].itemList
stateList = rowList.value[randomNum.value].state
} else if (sdNum.value == 5) {
rightListNew = rowListFive.value[randomNum.value].question
answerListOld = rowListFive.value[randomNum.value].answer
itemList = rowListFive.value[randomNum.value].itemList
stateList = rowListFive.value[randomNum.value].state
} else {
rightListNew = rowListSix.value[randomNum.value].question
answerListOld = rowListSix.value[randomNum.value].answer
itemList = rowListSix.value[randomNum.value].itemList
stateList = rowListSix.value[randomNum.value].state
}
//生成数独
const dataList = []
for (let i = 0; i < rightListNew.length; i++) {
for (let j = 0; j < rightListNew[i].length; j++) {
const obj = {}
if (rightListNew[i][j] == 0) {
rightListNew[i][j] = ''
}
obj.num = rightListNew[i][j]
obj.isNum = answerListOld[i][j]
dataList.push(obj)
}
}
console.log(666)
console.log(answerListOld)
console.log(itemList)
for (let i = 0; i < itemList.length; i++) {
dataList[i].perform = itemList[i].split('-')[0]
dataList[i].column = itemList[i].split('-')[1]
dataList[i].active = ''
}
for (let i = 0; i < stateList.length; i++) {
dataList[i].state = stateList[i]
}
console.log(dataList)
console.log(2222)
console.log(rightListNew)
// answerList.value = answerListOld
rightListOld.value = dataList
startFun()
}
// 计时开始
const startFun = () => {
clearInterval(timmer.value)
startTime.value = new Date().getTime()
// 开始之后 时间超过一个小时 就停止了 需要重新玩
stopTime.value = 60 * 60 * 24 * 1000 + 1000
// stopTime.value = 3 * 1000 + 1000 //测试 10s 超时
timmer.value = setInterval(() => {
const newDateTime = new Date().getTime() - startTime.value
if (newDateTime >= stopTime.value) {
clearInterval(timmer.value)
zhezhaoShowState.value = true
zhezhaoIsSuccess.value = false
console.log('游戏超时自动结束')
} else {
gameTime.value = transformTime(newDateTime)
}
}, 1000)
}
const transformTime = (date) => {
var datetime = ''
//计算出小时数
var leave1 = date % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
//计算相差分钟数
var leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数
var minutes =
Math.floor(leave2 / (60 * 1000)) < 10
? '0' + Math.floor(leave2 / (60 * 1000))
: Math.floor(leave2 / (60 * 1000))
//计算相差秒数
var leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
var seconds =
Math.round(leave3 / 1000) < 10 ? '0' + Math.round(leave3 / 1000) : Math.round(leave3 / 1000)
datetime = minutes + ' : ' + seconds
timeMin.value = minutes
timeSeconds.value = seconds
return datetime
}
const chooseNum = (item, index) => {
if (item.state == 'false') {
console.log(item)
activeOn.value = index
activeColumn.value = item.column
activePerform.value = item.perform
// console.log(answerList.value)
console.log(rightListOld.value)
for (let i = 0; i < rightListOld.value.length; i++) {
if (
item.column == rightListOld.value[i].column ||
item.perform == rightListOld.value[i].perform
) {
rightListOld.value[i].active = 'on'
} else {
rightListOld.value[i].active = ''
}
}
}
}
const fillIn = (item) => {
// console.log(activeOn.value)
// console.log(33)
// console.log(item)
// console.log(rightListOld.value)
if (rightListOld.value[activeOn.value] && rightListOld.value[activeOn.value].num) {
console.log('已经有值，说明填写正确了')
} else {
if (activeOn.value != null) {
console.log(99)
console.log(rightListOld.value[activeOn.value].isNum)
if (item == rightListOld.value[activeOn.value].isNum) {
console.log('填写正确')
rightListOld.value[activeOn.value].num = item
rightListOld.value[activeOn.value].active = 'on'
let isFill = false
for (let i = 0; i < rightListOld.value.length; i++) {
if (rightListOld.value[i].num == '') {
isFill = true
}
}
if (isFill == true) {
playVideo('point')
} else {
playVideo('success')
clearInterval(timmer.value)
setTimeout(() => {
zhezhaoShowState.value = true
zhezhaoIsSuccess.value = true
}, 2000)
}
console.log(777)
console.log(isFill)
activeOn.value = null
} else {
playVideo('empty')
rightListOld.value[activeOn.value].active = 'error'
}
}
}
}
const trainAgain = (num) => {
if (num == 1) {
zhezhaoShow.value = true
chooseShow.value = true
sdNum.value = 0
sdNumOld.value = 0
rightListOld.value = []
// answerList.value = []
timmer.value = null
gameTime.value = '00 : 00'
activeOn.value = null
activeColumn.value = null
activePerform.value = null
zhezhaoShowState.value = false
zhezhaoIsSuccess.value = true
timeMin.value = '00'
timeSeconds.value = '00'
startTime.value = 0
stopTime.value = 0
numberList.value = [1, 2, 3, 4]
} else {
console.log('退出训练')
}
}
</script>
<style lang="scss">
@keyframes rotate {
from {
transform: scale(0);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
@keyframes rotateTwo {
0% {
transform: scale(0.9);
}
50% {
transform: scale(1);
}
100% {
transform: scale(0.9);
}
}
.wrap {
position: relative;
height: 100vh;
background: #f0eadc;
.timeGame {
font-weight: 700;
color: #431f00;
text-align: center;
.time {
display: inline-block;
margin: 62rpx 0;
}
}
.listWrap {
.listWraps {
display: flex;
flex-wrap: wrap;
width: 665rpx;
margin: 0 auto;
font-size: 0;
text-align: left;
border: 6rpx solid #431f00;
.items {
font-size: 76rpx;
font-weight: 700;
text-align: center;
background: #fdf9f1;
border-top: 1rpx solid #9a8468;
border-right: 1rpx solid #927b5f;
&.on {
background: #f2ead4;
}
&.active {
background: #f8e9c8 !important;
}
&.error {
background: #ffbebe !important;
}
}
&.listWrapsFour {
.items {
width: 164rpx;
height: 164rpx;
line-height: 164rpx;
&:nth-child(4n + 4) {
width: calc(100% - 492rpx);
border-right: 0;
}
&:nth-child(1),
&:nth-child(2),
&:nth-child(3),
&:nth-child(4) {
border-top: 0;
}
}
}
&.listWrapsFive {
.items {
width: 131.2rpx;
height: 131.2rpx;
line-height: 131.2rpx;
&:nth-child(5n + 5) {
width: calc(100% - 524.8rpx);
border-right: 0;
}
&:nth-child(1),
&:nth-child(2),
&:nth-child(3),
&:nth-child(4),
&:nth-child(5) {
border-top: 0;
}
}
}
&.listWrapsSix {
.items {
width: 109.3rpx;
height: 109.3rpx;
line-height: 109.3rpx;
&:nth-child(6n + 6) {
width: calc(100% - 546.5rpx);
border-right: 0;
}
&:nth-child(1),
&:nth-child(2),
&:nth-child(3),
&:nth-child(4),
&:nth-child(5),
&:nth-child(6) {
border-top: 0;
}
}
}
}
.numberWrap {
margin-top: 86rpx;
font-size: 36rpx;
font-weight: 700;
color: #431f00;
text-align: center;
.number {
display: flex;
width: 670rpx;
margin: 22rpx auto 0;
font-size: 0;
background: #fdf9f1;
border: 4rpx solid #431f00;
border-radius: 16rpx;
.item {
flex: 1;
font-size: 76rpx;
font-weight: 700;
line-height: 164rpx;
text-align: center;
}
}
}
}
.zhezhao {
position: relative;
width: 100%;
height: 100vh;
.bg {
position: fixed;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100vh;
background: rgb(0 0 0 / 50%);
}
.zhezhaoWrap {
position: fixed;
top: 280rpx;
left: 116rpx;
z-index: 1;
width: calc(100% - 232rpx);
font-size: 48rpx;
color: #fff;
text-align: center;
.btnWrap {
margin-top: 128rpx;
.btn {
position: relative;
height: 142rpx;
margin-top: 50rpx;
line-height: 122rpx;
text-align: center;
animation: rotateTwo 1s infinite;
&:nth-child(1) {
margin-top: 0;
}
.img {
position: absolute;
top: 0;
left: 0;
z-index: 0;
width: 100%;
height: 100%;
}
.name {
position: relative;
z-index: 1;
}
}
}
}
.startGame {
position: fixed;
bottom: 300rpx;
left: 116rpx;
z-index: 1;
width: calc(100% - 232rpx);
font-size: 48rpx;
color: #fff;
text-align: center;
.btnWrap {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
.btn {
position: relative;
height: 142rpx;
margin-top: 50rpx;
line-height: 122rpx;
text-align: center;
animation: rotateTwo 1s infinite;
&:nth-child(1) {
margin-top: 0;
}
.img {
position: absolute;
top: 0;
left: 0;
z-index: 0;
width: 100%;
height: 100%;
}
.name {
position: relative;
z-index: 1;
}
}
}
}
&.zhezhaoState {
position: fixed;
top: 0;
left: 0;
.bg {
background: rgb(0 0 0 / 70%);
}
.zhezhaoStateWrap {
position: fixed;
top: 184rpx;
left: 0;
z-index: 1;
width: 100%;
font-size: 64rpx;
color: #fff;
text-align: center;
.overTime {
margin: 220rpx auto 344rpx;
}
.consuming {
margin-top: 112rpx;
font-size: 48rpx;
.name {
&.mr24 {
margin-right: 24rpx;
}
&.ml24 {
margin-left: 24rpx;
}
}
.time {
font-size: 200rpx;
}
}
.btnWrap {
width: calc(100% - 232rpx);
margin: 128rpx auto 0;
.btn {
position: relative;
height: 142rpx;
margin-top: 50rpx;
line-height: 110rpx;
text-align: center;
animation: rotateTwo 1s infinite;
&:nth-child(1) {
margin-top: 0;
}
.img {
position: absolute;
top: 0;
left: 0;
z-index: 0;
width: 100%;
height: 100%;
}
.name {
position: relative;
z-index: 1;
font-size: 48rpx;
}
}
}
}
&.on {
animation: rotate 0.3s linear;
}
}
}
}
</style>