56c13a50 by weimo934

feat():绘制业务指南页面

1 parent fab0d062
......@@ -3,7 +3,6 @@
<head>
<meta charset="UTF-8">
<title>新闻详情</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="format-detection" content="telephone=no">
<meta name="renderer" content="webkit">
......
* {
padding: 0;
margin: 0;
}
.main {
padding-left: 20px;
padding-right: 20px;
}
.top li {
width: 160px;
height: 60px;
font-size: 22px;
font-weight: 500;
color: #4A4A4A;
line-height: 60px;
background-color: transparent !important;
border: none!important;
}
.xsbl-sort {
display: flex;
justify-content: left;
padding-top: 20px;
padding-bottom: 20px;
}
.xsbl-sort > li {
display: inline-block;
font-size: 16px;
font-weight: 400;
color: #6D7278;
line-height: 16px;
margin-right: 10px;
}
.td {
height: auto;
}
.td-title {
height: auto;
font-size: 16px;
font-weight: 500;
color: #4A4A4A;
line-height: 40px;
background-color: #DEDEDE;
border: 1px solid #DEDEDE;
padding-left: 15px;
}
.layui-tab-title {
height: auto;
border-bottom-style:none;
}
.td-body {
display: flex;
flex-flow: row;
flex-wrap: wrap;
justify-content: space-between;
}
.td-item {
width: 48%;
height: auto;
background: #FFFFFF;
border-radius: 2px;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
border-bottom: 1px dashed #DEDEDE;
margin-right: 15px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
.td-item div {
}
.td-item button {
width: 90px;
height: 30px;
background: #2FA5FF;
border-radius: 4px;
border: none;
color: white;
line-height: 30px;
}
.fw {
height: auto;
}
.fw-title {
height: 40px;
font-size: 16px;
font-weight: 500;
color: #4A4A4A;
line-height: 40px;
background-color: #DEDEDE;
border: 1px solid #DEDEDE;
padding-left: 15px;
}
.fw-body {
display: flex;
flex-flow: row;
flex-wrap: wrap;
justify-content: space-between;
}
.fw-item {
width: 48%;
background: #FFFFFF;
border-radius: 2px;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
border-bottom: 1px dashed #DEDEDE;
margin-right: 15px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
.fw-item div {
}
.fw-item button {
width: 90px;
height: 30px;
background: #2FA5FF;
border-radius: 4px;
border: none;
color: white;
line-height: 30px;
}
.gzw {
height: auto;
}
.gzw-title {
height: 40px;
font-size: 16px;
font-weight: 500;
color: #4A4A4A;
line-height: 40px;
background-color: #DEDEDE;
border: 1px solid #DEDEDE;
padding-left: 15px;
}
.gzw-body {
display: flex;
flex-flow: row;
flex-wrap: wrap;
justify-content: space-between;
}
.gzw-item {
width: 48%;
height: auto;
background: #FFFFFF;
border-radius: 2px;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
border-bottom: 1px dashed #DEDEDE;
margin-right: 15px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
.gzw-item div {
}
.gzw-item button {
width: 90px;
height: 30px;
background: #2FA5FF;
border-radius: 4px;
border: none;
color: white;
line-height: 30px;
}
.sl {
height: auto;
}
.sl-title {
height: 40px;
font-size: 16px;
font-weight: 500;
color: #4A4A4A;
line-height: 40px;
background-color: #DEDEDE;
border: 1px solid #DEDEDE;
padding-left: 15px;
}
.sl-body {
display: flex;
flex-flow: row;
flex-wrap: wrap;
justify-content: space-between;
}
.sl-item {
width: 48%;
height: auto;
background: #FFFFFF;
border-radius: 2px;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
border-bottom: 1px dashed #DEDEDE;
margin-right: 15px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
.sl-item div {
}
.sl-item button {
width: 90px;
height: 30px;
background: #2FA5FF;
border-radius: 4px;
border: none;
color: white;
line-height: 30px;
}
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>业务指南</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="format-detection" content="telephone=no">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<link rel="stylesheet" type="text/css" href="../../lib/layui/css/layui.css"/>
<link rel="alternate icon" type="image/png" href="../../images/logo-realestate.png">
<link rel='icon' href='../../favicon.ico' type='image/x-ico'/>
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<link rel="stylesheet" href="../../css/default.min.css?t=227"/>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<div class="main">
<div class="layui-tab layui-tab-card">
<ul class="layui-tab-title top">
<li class="layui-this">线上办理</li>
<li>线下办理</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show ">
<div class="xsbl-sort">
<li>全部</li>
<li>土地</li>
<li>房屋建筑物</li>
<li>构筑物</li>
<li>森林、林木</li>
<li>其他</li>
</div>
<div class="td">
<div class="td-title">
土地
</div>
<div class="td-body">
<div class="td-item">
<div>
<span>
土地-企业-转移登记(买卖)
</span>
</div>
<div>
<button>在线办理</button>
</div>
</div>
<div class="td-item">
<div>
<span>
土地-企业-转移登记(买卖)
</span>
</div>
<div>
<button>在线办理</button>
</div>
</div> <div class="td-item">
<div>
<span>
土地-企业-转移登记(买卖)
</span>
</div>
<div>
<button>在线办理</button>
</div>
</div>
</div>
</div> <div class="fw">
<div class="fw-title">
土地
</div>
<div class="fw-body">
<div class="fw-item">
<div>
<span>
土地-企业-转移登记(买卖)
</span>
</div>
<div>
<button>在线办理</button>
</div>
</div>
<div class="fw-item">
<div>
<span>
土地-企业-转移登记(买卖)
</span>
</div>
<div>
<button>在线办理</button>
</div>
</div> <div class="fw-item">
<div>
<span>
土地-企业-转移登记(买卖)
</span>
</div>
<div>
<button>在线办理</button>
</div>
</div>
</div>
</div> <div class="gzw">
<div class="gzw-title">
土地
</div>
<div class="gzw-body">
<div class="gzw-item">
<div>
<span>
土地-企业-转移登记(买卖)
</span>
</div>
<div>
<button>在线办理</button>
</div>
</div>
<div class="gzw-item">
<div>
<span>
土地-企业-转移登记(买卖)
</span>
</div>
<div>
<button>在线办理</button>
</div>
</div> <div class="gzw-item">
<div>
<span>
土地-企业-转移登记(买卖)
</span>
</div>
<div>
<button>在线办理</button>
</div>
</div>
</div>
</div> <div class="sl">
<div class="sl-title">
土地
</div>
<div class="sl-body">
<div class="sl-item">
<div>
<span>
土地-企业-转移登记(买卖)
</span>
</div>
<div>
<button>在线办理</button>
</div>
</div>
<div class="sl-item">
<div>
<span>
土地-企业-转移登记(买卖)
</span>
</div>
<div>
<button>在线办理</button>
</div>
</div> <div class="sl-item">
<div>
<span>
土地-企业-转移登记(买卖)
</span>
</div>
<div>
<button>在线办理</button>
</div>
</div>
</div>
</div>
</div>
<div class="layui-tab-item">内容2</div>
</div>
</div>
</div>
</body>
</html>
<!--[if (gte IE 9)|!(IE)]><!-->
<script type="text/javascript" src="../../lib/jquery/jquery.min.js"></script>
<!--<![endif]-->
<script type="text/javascript" src="../../lib/handlebars/handlebars.min.js"></script>
<script type="text/javascript" src="../../lib/iscroll/iscroll-probe.js"></script>
<script type="text/javascript" src="../../lib/amazeui/amazeui.min.js"></script>
<script type="text/javascript" src="../../lib/raty/jquery.raty.js"></script>
<script type="text/javascript" src="../../js/main.min.js?t=1"></script>
<script type="text/javascript" src="../../lib/layui/layui.js"></script>
<script>
layui.use('element', function () {
var $ = layui.jquery
, element = layui.element; //Tab的切换功能,切换事件监听等,需要依赖element模块
});
</script>
\ No newline at end of file