From a9464202403068bd8f53338447382508fcf84fc7 Mon Sep 17 00:00:00 2001
From: imeepos <imeepos@outlook.com>
Date: Wed, 3 Sep 2025 17:57:16 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=A7=BB=E9=99=A4=E5=8A=A8=E6=80=81?=
 =?UTF-8?q?=E6=A0=87=E7=AD=BE=E5=B9=B6=E4=BF=AE=E5=A4=8D=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

� UI优化：
- 移除动态标签组件，简化界面设计
- 删除image-labels相关的JSX结构和CSS样式
- 移除label-left、label-right等标签样式定义
- 提供更简洁的图片对比体验

�️ 图片显示修复：
- 修复容器高度设置，使用固定height: 180px替代min/max-height
- 恢复object-fit: cover确保图片正确填充容器
- 修复图片无法显示的问题
- 确保aspectFit模式下图片正常渲染

� 样式优化：
- 简化image-wrapper布局，保持flexbox居中
- 移除不必要的标签相关CSS代码
- 优化容器尺寸控制，确保图片稳定显示
- 保持拖拽功能的完整性

✅ 预期效果：
- 图片正常显示，无变形
- 界面更简洁，无多余标签
- 拖拽分割线功能正常
- 左右对比效果清晰直观
---
 src/components/TemplateCard/index.css | 44 ++-------------------------
 src/components/TemplateCard/index.tsx | 16 +---------
 2 files changed, 4 insertions(+), 56 deletions(-)

diff --git a/src/components/TemplateCard/index.css b/src/components/TemplateCard/index.css
index 95dd6ff..9944be1 100644
--- a/src/components/TemplateCard/index.css
+++ b/src/components/TemplateCard/index.css
@@ -31,8 +31,7 @@
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  min-height: 180px;
-  max-height: 300px; /* 设置最大高度避免过高 */
+  height: 180px; /* 固定高度确保图片显示 */
   display: flex;
 }
 
@@ -54,49 +53,12 @@
 
 .comparison-image {
   width: 100%;
-  height: auto; /* 高度自适应，保持宽高比 */
-  max-height: 100%;
+  height: 100%;
+  object-fit: cover; /* 使用cover确保图片填满容器 */
   display: block;
 }
 
-/* 标签容器 */
-.image-labels {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  z-index: 2;
-}
 
-.label-left,
-.label-right {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 8px 4px;
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  transition: width 0.1s ease-out;
-  min-width: 40px; /* 确保标签有最小宽度 */
-}
-
-.label-left {
-  background: rgba(52, 152, 219, 0.9);
-  border-radius: 0 0 0 12px;
-}
-
-.label-right {
-  background: rgba(46, 204, 113, 0.9);
-  border-radius: 0 0 12px 0;
-}
-
-.label-text {
-  color: #fff;
-  font-size: 12px;
-  font-weight: 600;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
-}
 
 /* 可拖拽分割线 */
 .split-line {
diff --git a/src/components/TemplateCard/index.tsx b/src/components/TemplateCard/index.tsx
index d217961..79983be 100644
--- a/src/components/TemplateCard/index.tsx
+++ b/src/components/TemplateCard/index.tsx
@@ -116,21 +116,7 @@ export default function TemplateCard({ template, onClick }: TemplateCardProps) {
             </View>
           </View>
 
-          {/* 动态标签 */}
-          <View className='image-labels'>
-            <View
-              className='label-left input-label'
-              style={{ width: `${splitPosition}%` }}
-            >
-              <Text className='label-text'>原图</Text>
-            </View>
-            <View
-              className='label-right output-label'
-              style={{ width: `${100 - splitPosition}%` }}
-            >
-              <Text className='label-text'>效果</Text>
-            </View>
-          </View>
+
         </View>
       </View>