diff --git a/css/index.css b/css/index.css
index 186cb3a..2a3992d 100644
--- a/css/index.css
+++ b/css/index.css
@@ -1,135 +1,47 @@
/* banner */
.banner-cont {
- position: relative;
width: 100%;
- overflow: hidden;
- /* 确保 3D 地球在竖直方向不会被裁剪,预留更大展示区域 */
- min-height: 520px;
-}
-
-/* banner 区背景:改为暗色科技感渐变,左侧适合文案,右侧衬托地球与飞行轨迹 */
-.section.banner {
- background:
- radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.22) 0%, transparent 40%),
- radial-gradient(circle at 80% 20%, rgba(129, 140, 248, 0.35) 0%, transparent 55%),
- linear-gradient(135deg, #020617 0%, #020617 40%, #0B1120 60%, #020617 100%);
}
.banner-cont .swiper-slide {
+ height: 500px;
width: 100%;
background: linear-gradient(0, #f7f9fa, #f9fafb);
}
.banner-cont .swiper-slide .img {
- /* 图片撑开高度,避免被裁切 */
- display: block;
- width: 100%;
- height: auto;
+ /* position: absolute; */
+ z-index: -1;
+ max-height: 100%;
max-width: 100%;
-}
-
-/* 文案层:覆盖在轮播上,使用 section-content 控制左右宽度 */
-.banner-cont .banner-text {
- position: absolute;
- left: 0;
- top: 0;
width: 100%;
- height: 100%;
- /* 需要盖在 swiper-slide 之上,swiper 本身 z-index: 1,这里抬高一层 */
- z-index: 10;
- pointer-events: none;
+ /* object-fit: fill; */
}
-.banner-cont .banner-text .section-content {
- /* 相对定位,便于内部文案块绝对居中定位 */
- position: relative;
- height: 100%;
- padding: 0 20px; /* 左右 20px 内边距,与全站一致 */
- margin: 0 auto; /* 保持与其他 section-content 一致的水平布局 */
-}
-.banner-copy {
- max-width: 560px;
- text-align: left;
- /* 绝对定位:在整块 banner 内垂直居中,水平方向与下方卡片文案左侧对齐 */
- position: absolute;
- top: 50%;
- left: 0;
- transform: translateY(-50%);
- /* 与下方 .banner-item 内的文案左对齐(section-content padding 20px + item padding 60px) */
- padding-left: 80px;
-}
-
-.banner-copy #bannerTitle {
- font-size: 44px;
- line-height: 1.2;
- color: #F9FAFB;
-}
-
-.banner-copy .banner-desc {
+.banner-cont .banner-desc {
font-size: 16px;
- margin-top: 16px;
- margin-bottom: 32px;
+ margin-top: 30px;
+ margin-bottom: 80px;
max-width: 550px;
- color: rgba(148, 163, 184, 0.95);
+
}
-.banner-copy #bannerButton {
- pointer-events: auto;
- /* 首页主按钮稍大一些,突出主召唤操作 */
- font-size: 16px;
- padding: 12px 48px;
+.banner-cont .swiper-pagination-bullet {
+ width: 36px;
+ height: 4px;
+ background: #D7DCE4;
+ opacity: 1;
+ border-radius: 3px;
}
-/* 轮播文案标签 */
-.banner-tags {
- margin-bottom: 12px;
-}
-
-.banner-tag-pill {
- display: inline-block;
- margin-right: 8px;
- padding: 4px 12px;
- font-size: 14px;
- border-radius: 999px;
- background: rgba(15, 23, 42, 0.8);
- color: #E0F2FE;
-}
-
-/* 3D 地球容器:与 section-content 右对齐(和下方卡片区域右边保持一致) */
-.banner-globe {
- position: absolute;
- top: 0;
- left: 0;
- /* 画布充满整个 banner 文案区域,让粒子可以从整个区域四面八方飞入 */
- width: 100%;
- height: 100%;
- z-index: 5; /* 保持在文案层之下 */
- pointer-events: none; /* 不影响轮播图滑动与点击 */
-}
-
-/* 中等屏幕下稍微缩小地球,避免挡住文案 */
-@media (max-width: 1400px) {
- .banner-globe {
- width: 100%;
- height: 100%;
- }
-}
-
-/* 小屏幕(如窄笔记本)下隐藏 3D 地球,保持可用性 */
-@media (max-width: 1100px) {
- .banner-globe {
- display: none;
- }
+.banner-cont .swiper-pagination-bullet-active {
+ background: rgba(255, 103, 57, 1);
}
.banner .banner-s {
- /* 首页下半部分 banner 卡片采用毛玻璃 + 阴影效果 */
- background: rgba(15, 23, 42, 0.8);
- border-radius: 16px;
- box-shadow: 0 24px 80px rgba(15, 23, 42, 0.85);
- border: 1px solid rgba(148, 163, 184, 0.45);
- backdrop-filter: blur(20px);
+ box-shadow: 0px 0px 16px rgba(52, 52, 52, 0.16);
+ border-radius: 3px;
}
.banner .banner-s .banner-list {
@@ -143,43 +55,23 @@
cursor: pointer;
width: 335px;
padding: 30px 60px;
- color: #E5E7EB;
}
.banner-s .banner-list .banner-item:hover {
- background: rgba(15, 23, 42, 0.75);
+ background: rgba(247, 248, 249, 1);
}
.banner-s .banner-list .banner-item:hover h5 {
- color: #F9FAFB;
+ color: #FF6739;
}
.banner-list .banner-item .banner-tag {
font-size: 12px;
- color: #E0F2FE;
- border: 1px solid rgba(148, 163, 184, 0.55);
+ color: #FF6739;
+ border: 1px solid #FF6739;
padding: 5px 8px;
border-radius: 3px;
}
-
-/* 首页专属 header 科技风样式(仅在 body#\index 上生效,避免影响其他页面) */
-body#index .nav-shadow {
- background:
- linear-gradient(90deg, rgba(15, 23, 42, 0.98) 0%, rgba(15, 23, 42, 0.96) 60%, rgba(8, 47, 73, 0.96) 100%);
- box-shadow: 0 1px 0 rgba(15, 23, 42, 0.8);
-}
-
-body#index .nav-menu .nav-item {
- color: #E5E7EB;
-}
-
-body#index .nav-menu .nav-item:hover {
- border-bottom-color: #38BDF8;
-}
-
-body#index .nav-right .control {
- color: #E5E7EB;
-}
/* 服务内容 */
.service-content {
diff --git a/index.html b/index.html
index 4c2dd42..f0a13c2 100644
--- a/index.html
+++ b/index.html
@@ -1,83 +1,58 @@
-{include file="header"}
-
-
-
-
-
+{include file="header"}
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
{include file="public/header"}
-
+
-
-
-
- {if isset($data.banner) && !empty($data.banner)}
- {php}$__firstBanner = $data['banner'][0];{/php}
-
-
- {if !empty($__firstBanner.tags)}
- {php}
- $__tags = preg_split('/[,,]/', $__firstBanner['tags']);
- {/php}
- {foreach $__tags as $__t}
- {php}$__t_trim = trim($__t);{/php}
- {if $__t_trim != ''}
- {$__t_trim}
- {/if}
- {/foreach}
- {/if}
-
-
{$__firstBanner.title|default=''}
-
{$__firstBanner.description|default=''}
- {if !empty($__firstBanner.button_text)}
-
- {$__firstBanner.button_text}
-
- {else /}
-
- {/if}
-
- {else /}
-
-
- {/if}
-
-
+
+
+ {if ( isset($data.banner) ) }
+ {foreach $data.banner as $key=>$value}
+
+ {/foreach}
+ {else /}
+
+

+
+
中小企业的云计算底座
+
主题云聚焦中小企业的数智化转型进程,以技术和数据为驱动,以产品和场景为载体,专注于打磨云上业务服务能力,助力中小企业全面业务上云演化。
+
立即查看
+
+
+
+

+
+
中小企业的云计算底座
+
主题云聚焦中小企业的数智化转型进程,以技术和数据为驱动,以产品和场景为载体,专注于打磨云上业务服务能力,助力中小企业全面业务上云演化。
+
立即查看
+
+
+
+

+
+
中小企业的云计算底座
+
主题云聚焦中小企业的数智化转型进程,以技术和数据为驱动,以产品和场景为载体,专注于打磨云上业务服务能力,助力中小企业全面业务上云演化。
+
立即查看
+
+
+ {/if}
+
+
+
diff --git a/js/index.js b/js/index.js
index 2eedd3f..c9da4d9 100644
--- a/js/index.js
+++ b/js/index.js
@@ -1,155 +1,90 @@
-$(function () {
- // 获取url地址栏参数函数
- function getUrlParams() {
- const url = window.location.href;
- // 判断是否有参数
- if (url.indexOf("?") === -1) {
- return {};
- }
- const params = url.split("?")[1];
- const paramsArr = params.split("&");
- const paramsObj = {};
- paramsArr.forEach((item) => {
- const key = item.split("=")[0];
- const value = item.split("=")[1];
- // 解析中文
- paramsObj[key] = decodeURI(value);
- });
- return paramsObj;
- }
- //设置cookie
- function setCookie(c_name, value, expiredays = 1) {
- const exdate = new Date();
- exdate.setDate(exdate.getDate() + expiredays);
- document.cookie =
- c_name + "=" + value + (";expires=" + exdate.toGMTString());
- }
- // 判断首页是否为推荐页面
- function isRecommend() {
- const urlParams = getUrlParams();
- if (urlParams.recommend_c) {
- setCookie("recommend_c", urlParams.recommend_c);
- }
+$(function () {
+ // 获取url地址栏参数函数
+ function getUrlParams() {
+ const url = window.location.href;
+ // 判断是否有参数
+ if (url.indexOf("?") === -1) {
+ return {};
+ }
+ const params = url.split("?")[1];
+ const paramsArr = params.split("&");
+ const paramsObj = {};
+ paramsArr.forEach((item) => {
+ const key = item.split("=")[0];
+ const value = item.split("=")[1];
+ // 解析中文
+ paramsObj[key] = decodeURI(value);
+ });
+ return paramsObj;
+ }
+ //设置cookie
+ function setCookie(c_name, value, expiredays = 1) {
+ const exdate = new Date();
+ exdate.setDate(exdate.getDate() + expiredays);
+ document.cookie =
+ c_name + "=" + value + (";expires=" + exdate.toGMTString());
+ }
+ // 判断首页是否为推荐页面
+ function isRecommend() {
+ const urlParams = getUrlParams();
+ if (urlParams.recommend_c) {
+ setCookie("recommend_c", urlParams.recommend_c);
+ }
}
isRecommend();
- let bannerData = [];
- let bannerTextTimer = null;
-
- const updateBannerText = (index) => {
- if (!Array.isArray(bannerData) || bannerData.length === 0) {
- return;
- }
- const idx = index >= 0 && index < bannerData.length ? index : 0;
- const item = bannerData[idx] || {};
- // 标签渲染:标题上方的小块标签
- const $tagsWrap = $("#bannerTags");
- if ($tagsWrap.length) {
- $tagsWrap.empty();
- const rawTags = item.tags || "";
- const tags = rawTags
- .split(/[,,]/)
- .map((t) => t.trim())
- .filter((t) => t);
- tags.forEach((tag) => {
- $tagsWrap.append(
- `
${tag}`
- );
- });
- if (tags.length === 0) {
- $tagsWrap.hide();
- } else {
- $tagsWrap.show();
- }
- }
- $("#bannerTitle").text(item.title || "");
- $("#bannerDesc").text(item.description || "");
- const $btn = $("#bannerButton");
- if (item.button_text) {
- const link = item.button_link || item.url || "javascript:;";
- const target = item.button_blank ? "_blank" : "_self";
- $btn
- .text(item.button_text)
- .attr("href", link)
- .attr("target", target)
- .show();
- } else {
- $btn.hide();
- }
- };
-
- // 简单的文案轮播(不再使用 Swiper 图片,仅轮播标题/描述/按钮)
- const startBannerTextLoop = () => {
- if (!Array.isArray(bannerData) || bannerData.length === 0) {
- return;
- }
- let current = 0;
- // 初始化先展示第一条
- updateBannerText(current);
- // 清理旧定时器
- if (bannerTextTimer) {
- clearInterval(bannerTextTimer);
- bannerTextTimer = null;
- }
- // 只有一条时不需要轮播
- if (bannerData.length === 1) {
- return;
- }
- bannerTextTimer = setInterval(() => {
- current = (current + 1) % bannerData.length;
- // 淡入动画:先让文案透明,再渐显
- const $copy = $(".banner-copy");
- $copy
- .stop(true, true)
- .css({ opacity: 0 })
- .animate({ opacity: 1 }, 400);
- updateBannerText(current);
- }, 5000);
- };
-
- // 设置首页函数:直接使用服务端注入的 window.__themeCommon(SSR 数据),避免再次请求配置
+ // 设置首页函数
function setIndexData() {
- const commentObj = window.__themeCommon
- ? window.__themeCommon
- : (sessionStorage.commentData ? JSON.parse(sessionStorage.commentData) : {});
- bannerData = commentObj.banner || [];
- // 仅轮播文案
- startBannerTextLoop();
- if (Array.isArray(commentObj.honor) && commentObj.honor.length > 0) {
+ const commentObj = JSON.parse(sessionStorage.commentData);
+ if (commentObj.honor.length > 0) {
commentObj.honor.forEach((item) => {
$("#certBox").append(`
-

-
${item.name}
-
`);
- });
- }
- if (Array.isArray(commentObj.partner) && commentObj.partner.length > 0 && commentObj.partner.length <= 3) {
- commentObj.partner.forEach((item) => {
- $("#practiceBox").append(`
-

-
${item.description}
-
${item.name}
-
`);
- });
- } else if (Array.isArray(commentObj.partner) && commentObj.partner.length > 3) {
- const arr1 = commentObj.partner.slice(0, 3);
- const arr2 = commentObj.partner.slice(3);
- arr1.forEach((item) => {
- $("#practiceBox").append(`
-

-
${item.description}
-
${item.name}
-
`);
- });
- $("#morPracticeBox").attr("style", "display: flex;");
- arr2.forEach((item) => {
- $("#morPracticeBox").append(`
-

-
`);
- });
- }
+

+
${item.name}
+
`);
+ });
+ }
+ if (commentObj.partner.length > 0 && commentObj.partner.length <= 3) {
+ commentObj.partner.forEach((item) => {
+ $("#practiceBox").append(`
+

+
${item.description}
+
${item.name}
+
`);
+ });
+ } else if (commentObj.partner.length > 3) {
+ const arr1 = commentObj.partner.slice(0, 3);
+ const arr2 = commentObj.partner.slice(3);
+ arr1.forEach((item) => {
+ $("#practiceBox").append(`
+

+
${item.description}
+
${item.name}
+
`);
+ });
+ $("#morPracticeBox").attr("style", "display: flex;");
+ arr2.forEach((item) => {
+ $("#morPracticeBox").append(`
+

+
`);
+ });
+ }
}
- // 首页直接使用服务端注入的数据渲染(SSR),不再请求 /console/v1/common 或 /console/v1/theme/config
- setIndexData();
+ // 获取通用配置信息
+ function getCommentInfo() {
+ $.ajax({
+ url: "/console/v1/common",
+ method: "get",
+ headers: {
+ Authorization: "Bearer" + " " + localStorage.jwt,
+ },
+ success: function (res) {
+ sessionStorage.commentData = JSON.stringify(res.data);
+ setIndexData();
+ },
+ });
+ }
+ // 获取首页数据
+ getCommentInfo();
var viewer = new Viewer(document.getElementById("viewer"), {
button: true,
inline: false,
@@ -180,7 +115,7 @@ $(function () {
D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
return Y + M + D;
}
- // 公告列表
+ // 公告列表
function getAnnounceList() {
$.ajax({
url: "/console/v1/announcement",