diff --git a/business.html b/business.html new file mode 100644 index 0000000..27c4b0b --- /dev/null +++ b/business.html @@ -0,0 +1,300 @@ + + + + + + + 业务与介绍 + + + + + + + + + + + + + +
+
+
+ +
+
+ +
+
+
+

综合企业服务赋能

+
+
+

流量运营

+ +
+
+

财务与法务咨询

+ +
+
+
+
+

债务管理咨询

+
+
+

债务管理是一项重要的金融技能，左心房可以帮助您有效管理债务，降低金融风险，提高财务水平，具体服务内容一

+
+
+
+ +
+
+
+
+
+

融资咨询

+
+
+
    +
  • +
    + 200000+ +

    累计服务客户

    +
    +
    • +
  • +
    + 100+ +

    覆盖城市

    +
    +
    • +
  • +
    + 500+ +

    服务门店

    +
    +
    • +
+
+
+
+ +
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/css/common/common.less b/css/common/common.less index 7695843..dc343ac 100644 --- a/css/common/common.less +++ b/css/common/common.less @@ -40,6 +40,24 @@ // .generate-pb(100); +.limit-line { + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.clamp-1 { + -webkit-line-clamp: 1; +} + +.clamp-2 { + -webkit-line-clamp: 2; +} + +.clamp-3 { + -webkit-line-clamp: 3; +} + .clearfix { zoom: 1; } diff --git a/css/style.css b/css/style.css index 5b32dd6..92937ef 100644 --- a/css/style.css +++ b/css/style.css @@ -1,3 +1,17 @@ +.limit-line { + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; +} +.clamp-1 { + -webkit-line-clamp: 1; +} +.clamp-2 { + -webkit-line-clamp: 2; +} +.clamp-3 { + -webkit-line-clamp: 3; +} .clearfix { zoom: 1; } @@ -495,3 +509,249 @@ .section.story-cont .story-item:nth-child(2n) .img { float: left; } +.section.business-nav .nav { + display: flex; + justify-content: space-around; + align-items: center; +} +.section.business-nav .nav li { + padding: 40px 0; +} +.section.business-nav .nav a { + font-size: 24px; + font-weight: bold; + color: #999999; +} +.section.business-nav .nav a:hover, +.section.business-nav .nav a.active { + color: #E50524; +} +.section.business-cont .title { + width: 100%; + text-align: center; +} +.section.business-cont .title h2 { + font-size: 30px; + font-weight: bold; + color: #E72A3A; +} +.section.business-cont .title::after { + content: ''; + display: inline-block; + width: 58px; + height: 3px; + background: #E72A3A; +} +.s-section .s-title { + font-size: 24px; + font-weight: bold; + color: #333333; + line-height: 24px; +} +.s-section.s1-first { + margin-bottom: 80px; +} +.business-cont.s1 { + margin-top: 100px; +} +.s-content.g1 li { + float: left; + margin-right: 42px; + margin-top: 25px; +} +.s-content.g1 li:nth-child(4n) { + margin-right: 0; +} +.s-content.g1 .item { + width: 310px; + height: 303px; + background: rgba(229, 0, 32, 0); + border: 2px solid #DDDDDD; + box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.35); + border-radius: 20px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + box-sizing: border-box; +} +.s-content.g1 h4 { + margin: 30px 0; + font-size: 24px; + font-weight: bold; + color: #333333; + line-height: 24px; +} +.s-content.g1 p { + font-size: 20px; + color: #666666; + line-height: 20px; +} +.s-content.g1 .icon { + width: 115px; + height: 80px; + object-fit: cover; +} +.s-content.g2 li { + float: left; + margin-right: 46px; + margin-top: 30px; +} +.s-content.g2 li:nth-child(2n) { + margin-right: 0; +} +.s-content.g2 .item { + display: block; + width: 660px; + height: 349px; + background: #FFFFFF; + border: 2px solid #DDDDDD; + box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.35); + box-sizing: border-box; +} +.s-content.g2 .icon-cont { + width: 100%; + height: 225px; +} +.s-content.g2 .icon-cont .icon { + width: 100%; + height: 100%; + object-fit: cover; +} +.s-content.g2 .desc { + width: 100%; + height: 120px; + display: flex; + flex-direction: column; + justify-content: center; + padding: 0 30px; + box-sizing: border-box; +} +.s-content.g2 .desc h4 { + font-size: 20px; + font-weight: bold; + color: #333333; + line-height: 20px; + margin-bottom: 18px; +} +.s-content.g2 .desc p { + font-size: 16px; + 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 { + 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 { + display: flex; + justify-content: center; + align-items: center; +} +.s-content.g34 .btn .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; +} +.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; +} diff --git a/css/style.less b/css/style.less index b75e7d2..12268ec 100644 --- a/css/style.less +++ b/css/style.less @@ -492,6 +492,7 @@ overflow: hidden; flex-shrink: 0; float: right; + img { width: 100%; height: 100%; @@ -525,4 +526,308 @@ float: left; } } +} + +.section.business-nav { + .nav { + display: flex; + justify-content: space-around; + align-items: center; + + li { + padding: 40px 0; + } + + a { + font-size: 24px; + font-weight: bold; + color: #999999; + } + + a:hover, + a.active { + color: #E50524; + } + } +} + +.section.business-cont { + .title { + width: 100%; + text-align: center; + + h2 { + font-size: 30px; + font-weight: bold; + color: #E72A3A; + } + } + + .title::after { + content: ''; + display: inline-block; + width: 58px; + height: 3px; + background: #E72A3A; + } +} + +.s-section { + .s-title { + font-size: 24px; + font-weight: bold; + color: #333333; + line-height: 24px; + } +} + +.s-section.s1-first { + margin-bottom: 80px; +} + +.business-cont.s1 { + margin-top: 100px; +} + +.s-content.g1 { + li { + float: left; + margin-right: 42px; + margin-top: 25px; + } + + li:nth-child(4n) { + margin-right: 0; + } + + .item { + width: 310px; + height: 303px; + background: rgba(229, 0, 32, 0); + border: 2px solid #DDDDDD; + box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.35); + border-radius: 20px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + box-sizing: border-box; + } + + h4 { + margin: 30px 0; + font-size: 24px; + font-weight: bold; + color: #333333; + line-height: 24px; + } + + p { + font-size: 20px; + color: #666666; + line-height: 20px; + } + + .icon { + width: 115px; + height: 80px; + object-fit: cover; + } +} + +.s-content.g2 { + li { + float: left; + margin-right: 46px; + margin-top: 30px; + } + + li:nth-child(2n) { + margin-right: 0; + } + + .item { + display: block; + width: 660px; + height: 349px; + background: #FFFFFF; + border: 2px solid #DDDDDD; + box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.35); + box-sizing: border-box; + } + + .icon-cont { + width: 100%; + height: 225px; + + .icon { + width: 100%; + height: 100%; + object-fit: cover; + } + } + + .desc { + width: 100%; + height: 120px; + display: flex; + flex-direction: column; + justify-content: center; + padding: 0 30px; + box-sizing: border-box; + + h4 { + font-size: 20px; + font-weight: bold; + color: #333333; + line-height: 20px; + margin-bottom: 18px; + } + + p { + font-size: 16px; + color: #333333; + line-height: 20px; + } + } +} + +.business-cont.s2 { + margin-top: 100px; + + .mid-box { + margin-top: 40px; + + .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; + } + + li:nth-child(3n) { + margin-right: 0; + } + + .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; + } + + .icon-cont { + width: 100%; + height: 220px; + + .icon { + width: 100%; + height: 100%; + object-fit: cover; + } + } + + .btn, + .desc { + width: 100%; + height: 124px; + padding: 0 20px; + box-sizing: border-box; + } + + .desc { + display: flex; + flex-direction: column; + justify-content: center; + + .i-title { + font-size: 20px; + font-weight: bold; + color: #333333; + line-height: 20px; + margin-bottom: 18px; + } + + .i-desc { + font-size: 16px; + color: #333333; + 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; + + .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; + } + } } \ No newline at end of file