style(YourPuzzleComponent): 调整拼图组件样式

- 固定背景图片大小为 320x189 像素
- 将滑块元素从 div 改为 img,并直接使用 sliderImageUrl 作为 src
- 调整滑块垂直位置,移除多余的减去 2 像素
This commit is contained in:
xingyy 2025-03-11 19:55:54 +08:00
parent bfd60167fa
commit 7675d6687b

View File

@ -2,17 +2,17 @@
<div class="puzzle-container"> <div class="puzzle-container">
<div class="puzzle-box" :style="{ height: boxHeight + 'px' }"> <div class="puzzle-box" :style="{ height: boxHeight + 'px' }">
<!-- 背景图 --> <!-- 背景图 -->
<img :src="bgImageUrl" class="bg-image" ref="bgImage" @load="onImageLoad" @error="handleImageError"> <img :src="bgImageUrl" style="width: 320px;height: 189px;" ref="bgImage" @load="onImageLoad" @error="handleImageError">
<!-- 滑块 --> <!-- 滑块 -->
<div <img
class="slider-block" class="slider-block"
:src="sliderImageUrl"
:style="{ :style="{
backgroundImage: `url(${sliderImageUrl})`, top: `${blockY}px`,
top: `${blockY-2}px`,
left: `${moveX}px`, left: `${moveX}px`,
visibility: loaded ? 'visible' : 'hidden' visibility: loaded ? 'visible' : 'hidden'
}" }"
></div> ></img>
</div> </div>
<!-- 滑动条 --> <!-- 滑动条 -->