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-21 18:45:12 +08:00
parent 9b4060ebd4
commit 838ad96ad1
2 changed files with 105 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
css/index.css
View File

@@ -1,66 +1,41 @@
/* banner */
.banner-cont {
.banner {
position: relative;
width: 100%;
background: #f7f9fa;
overflow: hidden;
}
.banner-cont .swiper-slide {
width: 100%;
background: linear-gradient(0, #f7f9fa, #f9fafb);
}
.banner-cont .swiper-slide .img {
/* 保持图片占满宽度，避免拉伸过度 */
width: 100%;
height: auto;
max-width: 100%;
}
/* 文案区域：固定在左侧，顶部留出一致间距，避免切换时轻微位移 */
.banner-cont .banner-text {
/* 轮播图作为背景层，图片负责铺满顶部区域 */
.banner-bg {
position: absolute;
left: 0;
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 {
width: 100%;
height: 100%;
display: flex;
align-items: center; /* 垂直居中，水平方向由内部 .section-content 控制 */
pointer-events: none;
object-fit: cover;
}
.banner-cont .banner-text .section-content {
/* 继承 .section-content 的左右 padding 和宽度，只单独控制上下间距 */
padding-top: 120px;
padding-bottom: 0;
z-index: 1;
.banner-bg .banner-cont .swiper-pagination {
bottom: 24px;
}
/* 文案块：控制具体的左边距，让其与下方 banner-s 第一列内容对齐 */
.banner-cont .banner-copy {
max-width: 560px;
text-align: left; /* 与下方内容同样左对齐 */
}
.banner-cont .banner-copy h1 {
font-size: 40px;
line-height: 1.2;
color: #111827;
}
.banner-cont .banner-copy .banner-desc {
font-size: 16px;
margin-top: 16px;
margin-bottom: 32px;
max-width: 550px;
color: rgba(0, 0, 0, 0.65);
}
/* 按钮保持可点击 */
.banner-cont .banner-text .btn {
pointer-events: auto;
}
.banner-cont .swiper-pagination-bullet {
.banner-bg .banner-cont .swiper-pagination-bullet {
width: 36px;
height: 4px;
background: #D7DCE4;
@@ -68,10 +43,44 @@
border-radius: 3px;
}
.banner-cont .swiper-pagination-bullet-active {
.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;
gap: 24px;
padding-top: 140px; /* 控制文案距离顶部的位置 */
padding-bottom: 40px;
}
.banner-copy {
max-width: 560px;
text-align: left;
}
.banner-copy #bannerTitle {
font-size: 40px;
line-height: 1.2;
color: #111827;
}
.banner-copy .banner-desc {
font-size: 16px;
margin-top: 16px;
margin-bottom: 32px;
max-width: 550px;
color: rgba(0, 0, 0, 0.65);
}
.banner-copy #bannerButton {
pointer-events: auto;
}
.banner .banner-s {
box-shadow: 0px 0px 16px rgba(52, 52, 52, 0.16);
border-radius: 3px;

86
index.html
View File

@@ -13,52 +13,54 @@
<!-- banner -->
<section class="section banner">
<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 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>
</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>
<!-- 服务内容 -->