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:55:59 +08:00
parent d03ef31503
commit 85819af9d2
1 changed files with 83 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

161
src/pages/GamePage.vue
View File

@ -1,59 +1,53 @@
<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>
{{ block.type }} </div>
</div> <!-- 随机选块 -->
</div> <div class="random-board">
<!-- 随机选块 --> <div
<div class="random-board"> v-for="(randomBlock, index) in randomBlocksVal"
<div :key="index"
v-for="(randomBlock, index) in randomBlocksVal" class="random-area"
:key="index" >
class="random-area" <div
> v-if="randomBlock.length > 0"
<div class="block"
v-if="randomBlock.length > 0" @click="(e) => doClickBlock(randomBlock[0], e, index)"
class="block" >{{ randomBlock[0].type }}</div>
@click="(e) => doClickBlock(randomBlock[0], e, index)" <div
> v-for="num in Math.max(randomBlock.length - 1, 0)"
{{ randomBlock[0].type }} :key="num"
</div> class="block disabled"
<div ></div>
v-for="num in Math.max(randomBlock.length - 1, 0)" </div>
:key="num" </div>
class="block disabled" <!-- 槽位 -->
></div> <div v-if="slotAreaVal.length > 0" class="slot-board">
</div> <div
</div> v-for="(slotBlock, index) in slotAreaVal"
<!-- 槽位 --> :key="index"
<div v-if="slotAreaVal.length > 0" class="slot-board"> class="block"
<div >{{ slotBlock?.type }}</div>
v-for="(slotBlock, index) in slotAreaVal" </div>
:key="index" </a-row>
class="block" </div>
>
{{ slotBlock?.type }}
</div>
</div>
</a-row>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -64,64 +58,75 @@ 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>
<style scoped> <style scoped>
.level-board { .level-board {
position: relative; position: relative;
} }
.level-block { .level-block {
position: absolute; position: absolute;
} }
.random-board { .random-board {
margin-top: 8px; margin-top: 8px;
} }
.random-area { .random-area {
margin-top: 8px; margin-top: 8px;
} }
.slot-board { .slot-board {
margin-top: 24px; margin-top: 24px;
border: 10px solid saddlebrown; border: 10px solid saddlebrown;
} }
.block { .block {
font-size: 28px; font-size: 28px;
width: 42px; width: 42px;
height: 42px; height: 42px;
line-height: 42px; line-height: 42px;
border: 1px solid #eee; border: 1px solid #eee;
background: white; background: white;
text-align: center; text-align: center;
vertical-align: top; vertical-align: top;
display: inline-block; display: inline-block;
cursor: pointer;
transition: all 0.1s;
} }
.block:hover {
transform: scale(1.05);
}
.disabled { .disabled {
background: grey; background: grey;
cursor: not-allowed; cursor: not-allowed;
}
.disabled:hover {
transform: scale(1);
} }
</style> </style>