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

更新手机版前端样式

This commit is contained in:
TOP糯米 2023-10-08 21:48:47 +08:00
parent 4b989ab692
commit 396c18428c
12 changed files with 527 additions and 236 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
about.html
View File

@ -19,7 +19,23 @@
</head>
<body>
<div class="header"></div>
<div class="header">
<div class="main main-wrap">
<div class="logo">
<a href="" target="_blank">
<img src="images/logo.png" alt="">
</a>
</div>
<div class="menu">
<ul class="menu-group">
</ul>
<div class="menu-btn mobile">
<img class="btn-img" src="/images/menu.png" alt="">
</div>
<div class="menu-mask mobile"></div>
</div>
</div>
</div>
<div class="container">
<div class="section sec-banner" style="background-image: url('/images/banner2.png');">
<div class="banner-text">

50
business.html
View File

@ -19,7 +19,23 @@
</head>
<body>
<div class="header"></div>
<div class="header">
<div class="main main-wrap">
<div class="logo">
<a href="" target="_blank">
<img src="images/logo.png" alt="">
</a>
</div>
<div class="menu">
<ul class="menu-group">
</ul>
<div class="menu-btn mobile">
<img class="btn-img" src="/images/menu.png" alt="">
</div>
<div class="menu-mask mobile"></div>
</div>
</div>
</div>
<div class="container">
<div class="section sec-banner" style="background-image: url('/images/banner2.png');">
<div class="banner-text">
@ -44,29 +60,29 @@
<li>
<a href="" class="item">
<img class="icon" src="images/tu2.png" alt="">
<h4>营销投放</h4>
<p>定向目标受众精准投放</p>
<h4 class="limit-line clamp-1">营销投放</h4>
<p class="limit-line clamp-1">定向目标受众精准投放</p>
</a>
</li>
<li>
<a href="" class="item">
<img class="icon" src="images/tu2.png" alt="">
<h4>运营服务</h4>
<p>广告全案推广</p>
<h4 class="limit-line clamp-1">运营服务</h4>
<p class="limit-line clamp-1">广告全案推广</p>
</a>
</li>
<li>
<a href="" class="item">
<img class="icon" src="images/tu2.png" alt="">
<h4>短视频营销</h4>
<p>品牌IP打造</p>
<h4 class="limit-line clamp-1">短视频营销</h4>
<p class="limit-line clamp-1">品牌IP打造</p>
</a>
</li>
<li>
<a href="" class="item">
<img class="icon" src="images/tu2.png" alt="">
<h4>私域运营</h4>
<p>微信全链路营销</p>
<h4 class="limit-line clamp-1">私域运营</h4>
<p class="limit-line clamp-1">微信全链路营销</p>
</a>
</li>
</ul>
@ -80,7 +96,7 @@
<img class="icon" src="images/tu2.png" alt="">
</div>
<div class="desc">
<h4>财务咨询</h4>
<h4 class="limit-line clamp-1">财务咨询</h4>
<p class="limit-line clamp-2">
为中小微企业提供财务咨询服务，帮助企业提高财务管理能力、提供更多实时智能为中小微企业提供财务咨询服务，帮助企业提高财务管理能力、提供更多实时智能为中小微企业提供财务咨询服务，帮助企业提高财务管理能力、提供更多实时智能
</p>
@ -93,7 +109,7 @@
<img class="icon" src="images/tu2.png" alt="">
</div>
<div class="desc">
<h4>财务咨询</h4>
<h4 class="limit-line clamp-1">财务咨询</h4>
<p class="limit-line clamp-2">为中小微企业提供财务咨询服务，帮助企业提高财务管理能力、提供更多实时智能…</p>
</div>
</a>
@ -117,7 +133,7 @@
<img src="images/tu2.png" alt="" class="icon">
</div>
<div class="desc">
<h4 class="i-title">梳理债务清单</h4>
<h4 class="i-title limit-line clamp-1">梳理债务清单</h4>
<p class="i-desc limit-line clamp-2">
制定侵务清单，包斯所有借款、信用卡余额、贷款等，
记录位务金额、利率、最低付款和到期日:
@ -131,7 +147,7 @@
<img src="images/tu2.png" alt="" class="icon">
</div>
<div class="desc">
<h4 class="i-title">梳理债务清单</h4>
<h4 class="i-title limit-line clamp-1">梳理债务清单</h4>
<p class="i-desc limit-line clamp-2">
制定侵务清单，包斯所有借款、信用卡余额、贷款等，
记录位务金额、利率、最低付款和到期日:
@ -145,7 +161,7 @@
<img src="images/tu2.png" alt="" class="icon">
</div>
<div class="desc">
<h4 class="i-title">梳理债务清单</h4>
<h4 class="i-title limit-line clamp-1">梳理债务清单</h4>
<p class="i-desc limit-line clamp-2">
制定侵务清单，包斯所有借款、信用卡余额、贷款等，
记录位务金额、利率、最低付款和到期日:
@ -159,7 +175,7 @@
<img src="images/tu2.png" alt="" class="icon">
</div>
<div class="desc">
<h4 class="i-title">梳理债务清单</h4>
<h4 class="i-title limit-line clamp-1">梳理债务清单</h4>
<p class="i-desc limit-line clamp-2">
制定侵务清单，包斯所有借款、信用卡余额、贷款等，
记录位务金额、利率、最低付款和到期日:
@ -173,7 +189,7 @@
<img src="images/tu2.png" alt="" class="icon">
</div>
<div class="desc">
<h4 class="i-title">梳理债务清单</h4>
<h4 class="i-title limit-line clamp-1">梳理债务清单</h4>
<p class="i-desc limit-line clamp-2">
制定侵务清单，包斯所有借款、信用卡余额、贷款等，
记录位务金额、利率、最低付款和到期日:
@ -187,7 +203,7 @@
<img src="images/tu2.png" alt="" class="icon">
</div>
<div class="desc">
<h4 class="i-title">梳理债务清单</h4>
<h4 class="i-title limit-line clamp-1">梳理债务清单</h4>
<p class="i-desc limit-line clamp-2">
制定侵务清单，包斯所有借款、信用卡余额、贷款等，
记录位务金额、利率、最低付款和到期日:

58
common/header.html
View File

@ -1,30 +1,28 @@
<div class="main main-wrap">
<div class="logo">
<a href="" target="_blank">
<img src="images/logo.png" alt="">
</a>
</div>
<div class="menu">
<ul class="menu-group">
<li class="item">
<a class="link active" href="/index.html" target="_blank">首页</a>
</li>
<li class="item">
<a class="link" href="/about.html" target="_blank">关于左心房</a>
</li>
<li class="item">
<a class="link" href="/business.html" target="_blank">业务与介绍</a>
</li>
<li class="item">
<a class="link" href="/story.html" target="_blank">用户故事</a>
</li>
<li class="item">
<a class="link" href="/contact.html" target="_blank">联系我们</a>
</li>
</ul>
<div class="menu-btn mobile">
<img class="btn-img" src="/images/menu.png" alt="">
</div>
<div class="menu-mask mobile"></div>
</div>
</div>
<style>
.header .menu .menu-mask {
background-image: url('images/transparent-bg.png');
}
.section.addrcont .aacont li::before {
background-image: url('images/daohang.png');
}
.section.story-cont .image-con .text-con {
background-image: url('images/transparent-bg.png');
}
</style>
<li class="item">
<a class="link active" href="/index.html" target="_blank">首页</a>
</li>
<li class="item">
<a class="link" href="/about.html" target="_blank">关于左心房</a>
</li>
<li class="item">
<a class="link" href="/business.html" target="_blank">业务与介绍</a>
</li>
<li class="item">
<a class="link" href="/story.html" target="_blank">用户故事</a>
</li>
<li class="item">
<a class="link" href="/contact.html" target="_blank">联系我们</a>
</li>

18
contact.html
View File

@ -19,7 +19,23 @@
</head>
<body>
<div class="header"></div>
<div class="header">
<div class="main main-wrap">
<div class="logo">
<a href="" target="_blank">
<img src="images/logo.png" alt="">
</a>
</div>
<div class="menu">
<ul class="menu-group">
</ul>
<div class="menu-btn mobile">
<img class="btn-img" src="/images/menu.png" alt="">
</div>
<div class="menu-mask mobile"></div>
</div>
</div>
</div>
<div class="container">
<div class="section sec-banner" style="background-image: url('/images/banner2.png');">
<div class="banner-text">

148
css/responsive.css
View File

@ -36,7 +36,6 @@
right: 0;
bottom: 0;
animation-duration: 0.35s;
background-image: url('../images/transparent-bg.png');
}
.header .menu .menu-btn {
font-size: 0;
@ -69,13 +68,12 @@
max-height: 26px;
}
.footer .main .row {
font-size: 10px;
margin-top: 10px;
line-height: 13px;
font-size: 16px;
margin-top: 15px;
}
.footer .main .tel {
width: 178px;
font-size: 12px;
width: 208px;
font-size: 16px;
padding: 10px;
}
.section.main-banner .item {
@ -85,16 +83,16 @@
padding-top: 25px;
}
.banner-text p:nth-child(1) {
font-size: 15px;
line-height: 15px;
font-size: 18px;
line-height: 18px;
margin-bottom: 15px;
}
.banner-text p:nth-child(2) {
font-size: 12px;
line-height: 12px;
font-size: 14px;
line-height: 16px;
}
.section .section-title.style-1 .title {
font-size: 15px;
font-size: 18px;
line-height: 18px;
}
.section .section-title.style-1 .title::before,
@ -107,38 +105,38 @@
}
.section.idx-about .ia-container {
margin-top: 20px;
font-size: 12px;
line-height: 18px;
font-size: 16px;
line-height: 20px;
}
.section.idx-about .ia-image {
margin-top: 20px;
}
.section.idx-calture {
.section.idx-culture {
margin-top: 35px;
margin-bottom: 35px;
}
.section.idx-calture .caltrue-item:first-child {
.section.idx-culture .culture-item:first-child {
margin-top: 20px;
}
.section.idx-calture .caltrue-item {
.section.idx-culture .culture-item {
height: auto;
margin-top: 10px;
padding: 20px;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.35);
}
.section.idx-calture .title {
.section.idx-culture .title {
margin-bottom: 14px;
}
.section.idx-calture .title .text {
font-size: 15px;
.section.idx-culture .title .text {
font-size: 16px;
}
.section.idx-calture .title .cover {
.section.idx-culture .title .cover {
width: 15px;
height: 15px;
margin-right: 8px;
}
.section.idx-calture .desc {
font-size: 12px;
.section.idx-culture .desc {
font-size: 14px;
line-height: 18px;
}
.section.sec-banner {
@ -159,8 +157,8 @@
}
.section.about-textarea .content {
margin-top: 20px;
font-size: 12px;
line-height: 18px;
font-size: 16px;
line-height: 20px;
}
.section.about-textarea .img-group {
margin-top: 30px;
@ -185,7 +183,7 @@
.section.addrcont .aacont li::before {
width: 19px;
height: 19px;
margin-top: 6px;
margin-top: 2px;
}
.section.addrcont .aacont li:nth-child(2) {
margin-top: 15px;
@ -197,8 +195,8 @@
align-items: flex-start;
}
.section.addrcont .aacont a {
font-size: 12px;
line-height: 30px;
font-size: 16px;
line-height: unset;
margin-left: 7px;
}
.section.contact-map {
@ -223,12 +221,12 @@
height: 220px;
}
.section.contact-map .title h1 {
font-size: 14px;
font-size: 18px;
margin-bottom: 0;
line-height: 14px;
line-height: 18px;
}
.section.contact-map .title p {
font-size: 10px;
font-size: 14px;
}
.section.contact-map .items li {
margin-top: 5px;
@ -238,25 +236,25 @@
height: 13px;
}
.section.contact-map .items p {
font-size: 12px;
line-height: 13px;
font-size: 14px;
line-height: 14px;
}
.section.paragraph-content {
margin-top: 35px;
margin-bottom: 37px;
}
.section.paragraph-content .paragraph .title {
font-size: 14px;
font-size: 18px;
line-height: 18px;
text-align: center;
margin-bottom: 18px;
}
.section.paragraph-content .paragraph .content {
font-size: 12px;
font-size: 16px;
line-height: 20px;
}
.section.cooperate .content {
font-size: 12px;
font-size: 16px;
line-height: 20px;
margin-top: 28px;
margin-bottom: 35px;
@ -271,29 +269,32 @@
border-bottom: 2px dashed #E5E5E5;
}
.section.article-detail .title h1 {
font-size: 14px;
line-height: 18px;
font-size: 18px;
line-height: 20px;
}
.section.article-detail .content {
padding: 12px 0;
font-size: 12px;
line-height: 18px;
font-size: 16px;
line-height: 20px;
}
.section.story-cont {
margin-top: 24px;
}
.section.story-cont .title {
font-size: 11px;
font-size: 18px;
text-align: center;
margin-bottom: 12px;
}
.section.story-cont .image-con {
border-radius: 0;
}
.section.story-cont .image-con p {
font-size: 10px;
line-height: 12px;
padding: 9px 15px;
.section.story-cont .image-con .text-con {
padding: 9px 10px;
}
.section.story-cont .image-con .text-con p {
height: 16px;
font-size: 16px;
line-height: 16px;
}
.section.story-cont .story-item:nth-child(2n) .desc {
border-radius: 0;
@ -314,8 +315,8 @@
}
.section.story-cont .story-item .text {
display: inline-block;
font-size: 12px;
line-height: 12px;
font-size: 16px;
line-height: 20px;
margin-bottom: 20px;
}
.section.story-cont .story-item .text:nth-child(2) {
@ -323,15 +324,15 @@
margin-left: 10px;
}
.section.story-cont .story-item .content {
font-size: 12px;
line-height: 18px;
font-size: 14px;
line-height: 20px;
}
.section.story-cont.last {
margin-bottom: 24px;
}
.s-section .s-title {
font-size: 12px;
line-height: 12px;
font-size: 18px;
line-height: 16px;
text-align: center;
}
.s-section.s1-first {
@ -343,25 +344,24 @@
margin-top: 10px;
}
.section.business-nav .nav li {
width: 110px;
height: 30px;
width: auto;
padding: 0;
}
.section.business-nav .nav a {
display: block;
width: 100%;
height: 100%;
color: #666666;
font-size: 10px;
font-size: 14px;
line-height: 30px;
background-color: #F3F3F3;
padding: 2px 5px;
}
.section.business-cont .title {
font-size: 0px;
}
.section.business-cont .title h2 {
font-size: 12px;
line-height: 12px;
font-size: 18px;
line-height: 18px;
}
.section.business-cont .title::after {
width: 29px;
@ -378,7 +378,7 @@
margin: 15px 0 5px 0;
}
.business-cont.s2 .mid-box .ad-text {
font-size: 12px;
font-size: 14px;
font-weight: normal;
text-align: center;
}
@ -393,12 +393,12 @@
margin-bottom: 20px;
}
.business-cont.s3 .mid-box .num {
font-size: 12px;
line-height: 12px;
font-size: 14px;
line-height: 18px;
}
.business-cont.s3 .mid-box .desc {
font-size: 10px;
line-height: 10px;
font-size: 14px;
line-height: 18px;
margin-top: 10px;
}
.business-cont.s3 .mid-box .cont {
@ -429,11 +429,11 @@
height: 41px;
}
.s-content.g1 h4 {
font-size: 12px;
font-size: 16px;
margin: 15px 0;
}
.s-content.g1 p {
font-size: 10px;
font-size: 14px;
}
.s-content.g1 .item {
width: 100%;
@ -460,11 +460,11 @@
height: auto;
}
.s-content.g2 .desc h4 {
font-size: 10px;
font-size: 16px;
margin-bottom: 10px;
}
.s-content.g2 .desc p {
font-size: 10px;
font-size: 14px;
}
.s-content.g3 ul,
.s-content.g4 ul {
@ -494,14 +494,16 @@
}
.s-content.g3 .desc .i-title,
.s-content.g4 .desc .i-title {
font-size: 10px;
height: 20px;
font-size: 16px;
margin-bottom: 5px;
line-height: 13px;
line-height: 20px;
}
.s-content.g3 .desc .i-desc,
.s-content.g4 .desc .i-desc {
font-size: 10px;
line-height: 15px;
height: 32px;
font-size: 14px;
line-height: 16px;
color: #666666;
}
.s-content.g3 .icon-cont,
@ -520,10 +522,10 @@
}
.s-content.g3 .btn .b-text,
.s-content.g4 .btn .b-text {
width: 120px;
width: 130px;
height: 26px;
line-height: 26px;
font-size: 10px;
font-size: 14px;
}
.s-content.g5 {
margin-top: 15px;
@ -536,8 +538,8 @@
height: 26px;
}
.s-content.g5 .item p {
font-size: 10px;
line-height: 14px;
font-size: 16px;
line-height: 20px;
margin-top: 15px;
}
}

145
css/responsive.less
View File

@ -1,5 +1,9 @@
// main max width
@mw: 92%;
@xt: 18px;
@mt: 16px;
@st: 14px;
@mst: 12px;
@media screen and (max-width: 768px) {
.pc {
@ -48,7 +52,7 @@
right: 0;
bottom: 0;
animation-duration: 0.35s;
background-image: url('../images/transparent-bg.png');
// background-image: url('../images/transparent-bg.png');
}
.menu-btn {
@ -94,14 +98,13 @@
.main {
.row {
font-size: 10px;
margin-top: 10px;
line-height: 13px;
font-size: @mt;
margin-top: 15px;
}
.tel {
width: 178px;
font-size: 12px;
width: 208px;
font-size: @mt;
padding: 10px;
}
}
@ -117,21 +120,21 @@
padding-top: 25px;
p:nth-child(1) {
font-size: 15px;
line-height: 15px;
font-size: @xt;
line-height: 18px;
margin-bottom: 15px;
}
p:nth-child(2) {
font-size: 12px;
line-height: 12px;
font-size: @st;
line-height: 16px;
}
}
.section {
.section-title.style-1 {
.title {
font-size: 15px;
font-size: @xt;
line-height: 18px;
}
@ -148,8 +151,8 @@
.ia-container {
margin-top: 20px;
font-size: 12px;
line-height: 18px;
font-size: @mt;
line-height: 20px;
}
.ia-image {
@ -157,15 +160,15 @@
}
}
.section.idx-calture {
.section.idx-culture {
margin-top: 35px;
margin-bottom: 35px;
.caltrue-item:first-child {
.culture-item:first-child {
margin-top: 20px;
}
.caltrue-item {
.culture-item {
height: auto;
margin-top: 10px;
padding: 20px;
@ -176,7 +179,7 @@
margin-bottom: 14px;
.text {
font-size: 15px;
font-size: @mt;
}
.cover {
@ -187,7 +190,7 @@
}
.desc {
font-size: 12px;
font-size: @st;
line-height: 18px;
}
}
@ -214,8 +217,8 @@
.content {
margin-top: 20px;
font-size: 12px;
line-height: 18px;
font-size: @mt;
line-height: 20px;
}
.img-group {
@ -247,7 +250,7 @@
li::before {
width: 19px;
height: 19px;
margin-top: 6px;
margin-top: 2px;
}
li:nth-child(2) {
@ -262,8 +265,8 @@
}
a {
font-size: 12px;
line-height: 30px;
font-size: @mt;
line-height: unset;
margin-left: 7px;
}
}
@ -296,13 +299,13 @@
.title {
h1 {
font-size: 14px;
font-size: @xt;
margin-bottom: 0;
line-height: 14px;
line-height: 18px;
}
p {
font-size: 10px;
font-size: @st;
}
}
@ -317,8 +320,8 @@
}
p {
font-size: 12px;
line-height: 13px;
font-size: @st;
line-height: 14px;
}
}
}
@ -329,14 +332,14 @@
.paragraph {
.title {
font-size: 14px;
font-size: @xt;
line-height: 18px;
text-align: center;
margin-bottom: 18px;
}
.content {
font-size: 12px;
font-size: @mt;
line-height: 20px;
}
}
@ -344,7 +347,7 @@
.section.cooperate {
.content {
font-size: 12px;
font-size: @mt;
line-height: 20px;
margin-top: 28px;
margin-bottom: 35px;
@ -361,15 +364,15 @@
border-bottom: 2px dashed #E5E5E5;
h1 {
font-size: 14px;
line-height: 18px;
font-size: @xt;
line-height: 20px;
}
}
.content {
padding: 12px 0;
font-size: 12px;
line-height: 18px;
font-size: @mt;
line-height: 20px;
}
}
@ -377,7 +380,7 @@
margin-top: 24px;
.title {
font-size: 11px;
font-size: @xt;
text-align: center;
margin-bottom: 12px;
}
@ -385,10 +388,13 @@
.image-con {
border-radius: 0;
p {
font-size: 10px;
line-height: 12px;
padding: 9px 15px;
.text-con {
padding: 9px 10px;
p {
height: 16px;
font-size: @mt;
line-height: 16px;
}
}
}
@ -417,8 +423,8 @@
.text {
display: inline-block;
font-size: 12px;
line-height: 12px;
font-size: @mt;
line-height: 20px;
margin-bottom: 20px;
}
@ -428,8 +434,8 @@
}
.content {
font-size: 12px;
line-height: 18px;
font-size: @st;
line-height: 20px;
}
}
}
@ -440,8 +446,8 @@
.s-section {
.s-title {
font-size: 12px;
line-height: 12px;
font-size: @xt;
line-height: 16px;
text-align: center;
}
}
@ -457,19 +463,18 @@
.nav {
li {
width: 110px;
height: 30px;
width: auto;
padding: 0;
}
a {
display: block;
width: 100%;
height: 100%;
color: #666666;
font-size: 10px;
font-size: @st;
line-height: 30px;
background-color: #F3F3F3;
padding: 2px 5px;
}
}
}
@ -479,8 +484,8 @@
font-size: 0px;
h2 {
font-size: 12px;
line-height: 12px;
font-size: @xt;
line-height: 18px;
}
}
@ -502,7 +507,7 @@
margin: 15px 0 5px 0;
.ad-text {
font-size: 12px;
font-size: @st;
font-weight: normal;
text-align: center;
}
@ -520,13 +525,13 @@
margin-bottom: 20px;
.num {
font-size: 12px;
line-height: 12px;
font-size: @st;
line-height: 18px;
}
.desc {
font-size: 10px;
line-height: 10px;
font-size: @st;
line-height: 18px;
margin-top: 10px;
}
@ -567,12 +572,12 @@
}
h4 {
font-size: 12px;
font-size: @mt;
margin: 15px 0;
}
p {
font-size: 10px;
font-size: @st;
}
.item {
@ -606,12 +611,12 @@
height: auto;
h4 {
font-size: 10px;
font-size: @mt;
margin-bottom: 10px;
}
p {
font-size: 10px;
font-size: @st;
}
}
}
@ -644,14 +649,16 @@
text-align: left;
.i-title {
font-size: 10px;
height: 20px;
font-size: @mt;
margin-bottom: 5px;
line-height: 13px;
line-height: 20px;
}
.i-desc {
font-size: 10px;
line-height: 15px;
height: 32px;
font-size: @st;
line-height: 16px;
color: #666666;
}
}
@ -673,10 +680,10 @@
.btn {
.b-text {
width: 120px;
width: 130px;
height: 26px;
line-height: 26px;
font-size: 10px;
font-size: @st;
}
}
}
@ -693,8 +700,8 @@
}
p {
font-size: 10px;
line-height: 14px;
font-size: @mt;
line-height: 20px;
margin-top: 15px;
}
}

88
css/style.css
View File

@ -1,3 +1,21 @@
@keyframes headerFadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes headerFadeInDown {
0% {
opacity: 0;
transform: translateY(-100%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.mobile {
display: none;
}
@ -46,7 +64,9 @@
left: 0;
right: 0;
width: 100%;
background-image: url('../images/transparent-bg.png');
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0));
animation-name: headerFadeInDown;
animation-duration: 0.8s;
}
.header .main {
height: 90px;
@ -201,16 +221,16 @@
.section.idx-about .ia-image img {
width: 100%;
}
.section.idx-calture {
.section.idx-culture {
margin-top: 90px;
margin-bottom: 60px;
}
.section.idx-calture .ic-container {
.section.idx-culture .ic-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.section.idx-calture .caltrue-item {
.section.idx-culture .culture-item {
display: flex;
justify-content: space-between;
flex-direction: column;
@ -224,25 +244,29 @@
padding: 30px;
margin-top: 48px;
}
.section.idx-calture .title {
.section.idx-culture .title {
display: flex;
align-items: center;
}
.section.idx-calture .title .cover {
.section.idx-culture .title .cover {
width: 30px;
height: 30px;
object-fit: scale-down;
margin-right: 15px;
}
.section.idx-calture .title .text {
.section.idx-culture .title .text {
font-size: 30px;
font-weight: bold;
color: #000001;
transition: all 0.35s;
}
.section.idx-calture .desc {
.section.idx-culture .desc {
font-size: 24px;
color: #666666;
}
.section.idx-culture .cultrue-item:hover .text {
color: #E72A3A;
}
.section.sec-banner {
width: 100%;
height: 450px;
@ -340,7 +364,6 @@
display: inline-block;
width: 27px;
height: 27px;
background-image: url('../images/daohang.png');
background-size: 100%;
flex-shrink: 0;
}
@ -348,6 +371,10 @@
font-size: 20px;
color: #040000;
margin-left: 10px;
transition: all 0.35s;
}
.section.addrcont .aacont a:hover {
color: #E72A3A;
}
.section.contact-map {
position: relative;
@ -462,18 +489,22 @@
.section.story-cont .image-con img {
max-width: 100%;
}
.section.story-cont .image-con p {
.section.story-cont .image-con .text-con {
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 100%;
background-image: url('../images/transparent-bg.png');
padding: 30px 60px;
box-sizing: border-box;
}
.section.story-cont .image-con .text-con p {
height: 30px;
line-height: 30px;
font-size: 24px;
font-weight: bold;
color: #FFFFFF;
box-sizing: border-box;
padding: 30px 60px;
}
.section.story-cont .story-item:first-child {
margin-top: 0;
@ -517,7 +548,6 @@
font-size: 20px;
color: #000000;
line-height: 30px;
text-indent: 2em;
}
.section.story-cont .story-item:nth-child(2n) .desc {
float: right;
@ -652,13 +682,16 @@
box-sizing: border-box;
}
.s-content.g1 h4 {
height: 24px;
margin: 30px 0;
font-size: 24px;
font-weight: bold;
color: #333333;
line-height: 24px;
transition: all 0.35s;
}
.s-content.g1 p {
height: 20px;
font-size: 20px;
color: #666666;
line-height: 20px;
@ -667,6 +700,13 @@
width: 115px;
height: 80px;
object-fit: cover;
transition: all 0.35s;
}
.s-content.g1 .item:hover h4 {
color: #E72A3A;
}
.s-content.g1 .item:hover .icon {
transform: scale(1.1);
}
.s-content.g2 li {
float: left;
@ -688,11 +728,13 @@
.s-content.g2 .icon-cont {
width: 100%;
height: 225px;
overflow: hidden;
}
.s-content.g2 .icon-cont .icon {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.35s;
}
.s-content.g2 .desc {
width: 100%;
@ -704,17 +746,26 @@
box-sizing: border-box;
}
.s-content.g2 .desc h4 {
height: 20px;
font-size: 20px;
font-weight: bold;
color: #333333;
line-height: 20px;
margin-bottom: 18px;
transition: all 0.35s;
}
.s-content.g2 .desc p {
height: 40px;
font-size: 16px;
color: #333333;
line-height: 20px;
}
.s-content.g2 .item:hover h4 {
color: #E72A3A;
}
.s-content.g2 .item:hover .icon {
transform: scale(1.1);
}
.s-content.g4 .btn {
width: 100%;
height: 124px;
@ -760,12 +811,14 @@
.s-content.g4 .icon-cont {
width: 100%;
height: 220px;
overflow: hidden;
}
.s-content.g3 .icon-cont .icon,
.s-content.g4 .icon-cont .icon {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.35s;
}
.s-content.g3 .desc,
.s-content.g4 .desc {
@ -784,6 +837,7 @@
color: #333333;
line-height: 20px;
margin-bottom: 18px;
transition: all 0.35s;
}
.s-content.g3 .desc .i-desc,
.s-content.g4 .desc .i-desc {
@ -791,6 +845,14 @@
color: #333333;
line-height: 24px;
}
.s-content.g3 .item:hover .i-title,
.s-content.g4 .item:hover .i-title {
color: #E72A3A;
}
.s-content.g3 .item:hover .icon,
.s-content.g4 .item:hover .icon {
transform: scale(1.1);
}
.s-content.g5 {
display: flex;
align-items: flex-start;

106
css/style.less
View File

@ -1,6 +1,28 @@
// main max width
@mw: 1366px;
@keyframes headerFadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes headerFadeInDown {
0% {
opacity: 0;
transform: translateY(-100%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.mobile {
display: none;
}
@ -60,7 +82,9 @@
left: 0;
right: 0;
width: 100%;
background-image: url('../images/transparent-bg.png');
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0));
animation-name: headerFadeInDown;
animation-duration: 0.8s;
.main {
height: 90px;
@ -264,7 +288,7 @@
}
}
.section.idx-calture {
.section.idx-culture {
margin-top: 90px;
margin-bottom: 60px;
@ -274,7 +298,7 @@
justify-content: space-between;
}
.caltrue-item {
.culture-item {
display: flex;
justify-content: space-between;
flex-direction: column;
@ -304,6 +328,7 @@
font-size: 30px;
font-weight: bold;
color: #000001;
transition: all .35s;
}
}
@ -311,6 +336,12 @@
font-size: 24px;
color: #666666;
}
.cultrue-item:hover {
.text {
color: #E72A3A;
}
}
}
.section.sec-banner {
@ -346,6 +377,7 @@
.content {
padding: 30px 0;
img {
max-width: 100%;
}
@ -434,7 +466,7 @@
display: inline-block;
width: 27px;
height: 27px;
background-image: url('../images/daohang.png');
// background-image: url('../images/daohang.png');
background-size: 100%;
flex-shrink: 0;
}
@ -443,6 +475,11 @@
font-size: 20px;
color: #040000;
margin-left: 10px;
transition: all .35s;
}
a:hover {
color: #E72A3A;
}
}
}
@ -592,18 +629,24 @@
max-width: 100%;
}
p {
.text-con {
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 100%;
background-image: url('../images/transparent-bg.png');
font-size: 24px;
font-weight: bold;
color: #FFFFFF;
box-sizing: border-box;
padding: 30px 60px;
box-sizing: border-box;
p {
height: 30px;
line-height: 30px;
// background-image: url('../images/transparent-bg.png');
font-size: 24px;
font-weight: bold;
color: #FFFFFF;
box-sizing: border-box;
}
}
}
@ -654,7 +697,6 @@
font-size: 20px;
color: #000000;
line-height: 30px;
text-indent: 2em;
}
}
@ -828,14 +870,17 @@
}
h4 {
height: 24px;
margin: 30px 0;
font-size: 24px;
font-weight: bold;
color: #333333;
line-height: 24px;
transition: all .35s;
}
p {
height: 20px;
font-size: 20px;
color: #666666;
line-height: 20px;
@ -845,6 +890,17 @@
width: 115px;
height: 80px;
object-fit: cover;
transition: all .35s;
}
.item:hover {
h4 {
color: #E72A3A;
}
.icon {
transform: scale(1.1);
}
}
}
@ -872,11 +928,13 @@
.icon-cont {
width: 100%;
height: 225px;
overflow: hidden;
.icon {
width: 100%;
height: 100%;
object-fit: cover;
transition: all .35s;
}
}
@ -890,19 +948,32 @@
box-sizing: border-box;
h4 {
height: 20px;
font-size: 20px;
font-weight: bold;
color: #333333;
line-height: 20px;
margin-bottom: 18px;
transition: all .35s;
}
p {
height: 40px;
font-size: 16px;
color: #333333;
line-height: 20px;
}
}
.item:hover {
h4 {
color: #E72A3A;
}
.icon {
transform: scale(1.1);
}
}
}
.s-content.g4 {
@ -957,11 +1028,13 @@
.icon-cont {
width: 100%;
height: 220px;
overflow: hidden;
.icon {
width: 100%;
height: 100%;
object-fit: cover;
transition: all .35s;
}
}
@ -980,6 +1053,7 @@
color: #333333;
line-height: 20px;
margin-bottom: 18px;
transition: all .35s;
}
.i-desc {
@ -988,6 +1062,16 @@
line-height: 24px;
}
}
.item:hover {
.i-title {
color: #E72A3A;
}
.icon {
transform: scale(1.1);
}
}
}
.s-content.g5 {

18
detail.html
View File

@ -19,7 +19,23 @@
</head>
<body>
<div class="header"></div>
<div class="header">
<div class="main main-wrap">
<div class="logo">
<a href="" target="_blank">
<img src="images/logo.png" alt="">
</a>
</div>
<div class="menu">
<ul class="menu-group">
</ul>
<div class="menu-btn mobile">
<img class="btn-img" src="/images/menu.png" alt="">
</div>
<div class="menu-mask mobile"></div>
</div>
</div>
</div>
<div class="container">
<div class="section sec-banner" style="background-image: url('/images/banner2.png');">
<div class="banner-text">

28
index.html
View File

@ -19,7 +19,23 @@
</head>
<body>
<div class="header"></div>
<div class="header">
<div class="main main-wrap">
<div class="logo">
<a href="" target="_blank">
<img src="images/logo.png" alt="">
</a>
</div>
<div class="menu">
<ul class="menu-group">
</ul>
<div class="menu-btn mobile">
<img class="btn-img" src="/images/menu.png" alt="">
</div>
<div class="menu-mask mobile"></div>
</div>
</div>
</div>
<div class="container">
<div class="section main-banner swiper-container">
<div class="swiper-wrapper">
@ -66,33 +82,33 @@
</div>
</div>
<!-- 文化 -->
<div class="section main-wrap idx-calture">
<div class="section main-wrap idx-culture">
<div class="section-title style-1">
<h2 class="title">企业<span class="rtext">文化</span></h2>
</div>
<ul class="ic-container">
<li class="caltrue-item">
<li class="culture-item">
<div class="title">
<img class="cover" src="images/qizi1.png" alt="">
<h3 class="text">使命</h3>
</div>
<p class="desc">让每一位客户拥有健康的现金流</p>
</li>
<li class="caltrue-item">
<li class="culture-item">
<div class="title">
<img class="cover" src="images/jipiao-2.png" alt="">
<h3 class="text">愿景</h3>
</div>
<p class="desc">帮助5000万名用户解决融资问题</p>
</li>
<li class="caltrue-item">
<li class="culture-item">
<div class="title">
<img class="cover" src="images/zuanshi.png" alt="">
<h3 class="text">价值观</h3>
</div>
<p class="desc">以客户为中心，以奋斗者为本</p>
</li>
<li class="caltrue-item">
<li class="culture-item">
<div class="title">
<img class="cover" src="images/hezuo.png" alt="">
<h3 class="text">服务理念</h3>

62
js/main.js
View File

@ -1,29 +1,69 @@
let isClose = true;
window.Config = {
staticDir: ".",
};
let isClose = true,
header = $('.header'),
heaerMenuGroup = $('.menu-group'),
headerMask = $('.menu-mask'),
headerMenuBtn = $('.btn-img'),
headerBg = header.css('background-image');
function showMenu() {
$('.menu-group').show().addClass('fadeIn');
$('.menu-mask').show().addClass('fadeIn');
$('.btn-img').attr('src', '/images/guanbi.png');
heaerMenuGroup.show().addClass('fadeIn');
headerMask.show().addClass('fadeIn');
headerMenuBtn.attr('src', window.Config.staticDir + '/images/guanbi.png');
header.css({
'background-image': 'url(\'' + window.Config.staticDir + '/images/transparent-bg.png\')'
});
isClose = false;
}
function hideMenu() {
$('.menu-group').removeClass('fadeIn').hide();
$('.menu-mask').removeClass('fadeIn').hide();
$('.btn-img').attr('src', '/images/menu.png');
heaerMenuGroup.removeClass('fadeIn').hide();
headerMask.removeClass('fadeIn').hide();
headerMenuBtn.attr('src', window.Config.staticDir + '/images/menu.png');
header.css({
'background-image': headerBg
});
isClose = true;
}
$(function () {
$('.header').load('/common/header.html');
$('.header .menu-group').load('/common/header.html');
$('.footer').load('/common/footer.html');
$('.header').on('click', '.menu-btn', function () {
// if ($(window).width() > 768) {
// let headerBg = header.css('background-image');
// $(window).scroll(function () {
// let t = $(document).scrollTop();
// if (t > 430) {
// header.css({
// 'background-image': "url('/static/module/index/zxf/images/transparent-bg.png')"
// });
// } else {
// header.css({
// 'background-image': headerBg
// });
// }
// });
// }
header.on('click', '.menu-btn', function () {
(isClose == true) ? showMenu() : hideMenu();
});
$('.header').on('click', '.menu-mask', function () {
header.on('click', '.menu-mask', function () {
hideMenu();
});
$('.business-nav a').click(function (event) {
$('.business-nav a').removeClass('active');
$(this).addClass('active');
event.preventDefault();
let id = $(this).attr('href');
let ot = $(id)[0].offsetTop;
window.scrollTo({
top: ot - 90,
behavior: "smooth",
});
});
new WOW().init();
});

22
story.html
View File

@ -19,7 +19,23 @@
</head>
<body>
<div class="header"></div>
<div class="header">
<div class="main main-wrap">
<div class="logo">
<a href="" target="_blank">
<img src="images/logo.png" alt="">
</a>
</div>
<div class="menu">
<ul class="menu-group">
</ul>
<div class="menu-btn mobile">
<img class="btn-img" src="/images/menu.png" alt="">
</div>
<div class="menu-mask mobile"></div>
</div>
</div>
</div>
<div class="container">
<div class="section sec-banner" style="background-image: url('/images/banner2.png');">
<div class="banner-text">
@ -33,7 +49,9 @@
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="images/tu2.png" alt="">
<p>持续优化企业融资成本 助力实体经济健康发展</p>
<div class="text-con">
<p class="limit-line clamp-1">持续优化企业融资成本 助力实体经济健康发展</p>
</div>
</div>
</div>
</div>