fix: 移除动态标签并修复图片显示问题

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

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

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

 预期效果:
- 图片正常显示,无变形
- 界面更简洁,无多余标签
- 拖拽分割线功能正常
- 左右对比效果清晰直观
This commit is contained in:
杨明明 2025-09-03 17:57:16 +08:00
parent be582a668a
commit a946420240
2 changed files with 4 additions and 56 deletions

View File

@ -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 {

View File

@ -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>