高端绿色建筑案例展示模块设计

By 18665878020, 28 April, 2026

推理

用户想要一个案例模块（案例展示），左侧大图右侧内容，要求美观大气。我需要先获取设计系统建议和图片资源。

让我先获取设计系统建议，然后再找合适的图片。好的，我有了设计系统的建议和图片资源。设计系统推荐的是极简主义风格，但我想要的是"美观大气"的效果，所以我会结合现代奢华风格来设计。

让我再搜索一些更适合案例展示的图片，比如具有商业感和高端感的图片。

实际上，已有的图片不错，让我再搜索一些更适合"案例 showcase"主题的图片。好的，我已经有了足够的素材。现在来设计这个案例模块。

设计思路：
- 左侧大图：使用真实的建筑/空间图片来展示案例
- 右侧内容：包含案例标签、标题、描述、数据统计等
- 风格：大气、现代、奢华感
- 使用深色背景搭配金色点缀，营造高端感

我会使用 real-estate-4.jpg 作为主图，它展现的是现代建筑与绿色植物的融合，很有质感。

设计决策：
1. 深色背景（接近黑色）搭配金色/香槟色点缀
2. 左侧图片占约55%宽度，右侧内容占45%
3. 使用优雅的字体 - 标题用 Cormorant Garamond 或 Playfair Display，正文用 Inter
4. 添加一些数据统计指标来丰富内容
5. 添加一些微妙的动画效果

让我看看能不能获取更多图片资源。

算了，现有图片足够了。让我开始构建这个模块。

我会选择 real-estate-4.jpg 作为主图，因为它的建筑+绿色植物的组合非常有质感且现代。

让我设计一个既美观又大气的案例模块。好的，现在我有了所需的图片资源。让我开始构建这个案例模块。

设计方向：
- 深色高端背景 (#0a0a0a 到 #151515)
- 左侧大图展示案例项目
- 右侧内容区域包含：标签、标题、描述、关键指标、CTA按钮
- 金色/香槟色作为点缀色 (#c9a84c, #d4a537)
- 字体：标题用 Cormorant Garamond（优雅衬线字体），正文用 Inter
- 响应式设计

我将使用 real-estate-4.jpg 作为案例展示的主图，它非常有质感和现代感。

让我开始写代码。好的，这个不太适合，我还是直接用 real-estate-4.jpg 作为主图来设计案例模块吧。

现在开始设计HTML代码。

让我设计一个高端、大气的案例展示模块。我会使用深色主题配合金色点缀，左侧为大图，右侧为内容。

设计细节：
1. 左侧：大图展示，有轻微的渐变遮罩和悬停效果
2. 右侧：包含标签（"精选案例"）、大标题、描述文字、关键数据指标（3个）、CTA按钮
3. 整体使用深色背景，金色点缀，营造高端奢华感
4. 字体使用 Cormorant Garamond + Inter 的组合
5. 加入一些微妙的动画效果

让我开始写代码。好的，我现在已经有了足够的素材。让我开始设计这个案例模块。

我将使用 real-estate-4.jpg（现代建筑与绿色植物交织）作为主图，这个图片非常有质感和层次感，适合作为案例展示的背景。

让我构建一个完整的、美观大气的案例展示模块。好的，不需要再查了，让我开始设计。我将采用深色+金色的奢华风格，搭配Cormorant Garamond和Inter字体。

现在开始写完整的HTML代码。

角色

assistant

content

```json{
"summary": "设计了一个高端大气的案例展示模块，左侧大图（使用real-estate-4.jpg现代绿色建筑图），右侧展示案例内容。采用深色背景(#0c0c0c)搭配香槟金色(#c9a84c)点缀，标题使用优雅的Cormorant Garamond衬线字体，正文使用Inter。内容包含标签徽章、主标题、描述文字、三个关键数据指标（200+项目/98%满意度/15年经验）以及CTA按钮。图片带有渐变遮罩和悬停缩放效果，整体布局采用Flexbox实现响应式，移动端自动切换为上下结构。",
"widget": {"type":"full-html","html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>案例展示模块</title>\n <script src=\"https://cdn.tailwindcss.com\">\n </script>\n <link href=\"https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0…\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.c…\">\n <style>\n :root {\n --gold: #c9a84c;\n --gold-light: #e4cc8a;\n --gold-dark: #a8882e;\n --bg-dark: #0c0c0c;\n --bg-card: #111111;\n --bg-surface: #1a1a1a;\n --text-primary: #f5f5f5;\n --text-secondary: #a0a0a0;\n --text-muted: #666666;\n --border-subtle: rgba(201, 168, 76, 0.15);\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Inter', sans-serif;\n background-color: var(--bg-dark);\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 2rem 1.5rem;\n background-image:\n radial-gradient(ellipse at 20% 50%, rgba(201, 168, 76, 0.04) 0%, transparent 60%),\n radial-gradient(ellipse at 80% 50%, rgba(201, 168, 76, 0.03) 0%, transparent 60%);\n }\n\n .case-wrapper {\n width: 100%;\n max-width: 1280px;\n position: relative;\n }\n\n /* 装饰性角标 */\n .corner-decoration {\n position: absolute;\n width: 60px;\n height: 60px;\n border-color: var(--gold);\n opacity: 0.3;\n z-index: 1;\n }\n .corner-tl {\n top: -8px;\n left: -8px;\n border-top: 1.5px solid var(--gold);\n border-left: 1.5px solid var(--gold);\n }\n .corner-br {\n bottom: -8px;\n right: -8px;\n border-bottom: 1.5px solid var(--gold);\n border-right: 1.5px solid var(--gold);\n }\n\n .case-container {\n display: flex;\n background: var(--bg-card);\n border-radius: 20px;\n overflow: hidden;\n position: relative;\n box-shadow:\n 0 30px 80px rgba(0, 0, 0, 0.6),\n 0 0 0 1px rgba(201, 168, 76, 0.08);\n border: 1px solid rgba(201, 168, 76, 0.06);\n }\n\n /* ===== 左侧图片区 ===== */\n .case-image-wrap {\n flex: 0 0 54%;\n max-width: 54%;\n position: relative;\n overflow: hidden;\n min-height: 520px;\n }\n\n .case-image {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n will-change: transform;\n }\n\n .case-image-wrap:hover .case-image {\n transform: scale(1.06);\n }\n\n /* 图片渐变遮罩 */\n .case-image-overlay {\n position: absolute;\n inset: 0;\n background: linear-gradient(\n to right,\n rgba(17, 17, 17, 0.92) 0%,\n rgba(17, 17, 17, 0.35) 40%,\n rgba(17, 17, 17, 0.1) 70%,\n transparent 100%\n );\n z-index: 2;\n pointer-events: none;\n }\n\n /* 图片底部微光 */\n .case-image-glow {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 120px;\n background: linear-gradient(to top, rgba(17, 17, 17, 0.7), transparent);\n z-index: 2;\n pointer-events: none;\n }\n\n /* 图片上的装饰标签 */\n .image-badge {\n position: absolute;\n top: 28px;\n left: 28px;\n z-index: 5;\n display: flex;\n align-items: center;\n gap: 8px;\n background: rgba(0, 0, 0, 0.55);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n border: 1px solid rgba(255, 255, 255, 0.08);\n padding: 8px 18px 8px 14px;\n border-radius: 100px;\n color: var(--text-primary);\n font-size: 0.75rem;\n font-weight: 500;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n opacity: 0;\n animation: fadeSlideIn 0.8s 0.3s ease-out forwards;\n }\n .image-badge i {\n color: var(--gold);\n font-size: 0.6rem;\n }\n .image-badge .live-dot {\n display: inline-block;\n width: 7px;\n height: 7px;\n border-radius: 50%;\n background: #4ade80;\n margin-right: 2px;\n animation: pulse-dot 2s ease-in-out infinite;\n }\n\n /* ===== 右侧内容区 ===== */\n .case-content {\n flex: 1;\n padding: 3.5rem 3.8rem;\n display: flex;\n flex-direction: column;\n justify-content: center;\n position: relative;\n z-index: 3;\n }\n\n /* 标签 */\n .case-tag {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n font-size: 0.7rem;\n font-weight: 600;\n letter-spacing: 0.15em;\n text-transform: uppercase;\n color: var(--gold);\n margin-bottom: 1.2rem;\n opacity: 0;\n animation: fadeSlideIn 0.7s 0.1s ease-out forwards;\n position: relative;\n }\n .case-tag::before {\n content: '';\n display: inline-block;\n width: 28px;\n height: 1.5px;\n background: var(--gold);\n margin-right: 4px;\n }\n\n /* 标题 */\n .case-title {\n font-family: 'Cormorant Garamond', serif;\n font-size: clamp(2rem, 3.2vw, 3.2rem);\n font-weight: 700;\n line-height: 1.15;\n color: var(--text-primary);\n margin-bottom: 1.2rem;\n letter-spacing: -0.01em;\n opacity: 0;\n animation: fadeSlideIn 0.8s 0.25s ease-out forwards;\n }\n .case-title em {\n font-style: italic;\n color: var(--gold);\n }\n\n /* 分隔线 */\n .case-divider {\n width: 50px;\n height: 2px;\n background: linear-gradient(90deg, var(--gold), transparent);\n margin-bottom: 1.2rem;\n opacity: 0;\n animation: fadeSlideIn 0.6s 0.4s ease-out forwards;\n }\n\n /* 描述 */\n .case-desc {\n font-size: 0.95rem;\n line-height: 1.75;\n color: var(--text-secondary);\n font-weight: 300;\n margin-bottom: 2rem;\n max-width: 480px;\n opacity: 0;\n animation: fadeSlideIn 0.8s 0.4s ease-out forwards;\n }\n\n /* 数据指标 */\n .case-stats {\n display: flex;\n gap: 2.5rem;\n margin-bottom: 2.2rem;\n opacity: 0;\n animation: fadeSlideIn 0.8s 0.55s ease-out forwards;\n }\n .stat-item {\n text-align: left;\n }\n .stat-number {\n font-family: 'Cormorant Garamond', serif;\n font-size: 2.2rem;\n font-weight: 700;\n color: var(--text-primary);\n line-height: 1;\n display: flex;\n align-items: baseline;\n gap: 2px;\n }\n .stat-number .suffix {\n font-size: 1rem;\n color: var(--gold);\n font-weight: 500;\n font-family: 'Inter', sans-serif;\n }\n .stat-label {\n font-size: 0.75rem;\n color: var(--text-muted);\n font-weight: 400;\n margin-top: 6px;\n letter-spacing: 0.03em;\n }\n\n /* CTA 按钮 */\n .case-cta {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n padding: 14px 36px;\n background: transparent;\n color: var(--text-primary);\n font-size: 0.8rem;\n font-weight: 500;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n text-decoration: none;\n border: 1.5px solid rgba(201, 168, 76, 0.4);\n border-radius: 100px;\n position: relative;\n overflow: hidden;\n transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n cursor: pointer;\n opacity: 0;\n animation: fadeSlideIn 0.8s 0.7s ease-out forwards;\n width: fit-content;\n }\n .case-cta::before {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(135deg, var(--gold-dark), var(--gold), var(--gold-dark));\n opacity: 0;\n transition: opacity 0.4s ease;\n }\n .case-cta:hover {\n border-color: var(--gold);\n transform: translateY(-2px);\n box-shadow: 0 12px 32px rgba(201, 168, 76, 0.15);\n }\n .case-cta:hover::before {\n opacity: 1;\n }\n .case-cta span, .case-cta i {\n position: relative;\n z-index: 1;\n transition: transform 0.3s ease;\n }\n .case-cta:hover span {\n color: #0c0c0c;\n }\n .case-cta:hover i {\n color: #0c0c0c;\n transform: translateX(4px);\n }\n .case-cta i {\n font-size: 0.7rem;\n transition: transform 0.3s ease, color 0.3s ease;\n }\n\n /* 动画 */\n @keyframes fadeSlideIn {\n 0% {\n opacity: 0;\n transform: translateY(18px);\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @keyframes pulse-dot {\n 0%, 100% {\n opacity: 1;\n transform: scale(1);\n }\n 50% {\n opacity: 0.5;\n transform: scale(0.8);\n }\n }\n\n /* 图片加载后的渐入效果 */\n .case-image {\n opacity: 0;\n animation: imageReveal 1.2s 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;\n }\n @keyframes imageReveal {\n 0% {\n opacity: 0;\n transform: scale(1.08);\n }\n 100% {\n opacity: 1;\n transform: scale(1);\n }\n }\n\n /* ===== 响应式 ===== */\n @media (max-width: 1024px) {\n .case-content {\n padding: 2.5rem 2.5rem;\n }\n .case-stats {\n gap: 1.8rem;\n }\n .stat-number {\n font-size: 1.8rem;\n }\n }\n\n @media (max-width: 768px) {\n body {\n padding: 1rem;\n }\n\n .case-container {\n flex-direction: column;\n border-radius: 16px;\n }\n\n .case-image-wrap {\n flex: 0 0 320px;\n max-width: 100%;\n min-height: 320px;\n }\n\n .case-image-overlay {\n background: linear-gradient(\n to bottom,\n rgba(17, 17, 17, 0.2) 0%,\n rgba(17, 17, 17, 0.85) 100%\n );\n }\n\n .case-content {\n padding: 2rem 1.8rem 2.5rem;\n margin-top: -20px;\n }\n\n .case-title {\n font-size: 1.9rem;\n }\n\n .case-stats {\n gap: 1.5rem;\n flex-wrap: wrap;\n }\n\n .image-badge {\n top: 20px;\n left: 20px;\n font-size: 0.65rem;\n padding: 6px 14px 6px 12px;\n }\n\n .corner-decoration {\n display: none;\n }\n\n .case-cta {\n width: 100%;\n justify-content: center;\n }\n }\n\n @media (max-width: 480px) {\n .case-image-wrap {\n flex: 0 0 260px;\n min-height: 260px;\n }\n .case-content {\n padding: 1.5rem 1.2rem 2rem;\n }\n .case-title {\n font-size: 1.6rem;\n }\n .case-desc {\n font-size: 0.85rem;\n }\n .stat-number {\n font-size: 1.5rem;\n }\n .case-stats {\n gap: 1.2rem;\n }\n }\n\n /* 加载完成后隐藏闪烁 */\n img {\n display: block;\n }\n\n /* 滚动条美化 */\n ::-webkit-scrollbar {\n width: 4px;\n }\n ::-webkit-scrollbar-track {\n background: var(--bg-dark);\n }\n ::-webkit-scrollbar-thumb {\n background: var(--gold-dark);\n border-radius: 10px;\n }\n </style>\n</head>\n<body>\n\n <div class=\"case-wrapper\">\n \n <div class=\"corner-decoration corner-tl\"></div>\n <div class=\"corner-decoration corner-br\"></div>\n\n <div class=\"case-container\">\n\n \n <div class=\"case-image-wrap\">\n <img\n class=\"case-image\"\n src=\"/assets/images/real-estate/real-estate-4.jpg\"\n alt=\"现代生态建筑设计案例\"\n loading=\"lazy\"\n />\n <div class=\"case-image-overlay\"></div>\n <div class=\"case-image-glow\"></div>\n\n <div class=\"image-badge\">\n <span class=\"live-dot\"></span>\n <span>近期完工</span>\n <i class=\"fa-solid fa-circle\" style=\"font-size: 3px; opacity: 0.4;\"></i>\n <span>2024</span>\n </div>\n </div>\n\n \n <div class=\"case-content\">\n\n \n <div class=\"case-tag\">\n <span>精选案例</span>\n </div>\n\n \n <h2 class=\"case-title\">\n 云栖·生态<br/>\n 垂直森林 <em>综合体</em>\n </h2>\n\n \n <div class=\"case-divider\"></div>\n\n \n <p class=\"case-desc\">\n 以「城市绿洲」为核心理念，将层叠式绿化露台与<br class=\"hidden md:block\"/>\n 现代建筑语言相融合，打造集办公、商业与艺术于<br class=\"hidden md:block\"/>\n 一体的地标级生态综合体，重新定义都市生活边界。\n </p>\n\n \n <div class=\"case-stats\">\n <div class=\"stat-item\">\n <div class=\"stat-number\">\n 200<span class=\"suffix\">+</span>\n </div>\n <div class=\"stat-label\">落地项目</div>\n </div>\n <div class=\"stat-item\">\n <div class=\"stat-number\">\n 98<span class=\"suffix\">%</span>\n </div>\n <div class=\"stat-label\">客户满意度</div>\n </div>\n <div class=\"stat-item\">\n <div class=\"stat-number\">\n 15<span class=\"suffix\">年</span>\n </div>\n <div class=\"stat-label\">行业经验</div>\n </div>\n </div>\n\n \n <a href=\"#\" class=\"case-cta\">\n <span>探索完整案例</span>\n <i class=\"fa-solid fa-arrow-right-long\"></i>\n </a>\n\n </div>\n \n\n </div>\n \n </div>\n \n\n</body>\n</html>"},
"next": ["现代简约风案例","深色奢华系列","双图对比布局","数据驱动型案例","纯白高端版本"],
"breakpoint": "none"
}
```

total_tokens

12365

summary

设计了一个高端大气的案例展示模块，左侧大图（使用real-estate-4.jpg现代绿色建筑图），右侧展示案例内容。采用深色背景(#0c0c0c)搭配香槟金色(#c9a84c)点缀，标题使用优雅的Cormorant Garamond衬线字体，正文使用Inter。内容包含标签徽章、主标题、描述文字、三个关键数据指标（200+项目/98%满意度/15年经验）以及CTA按钮。图片带有渐变遮罩和悬停缩放效果，整体布局采用Flexbox实现响应式，移动端自动切换为上下结构。

uiParsing

关闭