From 7675d6687b7d455efa11ca6f18625e1763645300 Mon Sep 17 00:00:00 2001
From: xingyy <64720302+Concur-max@users.noreply.github.com>
Date: Tue, 11 Mar 2025 19:55:54 +0800
Subject: [PATCH] =?UTF-8?q?style(YourPuzzleComponent):=20=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4=E6=8B=BC=E5=9B=BE=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 固定背景图片大小为 320x189 像素
- 将滑块元素从 div 改为 img，并直接使用 sliderImageUrl 作为 src
- 调整滑块垂直位置，移除多余的减去 2 像素
---
 app/components/YourPuzzleComponent.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/components/YourPuzzleComponent.vue b/app/components/YourPuzzleComponent.vue
index c1783ac..014f490 100644
--- a/app/components/YourPuzzleComponent.vue
+++ b/app/components/YourPuzzleComponent.vue
@@ -2,17 +2,17 @@
   <div class="puzzle-container">
     <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"
+        :src="sliderImageUrl"
         :style="{
-          backgroundImage: `url(${sliderImageUrl})`,
-          top: `${blockY-2}px`,
+          top: `${blockY}px`,
           left: `${moveX}px`,
           visibility: loaded ? 'visible' : 'hidden'
         }"
-      ></div>
+      ></img>
     </div>
     
     <!-- 滑动条 -->