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>
<div id="gamePage">
<a-button @click="doBack"> ⬅️ 返回</a-button>
<a-row align="center">
<!-- 分层选块 -->
<div class="level-board">
<div
v-for="(block, idx) in levelBlocksVal"
v-show="gameStatus > 0"
:key="idx"
class="block level-block"
:class="{ disabled: block.lowerThanBlocks.length > 0 }"
:data-id="block.id"
:style="{
<div id="gamePage">
<a-button @click="doBack">⬅️ 返回</a-button>
<a-row align="center">
<!-- 分层选块 -->
<div class="level-board">
<div
v-for="(block, idx) in levelBlocksVal"
v-show="gameStatus > 0"
:key="idx"
class="block level-block"
:class="{ disabled: block.lowerThanBlocks.length > 0 }"
:data-id="block.id"
:style="{
zIndex: 100 + block.level,
left: block.x * widthUnit + 'px',
top: block.y * heightUnit + 'px',
}"
@click="(e) => doClickBlock(block, e)"
>
{{ block.type }}
</div>
</div>
<!-- 随机选块 -->
<div class="random-board">
<div
v-for="(randomBlock, index) in randomBlocksVal"
:key="index"
class="random-area"
>
<div
v-if="randomBlock.length > 0"
class="block"
@click="(e) => doClickBlock(randomBlock[0], e, index)"
>
{{ randomBlock[0].type }}
</div>
<div
v-for="num in Math.max(randomBlock.length - 1, 0)"
:key="num"
class="block disabled"
></div>
</div>
</div>
<!-- 槽位 -->
<div v-if="slotAreaVal.length > 0" class="slot-board">
<div
v-for="(slotBlock, index) in slotAreaVal"
:key="index"
class="block"
>
{{ slotBlock?.type }}
</div>
</div>
</a-row>
</div>
@click="(e) => doClickBlock(block, e)"
>{{ block.type }}</div>
</div>
<!-- 随机选块 -->
<div class="random-board">
<div
v-for="(randomBlock, index) in randomBlocksVal"
:key="index"
class="random-area"
>
<div
v-if="randomBlock.length > 0"
class="block"
@click="(e) => doClickBlock(randomBlock[0], e, index)"
>{{ randomBlock[0].type }}</div>
<div
v-for="num in Math.max(randomBlock.length - 1, 0)"
:key="num"
class="block disabled"
></div>
</div>
</div>
<!-- 槽位 -->
<div v-if="slotAreaVal.length > 0" class="slot-board">
<div
v-for="(slotBlock, index) in slotAreaVal"
:key="index"
class="block"
>{{ slotBlock?.type }}</div>
</div>
</a-row>
</div>
</template>
<script setup lang="ts">
@ -64,64 +58,75 @@ import { useRouter } from "vue-router";
const router = useRouter();
const {
gameStatus,
levelBlocksVal,
randomBlocksVal,
slotAreaVal,
widthUnit,
heightUnit,
doClickBlock,
doStart,
gameStatus,
levelBlocksVal,
randomBlocksVal,
slotAreaVal,
widthUnit,
heightUnit,
doClickBlock,
doStart,
} = useGame();
/**
* 回上一页
*/
const doBack = () => {
router.back();
router.back();
};
onMounted(() => {
doStart();
doStart();
});
</script>
<style scoped>
.level-board {
position: relative;
position: relative;
}
.level-block {
position: absolute;
position: absolute;
}
.random-board {
margin-top: 8px;
margin-top: 8px;
}
.random-area {
margin-top: 8px;
margin-top: 8px;
}
.slot-board {
margin-top: 24px;
border: 10px solid saddlebrown;
margin-top: 24px;
border: 10px solid saddlebrown;
}
.block {
font-size: 28px;
width: 42px;
height: 42px;
line-height: 42px;
border: 1px solid #eee;
background: white;
text-align: center;
vertical-align: top;
display: inline-block;
font-size: 28px;
width: 42px;
height: 42px;
line-height: 42px;
border: 1px solid #eee;
background: white;
text-align: center;
vertical-align: top;
display: inline-block;
cursor: pointer;
transition: all 0.1s;
}
.block:hover {
transform: scale(1.05);
}
.disabled {
background: grey;
cursor: not-allowed;
background: grey;
cursor: not-allowed;
}
.disabled:hover {
transform: scale(1);
}
</style>