style(YourPuzzleComponent): 调整拼图组件样式
- 固定背景图片大小为 320x189 像素 - 将滑块元素从 div 改为 img,并直接使用 sliderImageUrl 作为 src - 调整滑块垂直位置,移除多余的减去 2 像素
This commit is contained in:
parent
bfd60167fa
commit
7675d6687b
@ -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>
|
||||||
|
|
||||||
<!-- 滑动条 -->
|
<!-- 滑动条 -->
|
||||||
|
Loading…
Reference in New Issue
Block a user