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) { - {/* 动态标签 */} - - - 原图 - - - 效果 - - +