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

This commit is contained in:
lin 2022-09-16 19:55:59 +08:00
parent d03ef31503
commit 85819af9d2

View File

@ -17,9 +17,7 @@
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 class="random-board">
@ -32,9 +30,7 @@
v-if="randomBlock.length > 0" v-if="randomBlock.length > 0"
class="block" class="block"
@click="(e) => doClickBlock(randomBlock[0], e, index)" @click="(e) => doClickBlock(randomBlock[0], e, index)"
> >{{ randomBlock[0].type }}</div>
{{ randomBlock[0].type }}
</div>
<div <div
v-for="num in Math.max(randomBlock.length - 1, 0)" v-for="num in Math.max(randomBlock.length - 1, 0)"
:key="num" :key="num"
@ -48,9 +44,7 @@
v-for="(slotBlock, index) in slotAreaVal" v-for="(slotBlock, index) in slotAreaVal"
:key="index" :key="index"
class="block" class="block"
> >{{ slotBlock?.type }}</div>
{{ slotBlock?.type }}
</div>
</div> </div>
</a-row> </a-row>
</div> </div>
@ -118,10 +112,21 @@ onMounted(() => {
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>