diff --git a/css/index.css b/css/index.css
index 92514be..663e2d7 100644
--- a/css/index.css
+++ b/css/index.css
@@ -269,6 +269,13 @@
max-width: 650px;
}
+/* 标题和标签的容器 */
+.banner-cont .swiper-slide .section-content .title-wrapper {
+ display: inline-block;
+ max-width: 650px;
+ width: 100%;
+}
+
.banner-cont .swiper-slide h1 {
font-size: 58px;
line-height: 1.2;
@@ -276,8 +283,8 @@
color: #FFFFFF;
letter-spacing: -1px;
margin-bottom: 0;
- position: relative;
display: inline-block;
+ width: 100%;
background: linear-gradient(90deg,
rgba(255, 255, 255, 0.3) 0%,
rgba(255, 255, 255, 1) 25%,
@@ -289,7 +296,7 @@
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
- animation: shine 3s linear infinite;
+ animation: shine 6s linear infinite;
}
@keyframes shine {
@@ -321,60 +328,58 @@
line-height: 1.8;
}
-/* 轮播文案标签(标题上方的小圆角标签) */
+/* 轮播文案标签(标题上方的平行四边形标签) */
.banner-tags {
- margin-bottom: 20px;
+ margin-bottom: 16px;
display: flex;
flex-wrap: wrap;
- gap: 12px;
+ gap: 10px;
justify-content: flex-end;
}
.banner-tag-pill {
display: inline-flex;
align-items: center;
- padding: 8px 18px;
- font-size: 13px;
- border-radius: 20px;
- background: linear-gradient(135deg, rgba(56, 189, 248, 0.15) 0%, rgba(99, 102, 241, 0.15) 100%);
- color: #38BDF8;
- border: 1px solid rgba(56, 189, 248, 0.4);
- backdrop-filter: blur(10px);
- font-weight: 500;
- white-space: nowrap;
+ padding: 6px 16px;
+ font-size: 12px;
+ font-weight: 600;
+ color: #FFFFFF;
+ background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%);
+ border: none;
position: relative;
- overflow: hidden;
+ white-space: nowrap;
+ transform: skewX(-10deg);
+ box-shadow: 0 4px 12px rgba(56, 189, 248, 0.4);
transition: all 0.3s ease;
}
-/* 标签发光效果 */
+.banner-tag-pill span {
+ display: inline-block;
+ transform: skewX(10deg);
+}
+
+/* 标签发光边框 */
.banner-tag-pill::before {
content: '';
position: absolute;
- top: 0;
- left: -100%;
- width: 100%;
- height: 100%;
- background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
- transition: left 0.5s ease;
-}
-
-.banner-tag-pill:hover::before {
- left: 100%;
+ top: -1px;
+ left: -1px;
+ right: -1px;
+ bottom: -1px;
+ background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%);
+ z-index: -1;
+ filter: blur(4px);
+ opacity: 0;
+ transition: opacity 0.3s ease;
}
.banner-tag-pill:hover {
- transform: translateY(-2px);
- box-shadow: 0 4px 16px rgba(56, 189, 248, 0.4);
- border-color: rgba(56, 189, 248, 0.6);
+ transform: skewX(-10deg) translateY(-2px);
+ box-shadow: 0 6px 20px rgba(56, 189, 248, 0.6);
}
-/* 标签图标装饰 */
-.banner-tag-pill::after {
- content: '✦';
- margin-left: 6px;
- font-size: 10px;
- opacity: 0.6;
+.banner-tag-pill:hover::before {
+ opacity: 0.8;
}
/* 按钮优化 - 科技感渐变发光效果 */
diff --git a/index.html b/index.html
index 1e168d5..b230afb 100644
--- a/index.html
+++ b/index.html
@@ -20,21 +20,23 @@
{foreach $data.banner as $key=>$value}
- {if !empty($value.tags)}
- {php}$__tags = preg_split('/[,,]/', $value['tags']);{/php}
-
{if !empty($value.description)}
{$value.description}
@@ -55,22 +57,39 @@
{else /}
-
中小企业的云计算底座
+
+
+ 云计算
+ 高性价比
+
+
中小企业的云计算底座
+
主题云聚焦中小企业的数智化转型进程,以技术和数据为驱动,以产品和场景为载体,专注于打磨云上业务服务能力,助力中小企业全面业务上云演化。
立即查看
-
中小企业的云计算底座
-
主题云聚焦中小企业的数智化转型进程,以技术和数据为驱动,以产品和场景为载体,专注于打磨云上业务服务能力,助力中小企业全面业务上云演化。
+
+
+ 弹性伸缩
+ 安全稳定
+
+
企业级云服务解决方案
+
+
提供高性能、高可用的云计算服务,支持弹性伸缩,按需付费,助力企业数字化转型。
立即查看
-
中小企业的云计算底座
-
主题云聚焦中小企业的数智化转型进程,以技术和数据为驱动,以产品和场景为载体,专注于打磨云上业务服务能力,助力中小企业全面业务上云演化。
+
+
覆盖全球20+地区,60+可用区,500+CDN节点,为您提供低延迟、高可用的云服务体验。
立即查看