diff --git a/business.html b/business.html
index f38e378..20bb590 100644
--- a/business.html
+++ b/business.html
@@ -109,7 +109,7 @@
债务管理是一项重要的金融技能，左心房可以帮助您有效管理债务，降低金融风险，提高财务水平，具体服务内容一
-
+
-
+
-
diff --git a/css/responsive.css b/css/responsive.css
index cba938e..bcc4686 100644
--- a/css/responsive.css
+++ b/css/responsive.css
@@ -7,6 +7,7 @@
}
.main-wrap {
width: 92%;
+ max-width: 500px;
}
.header .logo {
font-size: 0;
@@ -327,4 +328,216 @@
.section.story-cont.last {
margin-bottom: 24px;
}
+ .s-section .s-title {
+ font-size: 12px;
+ line-height: 12px;
+ text-align: center;
+ }
+ .s-section.s1-first {
+ margin-top: 30px;
+ }
+ .section.business-nav {
+ width: 100%;
+ margin-top: 10px;
+ }
+ .section.business-nav .nav li {
+ width: 110px;
+ height: 30px;
+ padding: 0;
+ }
+ .section.business-nav .nav a {
+ display: block;
+ width: 100%;
+ height: 100%;
+ color: #666666;
+ font-size: 10px;
+ line-height: 30px;
+ background-color: #F3F3F3;
+ }
+ .section.business-cont .title {
+ font-size: 0px;
+ }
+ .section.business-cont .title h2 {
+ font-size: 12px;
+ line-height: 12px;
+ }
+ .section.business-cont .title::after {
+ width: 29px;
+ height: 2px;
+ margin-top: 10px;
+ }
+ .business-cont.s1 {
+ margin-top: 25px;
+ }
+ .business-cont.s2 {
+ margin-top: 30px;
+ }
+ .business-cont.s2 .mid-box {
+ margin: 15px 0 5px 0;
+ }
+ .business-cont.s2 .mid-box .ad-text {
+ font-size: 12px;
+ font-weight: normal;
+ text-align: center;
+ }
+ .business-cont.s3 {
+ margin-top: 0;
+ padding-bottom: 0;
+ background-color: unset;
+ }
+ .business-cont.s3 .mid-box {
+ margin-top: 20px;
+ margin-bottom: 20px;
+ }
+ .business-cont.s3 .mid-box .num {
+ font-size: 12px;
+ line-height: 12px;
+ }
+ .business-cont.s3 .mid-box .desc {
+ font-size: 10px;
+ line-height: 10px;
+ margin-top: 10px;
+ }
+ .business-cont.s3 .mid-box .cont {
+ width: 100%;
+ }
+ .business-cont.s3 .mid-box li {
+ width: 33.33333%;
+ }
+ .business-cont.s3 .mid-box li::after {
+ height: 26px;
+ }
+ .business-cont.s4 {
+ padding: 30px 0;
+ }
+ .s-section.s1-first {
+ margin-bottom: 30px;
+ }
+ .s-content.g1 {
+ text-align: center;
+ }
+ .s-content.g1 li {
+ width: 46%;
+ margin-left: 2%;
+ margin-right: 2%;
+ }
+ .s-content.g1 li:nth-child(4n) {
+ margin-right: 2%;
+ }
+ .s-content.g1 .icon {
+ width: 57px;
+ height: 41px;
+ }
+ .s-content.g1 h4 {
+ font-size: 12px;
+ margin: 15px 0;
+ }
+ .s-content.g1 p {
+ font-size: 10px;
+ }
+ .s-content.g1 .item {
+ width: 100%;
+ height: auto;
+ padding: 20px 0;
+ box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.35);
+ border-radius: 10px;
+ }
+ .s-content.g2 li {
+ float: initial;
+ margin-right: 0;
+ }
+ .s-content.g2 .item {
+ width: 100%;
+ height: auto;
+ border: 1px solid #DDDDDD;
+ box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.35);
+ }
+ .s-content.g2 .icon-cont {
+ height: auto;
+ }
+ .s-content.g2 .desc {
+ padding: 15px;
+ height: auto;
+ }
+ .s-content.g2 .desc h4 {
+ font-size: 10px;
+ margin-bottom: 10px;
+ }
+ .s-content.g2 .desc p {
+ font-size: 10px;
+ }
+ .s-content.g3 ul,
+ .s-content.g4 ul {
+ text-align: center;
+ }
+ .s-content.g3 li,
+ .s-content.g4 li {
+ width: 46%;
+ margin-left: 2%;
+ margin-right: 2%;
+ margin-top: 12px;
+ }
+ .s-content.g3 li:nth-child(3n),
+ .s-content.g4 li:nth-child(3n) {
+ margin-right: 2%;
+ }
+ .s-content.g3 .item,
+ .s-content.g4 .item {
+ width: 100%;
+ height: auto;
+ border: 1px solid #DDDDDD;
+ box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.35);
+ }
+ .s-content.g3 .desc,
+ .s-content.g4 .desc {
+ text-align: left;
+ }
+ .s-content.g3 .desc .i-title,
+ .s-content.g4 .desc .i-title {
+ font-size: 10px;
+ margin-bottom: 5px;
+ line-height: 13px;
+ }
+ .s-content.g3 .desc .i-desc,
+ .s-content.g4 .desc .i-desc {
+ font-size: 10px;
+ line-height: 15px;
+ color: #666666;
+ }
+ .s-content.g3 .icon-cont,
+ .s-content.g4 .icon-cont {
+ height: auto;
+ }
+ .s-content.g3 .desc,
+ .s-content.g4 .desc {
+ height: auto;
+ padding: 10px;
+ }
+ .s-content.g3 .btn,
+ .s-content.g4 .btn {
+ height: auto;
+ padding: 10px;
+ }
+ .s-content.g3 .btn .b-text,
+ .s-content.g4 .btn .b-text {
+ width: 120px;
+ height: 26px;
+ line-height: 26px;
+ font-size: 10px;
+ }
+ .s-content.g5 {
+ margin-top: 15px;
+ }
+ .s-content.g5 .item {
+ width: 100px;
+ }
+ .s-content.g5 .item img {
+ width: 26px;
+ height: 26px;
+ }
+ .s-content.g5 .item p {
+ font-size: 10px;
+ line-height: 14px;
+ margin-top: 15px;
+ }
}
diff --git a/css/responsive.less b/css/responsive.less
index 6014eb4..f69187c 100644
--- a/css/responsive.less
+++ b/css/responsive.less
@@ -12,6 +12,7 @@
.main-wrap {
width: @mw;
+ max-width: 500px;
}
.header {
@@ -436,4 +437,267 @@
margin-bottom: 24px;
}
+ .s-section {
+ .s-title {
+ font-size: 12px;
+ line-height: 12px;
+ text-align: center;
+ }
+ }
+
+ .s-section.s1-first {
+ margin-top: 30px;
+ }
+
+ .section.business-nav {
+ width: 100%;
+ margin-top: 10px;
+
+ .nav {
+ li {
+ width: 110px;
+ height: 30px;
+ padding: 0;
+ }
+
+ a {
+ display: block;
+ width: 100%;
+ height: 100%;
+ color: #666666;
+ font-size: 10px;
+ line-height: 30px;
+ background-color: #F3F3F3;
+ }
+ }
+ }
+
+ .section.business-cont {
+ .title {
+ font-size: 0px;
+
+ h2 {
+ font-size: 12px;
+ line-height: 12px;
+ }
+ }
+
+ .title::after {
+ width: 29px;
+ height: 2px;
+ margin-top: 10px;
+ }
+ }
+
+ .business-cont.s1 {
+ margin-top: 25px;
+ }
+
+ .business-cont.s2 {
+ margin-top: 30px;
+
+ .mid-box {
+ margin: 15px 0 5px 0;
+
+ .ad-text {
+ font-size: 12px;
+ font-weight: normal;
+ text-align: center;
+ }
+ }
+ }
+
+ .business-cont.s3 {
+ margin-top: 0;
+ padding-bottom: 0;
+ background-color: unset;
+
+ .mid-box {
+ margin-top: 20px;
+ margin-bottom: 20px;
+
+ .num {
+ font-size: 12px;
+ line-height: 12px;
+ }
+
+ .desc {
+ font-size: 10px;
+ line-height: 10px;
+ margin-top: 10px;
+ }
+
+ .cont {
+ width: 100%;
+ }
+
+ li {
+ width: 33.33333%;
+ }
+
+ li::after {
+ height: 26px;
+ }
+ }
+ }
+
+ .business-cont.s4 {
+ padding: 30px 0;
+ }
+
+ .s-section.s1-first {
+ margin-bottom: 30px;
+ }
+
+ .s-content.g1 {
+ text-align: center;
+
+ li {
+ width: 46%;
+ margin-left: 2%;
+ margin-right: 2%;
+ }
+
+ li:nth-child(4n) {
+ margin-right: 2%;
+ }
+
+ .icon {
+ width: 57px;
+ height: 41px;
+ }
+
+ h4 {
+ font-size: 12px;
+ margin: 15px 0;
+ }
+
+ p {
+ font-size: 10px;
+ }
+
+ .item {
+ width: 100%;
+ height: auto;
+ padding: 20px 0;
+ box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.35);
+ border-radius: 10px;
+ }
+ }
+
+ .s-content.g2 {
+ li {
+ float: initial;
+ margin-right: 0;
+ }
+
+ .item {
+ width: 100%;
+ height: auto;
+ border: 1px solid #DDDDDD;
+ box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.35);
+ }
+
+ .icon-cont {
+ height: auto;
+ }
+
+ .desc {
+ padding: 15px;
+ height: auto;
+
+ h4 {
+ font-size: 10px;
+ margin-bottom: 10px;
+ }
+
+ p {
+ font-size: 10px;
+ }
+ }
+ }
+
+ .s-content.g3,
+ .s-content.g4 {
+ ul {
+ text-align: center;
+ }
+
+ li {
+ width: 46%;
+ margin-left: 2%;
+ margin-right: 2%;
+ margin-top: 12px;
+ }
+
+ li:nth-child(3n) {
+ margin-right: 2%;
+ }
+
+ .item {
+ width: 100%;
+ height: auto;
+ border: 1px solid #DDDDDD;
+ box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.35);
+ }
+
+ .desc {
+ text-align: left;
+
+ .i-title {
+ font-size: 10px;
+ margin-bottom: 5px;
+ line-height: 13px;
+ }
+
+ .i-desc {
+ font-size: 10px;
+ line-height: 15px;
+ color: #666666;
+ }
+ }
+
+ .icon-cont {
+ height: auto;
+ }
+
+ .desc {
+ height: auto;
+ padding: 10px;
+ }
+
+ // g4
+ .btn {
+ height: auto;
+ padding: 10px;
+ }
+
+ .btn {
+ .b-text {
+ width: 120px;
+ height: 26px;
+ line-height: 26px;
+ font-size: 10px;
+ }
+ }
+ }
+
+ .s-content.g5 {
+ margin-top: 15px;
+
+ .item {
+ width: 100px;
+
+ img {
+ width: 26px;
+ height: 26px;
+ }
+
+ p {
+ font-size: 10px;
+ line-height: 14px;
+ margin-top: 15px;
+ }
+ }
+ }
}
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index 082a149..ff734fe 100644
--- a/css/style.css
+++ b/css/style.css
@@ -563,6 +563,61 @@
.business-cont.s1 {
margin-top: 100px;
}
+.business-cont.s2 {
+ margin-top: 100px;
+}
+.business-cont.s2 .mid-box {
+ margin-top: 40px;
+}
+.business-cont.s2 .mid-box .ad-text {
+ font-size: 20px;
+ font-weight: bold;
+ color: #666666;
+ line-height: 20px;
+}
+.business-cont.s3 {
+ background-color: #F7F7F7;
+ margin-top: 70px;
+ padding-top: 50px;
+ padding-bottom: 80px;
+}
+.business-cont.s3 .mid-box {
+ margin-top: 50px;
+}
+.business-cont.s3 .mid-box li {
+ display: flex;
+ align-items: center;
+ float: left;
+}
+.business-cont.s3 .mid-box li::after {
+ content: '';
+ display: block;
+ width: 2px;
+ height: 80px;
+ background: #D7D7D7;
+}
+.business-cont.s3 .mid-box li:nth-child(3n)::after {
+ display: none;
+}
+.business-cont.s3 .mid-box .cont {
+ width: 452px;
+ text-align: center;
+}
+.business-cont.s3 .mid-box .num {
+ font-size: 30px;
+ font-weight: bold;
+ color: #666666;
+ line-height: 30px;
+}
+.business-cont.s3 .mid-box .desc {
+ font-size: 24px;
+ color: #000000;
+ line-height: 24px;
+ margin-top: 35px;
+}
+.business-cont.s4 {
+ padding: 75px 0;
+}
.s-content.g1 li {
float: left;
margin-right: 42px;
@@ -648,73 +703,18 @@
color: #333333;
line-height: 20px;
}
-.business-cont.s2 {
- margin-top: 100px;
-}
-.business-cont.s2 .mid-box {
- margin-top: 40px;
-}
-.business-cont.s2 .mid-box .ad-text {
- font-size: 20px;
- font-weight: bold;
- color: #666666;
- line-height: 20px;
-}
-.s-content.g34 li {
- float: left;
- margin-right: 53px;
- margin-top: 50px;
-}
-.s-content.g34 li:nth-child(3n) {
- margin-right: 0;
-}
-.s-content.g34 .item {
- display: block;
- width: 420px;
- background: #FFFFFF;
- border: 2px solid #DDDDDD;
- box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.35);
- box-sizing: border-box;
-}
-.s-content.g34 .icon-cont {
- width: 100%;
- height: 220px;
-}
-.s-content.g34 .icon-cont .icon {
- width: 100%;
- height: 100%;
- object-fit: cover;
-}
-.s-content.g34 .btn,
-.s-content.g34 .desc {
+.s-content.g4 .btn {
width: 100%;
height: 124px;
padding: 0 20px;
box-sizing: border-box;
}
-.s-content.g34 .desc {
- display: flex;
- flex-direction: column;
- justify-content: center;
-}
-.s-content.g34 .desc .i-title {
- font-size: 20px;
- font-weight: bold;
- color: #333333;
- line-height: 20px;
- margin-bottom: 18px;
-}
-.s-content.g34 .desc .i-desc {
- font-size: 16px;
- color: #333333;
- line-height: 24px;
-}
-.s-content.g34 .btn {
+.s-content.g4 .btn {
display: flex;
justify-content: center;
align-items: center;
}
-.s-content.g34 .btn .b-text {
+.s-content.g4 .btn .b-text {
display: block;
width: 181px;
height: 40px;
@@ -725,48 +725,59 @@
color: #FFFFFF;
line-height: 40px;
}
-.business-cont.s3 {
- background-color: #F7F7F7;
- margin-top: 70px;
- padding-top: 50px;
- padding-bottom: 80px;
-}
-.business-cont.s3 .mid-box {
+.s-content.g3 li,
+.s-content.g4 li {
+ float: left;
+ margin-right: 53px;
margin-top: 50px;
}
-.business-cont.s3 .mid-box li {
- display: flex;
- align-items: center;
- float: left;
+.s-content.g3 li:nth-child(3n),
+.s-content.g4 li:nth-child(3n) {
+ margin-right: 0;
}
-.business-cont.s3 .mid-box li::after {
- content: '';
+.s-content.g3 .item,
+.s-content.g4 .item {
display: block;
- width: 2px;
- height: 80px;
- background: #D7D7D7;
+ width: 420px;
+ background: #FFFFFF;
+ border: 2px solid #DDDDDD;
+ box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.35);
+ box-sizing: border-box;
}
-.business-cont.s3 .mid-box li:nth-child(3n)::after {
- display: none;
+.s-content.g3 .icon-cont,
+.s-content.g4 .icon-cont {
+ width: 100%;
+ height: 220px;
}
-.business-cont.s3 .mid-box .cont {
- width: 452px;
- text-align: center;
+.s-content.g3 .icon-cont .icon,
+.s-content.g4 .icon-cont .icon {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
}
-.business-cont.s3 .mid-box .num {
- font-size: 30px;
+.s-content.g3 .desc,
+.s-content.g4 .desc {
+ width: 100%;
+ height: 124px;
+ padding: 0 20px;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
+.s-content.g3 .desc .i-title,
+.s-content.g4 .desc .i-title {
+ font-size: 20px;
font-weight: bold;
- color: #666666;
- line-height: 30px;
+ color: #333333;
+ line-height: 20px;
+ margin-bottom: 18px;
}
-.business-cont.s3 .mid-box .desc {
- font-size: 24px;
- color: #000000;
+.s-content.g3 .desc .i-desc,
+.s-content.g4 .desc .i-desc {
+ font-size: 16px;
+ color: #333333;
line-height: 24px;
- margin-top: 35px;
-}
-.business-cont.s4 {
- padding: 75px 0;
}
.s-content.g5 {
display: flex;
diff --git a/css/style.less b/css/style.less
index ae8e8f3..bf4f3f8 100644
--- a/css/style.less
+++ b/css/style.less
@@ -721,6 +721,73 @@
margin-top: 100px;
}
+.business-cont.s2 {
+ margin-top: 100px;
+
+ .mid-box {
+ margin-top: 40px;
+
+ .ad-text {
+ font-size: 20px;
+ font-weight: bold;
+ color: #666666;
+ line-height: 20px;
+ }
+ }
+}
+
+.business-cont.s3 {
+ background-color: #F7F7F7;
+ margin-top: 70px;
+ padding-top: 50px;
+ padding-bottom: 80px;
+
+ .mid-box {
+ margin-top: 50px;
+
+ li {
+ display: flex;
+ align-items: center;
+ float: left;
+ }
+
+ li::after {
+ content: '';
+ display: block;
+ width: 2px;
+ height: 80px;
+ background: #D7D7D7;
+ }
+
+ li:nth-child(3n)::after {
+ display: none;
+ }
+
+ .cont {
+ width: 452px;
+ text-align: center;
+ }
+
+ .num {
+ font-size: 30px;
+ font-weight: bold;
+ color: #666666;
+ line-height: 30px;
+ }
+
+ .desc {
+ font-size: 24px;
+ color: #000000;
+ line-height: 24px;
+ margin-top: 35px;
+ }
+ }
+}
+
+.business-cont.s4 {
+ padding: 75px 0;
+}
+
.s-content.g1 {
li {
float: left;
@@ -824,22 +891,36 @@
}
}
-.business-cont.s2 {
- margin-top: 100px;
+.s-content.g4 {
- .mid-box {
- margin-top: 40px;
+ .btn {
+ width: 100%;
+ height: 124px;
+ padding: 0 20px;
+ box-sizing: border-box;
+ }
- .ad-text {
- font-size: 20px;
- font-weight: bold;
- color: #666666;
- line-height: 20px;
+ .btn {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ .b-text {
+ display: block;
+ width: 181px;
+ height: 40px;
+ background: #E50020;
+ border-radius: 20px;
+ text-align: center;
+ font-size: 16px;
+ color: #FFFFFF;
+ line-height: 40px;
}
}
}
-.s-content.g34 {
+.s-content.g3,
+.s-content.g4 {
li {
float: left;
margin-right: 53px;
@@ -870,15 +951,11 @@
}
}
- .btn,
.desc {
width: 100%;
height: 124px;
padding: 0 20px;
box-sizing: border-box;
- }
-
- .desc {
display: flex;
flex-direction: column;
justify-content: center;
@@ -897,76 +974,6 @@
line-height: 24px;
}
}
-
- .btn {
- display: flex;
- justify-content: center;
- align-items: center;
-
- .b-text {
- display: block;
- width: 181px;
- height: 40px;
- background: #E50020;
- border-radius: 20px;
- text-align: center;
- font-size: 16px;
- color: #FFFFFF;
- line-height: 40px;
- }
- }
-}
-
-.business-cont.s3 {
- background-color: #F7F7F7;
- margin-top: 70px;
- padding-top: 50px;
- padding-bottom: 80px;
-
- .mid-box {
- margin-top: 50px;
-
- li {
- display: flex;
- align-items: center;
- float: left;
- }
-
- li::after {
- content: '';
- display: block;
- width: 2px;
- height: 80px;
- background: #D7D7D7;
- }
-
- li:nth-child(3n)::after {
- display: none;
- }
-
- .cont {
- width: 452px;
- text-align: center;
- }
-
- .num {
- font-size: 30px;
- font-weight: bold;
- color: #666666;
- line-height: 30px;
- }
-
- .desc {
- font-size: 24px;
- color: #000000;
- line-height: 24px;
- margin-top: 35px;
- }
- }
-}
-
-.business-cont.s4 {
- padding: 75px 0;
}
.s-content.g5 {