topnuomi
/
zxf
mirror of https://gitee.com/topnuomi/zxf
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

优化二级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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
about.html
View File

@ -35,7 +35,8 @@
</div>
</div>
<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">
<p>您的现金流安全 <span class="cname">左心房</span>来守护</p>
<p>YOUR CASH FLOW LEFT ATRIUM TO GUARD</p>

3
business.html
View File

@ -35,7 +35,8 @@
</div>
</div>
<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">
<p>您的现金流安全 <span class="cname">左心房</span>来守护</p>
<p>YOUR CASH FLOW LEFT ATRIUM TO GUARD</p>

3
contact.html
View File

@ -35,7 +35,8 @@
</div>
</div>
<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">
<p>您的现金流安全 <span class="cname">左心房</span>来守护</p>
<p>YOUR CASH FLOW LEFT ATRIUM TO GUARD</p>

15
css/style.css
View File

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

16
css/style.less
View File

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

3
detail.html
View File

@ -35,7 +35,8 @@
</div>
</div>
<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">
<p>您的现金流安全 <span class="cname">左心房</span>来守护</p>
<p>YOUR CASH FLOW LEFT ATRIUM TO GUARD</p>

3
story.html
View File

@ -35,7 +35,8 @@
</div>
</div>
<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">
<p>您的现金流安全 <span class="cname">左心房</span>来守护</p>
<p>YOUR CASH FLOW LEFT ATRIUM TO GUARD</p>