From e37e7334cd2bdb5b41492d0916b556cd9042dc37 Mon Sep 17 00:00:00 2001 From: imeepos Date: Wed, 3 Sep 2025 17:30:32 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=9E=E7=8E=B0=E5=B7=A6=E5=8F=B3?= =?UTF-8?q?=E5=AF=B9=E6=AF=94=E6=95=88=E6=9E=9C=EF=BC=8C=E5=8E=9F=E5=9B=BE?= =?UTF-8?q?=E5=92=8C=E6=95=88=E6=9E=9C=E5=9B=BE=E5=90=84=E5=8D=A0=E4=B8=80?= =?UTF-8?q?=E5=8D=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 重新设计图片对比区域，实现左右分屏布局 - 原图展示在左半边，效果图展示在右半边，各占50%宽度 - 添加中央分割线和圆形交互手柄，带有左右箭头图标 - 标签位置调整到图片底部中央，使用毛玻璃效果 - 统一图片高度180px，确保视觉平衡和完美对比 - 保持圆角设计和阴影效果，提升视觉体验 - 更新设计预览文档，记录左右对比的实现细节 --- DESIGN_PREVIEW.md | 23 +++++----- src/components/TemplateCard/index.css | 64 ++++++++++++++++++--------- src/components/TemplateCard/index.tsx | 50 +++++++++++---------- 3 files changed, 83 insertions(+), 54 deletions(-) diff --git a/DESIGN_PREVIEW.md b/DESIGN_PREVIEW.md index 1495075..59253e0 100644 --- a/DESIGN_PREVIEW.md +++ b/DESIGN_PREVIEW.md @@ -1,8 +1,8 @@ -# Home页面瀑布流设计预览 +# Home页面瀑布流设计预览 - 左右对比版本 ## 设计概述 -我已经成功美化了home页面，实现了瀑布流布局来展示模板数据的对比效果。以下是主要的设计改进： +我已经成功美化了home页面，实现了瀑布流布局和左右对比效果来展示模板数据。以下是主要的设计改进： ## 🎨 设计特色 @@ -11,11 +11,12 @@ - **响应式设计**：在更大屏幕上自动调整为3列 - **自适应高度**：每个卡片根据内容自动调整高度 -### 2. 图片对比效果 -- **原图 → 效果图**：清晰展示处理前后的对比 -- **视觉箭头**：使用箭头图标突出转换过程 -- **标签标识**：原图和效果图都有清晰的标签标识 -- **圆角设计**：所有图片都采用圆角设计，更加现代 +### 2. 左右对比效果 ⭐ **最新更新** +- **左右分屏**：原图展示左半边，效果图展示右半边，各占50%宽度 +- **视觉分割线**：中间添加优雅的白色分割线，带有圆形交互手柄 +- **标签标识**：底部居中显示标签，原图蓝色，效果图绿色 +- **毛玻璃效果**：标签使用backdrop-filter实现现代毛玻璃效果 +- **完美对比**：统一高度180px，确保视觉平衡和对比效果 ### 3. 卡片设计 - **渐变背景**：图片区域使用渐变背景增加层次感 @@ -37,10 +38,10 @@ Home页面 │ └── 副标题："选择模板，一键生成精美效果" └── 瀑布流网格 └── 模板卡片 × 6 - ├── 图片对比区域 - │ ├── 原图（带"原图"标签） - │ ├── 箭头指示 - │ └── 效果图（带"效果"标签） + ├── 左右对比区域 ⭐ **新设计** + │ ├── 左半边：原图（底部蓝色"原图"标签） + │ ├── 中央分割线：白色线条 + 圆形手柄（⟷图标） + │ └── 右半边：效果图（底部绿色"效果"标签） └── 信息区域 ├── 模板名称 ├── 功能描述 diff --git a/src/components/TemplateCard/index.css b/src/components/TemplateCard/index.css index 1e36bea..f0f97a8 100644 --- a/src/components/TemplateCard/index.css +++ b/src/components/TemplateCard/index.css @@ -20,32 +20,39 @@ box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15); } -/* 图片对比区域 */ +/* 左右对比区域 */ .image-comparison { position: relative; padding: 16px; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); } -.image-container { +.split-container { position: relative; + display: flex; border-radius: 12px; overflow: hidden; - margin-bottom: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + height: 180px; } -.input-container { - margin-bottom: 8px; +.image-half { + position: relative; + flex: 1; + overflow: hidden; } -.output-container { - margin-bottom: 0; +.left-half { + border-right: 1px solid rgba(255, 255, 255, 0.3); +} + +.right-half { + border-left: 1px solid rgba(255, 255, 255, 0.3); } .comparison-image { width: 100%; - height: 120px; + height: 100%; object-fit: cover; display: block; background: #f5f5f5; @@ -58,12 +65,14 @@ .image-label { position: absolute; - top: 8px; - left: 8px; - padding: 4px 8px; - border-radius: 12px; + bottom: 8px; + left: 50%; + transform: translateX(-50%); + padding: 4px 12px; + border-radius: 16px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); + white-space: nowrap; } .input-label { @@ -76,16 +85,31 @@ .label-text { color: #fff; - font-size: 11px; + font-size: 12px; font-weight: 600; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } -.comparison-arrow { +/* 分割线和拖拽手柄 */ +.split-line { + position: absolute; + left: 50%; + top: 16px; + bottom: 16px; + width: 2px; + background: linear-gradient(to bottom, + rgba(255, 255, 255, 0.8) 0%, + rgba(255, 255, 255, 0.9) 50%, + rgba(255, 255, 255, 0.8) 100%); + transform: translateX(-50%); + z-index: 3; +} + +.split-handle { position: absolute; - right: 16px; top: 50%; - transform: translateY(-50%); + left: 50%; + transform: translate(-50%, -50%); width: 32px; height: 32px; background: rgba(255, 255, 255, 0.95); @@ -93,12 +117,12 @@ display: flex; align-items: center; justify-content: center; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); - z-index: 2; + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15); + border: 2px solid rgba(0, 122, 255, 0.2); } -.arrow-icon { - font-size: 16px; +.split-icon { + font-size: 14px; color: #007AFF; font-weight: bold; } diff --git a/src/components/TemplateCard/index.tsx b/src/components/TemplateCard/index.tsx index 22795e3..1604a52 100644 --- a/src/components/TemplateCard/index.tsx +++ b/src/components/TemplateCard/index.tsx @@ -14,33 +14,37 @@ export default function TemplateCard({ template, onClick }: TemplateCardProps) { return ( - {/* 图片对比区域 */} + {/* 左右对比区域 */} - - - - 原图 + + + + + 原图 + + + + + + + 效果 + - - → - - - - - - 效果 + + + ⟷