yiqiu/BlackFruit-UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

大法安抚
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
yiqiu
2025-11-23 01:42:09 +08:00
parent 38805aecc2
commit dc79afd51f
2 changed files with 77 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
css/index.css
View File

@@ -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;
}
/* 按钮优化 - 科技感渐变发光效果 */

55
index.html
View File

@@ -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>