+
+ 
+
+
+
+
+
+
+
+
+ 
+
+
+
+
diff --git a/business.html b/business.html
index 20bb590..af00a1e 100644
--- a/business.html
+++ b/business.html
@@ -19,7 +19,23 @@
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -44,29 +60,29 @@
-
-
-
-
@@ -80,7 +96,7 @@
- 营销投放
-定向目标受众精准投放
+营销投放
+定向目标受众精准投放
- 运营服务
-广告全案推广
+运营服务
+广告全案推广
- 短视频营销
-品牌IP打造
+短视频营销
+品牌IP打造
- 私域运营
-微信全链路营销
+私域运营
+微信全链路营销
-
财务咨询
+财务咨询
为中小微企业提供财务咨询服务，帮助企业提高财务管理能力、提供更多实时智能为中小微企业提供财务咨询服务，帮助企业提高财务管理能力、提供更多实时智能为中小微企业提供财务咨询服务，帮助企业提高财务管理能力、提供更多实时智能
@@ -93,7 +109,7 @@
-
@@ -117,7 +133,7 @@
财务咨询
+财务咨询
为中小微企业提供财务咨询服务，帮助企业提高财务管理能力、提供更多实时智能…
-
梳理债务清单
+梳理债务清单
制定侵务清单，包斯所有借款、信用卡余额、贷款等，
记录位务金额、利率、最低付款和到期日:
@@ -131,7 +147,7 @@
-
梳理债务清单
+梳理债务清单
制定侵务清单，包斯所有借款、信用卡余额、贷款等，
记录位务金额、利率、最低付款和到期日:
@@ -145,7 +161,7 @@
-
梳理债务清单
+梳理债务清单
制定侵务清单，包斯所有借款、信用卡余额、贷款等，
记录位务金额、利率、最低付款和到期日:
@@ -159,7 +175,7 @@
-
梳理债务清单
+梳理债务清单
制定侵务清单，包斯所有借款、信用卡余额、贷款等，
记录位务金额、利率、最低付款和到期日:
@@ -173,7 +189,7 @@
-
梳理债务清单
+梳理债务清单
制定侵务清单，包斯所有借款、信用卡余额、贷款等，
记录位务金额、利率、最低付款和到期日:
@@ -187,7 +203,7 @@
-
+ 首页
+
+
+ 关于左心房
+
+
+ 业务与介绍
+
+
+ 用户故事
+
+
+ 联系我们
+
\ No newline at end of file
diff --git a/contact.html b/contact.html
index 24c095d..150b64d 100644
--- a/contact.html
+++ b/contact.html
@@ -19,7 +19,23 @@
-
+
梳理债务清单
+梳理债务清单
制定侵务清单，包斯所有借款、信用卡余额、贷款等， 记录位务金额、利率、最低付款和到期日: diff --git a/common/header.html b/common/header.html index 91e6e28..1fabe7c 100644 --- a/common/header.html +++ b/common/header.html @@ -1,30 +1,28 @@ -
-
\ No newline at end of file
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/css/responsive.css b/css/responsive.css
index 2fad2cc..08b713e 100644
--- a/css/responsive.css
+++ b/css/responsive.css
@@ -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;
}
}
diff --git a/css/responsive.less b/css/responsive.less
index 42bbbc2..d9a8b7e 100644
--- a/css/responsive.less
+++ b/css/responsive.less
@@ -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;
}
}
diff --git a/css/style.css b/css/style.css
index a2c9872..5e13c62 100644
--- a/css/style.css
+++ b/css/style.css
@@ -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;
diff --git a/css/style.less b/css/style.less
index 1deb116..7121357 100644
--- a/css/style.less
+++ b/css/style.less
@@ -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 {
diff --git a/detail.html b/detail.html
index 110e150..4fe454e 100644
--- a/detail.html
+++ b/detail.html
@@ -19,7 +19,23 @@
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/index.html b/index.html
index 5dfa918..549ea6f 100644
--- a/index.html
+++ b/index.html
@@ -19,7 +19,23 @@
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
企业文化
-
-
- +
-
使命
让每一位客户拥有健康的现金流
- - +
-
愿景
帮助5000万名用户解决融资问题
- - +
-
价值观
以客户为中心，以奋斗者为本
- - +
-
服务理念
diff --git a/js/main.js b/js/main.js index d60e181..c5284c4 100644 --- a/js/main.js +++ b/js/main.js @@ -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(); -}); +}); \ No newline at end of file diff --git a/story.html b/story.html index b705d39..c1ba67d 100644 --- a/story.html +++ b/story.html @@ -19,7 +19,23 @@ - +++++ ++
+
+ + ++++ +
+ @@ -33,7 +49,9 @@
- 持续优化企业融资成本 助力实体经济健康发展
++持续优化企业融资成本 助力实体经济健康发展
+