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-01 18:31:44 +08:00
parent 3b50ed9c86
commit 6f6fdf78eb
11 changed files with 515 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
common/header.html
View File

@ -7,16 +7,16 @@
<div class="menu">
<ul class="group">
<li class="item">
<a class="link active" href="/" target="_blank">首页</a>
<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="" target="_blank">业务与介绍</a>
<a class="link" href="/business.html" target="_blank">业务与介绍</a>
</li>
<li class="item">
<a class="link" href="" target="_blank">用户故事</a>
<a class="link" href="/story.html" target="_blank">用户故事</a>
</li>
<li class="item">
<a class="link" href="/contact.html" target="_blank">联系我们</a>

52
contact.html
View File

@ -26,9 +26,55 @@
<p>YOUR CASH FLOW LEFT ATRIUM TO GUARD</p>
</div>
</div>
<div class="section main-wrap">
<div class="section-title style-1 wow fadeInDown">
<h2 class="title">企业<span class="rtext">文化</span></h2>
<div class="section full-wrap contact-map">
<div class="cm-desc">
<img class="logo" src="images/logo-contact.png" alt="">
<div class="desc">
<div class="title">
<h1>联系<span>我们</span></h1>
<p>CONTACT US</p>
</div>
<ul class="items">
<li>
<img src="images/dianhua-yuankuang.png" alt="">
<p>400-0707-091</p>
</li>
<li>
<img src="images/dizhi.png" alt="">
<p>杭州市西湖区弘德路256号云起·西溪谷商务中心C座6楼</p>
</li>
</ul>
</div>
</div>
<div class="cm-map full-wrap" style="background-image: url('images/map-test.png');"></div>
</div>
<div class="section main-wrap paragraph-content">
<div class="paragraph">
<h2 class="title">业务咨询</h2>
<div class="content">
<p>
若您想了解我们的服务，或在服务过程中有任何问题，请拨打我们的热线电话4000707091
</p>
</div>
</div>
<div class="paragraph">
<h2 class="title">举报与投诉</h2>
<div class="content">
<p>
若我们的工作人员在服务过程中有任何的违规行为，请及时拨打我们的热线电话进行投诉，平台工作人员将尽快为您解决
问题。对于工作人员的违规行为，请检举人尽量提供明确证据，方便平台尽快处理，热线电话: 4000707091
</p>
</div>
</div>
</div>
<div class="section main-wrap cooperate">
<div class="section-title style-1">
<h2 class="title">商务<span class="rtext">合作</span></h2>
</div>
<div class="content">
<p>
商务合作内容。
</p>
</div>
</div>
</div>

174
css/style.css
View File

@ -321,3 +321,177 @@
color: #040000;
margin-left: 10px;
}
.section.contact-map {
position: relative;
margin-top: 100px;
height: 690px;
}
.section.contact-map .cm-desc {
z-index: 5;
position: relative;
width: 1045px;
display: flex;
border: 2px solid #DDDDDD;
box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.35);
box-sizing: border-box;
margin: 0 auto;
}
.section.contact-map .cm-desc .logo {
width: 392px;
height: 392px;
}
.section.contact-map .cm-desc .desc {
width: 653px;
padding: 35px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
flex-direction: column;
background-color: #ffffff;
}
.section.contact-map .cm-map {
position: absolute;
top: 170px;
height: 520px;
background-repeat: no-repeat;
background-position: center;
}
.section.contact-map .title h1 {
font-size: 36px;
font-weight: bold;
color: #000000;
line-height: 36px;
margin-bottom: 30px;
letter-spacing: 3px;
}
.section.contact-map .title span {
color: #E50020;
}
.section.contact-map .title p {
font-size: 24px;
color: #333333;
line-height: 24px;
}
.section.contact-map .items li {
display: flex;
align-items: center;
margin-top: 12px;
}
.section.contact-map .items img {
width: 37px;
height: 37px;
margin-right: 15px;
}
.section.contact-map .items p {
font-size: 18px;
font-weight: bold;
color: #333333;
}
.section.paragraph-content {
margin-top: 100px;
margin-bottom: 100px;
}
.section.paragraph-content .paragraph:first-child {
margin-top: 0;
}
.section.paragraph-content .paragraph {
margin-top: 30px;
}
.section.paragraph-content .paragraph .title {
font-size: 24px;
font-weight: bold;
color: #E50020;
line-height: 24px;
margin-bottom: 30px;
}
.section.cooperate .content {
margin-top: 60px;
margin-bottom: 60px;
}
.section.story-cont.last {
margin-bottom: 100px;
}
.section.story-cont {
margin-top: 40px;
}
.section.story-cont .title {
font-size: 24px;
font-weight: bold;
color: #E50020;
margin-bottom: 25px;
line-height: 24px;
}
.section.story-cont .image-con {
position: relative;
width: 100%;
border-radius: 20px;
overflow: hidden;
font-size: 0;
}
.section.story-cont .image-con img {
max-width: 100%;
}
.section.story-cont .image-con p {
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 100%;
background-image: url('/images/header-bg.png');
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;
}
.section.story-cont .story-item {
margin-top: 20px;
}
.section.story-cont .story-item .desc {
width: 700px;
height: 360px;
background: #F5F5F5;
border-radius: 20px 0 0 20px;
overflow: hidden;
float: left;
margin-top: 40px;
box-sizing: border-box;
padding: 28px;
}
.section.story-cont .story-item .img {
width: 666px;
height: 440px;
background: #E5E5E5;
border-radius: 20px;
overflow: hidden;
flex-shrink: 0;
float: right;
}
.section.story-cont .story-item .img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.section.story-cont .story-item .text {
font-size: 24px;
font-weight: bold;
color: #000000;
line-height: 24px;
margin-bottom: 30px;
}
.section.story-cont .story-item .content {
font-size: 20px;
color: #000000;
line-height: 30px;
text-indent: 2em;
}
.section.story-cont .story-item:nth-child(2n) .desc {
float: right;
border-radius: 0 20px 20px 0;
}
.section.story-cont .story-item:nth-child(2n) .img {
float: left;
}

218
css/style.less
View File

@ -307,4 +307,222 @@
margin-left: 10px;
}
}
}
.section.contact-map {
position: relative;
margin-top: 100px;
height: 690px;
.cm-desc {
z-index: 5;
position: relative;
width: 1045px;
display: flex;
border: 2px solid #DDDDDD;
box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.35);
box-sizing: border-box;
margin: 0 auto;
.logo {
width: 392px;
height: 392px;
}
.desc {
width: 653px;
padding: 35px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
flex-direction: column;
background-color: #ffffff;
}
}
.cm-map {
position: absolute;
top: 170px;
height: 520px;
background-repeat: no-repeat;
background-position: center;
}
.title {
h1 {
font-size: 36px;
font-weight: bold;
color: #000000;
line-height: 36px;
margin-bottom: 30px;
letter-spacing: 3px;
}
span {
color: #E50020;
}
p {
font-size: 24px;
color: #333333;
line-height: 24px;
}
}
.items {
li {
display: flex;
align-items: center;
margin-top: 12px;
}
img {
width: 37px;
height: 37px;
margin-right: 15px;
}
p {
font-size: 18px;
font-weight: bold;
color: #333333;
}
}
}
.section.paragraph-content {
margin-top: 100px;
margin-bottom: 100px;
.paragraph:first-child {
margin-top: 0;
}
.paragraph {
margin-top: 30px;
.title {
font-size: 24px;
font-weight: bold;
color: #E50020;
line-height: 24px;
margin-bottom: 30px;
}
// .content {
// font-size: 24px;
// color: #666666;
// line-height: 36px;
// }
}
}
.section.cooperate {
.content {
margin-top: 60px;
margin-bottom: 60px;
}
}
.section.story-cont.last {
margin-bottom: 100px;
}
.section.story-cont {
margin-top: 40px;
.title {
font-size: 24px;
font-weight: bold;
color: #E50020;
margin-bottom: 25px;
line-height: 24px;
}
.image-con {
position: relative;
width: 100%;
border-radius: 20px;
overflow: hidden;
font-size: 0;
img {
max-width: 100%;
}
p {
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 100%;
background-image: url('/images/header-bg.png');
font-size: 24px;
font-weight: bold;
color: #FFFFFF;
box-sizing: border-box;
padding: 30px 60px;
}
}
.story-item:first-child {
margin-top: 0;
}
.story-item {
margin-top: 20px;
.desc {
width: 700px;
height: 360px;
background: #F5F5F5;
border-radius: 20px 0 0 20px;
overflow: hidden;
float: left;
margin-top: 40px;
box-sizing: border-box;
padding: 28px;
}
.img {
width: 666px;
height: 440px;
background: #E5E5E5;
border-radius: 20px;
overflow: hidden;
flex-shrink: 0;
float: right;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.text {
font-size: 24px;
font-weight: bold;
color: #000000;
line-height: 24px;
margin-bottom: 30px;
}
.content {
font-size: 20px;
color: #000000;
line-height: 30px;
text-indent: 2em;
}
}
.story-item:nth-child(2n) {
.desc {
float: right;
border-radius: 0 20px 20px 0;
}
.img {
float: left;
}
}
}

BIN
images/dianhua-yuankuang.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
images/dizhi.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
images/erweima.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 58 KiB

BIN
images/logo-contact.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
images/map-test.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 266 KiB

BIN
images/tu2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

71
story.html Normal file
View File

@ -0,0 +1,71 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户故事</title>
<link rel="stylesheet" href="css/reset.css">
<script src="libs/jquery.1.11.1.min.js"></script>
<!-- animate -->
<link rel="stylesheet" href="libs/animate.min.css">
<script src="libs/wow.min.js"></script>
<!-- swiper -->
<link rel="stylesheet" href="libs/swiper/swiper.min.css">
<script src="libs/swiper/swiper.min.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="header"></div>
<div class="container">
<div class="section sec-banner" style="background-image: url('/images/banner2.png');">
<div class="banner-text">
<p>您的现金流安全 <span class="cname">左心房</span>来守护</p>
<p>YOUR CASH FLOW LEFT ATRIUM TO GUARD</p>
</div>
</div>
<div class="section main-wrap story-cont">
<h2 class="title">社会责任</h2>
<div class="image-con">
<img src="images/tu2.png" alt="">
<p>持续优化企业融资成本 助力实体经济健康发展</p>
</div>
</div>
<div class="section main-wrap story-cont last">
<h2 class="title">社会责任</h2>
<ul class="story-group">
<li class="story-item clearfix">
<div class="desc">
<p class="text">周先生</p>
<p class="text">上海市 | 建材</p>
<p class="content">
周先生在上海市经营着小规模的建材公司，前几年的客户群体主要是一些个体户、小经销商等等，每年的利润不大但也算稳定。为了扩大生产规模，公司在经历两次不靠谱的融资平台之后，决定把融资项目委托给左心房来全面操盘。在左心房的操盘下，2022年顺利通过以银行房产抵押的方式融资175万，并于2023年再次通过银行房产抵押降息增额，成功融资210万。
</p>
</div>
<div class="img">
<img src="images/tu2.png" alt="">
</div>
</li>
<li class="story-item clearfix">
<div class="desc">
<p class="text">周先生</p>
<p class="text">上海市 | 建材</p>
<p class="content">
周先生在上海市经营着小规模的建材公司，前几年的客户群体主要是一些个体户、小经销商等等，每年的利润不大但也算稳定。为了扩大生产规模，公司在经历两次不靠谱的融资平台之后，决定把融资项目委托给左心房来全面操盘。在左心房的操盘下，2022年顺利通过以银行房产抵押的方式融资175万，并于2023年再次通过银行房产抵押降息增额，成功融资210万。
</p>
</div>
<div class="img">
<img src="images/tu2.png" alt="">
</div>
</li>
</ul>
</div>
</div>
<div class="footer"></div>
<script src="js/main.js"></script>
</body>
</html>