From dcaadf4d81462a78d495046afce5e4ef4625632b Mon Sep 17 00:00:00 2001 From: yiqiu Date: Tue, 25 Nov 2025 15:51:40 +0800 Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=96=B0=E8=AE=BE=E8=AE=A1"=E5=85=A8?= =?UTF-8?q?=E5=9C=BA=E6=99=AF=E5=85=A8=E6=A0=88=E8=A7=A3=E5=86=B3=E6=96=B9?= =?UTF-8?q?=E6=A1=88"=E6=9D=BF=E5=9D=97=E4=B8=BA=E5=B9=BB=E7=81=AF?= =?UTF-8?q?=E7=89=87=E5=B1=95=E7=A4=BA=E5=BD=A2=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 将竖向卡片布局改为上下两层结构 - 上层：7个解决方案标签按钮，支持点击切换 - 下层：幻灯片内容区（左侧文案+右侧图片） - 添加3秒自动播放功能，支持循环切换 - 添加实时进度条显示播放进度 - 鼠标悬停时暂停，离开时恢复播放 - 采用玻璃态毛玻璃背景和科技感渐变配色 - 优化响应式布局，适配桌面、平板和手机端 - 添加流畅的淡入淡出切换动画和光晕效果 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- css/index.css | 317 ++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 249 +++++++++++++++++++++++++++------------ js/index.js | 99 ++++++++++++++++ 3 files changed, 592 insertions(+), 73 deletions(-) diff --git a/css/index.css b/css/index.css index e61672e..86cc111 100644 --- a/css/index.css +++ b/css/index.css @@ -2624,3 +2624,320 @@ html { #index .qrcode-popup .desc { color: rgba(203, 213, 225, 0.8); } + +/* ============================================ + 全场景全栈解决方案 - 新设计（上下两层） + ============================================ */ + +/* 解决方案容器 */ +.solution-wrapper { + margin-top: 60px; + position: relative; +} + +/* 上层：按钮导航 */ +.solution-tabs { + display: flex; + justify-content: center; + gap: 16px; + margin-bottom: 40px; + flex-wrap: wrap; +} + +.solution-tab { + padding: 12px 32px; + font-size: 16px; + font-weight: 600; + color: rgba(226, 232, 240, 0.8); + background: rgba(15, 23, 42, 0.6); + border: 1px solid rgba(148, 163, 184, 0.2); + border-radius: 30px; + cursor: pointer; + transition: all 0.3s ease; + position: relative; + overflow: hidden; +} + +/* 按钮光晕效果 */ +.solution-tab::before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 0; + height: 0; + border-radius: 50%; + background: radial-gradient(circle, rgba(56, 189, 248, 0.3) 0%, transparent 70%); + transform: translate(-50%, -50%); + transition: width 0.5s ease, height 0.5s ease; +} + +.solution-tab:hover { + color: #38BDF8; + border-color: rgba(56, 189, 248, 0.4); + background: rgba(15, 23, 42, 0.8); + transform: translateY(-2px); + box-shadow: 0 4px 16px rgba(56, 189, 248, 0.2); +} + +.solution-tab:hover::before { + width: 200px; + height: 200px; +} + +.solution-tab.active { + color: #ffffff; + background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%); + border-color: transparent; + box-shadow: 0 4px 20px rgba(56, 189, 248, 0.4); +} + +.solution-tab.active::before { + display: none; +} + +/* 下层：幻灯片容器 */ +.solution-slider { + position: relative; + min-height: 450px; + overflow: hidden; +} + +/* 单个幻灯片 */ +.solution-slide { + position: absolute; + top: 0; + left: 0; + width: 100%; + opacity: 0; + transform: translateX(100px); + transition: opacity 0.6s ease, transform 0.6s ease; + pointer-events: none; +} + +.solution-slide.active { + position: relative; + opacity: 1; + transform: translateX(0); + pointer-events: auto; +} + +/* 幻灯片内容区域 */ +.solution-content { + display: flex; + align-items: center; + gap: 60px; + padding: 40px; + background: rgba(15, 23, 42, 0.7); + backdrop-filter: blur(16px); + border: 1px solid rgba(148, 163, 184, 0.15); + border-radius: 20px; + box-shadow: + 0 8px 32px rgba(15, 23, 42, 0.5), + inset 0 1px 0 rgba(255, 255, 255, 0.05); +} + +/* 左侧文字区域 */ +.solution-text { + flex: 1; + min-width: 0; +} + +.solution-text h3 { + font-size: 32px; + font-weight: 700; + color: #F9FAFB; + margin-bottom: 12px; + background: linear-gradient(135deg, #FFFFFF 0%, #38BDF8 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.solution-subtitle { + font-size: 16px; + color: rgba(148, 163, 184, 0.9); + margin-bottom: 24px; + font-weight: 500; +} + +.solution-desc { + color: rgba(203, 213, 225, 0.85); + line-height: 1.8; + margin-bottom: 32px; +} + +.solution-desc p { + margin-bottom: 12px; + font-size: 15px; +} + +.solution-desc p:last-child { + margin-bottom: 0; +} + +/* 了解详情链接 */ +.solution-link { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 12px 32px; + font-size: 15px; + font-weight: 600; + color: #ffffff; + background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%); + border-radius: 30px; + text-decoration: none; + transition: all 0.3s ease; + box-shadow: 0 4px 16px rgba(56, 189, 248, 0.3); +} + +.solution-link:hover { + transform: translateY(-2px); + box-shadow: 0 6px 24px rgba(56, 189, 248, 0.5); +} + +.solution-link .icon-arrow-right { + transition: transform 0.3s ease; +} + +.solution-link:hover .icon-arrow-right { + transform: translateX(5px); +} + +/* 右侧图片区域 */ +.solution-image { + flex-shrink: 0; + width: 400px; + height: 350px; + position: relative; + overflow: hidden; + border-radius: 16px; + background: rgba(15, 23, 42, 0.5); +} + +.solution-image img { + width: 100%; + height: 100%; + object-fit: cover; + filter: brightness(1.1); + transition: transform 0.5s ease; +} + +.solution-slide.active .solution-image img { + transform: scale(1.05); +} + +/* 图片光晕效果 */ +.solution-image::after { + content: ''; + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: radial-gradient(circle, rgba(56, 189, 248, 0.15) 0%, transparent 60%); + opacity: 0; + transition: opacity 0.5s ease; + pointer-events: none; +} + +.solution-slide.active .solution-image::after { + opacity: 1; +} + +/* 进度指示器 */ +.solution-progress { + margin-top: 40px; + height: 4px; + background: rgba(148, 163, 184, 0.2); + border-radius: 2px; + overflow: hidden; + position: relative; +} + +.progress-bar { + height: 100%; + width: 0; + background: linear-gradient(90deg, #38BDF8 0%, #6366F1 100%); + border-radius: 2px; + transition: width 0.1s linear; +} + +/* 响应式设计 */ +@media (max-width: 1199px) { + .solution-content { + gap: 40px; + padding: 32px; + } + + .solution-image { + width: 350px; + height: 300px; + } + + .solution-text h3 { + font-size: 28px; + } +} + +@media (max-width: 991px) { + .solution-content { + flex-direction: column; + gap: 30px; + } + + .solution-image { + width: 100%; + max-width: 500px; + height: 300px; + } + + .solution-tabs { + gap: 12px; + } + + .solution-tab { + padding: 10px 24px; + font-size: 14px; + } +} + +@media (max-width: 767px) { + .solution-wrapper { + margin-top: 40px; + } + + .solution-content { + padding: 24px; + } + + .solution-text h3 { + font-size: 24px; + } + + .solution-subtitle { + font-size: 14px; + } + + .solution-desc p { + font-size: 14px; + } + + .solution-image { + height: 250px; + } + + .solution-slider { + min-height: auto; + } + + .solution-tabs { + gap: 8px; + } + + .solution-tab { + padding: 8px 20px; + font-size: 13px; + } +} diff --git a/index.html b/index.html index 3b68aa8..2c2e70a 100644 --- a/index.html +++ b/index.html @@ -245,83 +245,186 @@

全场景全栈解决方案

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

电商

-
-
提供完整的电商云解决方案，有效应对大促、秒杀等高并发场景，保障系统稳定运行。通过弹性扩容、智能调度等技术手段，助力电商平台快速响应业务需求，提升用户体验。支持多种营销活动场景，实现营销创新与业务增收的双重目标，帮助企业在激烈的市场竞争中脱颖而出。
-

查看详情

-
-
- + +
+ +
+ + + + + + +
-
- -
-

金融

-
-
为金融机构提供安全可靠的云计算基础设施，满足金融行业严格的监管要求和安全标准。助力金融机构打造面向垂直场景的创新金融产品，实现与用户之间的高效触达。提供风险控制、数据分析、智能客服等全方位技术支持，推动金融科技创新，提升金融服务效率和用户体验。
-

查看详情

+ + +
+ +
+
+
+

电商解决方案

+

应对高并发、大促等复杂场景

+
+

提供完整的电商云解决方案，有效应对大促、秒杀等高并发场景，保障系统稳定运行。

+

通过弹性扩容、智能调度等技术手段，助力电商平台快速响应业务需求，提升用户体验。

+

支持多种营销活动场景，实现营销创新与业务增收的双重目标。

+
+ + 了解详情 + +
+
+ 电商解决方案
- +
+ + +
+
+
+

金融解决方案

+

安全可靠的金融级云服务

+
+

为金融机构提供安全可靠的云计算基础设施，满足金融行业严格的监管要求和安全标准。

+

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

+

提供风险控制、数据分析、智能客服等全方位技术支持，推动金融科技创新。

+
+ + 了解详情 + +
+
+ 金融解决方案 +
+
+
+ + +
+
+
+

游戏解决方案

+

低延迟、高并发的游戏云平台

+
+

构建高质量、全方位、深度体验的游戏云平台，提供低延迟、高并发的游戏运行环境。

+

支持游戏快速部署、弹性扩容，满足各类游戏场景需求。

+

通过智能运维、数据分析等技术手段，提升游戏研发效率，优化玩家游戏体验。

+
+ + 了解详情 + +
+
+ 游戏解决方案 +
+
+
+ + +
+
+
+

文旅解决方案

+

科技赋能智慧文旅

+
+

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

+

提供智慧景区、智慧酒店、智慧旅行社等全场景解决方案，实现景区管理数字化、游客服务智能化。

+

利用大数据、人工智能等技术，优化旅游资源配置，提升游客体验。

+
+ + 了解详情 + +
+
+ 文旅解决方案 +
+
+
+ + +
+
+
+

教育解决方案

+

打造云时代教育新模式

+
+

实现教育数据互联互通、教学过程可视化、师生互动高交互的云上教育环境，打造云时代教育治理新模式。

+

提供在线课堂、智慧校园、教育管理等全方位解决方案，支持大规模在线教学和混合式教学模式。

+

通过人工智能、大数据等技术，实现个性化教学和精准教学评估。

+
+ + 了解详情 + +
+
+ 教育解决方案 +
+
+
+ + +
+
+
+

医疗解决方案

+

构建数字化医疗生态

+
+

协助医疗机构打造医疗数据资源共享、医疗资源再利用、医疗知识再生产的数字化医疗生态循环体系。

+

提供远程医疗、智慧医院、医疗影像云等解决方案，支持医疗数据安全存储和高效分析。

+

通过云计算、人工智能等技术，辅助临床决策，提升医疗服务质量和效率。

+
+ + 了解详情 + +
+
+ 医疗解决方案 +
+
+
+ + +
+
+
+

农业解决方案

+

推动智慧农业转型升级

+
+

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

+

提供农业物联网、农产品溯源、智能灌溉等全链条解决方案，实现农业生产全过程数字化监控和管理。

+

通过大数据分析和人工智能技术，优化种植方案，提高农作物产量和品质。

+
+ + 了解详情 + +
+
+ 农业解决方案 +
+
+
-
- -
-

游戏

-
-
构建高质量、全方位、深度体验的游戏云平台，提供低延迟、高并发的游戏运行环境。支持游戏快速部署、弹性扩容，满足各类游戏场景需求。通过智能运维、数据分析等技术手段，提升游戏研发效率，优化玩家游戏体验。为游戏开发者提供从开发、测试到运营的全生命周期支持。
-

查看详情

-
-
- -
-
- -
-

文旅

-
-
通过"科技+文化旅游"的深度融合创新及落地应用，推动文旅行业全面信息化、智慧化发展。提供智慧景区、智慧酒店、智慧旅行社等全场景解决方案，实现景区管理数字化、游客服务智能化。利用大数据、人工智能等技术，优化旅游资源配置，提升游客体验，助力文旅产业高质量发展。
-

查看详情

-
-
- -
-
- -
-

教育

-
-
实现教育数据互联互通、教学过程可视化、师生互动高交互的云上教育环境，打造云时代教育治理新模式。提供在线课堂、智慧校园、教育管理等全方位解决方案，支持大规模在线教学和混合式教学模式。通过人工智能、大数据等技术，实现个性化教学和精准教学评估，推动教育公平和教育现代化。
-

查看详情

-
-
- -
-
- -
-

医疗

-
-
协助医疗机构打造医疗数据资源共享、医疗资源再利用、医疗知识再生产的数字化医疗生态循环体系，提高医疗资源配置效率。提供远程医疗、智慧医院、医疗影像云等解决方案，支持医疗数据安全存储和高效分析。通过云计算、人工智能等技术，辅助临床决策，提升医疗服务质量和效率。
-

查看详情

-
-
- -
-
- -
-

农业

-
-
助力农业企业构建智慧农业生产服务体系，提升农业精细化种植与智能化管理水平。提供农业物联网、农产品溯源、智能灌溉等全链条解决方案，实现农业生产全过程数字化监控和管理。通过大数据分析和人工智能技术，优化种植方案，提高农作物产量和品质，推动传统农业向现代智慧农业转型升级。
-

查看详情

-
-
- + + +
+
diff --git a/js/index.js b/js/index.js index a099bed..ca4c904 100644 --- a/js/index.js +++ b/js/index.js @@ -258,4 +258,103 @@ $(function () { $("#cps-box").click(function () { location.href = "partner/cps.html"; }); + + // ============================================ + // 全场景全栈解决方案 - 幻灯片功能 + // ============================================ + + (function () { + const $tabs = $('.solution-tab'); + const $slides = $('.solution-slide'); + const $progressBar = $('.progress-bar'); + const totalSlides = $slides.length; + let currentIndex = 0; + let autoPlayTimer = null; + let progressTimer = null; + const autoPlayDuration = 3000; // 3秒自动切换 + const progressInterval = 100; // 进度条更新间隔 + + // 切换到指定幻灯片 + function switchSlide(index) { + if (index === currentIndex) return; + + // 更新幻灯片 + $slides.removeClass('active'); + $slides.eq(index).addClass('active'); + + // 更新按钮 + $tabs.removeClass('active'); + $tabs.eq(index).addClass('active'); + + currentIndex = index; + + // 重置进度条 + resetProgress(); + } + + // 切换到下一张 + function nextSlide() { + const nextIndex = (currentIndex + 1) % totalSlides; + switchSlide(nextIndex); + } + + // 重置进度条 + function resetProgress() { + $progressBar.css('width', '0%'); + clearInterval(progressTimer); + + let progress = 0; + const step = (progressInterval / autoPlayDuration) * 100; + + progressTimer = setInterval(function () { + progress += step; + if (progress >= 100) { + progress = 100; + clearInterval(progressTimer); + } + $progressBar.css('width', progress + '%'); + }, progressInterval); + } + + // 启动自动播放 + function startAutoPlay() { + stopAutoPlay(); + resetProgress(); + autoPlayTimer = setInterval(nextSlide, autoPlayDuration); + } + + // 停止自动播放 + function stopAutoPlay() { + if (autoPlayTimer) { + clearInterval(autoPlayTimer); + autoPlayTimer = null; + } + if (progressTimer) { + clearInterval(progressTimer); + progressTimer = null; + } + } + + // 按钮点击事件 + $tabs.on('click', function () { + const index = $(this).data('index'); + switchSlide(index); + startAutoPlay(); + }); + + // 鼠标悬停时暂停自动播放 + $('.solution-wrapper').on('mouseenter', function () { + stopAutoPlay(); + }); + + // 鼠标离开时恢复自动播放 + $('.solution-wrapper').on('mouseleave', function () { + startAutoPlay(); + }); + + // 初始化 + if (totalSlides > 0) { + startAutoPlay(); + } + })(); });