From d0801ae40e1237c381b59bcae7d0be66ecfdbd9e Mon Sep 17 00:00:00 2001 From: yiqiu Date: Tue, 25 Nov 2025 01:12:58 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96"=E5=85=A8=E5=9C=BA=E6=99=AF?= =?UTF-8?q?=E5=85=A8=E6=A0=88=E8=A7=A3=E5=86=B3=E6=96=B9=E6=A1=88"?= =?UTF-8?q?=E4=B8=BA=E7=AB=96=E5=90=91=E5=8D=A1=E7=89=87=E5=B1=95=E5=BC=80?= =?UTF-8?q?=E6=95=88=E6=9E=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 删除汽车解决方案 - 保留7个解决方案：电商、金融、游戏、文旅、教育、医疗、农业 - 改为竖向长方形卡片布局（120px x 400px） - 标题默认竖向排列，使用 writing-mode: vertical-rl - 鼠标悬停时卡片宽度展开至 320px - 悬停时标题变为横向并移至顶部 - 悬停时显示描述和查看详情链接 - 添加发光边框和阴影效果 - 使用 cubic-bezier 缓动函数实现流畅过渡 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- css/index.css | 157 ++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 142 ++++++++++++++++++++++----------------------- 2 files changed, 228 insertions(+), 71 deletions(-) diff --git a/css/index.css b/css/index.css index ca7b04d..e23b789 100644 --- a/css/index.css +++ b/css/index.css @@ -1142,6 +1142,163 @@ margin-top: 60px; } +/* 新的竖向卡片布局 */ +.resolve-content-new { + display: flex; + justify-content: center; + gap: 16px; + margin-top: 60px; + flex-wrap: wrap; +} + +/* 竖向长方形卡片 */ +.resolve-card { + width: 120px; + height: 400px; + position: relative; + border-radius: 16px; + overflow: hidden; + transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); +} + +.resolve-card a { + display: block; + width: 100%; + height: 100%; +} + +.resolve-card-inner { + width: 100%; + height: 100%; + background: rgba(15, 23, 42, 0.7); + backdrop-filter: blur(16px); + border: 1px solid rgba(148, 163, 184, 0.15); + border-radius: 16px; + position: relative; + overflow: hidden; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); +} + +/* 卡片发光边框效果 */ +.resolve-card-inner::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + border-radius: 16px; + padding: 1px; + background: linear-gradient(135deg, rgba(56, 189, 248, 0.3), rgba(99, 102, 241, 0.3)); + -webkit-mask: + linear-gradient(#fff 0 0) content-box, + linear-gradient(#fff 0 0); + -webkit-mask-composite: xor; + mask-composite: exclude; + opacity: 0; + transition: opacity 0.5s ease; +} + +/* 标题 - 默认竖向显示 */ +.resolve-card-title { + color: #F9FAFB; + font-size: 24px; + font-weight: 700; + writing-mode: vertical-rl; + text-orientation: upright; + letter-spacing: 8px; + transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); + z-index: 2; + position: relative; +} + +/* 内容区域 - 默认隐藏 */ +.resolve-card-content { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + padding: 32px 24px; + opacity: 0; + transform: translateY(20px); + transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); + display: flex; + flex-direction: column; + justify-content: space-between; + z-index: 1; +} + +.resolve-card-desc { + color: rgba(203, 213, 225, 0.9); + line-height: 1.7; + font-size: 15px; +} + +.resolve-card-link { + color: rgba(148, 163, 184, 0.9); + font-size: 14px; + font-weight: 500; + display: inline-flex; + align-items: center; + transition: all 0.3s ease; + margin-top: 20px; +} + +.resolve-card-link .icon-arrow-right { + margin-left: 5px; + transition: transform 0.3s ease; +} + +/* 悬停效果 */ +.resolve-card:hover { + width: 320px; + z-index: 10; +} + +.resolve-card:hover .resolve-card-inner { + background: rgba(15, 23, 42, 0.9); + box-shadow: + 0 20px 50px rgba(56, 189, 248, 0.25), + 0 0 50px rgba(56, 189, 248, 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.1); + border-color: rgba(56, 189, 248, 0.4); +} + +.resolve-card:hover .resolve-card-inner::before { + opacity: 1; +} + +/* 悬停时标题变为横向并移到顶部 */ +.resolve-card:hover .resolve-card-title { + writing-mode: horizontal-tb; + text-orientation: mixed; + letter-spacing: 2px; + position: absolute; + top: 32px; + left: 24px; + color: #38BDF8; + text-shadow: 0 0 20px rgba(56, 189, 248, 0.5); +} + +/* 悬停时显示内容 */ +.resolve-card:hover .resolve-card-content { + opacity: 1; + transform: translateY(0); +} + +.resolve-card:hover .resolve-card-link { + color: #38BDF8; +} + +.resolve-card:hover .resolve-card-link .icon-arrow-right { + transform: translateX(5px); +} + /* 解决方案卡片 - 错落悬浮效果 */ .resolve-content .resolve-box { position: relative; diff --git a/index.html b/index.html index 4cc0341..363714f 100644 --- a/index.html +++ b/index.html @@ -245,83 +245,83 @@

全场景全栈解决方案

专业构架师针对丰富的业务场景，为千行百业构建稳定、易用的高性价比解决方案。
-
-
-
- -
-

电商

-
有效应对大促带来的业务高并发问题，助力电商客户快速实现营销创新与业务增收。
-

查看详情

+
+
+ +
+

电商

+
+
有效应对大促带来的业务高并发问题，助力电商客户快速实现营销创新与业务增收。
+

查看详情

- -
-
- -
-

金融

-
助力金融机构打造面向垂直场景的创新方案，实现金融机构与用户之间的高效触达。
-

查看详情

-
- -
-
- -
-

游戏

-
构建高质量、全方位、深度体验的游戏云平台，提升研发效率，增强交互体验。
-

查看详情

-
- -
-
- -
-

汽车

-
面向汽车行业提供全场景信息化解决方案，助力车企打造更开放的新型连接生态。
-

查看详情

-
- -
+
+
- -
-
- -
-

文旅

-
通过“科技+文化旅游”的融合创新及落地应用，推动文旅行业信息化、智慧化发展。
-

查看详情

+
+ +
+

金融

+
+
助力金融机构打造面向垂直场景的创新方案，实现金融机构与用户之间的高效触达。
+

查看详情

- -
-
- -
-

教育

-
实现数据互联、可视化、高交互的云上教育环境，打造云时代教育治理新模式。
-

查看详情

+
+ +
+
+ +
+

游戏

+
+
构建高质量、全方位、深度体验的游戏云平台，提升研发效率，增强交互体验。
+

查看详情

- -
-
- -
-

医疗

-
协助医疗机构打造资源共享、再利用、再生产的数据生态循环，提高资源配置效率。
-

查看详情

+
+ +
+
+ +
+

文旅

+
+
通过"科技+文化旅游"的融合创新及落地应用，推动文旅行业信息化、智慧化发展。
+

查看详情

- -
-
- -
-

农业

-
助力农企构建智慧农业生产服务体系，提升农业精细化种植与管理水平。
-

查看详情

+
+ +
+
+ +
+

教育

+
+
实现数据互联、可视化、高交互的云上教育环境，打造云时代教育治理新模式。
+

查看详情

- -
+
+ +
+
+ +
+

医疗

+
+
协助医疗机构打造资源共享、再利用、再生产的数据生态循环，提高资源配置效率。
+

查看详情

+
+
+ +
+
+ +
+

农业

+
+
助力农企构建智慧农业生产服务体系，提升农业精细化种植与管理水平。
+

查看详情

+
+
+