JianMiau/sheep
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化了鼠标经过图标的用户体验

Browse Source
This commit is contained in:
lin 2022-09-16 19:59:17 +08:00
parent 85819af9d2
commit 7c39b8156f
1 changed files with 61 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
src/pages/GamePage.vue
View File

@ -1,53 +1,59 @@
<template> <template>
<div id="gamePage"> <div id="gamePage">
<a-button @click="doBack">⬅️ 返回</a-button> <a-button @click="doBack"> ⬅️ 返回</a-button>
<a-row align="center"> <a-row align="center">
<!-- 分层选块 --> <!-- 分层选块 -->
<div class="level-board"> <div class="level-board">
<div <div
v-for="(block, idx) in levelBlocksVal" v-for="(block, idx) in levelBlocksVal"
v-show="gameStatus > 0" v-show="gameStatus > 0"
:key="idx" :key="idx"
class="block level-block" class="block level-block"
:class="{ disabled: block.lowerThanBlocks.length > 0 }" :class="{ disabled: block.lowerThanBlocks.length > 0 }"
:data-id="block.id" :data-id="block.id"
:style="{ :style="{
zIndex: 100 + block.level, zIndex: 100 + block.level,
left: block.x * widthUnit + 'px', left: block.x * widthUnit + 'px',
top: block.y * heightUnit + 'px', top: block.y * heightUnit + 'px',
}" }"
@click="(e) => doClickBlock(block, e)" @click="(e) => doClickBlock(block, e)"
>{{ block.type }}</div> >
</div> {{ block.type }}
<!-- 随机选块 --> </div>
<div class="random-board"> </div>
<div <!-- 随机选块 -->
v-for="(randomBlock, index) in randomBlocksVal" <div class="random-board">
:key="index" <div
class="random-area" v-for="(randomBlock, index) in randomBlocksVal"
> :key="index"
<div class="random-area"
v-if="randomBlock.length > 0" >
class="block" <div
@click="(e) => doClickBlock(randomBlock[0], e, index)" v-if="randomBlock.length > 0"
>{{ randomBlock[0].type }}</div> class="block"
<div @click="(e) => doClickBlock(randomBlock[0], e, index)"
v-for="num in Math.max(randomBlock.length - 1, 0)" >
:key="num" {{ randomBlock[0].type }}
class="block disabled" </div>
></div> <div
</div> v-for="num in Math.max(randomBlock.length - 1, 0)"
</div> :key="num"
<!-- 槽位 --> class="block disabled"
<div v-if="slotAreaVal.length > 0" class="slot-board"> ></div>
<div </div>
v-for="(slotBlock, index) in slotAreaVal" </div>
:key="index" <!-- 槽位 -->
class="block" <div v-if="slotAreaVal.length > 0" class="slot-board">
>{{ slotBlock?.type }}</div> <div
</div> v-for="(slotBlock, index) in slotAreaVal"
</a-row> :key="index"
</div> class="block"
>
{{ slotBlock?.type }}
</div>
</div>
</a-row>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -58,25 +64,25 @@ import { useRouter } from "vue-router";
const router = useRouter(); const router = useRouter();
const { const {
gameStatus, gameStatus,
levelBlocksVal, levelBlocksVal,
randomBlocksVal, randomBlocksVal,
slotAreaVal, slotAreaVal,
widthUnit, widthUnit,
heightUnit, heightUnit,
doClickBlock, doClickBlock,
doStart, doStart,
} = useGame(); } = useGame();
/** /**
* 回上一页 * 回上一页
*/ */
const doBack = () => { const doBack = () => {
router.back(); router.back();
}; };
onMounted(() => { onMounted(() => {
doStart(); doStart();
}); });
</script> </script>