Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
2070623f by 任超
Options

style:业务列表

1 parent addba1c6
Inline Side-by-side
Showing 14 changed files with 120 additions and 4 deletions
......@@ -146,25 +146,29 @@
</h2>
<ul class="convenient-service-list">
<li>
<img url="./staticImages/seywcx.png" src="./staticImages/ywcx.png" pre="./staticImages/ywcx.png" alt="业务查询" />
<img url="./staticImages/seywcx.png" src="./staticImages/ywcx.png" pre="./staticImages/ywcx.png"
alt="业务查询" />
<h6>业务查询</h6>
<p>办理进度、业务详情，在线查询</p>
<a href="./staticViews/convenienceService/businessInquiry.html" title="业务查询">立即查看</a>
</li>
<li>
<img url="./staticImages/seyycx.png" src="./staticImages/yycx.png" pre="./staticImages/yycx.png" alt="预约查询" />
<img url="./staticImages/seyycx.png" src="./staticImages/yycx.png" pre="./staticImages/yycx.png"
alt="预约查询" />
<h6>预约查询</h6>
<p>预约办理、号段预约，实时查询</p>
<a id="appointment_inquiry" title="预约查询">立即查看</a>
</li>
<li>
<img url="./staticImages/sezscx.png" src="./staticImages/zscx.png" pre="./staticImages/zscx.png" alt="证书查询" />
<img url="./staticImages/sezscx.png" src="./staticImages/zscx.png" pre="./staticImages/zscx.png"
alt="证书查询" />
<h6>证书查询</h6>
<p>证书详情、证书核验，预览下载</p>
<a href="./staticViews/convenienceService/certificateVerification.html" title="证书查询">立即查看</a>
</li>
<li>
<img url="./staticImages/sehtbacx.png" src="./staticImages/htbacx.png" pre="./staticImages/htbacx.png" alt="合同备案查询" />
<img url="./staticImages/sehtbacx.png" src="./staticImages/htbacx.png"
pre="./staticImages/htbacx.png" alt="合同备案查询" />
<h6>合同备案查询</h6>
<p>合同备案，在线预览、电子版下载</p>
<a href="./staticViews/convenienceService/recordInquiry.html" title="合同备案查询">立即查看</a>
......@@ -195,6 +199,47 @@
</div>
</div>
</div>
<!-- 业务列表 -->
<div class="business-list">
<ul class="business-list-leftItem">
<li>
<img src="/staticImages/woyaoban.png" />
我要办
</li>
<li>
<img src="/staticImages/woyaocha.png" />
我要查
</li>
<li>
<img src="/staticImages/woyaowen.png" />
我要问
</li>
<li>
<img src="/staticImages/woyaoping.png" />
我要评
</li>
</ul>
<div class="business-list-rightItem">
<ul>
<li>
<img src="/staticImages/idanganchaxun.png" />
档案查询
</li>
<li>
<img src="/staticImages/jinduchaxun.png" />
进度查询
</li>
<li>
<img src="/staticImages/zaixianyuyue.png" />
在线预约
</li>
<li>
<img src="/staticImages/zhenghuheyan.png" />
证书核验
</li>
</ul>
</div>
</div>
<!-- 法律法规 -->
<div class="laws_regulations">
<div class="regulations title">
......
......@@ -668,3 +668,74 @@ div.c_five ul li a img {
border: 1px solid #E95515;
color: #E95515;
}
/* 业务列表 */
.business-list {
width: 1200px;
margin: 40px auto;
}
.business-list-leftItem {
width: 212px;
height: 324px;
background: #498FFF;
margin-right: 20px;
float: left;
}
.business-list-leftItem li {
height: 81px;
line-height: 81px;
text-align: center;
color: #FFFFFF;
font-size: 20px;
}
.business-list-leftItem li:not(:last-child) {
border: 1px solid #74A9FF;
}
.business-list-leftItem li img {
width: 22px;
height: 22px;
position: relative;
top: 3px;
right: 5px;
}
.business-list-rightItem {
float: left;
}
.business-list-rightItem ul:nth-of-type(1) {
font-size: 0;
}
.business-list-rightItem ul:nth-of-type(1) li{
display: inline-block;
width: 227px;
height: 150px;
background: linear-gradient(90deg, #5495FE 0%, #498FFF 100%);
box-shadow: 0px 3px 6px 0px rgba(10, 14, 40, 0.05);
border-radius: 2px;
opacity: 0.88;
color: #FFFFFF;
font-size: 20px;
text-align: center;
box-sizing: border-box;
padding-top: 46px;
position: relative;
}
.business-list-rightItem ul:nth-of-type(1) li::after {
content: '';
position: absolute;
width: 213px;
height: 137px;
border: 1px solid #74A9FF;
border-radius: 1px;
left: 5px;
top: 5px;
background: url('/staticImages/idanganbg.png') no-repeat right bottom;
background-size: 65px 66px;
}
.business-list-rightItem ul:nth-of-type(1) li:not(:last-child) {
margin-right: 20px;
}
.business-list-rightItem ul:nth-of-type(1) li img {
width: 36px;
height: 35px;
position: relative;
top: 10px;
}
\ No newline at end of file
......