From dc79afd51f91adec627523eeeb012339f1d014f6 Mon Sep 17 00:00:00 2001
From: yiqiu <yiqiu@ycyaw.com>
Date: Sun, 23 Nov 2025 01:42:09 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E6=B3=95=E5=AE=89=E6=8A=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/index.css | 75 +++++++++++++++++++++++++++------------------------
 index.html    | 55 ++++++++++++++++++++++++-------------
 2 files changed, 77 insertions(+), 53 deletions(-)

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}
         <div class="swiper-slide" style="background-image: url('{$value.img|default='/web/BlackFruit-web/assets/img/index/1@2x.png'}');">
           <div class="section-content">
-            {if !empty($value.tags)}
-            {php}$__tags = preg_split('/[,，]/', $value['tags']);{/php}
-            <div class="banner-tags">
-              {foreach $__tags as $__t}
-              {php}$__t_trim = trim($__t);{/php}
-              {if $__t_trim != ''}
-              <span class="banner-tag-pill">{$__t_trim}</span>
+            <div class="title-wrapper">
+              {if !empty($value.tags)}
+              {php}$__tags = preg_split('/[,，]/', $value['tags']);{/php}
+              <div class="banner-tags">
+                {foreach $__tags as $__t}
+                {php}$__t_trim = trim($__t);{/php}
+                {if $__t_trim != ''}
+                <span class="banner-tag-pill"><span>{$__t_trim}</span></span>
+                {/if}
+                {/foreach}
+              </div>
               {/if}
-              {/foreach}
-            </div>
-            {/if}
 
-            {if !empty($value.title)}
-            <h1>{$value.title}</h1>
-            {/if}
+              {if !empty($value.title)}
+              <h1>{$value.title}</h1>
+              {/if}
+            </div>
 
             {if !empty($value.description)}
             <p class="banner-desc">{$value.description}</p>
@@ -55,22 +57,39 @@
         {else /}
         <div class="swiper-slide" style="background-image: url('/web/BlackFruit-web/assets/img/index/1@2x.png');">
           <div class="section-content">
-            <h1>中小企业的云计算底座</h1>
+            <div class="title-wrapper">
+              <div class="banner-tags">
+                <span class="banner-tag-pill"><span>云计算</span></span>
+                <span class="banner-tag-pill"><span>高性价比</span></span>
+              </div>
+              <h1>中小企业的云计算底座</h1>
+            </div>
             <p class="banner-desc">主题云聚焦中小企业的数智化转型进程，以技术和数据为驱动，以产品和场景为载体，专注于打磨云上业务服务能力，助力中小企业全面业务上云演化。</p>
             <div class="btn btn2 btn-normal">立即查看</div>
           </div>
         </div>
         <div class="swiper-slide" style="background-image: url('/web/BlackFruit-web/assets/img/index/1@2x.png');">
           <div class="section-content">
-            <h1>中小企业的云计算底座</h1>
-            <p class="banner-desc">主题云聚焦中小企业的数智化转型进程，以技术和数据为驱动，以产品和场景为载体，专注于打磨云上业务服务能力，助力中小企业全面业务上云演化。</p>
+            <div class="title-wrapper">
+              <div class="banner-tags">
+                <span class="banner-tag-pill"><span>弹性伸缩</span></span>
+                <span class="banner-tag-pill"><span>安全稳定</span></span>
+              </div>
+              <h1>企业级云服务解决方案</h1>
+            </div>
+            <p class="banner-desc">提供高性能、高可用的云计算服务，支持弹性伸缩，按需付费，助力企业数字化转型。</p>
             <div class="btn btn2 btn-normal">立即查看</div>
           </div>
         </div>
         <div class="swiper-slide" style="background-image: url('/web/BlackFruit-web/assets/img/index/1@2x.png');">
           <div class="section-content">
-            <h1>中小企业的云计算底座</h1>
-            <p class="banner-desc">主题云聚焦中小企业的数智化转型进程，以技术和数据为驱动，以产品和场景为载体，专注于打磨云上业务服务能力，助力中小企业全面业务上云演化。</p>
+            <div class="title-wrapper">
+              <div class="banner-tags">
+                <span class="banner-tag-pill"><span>全球部署</span></span>
+              </div>
+              <h1>全球云基础设施</h1>
+            </div>
+            <p class="banner-desc">覆盖全球20+地区，60+可用区，500+CDN节点，为您提供低延迟、高可用的云服务体验。</p>
             <div class="btn btn2 btn-normal">立即查看</div>
           </div>
         </div>