优化二级banner

This commit is contained in:
TOP糯米 2023-10-13 16:56:30 +08:00
parent b7f99e74aa
commit 0c4245e159
7 changed files with 35 additions and 11 deletions

View File

@ -35,7 +35,8 @@
</div> </div>
</div> </div>
<div class="container"> <div class="container">
<div class="section sec-banner" style="background-image: url('/images/banner2.png');"> <div class="section sec-banner">
<img class="media" src="images/banner2.png" alt="">
<div class="banner-text"> <div class="banner-text">
<p>您的现金流安全 <span class="cname">左心房</span>来守护</p> <p>您的现金流安全 <span class="cname">左心房</span>来守护</p>
<p>YOUR CASH FLOW LEFT ATRIUM TO GUARD</p> <p>YOUR CASH FLOW LEFT ATRIUM TO GUARD</p>

View File

@ -35,7 +35,8 @@
</div> </div>
</div> </div>
<div class="container"> <div class="container">
<div class="section sec-banner" style="background-image: url('/images/banner2.png');"> <div class="section sec-banner">
<img class="media" src="images/banner2.png" alt="">
<div class="banner-text"> <div class="banner-text">
<p>您的现金流安全 <span class="cname">左心房</span>来守护</p> <p>您的现金流安全 <span class="cname">左心房</span>来守护</p>
<p>YOUR CASH FLOW LEFT ATRIUM TO GUARD</p> <p>YOUR CASH FLOW LEFT ATRIUM TO GUARD</p>

View File

@ -35,7 +35,8 @@
</div> </div>
</div> </div>
<div class="container"> <div class="container">
<div class="section sec-banner" style="background-image: url('/images/banner2.png');"> <div class="section sec-banner">
<img class="media" src="images/banner2.png" alt="">
<div class="banner-text"> <div class="banner-text">
<p>您的现金流安全 <span class="cname">左心房</span>来守护</p> <p>您的现金流安全 <span class="cname">左心房</span>来守护</p>
<p>YOUR CASH FLOW LEFT ATRIUM TO GUARD</p> <p>YOUR CASH FLOW LEFT ATRIUM TO GUARD</p>

View File

@ -312,16 +312,25 @@
color: #E72A3A; color: #E72A3A;
} }
.section.sec-banner { .section.sec-banner {
position: relative;
width: 100%; width: 100%;
height: 4.5rem; height: 4.5rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-position: center center; }
background-repeat: no-repeat; .section.sec-banner .media {
background-size: cover; z-index: 5;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
} }
.section.sec-banner .banner-text { .section.sec-banner .banner-text {
position: relative;
z-index: 10;
padding-top: 0.6rem; padding-top: 0.6rem;
} }
.section.article-detail { .section.article-detail {

View File

@ -404,16 +404,26 @@
} }
.section.sec-banner { .section.sec-banner {
position: relative;
width: 100%; width: 100%;
height: 4.5rem; height: 4.5rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-position: center center;
background-repeat: no-repeat; .media {
background-size: cover; z-index: 5;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.banner-text { .banner-text {
position: relative;
z-index: 10;
padding-top: 0.6rem; padding-top: 0.6rem;
} }
} }

View File

@ -35,7 +35,8 @@
</div> </div>
</div> </div>
<div class="container"> <div class="container">
<div class="section sec-banner" style="background-image: url('/images/banner2.png');"> <div class="section sec-banner">
<img class="media" src="images/banner2.png" alt="">
<div class="banner-text"> <div class="banner-text">
<p>您的现金流安全 <span class="cname">左心房</span>来守护</p> <p>您的现金流安全 <span class="cname">左心房</span>来守护</p>
<p>YOUR CASH FLOW LEFT ATRIUM TO GUARD</p> <p>YOUR CASH FLOW LEFT ATRIUM TO GUARD</p>

View File

@ -35,7 +35,8 @@
</div> </div>
</div> </div>
<div class="container"> <div class="container">
<div class="section sec-banner" style="background-image: url('/images/banner2.png');"> <div class="section sec-banner">
<img class="media" src="images/banner2.png" alt="">
<div class="banner-text"> <div class="banner-text">
<p>您的现金流安全 <span class="cname">左心房</span>来守护</p> <p>您的现金流安全 <span class="cname">左心房</span>来守护</p>
<p>YOUR CASH FLOW LEFT ATRIUM TO GUARD</p> <p>YOUR CASH FLOW LEFT ATRIUM TO GUARD</p>