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

1
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
yiqiu
2025-11-21 19:31:49 +08:00
parent a26d8e2d30
commit 5d15e2f48c
2 changed files with 66 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
css/index.css
View File

@@ -1,61 +1,37 @@
/* banner */
.banner {
.banner-cont {
position: relative;
background: #f7f9fa;
width: 100%;
overflow: hidden;
}
/* 轮播图作为背景层，图片负责铺满顶部区域 */
.banner-bg {
.banner-cont .swiper-slide {
width: 100%;
background: linear-gradient(0, #f7f9fa, #f9fafb);
}
.banner-cont .swiper-slide .img {
/* 图片撑开高度，避免被裁切 */
display: block;
width: 100%;
height: auto;
max-width: 100%;
}
/* 文案层：覆盖在轮播上，使用 section-content 控制左右宽度 */
.banner-cont .banner-text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 420px;
overflow: hidden;
}
.banner-bg .banner-cont,
.banner-bg .banner-cont .swiper-wrapper,
.banner-bg .banner-cont .swiper-slide {
height: 100%;
}
.banner-bg .banner-cont .swiper-slide {
background: transparent;
}
.banner-bg .banner-cont .swiper-slide .img {
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.banner-bg .banner-cont .swiper-pagination {
bottom: 24px;
}
.banner-bg .banner-cont .swiper-pagination-bullet {
width: 36px;
height: 4px;
background: #D7DCE4;
opacity: 1;
border-radius: 3px;
}
.banner-bg .banner-cont .swiper-pagination-bullet-active {
background: rgba(255, 103, 57, 1);
}
/* 文案 + 下方模块共用一个 section-content 容器，天然同宽 */
.banner-main {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: space-between; /* 文案在上，banner-s 靠容器底部 */
min-height: 420px; /* 与 .banner-bg 高度保持一致 */
padding-top: 80px; /* 文案距离顶部的内边距 */
align-items: flex-start; /* 文案从上方开始 */
pointer-events: none;
}
.banner-cont .banner-text .section-content {
padding-top: 80px; /* 文案距顶部 */
padding-bottom: 0;
}
@@ -82,12 +58,6 @@
pointer-events: auto;
}
/* banner 区域内的 section-content 不需要额外的上下 padding，由 .banner-main 控制 */
.banner .section-content {
padding-top: 0;
padding-bottom: 0;
}
.banner .banner-s {
box-shadow: 0px 0px 16px rgba(52, 52, 52, 0.16);
border-radius: 3px;

86
index.html
View File

@@ -13,54 +13,52 @@
<!-- banner -->
<section class="section banner">
<!-- 背景轮播图，只负责展示图片 -->
<div class="banner-bg">
<div class="swiper banner-cont">
<div class="swiper-wrapper" id="bannerWrapper"></div>
<div class="swiper-pagination"></div>
</div>
</div>
<!-- 内容区域，和下方模块共用同一个 section-content 容器 -->
<div class="section-content">
<div class="banner-main">
<div class="banner-copy">
<h1 id="bannerTitle"></h1>
<p class="banner-desc" id="bannerDesc"></p>
<a
class="btn btn2 btn-normal"
href="javascript:;"
id="bannerButton"
style="display: none;"
></a>
</div>
<div class="banner-s">
<div class="banner-list">
<div class="banner-item" id="cloud-box">
<h5>云服务器专场</h5>
<p class="title-desc mt-10 mb-10">无数个人用户的共同选择</p>
<span class="banner-tag">4核8G仅需228元</span>
</div>
<div class="banner-item" id="domain-box">
<h5>域名注册</h5>
<p class="title-desc mt-10 mb-10">优选主流域名注册服务</p>
<span class="banner-tag">.top 88元起</span>
</div>
<div class="banner-item" id="cps-box">
<h5>CPS推广</h5>
<p class="title-desc mt-10 mb-10">多种产品高达30%高额佣金</p>
<span class="banner-tag">最高可返佣金5W</span>
</div>
<div class="banner-item" id="logon-box">
<h5>注册有礼</h5>
<p class="title-desc mt-10 mb-10">免费注册领取专属礼包</p>
<span class="banner-tag">价值2000元</span>
</div>
<div class="swiper banner-cont">
<div class="swiper-wrapper" id="bannerWrapper"></div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 固定文案区域，使用第一张轮播图的标题/描述/按钮 -->
<div class="banner-text">
<div class="section-content">
<div class="banner-copy">
<h1 id="bannerTitle"></h1>
<p class="banner-desc" id="bannerDesc"></p>
<a
class="btn btn2 btn-normal"
href="javascript:;"
id="bannerButton"
style="display: none;"
></a>
</div>
</div>
</div>
</div>
</div>
<div class="banner-s">
<div class="section-content banner-list">
<div class="banner-item" id="cloud-box">
<h5>云服务器专场</h5>
<p class="title-desc mt-10 mb-10">无数个人用户的共同选择</p>
<span class="banner-tag">4核8G仅需228元</span>
</div>
<div class="banner-item" id="domain-box">
<h5>域名注册</h5>
<p class="title-desc mt-10 mb-10">优选主流域名注册服务</p>
<span class="banner-tag">.top 88元起</span>
</div>
<div class="banner-item" id="cps-box">
<h5>CPS推广</h5>
<p class="title-desc mt-10 mb-10">多种产品高达30%高额佣金</p>
<span class="banner-tag">最高可返佣金5W</span>
</div>
<div class="banner-item" id="logon-box">
<h5>注册有礼</h5>
<p class="title-desc mt-10 mb-10">免费注册领取专属礼包</p>
<span class="banner-tag">价值2000元</span>
</div>
</div>
</div>
</section>
<!-- 服务内容 -->