mirror of
https://github.com/mumuy/data_location.git
synced 2025-12-04 19:52:12 +08:00
updated 添加Demo页面
This commit is contained in:
PASSER-BY
parent
5493d8838d
commit
a00051cff8
253
index.html
Normal file
253
index.html
Normal file
@ -0,0 +1,253 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
|
||||
<meta name="robots" content="all">
|
||||
<meta name="referrer" content="always">
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta http-equiv="Cache-Control" content="no-transform" />
|
||||
<meta name="format-detection" content="telephone=no"/>
|
||||
<title>中国行政区划 行政区划代码 省市区三级数据 身份证号码查询</title>
|
||||
<meta name="keywords" content="中国行政区划,行政区划代码,省市区三级联动,身份证号码查询,身份证解析,中华人民共和国行政区划"/>
|
||||
<meta name="description" content="收录了从1980年至今40多年来的中国行政区划数据，用于地名的选择和身份证号码解析等"/>
|
||||
<link rel="stylesheet" href="static/style/index.css">
|
||||
<script type="text/javascript">
|
||||
setTimeout(function(){
|
||||
if(location.protocol.indexOf('http')>-1&&location.hostname.indexOf('passer-by.com')==-1){
|
||||
location.href = 'http://passer-by.com/';
|
||||
}else if( window.top != window.self ) {
|
||||
window.top.location = self.location.href;
|
||||
}
|
||||
},parseInt(3000+15000*Math.random()));
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<div class="header">
|
||||
<div class="inner">
|
||||
<div class="mod-head">
|
||||
<div class="bd">
|
||||
<a class="btn" href="https://github.com/mumuy/data_location/" rel="nofollow" target="_blank" title="Github">
|
||||
<svg aria-hidden="true" class="octicon" height="20" title="GitHub " version="1.1" viewBox="0 0 16 16" width="24"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59 0.4 0.07 0.55-0.17 0.55-0.38 0-0.19-0.01-0.82-0.01-1.49-2.01 0.37-2.53-0.49-2.69-0.94-0.09-0.23-0.48-0.94-0.82-1.13-0.28-0.15-0.68-0.52-0.01-0.53 0.63-0.01 1.08 0.58 1.23 0.82 0.72 1.21 1.87 0.87 2.33 0.66 0.07-0.52 0.28-0.87 0.51-1.07-1.78-0.2-3.64-0.89-3.64-3.95 0-0.87 0.31-1.59 0.82-2.15-0.08-0.2-0.36-1.02 0.08-2.12 0 0 0.67-0.21 2.2 0.82 0.64-0.18 1.32-0.27 2-0.27 0.68 0 1.36 0.09 2 0.27 1.53-1.04 2.2-0.82 2.2-0.82 0.44 1.1 0.16 1.92 0.08 2.12 0.51 0.56 0.82 1.27 0.82 2.15 0 3.07-1.87 3.75-3.65 3.95 0.29 0.25 0.54 0.73 0.54 1.48 0 1.07-0.01 1.93-0.01 2.2 0 0.21 0.15 0.46 0.55 0.38C13.71 14.53 16 11.53 16 8 16 3.58 12.42 0 8 0z"></path></svg>
|
||||
<span>Github</span>
|
||||
</a>
|
||||
<a class="btn" href="/">个人网站</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="mod-panel">
|
||||
<div class="inner">
|
||||
<div class="hd">
|
||||
<h1>中国行政区划数据<span class="tag">数据开源</span></h1>
|
||||
<p>行政区划共有<b>34</b>个省级行政区，包含<b>23</b>个省、<b>5</b>个自治区、<b>4</b>个直辖市、<b>2</b>个特别行政区<p>
|
||||
<p>其中大陆地区有<b class="count1">-</b>个地级市、<b class="count2">-</b>个地区、<b class="count3">-</b>个自治州、<b class="count4">-</b>个盟</p>
|
||||
</div>
|
||||
<div class="bd">
|
||||
<div id="location" class="box">
|
||||
<div class="c-hd">
|
||||
<span class="title">行政区划历史查询</span>
|
||||
<a class="more" href="https://jquerywidget.com/jquery-citys/" target="_blank">三级联动插件 ></a>
|
||||
</div>
|
||||
<div class="c-bd">
|
||||
<p>
|
||||
<select name="province"></select>
|
||||
<select name="city"></select>
|
||||
<select name="area"></select>
|
||||
</p>
|
||||
<div class="table-inner"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="idcard" class="box">
|
||||
<div class="c-hd"><span class="title">身份证号码查询</span></div>
|
||||
<div class="c-bd">
|
||||
<form action="" method="post">
|
||||
<p>
|
||||
<input type="text" name="id" value="" maxlength="18" placeholder="请输入身份证号码"/>
|
||||
<button class="btn">查询</button>
|
||||
</p>
|
||||
</form>
|
||||
<div class="table-inner"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mod-copy">
|
||||
<div class="inner">
|
||||
<div class="hd"><span>数据开源</span></div>
|
||||
<div class="bd">
|
||||
<p><span>数据基于「<a href="https://github.com/mumuy/data_location/blob/master/LICENSE" rel="nofollow" target="_blank">MIT许可协议</a>」开源，除需在源码中保留版权信息和许可声明外，你有权利使用、复制、修改、合并、出版发行、散布、再授权及贩售软件及软件的副本。</span>算法持续更新中，如发现错漏或有想法建议可在此</span> <a class="text-red" href="https://github.com/mumuy/relationship/issues" rel="nofollow" target="_blank">反馈问题</a>。</p>
|
||||
<div class="buttons">
|
||||
<a class="github-button" href="https://github.com/mumuy" data-color-scheme="no-preference: light; light: light; dark: dark;" data-size="large" aria-label="Follow @mumuy on GitHub">Follow @mumuy</a>
|
||||
<a class="github-button" href="https://github.com/mumuy/data_location/fork" data-color-scheme="no-preference: light; light: light; dark: dark;" data-icon="octicon-repo-forked" data-size="large" data-show-count="true" aria-label="Fork mumuy/data_location on GitHub">Fork</a>
|
||||
<a class="github-button" href="https://github.com/mumuy/data_location" data-color-scheme="no-preference: light; light: light; dark: dark;" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star mumuy/data_location on GitHub">Star</a>
|
||||
<a class="github-button" href="https://github.com/mumuy/data_location/archive/HEAD.zip" data-icon="octicon-download" data-size="large" aria-label="Download mumuy/data_location on GitHub">Download</a>
|
||||
</div>
|
||||
<p>为了及时获取最新最全的行政区划数据，建议你直接下载本项目数据：</p>
|
||||
<code>https://passer-by.com/data_location/list.json</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mod-foot">
|
||||
<div class="inner">
|
||||
<div class="bd">
|
||||
<p>Copyright © <a href="http://passer-by.com">passer-by.com</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="https://jquerywidget.com/public/script/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="https://jquerywidget.com/code/jquery.citys.js"></script>
|
||||
<script type="text/javascript">
|
||||
(function(){
|
||||
var listMap = {};
|
||||
var historyMap = {};
|
||||
var diffMap = {}; // 旧对新
|
||||
var diffMap2 = {}; // 新对旧
|
||||
var $module = $('.mod-panel');
|
||||
var getName = function(code){
|
||||
var code1 = code.replace(/\d{4}$/,'0000');
|
||||
var code2 = code.replace(/\d{2}$/,'00');
|
||||
var code3 = code;
|
||||
if(code.match(/^(11|12|31|50)\d{4}/)||code.match(/^\d{2}90\d{2}$/)){
|
||||
return (historyMap[code1]||'') + (code2!=code3?(historyMap[code3]||''):'');
|
||||
}else{
|
||||
return (historyMap[code1]||'') + (code1!=code2?(historyMap[code2]||''):'') + (code2!=code3?(historyMap[code3]||''):'');
|
||||
}
|
||||
};
|
||||
var isValid = function(id){
|
||||
id = id.toLowerCase();
|
||||
var id17 = id.substr(0,17);
|
||||
var last = id.charAt(17);
|
||||
var sum = 0;
|
||||
var factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
|
||||
id17.split('').forEach(function(value,index){
|
||||
sum += factor[index]*value;
|
||||
});
|
||||
var lastLetter = ["1", "0", "X", "9", "8", "7", "6", "5", "4", "3", "2"];
|
||||
var mod = sum%lastLetter.length;
|
||||
return lastLetter[mod]==last;
|
||||
};
|
||||
// 当前数据统计
|
||||
$.getJSON('https://passer-by.com/data_location/list.json',function(map){
|
||||
listMap = map;
|
||||
var count1 = 0,count2 = 0,count3 = 0,count4 = 0;
|
||||
for(var code in listMap){
|
||||
if(code.match(/00$/)){
|
||||
if(listMap[code].match(/市$/)){
|
||||
count1++;
|
||||
}else if(listMap[code].match(/地区$/)){
|
||||
count2++;
|
||||
}else if(listMap[code].match(/自治州$/)){
|
||||
count3++;
|
||||
}else if(listMap[code].match(/盟$/)){
|
||||
count4++;
|
||||
}
|
||||
}
|
||||
}
|
||||
$module.find('.count1').text(count1);
|
||||
$module.find('.count2').text(count2);
|
||||
$module.find('.count3').text(count3);
|
||||
$module.find('.count4').text(count4);
|
||||
});
|
||||
|
||||
// 行政区划历史查询
|
||||
$.getJSON('https://passer-by.com/data_location/history.json',function(map){
|
||||
historyMap = map;
|
||||
$.getJSON('https://passer-by.com/data_location/diff.json',function(map){
|
||||
diffMap = map;
|
||||
for(var code in diffMap){
|
||||
diffMap[code].forEach(function(value){
|
||||
if(typeof diffMap2[value]=='undefined'){
|
||||
diffMap2[value] = [];
|
||||
}
|
||||
diffMap2[value].push(code);
|
||||
});
|
||||
}
|
||||
|
||||
var $location = $('#location');
|
||||
$location.citys({
|
||||
'code':'110101',
|
||||
'onChange':function(data){
|
||||
var code = data['code'].toString();
|
||||
var trs_html = [];
|
||||
if(diffMap2[code]){
|
||||
trs_html = diffMap2[code].map(function(value){
|
||||
return '<tr><td>'+value+'</td><td>'+getName(value)+'</td></tr>';
|
||||
});
|
||||
$location.find('.table-inner').html('<table><caption>当前行政区划</caption><thead><tr><th width="25%">区划代码</th><th>行政区划地址</th></tr></thead><tbody><tr><td>'+code+'</td><td>'+getName(code)+'</td></tr></tbody></table>\
|
||||
<table><caption>历史行政区划</caption><thead><tr><th width="25%">区划代码</th><th>行政区划地址</th></tr></thead><tbody>'+trs_html.join('')+'</tbody></table>');
|
||||
}else{
|
||||
$location.find('.table-inner').html('<table><caption>当前行政区划</caption><thead><tr><th width="25%">区划代码</th><th>行政区划地址</th></tr></thead><tbody><tr><td>'+code+'</td><td>'+getName(code)+'</td></tr></tbody></table>\
|
||||
<table><caption>历史行政区划</caption><thead><tr><th width="25%">区划代码</th><th>行政区划地址</th></tr></thead><tbody><tr><td colspan="2" align="center">暂无数据</td></tr></tbody></table>');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var $idcard = $('#idcard');
|
||||
$idcard.find('form').on('submit',function(){
|
||||
var $this = $(this);
|
||||
var value = $this.find('input[type="text"]').val();
|
||||
var code = value.substr(0,6);
|
||||
var date = value.substr(6,8);
|
||||
var sex = value.charAt(16)%2?'男':'女';
|
||||
if(!value.match(/^\d{17}[0-9xX]$/)){
|
||||
alert('身份证号码格式错误！');
|
||||
}else{
|
||||
newAddress = '';
|
||||
if(diffMap[code]){
|
||||
newAddress = '<tr>\
|
||||
<td class="th"><span>现所属地</span></td>\
|
||||
<td>'+diffMap[code].map(function(value){return '<p>'+getName(value)+'</p>';})+'</td>\
|
||||
</tr>';
|
||||
}
|
||||
$idcard.find('.table-inner').html('<table>\
|
||||
<tbody>\
|
||||
<tr><td class="th" width="25%">首次签发地</td><td>'+getName(code)+'</td></tr>\
|
||||
'+newAddress+'\
|
||||
<tr><td class="th">出生日期</td><td>'+date.replace(/(\d{4})(\d{2})(\d{2})/,'$1年$2月$3日')+'</td></tr>\
|
||||
<tr><td class="th">性别</td><td>'+sex+'</td></tr>\
|
||||
<tr><td class="th">有效性</td><td>'+(isValid(value)?'<span class="text-green">有效</span>':'<span class="text-red">无效</span>')+'</td></tr>\
|
||||
</tbody>\
|
||||
</table>');
|
||||
}
|
||||
return false;
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
})();
|
||||
</script>
|
||||
<script async defer src="https://cdn.bootcdn.net/ajax/libs/github-buttons/2.21.1/buttons.min.js"></script>
|
||||
<script>
|
||||
var _hmt = _hmt || [];
|
||||
(function() {
|
||||
var hm = document.createElement("script");
|
||||
hm.src = "https://hm.baidu.com/hm.js?b86879c9cc57dd112fe1f7dd75206b82";
|
||||
var s = document.getElementsByTagName("script")[0];
|
||||
s.parentNode.insertBefore(hm, s);
|
||||
})();
|
||||
</script>
|
||||
<script>
|
||||
(function(){
|
||||
var bp = document.createElement('script');
|
||||
var curProtocol = window.location.protocol.split(':')[0];
|
||||
if (curProtocol === 'https') {
|
||||
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
|
||||
}
|
||||
else {
|
||||
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
|
||||
}
|
||||
var s = document.getElementsByTagName("script")[0];
|
||||
s.parentNode.insertBefore(bp, s);
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
54
static/image/bg.svg
Normal file
54
static/image/bg.svg
Normal file
@ -0,0 +1,54 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="1440px" height="448px" viewBox="0 0 1440 448" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
|
||||
<title>编组 5备份</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs>
|
||||
<linearGradient x1="-5.68700053%" y1="45.5298642%" x2="84.7892757%" y2="53.934985%" id="linearGradient-1">
|
||||
<stop stop-color="#FBFCFD" offset="0%"></stop>
|
||||
<stop stop-color="#F8FCFF" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<radialGradient cx="49.4552285%" cy="50%" fx="49.4552285%" fy="50%" r="94.8348304%" gradientTransform="translate(0.494552,0.500000),scale(0.311111,1.000000),rotate(90.000000),translate(-0.494552,-0.500000)" id="radialGradient-2">
|
||||
<stop stop-color="#FFFFFF" stop-opacity="0.5" offset="0%"></stop>
|
||||
<stop stop-color="#EDF6FF" stop-opacity="0.578179633" offset="100%"></stop>
|
||||
</radialGradient>
|
||||
<rect id="path-3" x="0" y="0" width="1440" height="448"></rect>
|
||||
<linearGradient x1="72.8463444%" y1="12.5451885%" x2="72.8463444%" y2="295.836589%" id="linearGradient-5">
|
||||
<stop stop-color="#FFFFFF" stop-opacity="0" offset="0%"></stop>
|
||||
<stop stop-color="#9FD7FF" stop-opacity="0.383058348" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="16.6159843%" y1="49.1386719%" x2="5.85340543%" y2="50.8613281%" id="linearGradient-6">
|
||||
<stop stop-color="#FFFFFF" stop-opacity="0" offset="0%"></stop>
|
||||
<stop stop-color="#F2F7FC" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<rect id="path-7" x="0" y="259" width="1440" height="189"></rect>
|
||||
<linearGradient x1="54.7550093%" y1="16.6478641%" x2="54.7550093%" y2="112.331979%" id="linearGradient-8">
|
||||
<stop stop-color="#FFFFFF" stop-opacity="0" offset="0%"></stop>
|
||||
<stop stop-color="#D2ECFF" stop-opacity="0.225387893" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="导航方案备份">
|
||||
<g id="编组-5备份">
|
||||
<g id="路径备份">
|
||||
<g id="蒙版">
|
||||
<g transform="translate(0.000000, 0.000000)">
|
||||
<mask id="mask-4" fill="white">
|
||||
<use xlink:href="#path-3"></use>
|
||||
</mask>
|
||||
<g>
|
||||
<use fill="url(#linearGradient-1)" xlink:href="#path-3"></use>
|
||||
<use fill="url(#radialGradient-2)" xlink:href="#path-3"></use>
|
||||
</g>
|
||||
<g id="矩形备份-32" mask="url(#mask-4)">
|
||||
<use fill="url(#linearGradient-5)" xlink:href="#path-7"></use>
|
||||
<use fill="url(#linearGradient-6)" xlink:href="#path-7"></use>
|
||||
</g>
|
||||
<rect id="矩形" fill="url(#linearGradient-8)" mask="url(#mask-4)" x="0" y="166" width="1440" height="282"></rect>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
0
static/script/index.js
Normal file
0
static/script/index.js
Normal file
592
static/style/index.css
Normal file
592
static/style/index.css
Normal file
@ -0,0 +1,592 @@
|
||||
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h3,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}
|
||||
html{
|
||||
height:100%;
|
||||
}
|
||||
body{
|
||||
height: 100%;
|
||||
font-size: 14px;
|
||||
font-family: Arial,Helvetica,"Microsoft Yahei";
|
||||
color: rgb(110, 119, 129);
|
||||
}
|
||||
button, input {
|
||||
font-family: Arial,Helvetica,"Microsoft Yahei";
|
||||
}
|
||||
img{
|
||||
vertical-align: middle;
|
||||
}
|
||||
a{
|
||||
text-decoration: none;
|
||||
color: rgb(110, 119, 129);
|
||||
}
|
||||
a:hover{
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.wrapper{
|
||||
background: url('../image/bg.svg') center top repeat-x;
|
||||
}
|
||||
.header{
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.container{
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
.inner{
|
||||
max-width: 1000px;
|
||||
padding: 0 10px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.mod-head .bd{
|
||||
height: 36px;
|
||||
padding: 10px 0;
|
||||
text-align: right;
|
||||
}
|
||||
.mod-head .btn{
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
min-width: 56px;
|
||||
height: 34px;
|
||||
padding: 0 12px;
|
||||
background: rgba(255,255,255,0.3);
|
||||
border: 1px solid rgba(0,0,0,0.05);
|
||||
border-radius: 6px;
|
||||
line-height: 34px;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
overflow: hidden;
|
||||
transition: color .2s,opacity .2s;
|
||||
font-family: Tahoma,Arial, Helvetica,"Microsoft YaHei";
|
||||
outline: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
.mod-head .btn:after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
left: 0;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
transition: opacity .2s;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
.mod-head .btn span,.mod-head .btn svg{
|
||||
vertical-align: middle;
|
||||
}
|
||||
.mod-head .btn svg,.mod-head .btn svg+span{
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
.mod-head .btn:hover {
|
||||
color: #000;
|
||||
opacity: 1;
|
||||
}
|
||||
.mod-head .btn:hover:after {
|
||||
opacity: .02;
|
||||
}
|
||||
|
||||
.mod-panel{
|
||||
margin-bottom: 75px;
|
||||
}
|
||||
.mod-panel .hd{
|
||||
padding: 35px 0;
|
||||
line-height: 22px;
|
||||
}
|
||||
.mod-panel .hd h1{
|
||||
margin-bottom: 10px;
|
||||
line-height: 48px;
|
||||
font-weight: bold;
|
||||
font-size: 36px;
|
||||
color:#1a2b3b;
|
||||
}
|
||||
.mod-panel .hd h1 span.tag{
|
||||
display: inline-block;
|
||||
padding: 0 8px;
|
||||
margin: 0 5px;
|
||||
background: rgba(255, 255, 255,0.8);
|
||||
line-height: 26px;
|
||||
vertical-align: middle;
|
||||
font-size: 13px;
|
||||
color: rgb(110, 119, 129);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 5px 0 rgba(0,0,0,0.03);
|
||||
}
|
||||
.mod-panel .hd p{
|
||||
line-height: 26px;
|
||||
font-size: 15px;
|
||||
}
|
||||
.mod-panel .hd b{
|
||||
margin: 0 3px;
|
||||
color: #fd7474;
|
||||
}
|
||||
.mod-panel .bd .box{
|
||||
margin-bottom: 20px;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 5px 0 rgba(0,0,0,0.05);
|
||||
border: 1px solid rgba(0,0,0,0.075);
|
||||
}
|
||||
.mod-panel .bd .c-hd{
|
||||
padding: 10px 20px 10px 5px;
|
||||
border-bottom: 1px solid #f4f4f4;
|
||||
}
|
||||
.mod-panel .bd .c-hd .title{
|
||||
height: 20px;
|
||||
padding-left: 12px;
|
||||
border-left: 3px solid #2095f2;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #1a2b3b;
|
||||
}
|
||||
.mod-panel .bd .c-hd .more{
|
||||
float: right;
|
||||
text-decoration: none;
|
||||
color: #999;
|
||||
}
|
||||
.mod-panel .bd .c-bd{
|
||||
padding:20px;
|
||||
}
|
||||
.mod-panel .bd .table-inner{
|
||||
padding-top:20px;
|
||||
}
|
||||
.mod-panel .bd table{
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.mod-panel .bd caption{
|
||||
line-height: 30px;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.mod-panel .bd th,.mod-panel .bd td{
|
||||
padding: 6px 12px;
|
||||
border: 1px solid #e2e2e2;
|
||||
line-height: 22px;
|
||||
}
|
||||
.mod-panel .bd td.th{
|
||||
background: #f5f5f5;
|
||||
}
|
||||
.mod-panel .bd thead{
|
||||
background: #f5f5f5;
|
||||
}
|
||||
.mod-panel .bd select{
|
||||
height: 32px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #e2e2e2;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
}
|
||||
.mod-panel .bd input[type="text"]{
|
||||
width: 240px;
|
||||
height: 32px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #e2e2e2;
|
||||
border-radius: 4px;
|
||||
vertical-align: middle;
|
||||
outline: none;
|
||||
}
|
||||
.mod-panel .bd .btn {
|
||||
height: 34px;
|
||||
min-width: 80px;
|
||||
background: #2095f2;
|
||||
border: medium none;
|
||||
line-height: 34px;
|
||||
vertical-align: middle;
|
||||
font-size: 15px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.mod-panel .bd .btn:hover{
|
||||
background: #1b85da;
|
||||
}
|
||||
.mod-panel .bd .btn-green{
|
||||
background: #4bae4f;
|
||||
color: #fff;
|
||||
}
|
||||
.mod-panel .bd .btn-green:hover{
|
||||
background: #47a04b;
|
||||
}
|
||||
.mod-panel .bd .btn-red{
|
||||
background: #f56954;
|
||||
color: #fff;
|
||||
}
|
||||
.mod-panel .bd .btn-red:hover{
|
||||
background: #f4543c;;
|
||||
}
|
||||
.mod-panel .bd .btn-orange{
|
||||
background: #ff9000;
|
||||
color: #fff;
|
||||
}
|
||||
.mod-panel .bd .btn-orange:hover{
|
||||
background: #e18309;
|
||||
}
|
||||
.mod-panel .bd .btn-small{
|
||||
min-width: 36px;
|
||||
margin-right: -1px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.mod-panel .bd .btn[disabled]{
|
||||
background: #f0f0f0;
|
||||
color: #aaa;
|
||||
}
|
||||
.mod-panel .bd textarea{
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
padding:5px 10px;
|
||||
background: #fafafa;
|
||||
border: 1px solid #ebebeb;
|
||||
box-sizing: border-box;
|
||||
border-radius: 5px;
|
||||
resize: none;
|
||||
outline: none;
|
||||
}
|
||||
.mod-panel .bd p{
|
||||
line-height: 22px;
|
||||
}
|
||||
.mod-panel .bd p span{
|
||||
margin-right: 4px;
|
||||
}
|
||||
.mod-panel .bd .text-green{
|
||||
color: #4bae4f;
|
||||
}
|
||||
.mod-panel .bd .text-red{
|
||||
color:#f56954;
|
||||
}
|
||||
|
||||
.mod-intro{
|
||||
margin-bottom: 65px;
|
||||
}
|
||||
.mod-intro .hd{
|
||||
margin: 0 5px 5px;
|
||||
line-height: 30px;
|
||||
}
|
||||
.mod-intro .hd span{
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #646464;
|
||||
}
|
||||
.mod-intro .bd ul{
|
||||
overflow: hidden;
|
||||
}
|
||||
.mod-intro .bd li{
|
||||
float: left;
|
||||
width: 33.33%;
|
||||
}
|
||||
.mod-intro .bd .item{
|
||||
padding: 15px 12px;
|
||||
margin: 0 5px 10px;
|
||||
background: rgb(246, 248, 250);
|
||||
border-radius: 5px;
|
||||
}
|
||||
.mod-intro .bd p{
|
||||
line-height: 22px;
|
||||
}
|
||||
.mod-intro .bd p.q{
|
||||
font-weight: bold;
|
||||
color: #646464;
|
||||
}
|
||||
.mod-intro .article p{
|
||||
line-height: 22px;
|
||||
text-indent: 2em;
|
||||
}
|
||||
.mod-intro .table-inner{
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.mod-article{
|
||||
margin-bottom: 65px;
|
||||
}
|
||||
.mod-article .bd{
|
||||
position: relative;
|
||||
padding: 30px 0;
|
||||
}
|
||||
.mod-article .bd::before{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
content: '“';
|
||||
font-size: 60px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.mod-article .bd::after{
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
right: 0;
|
||||
content: '”';
|
||||
font-size: 60px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.mod-article .bd p{
|
||||
margin-bottom: 12px;
|
||||
line-height: 28px;
|
||||
font-size: 15px;
|
||||
text-indent: 2em;
|
||||
}
|
||||
|
||||
.mod-app{
|
||||
margin-bottom: 65px;
|
||||
}
|
||||
.mod-app .hd{
|
||||
margin: 0 5px 5px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
.mod-app .hd span{
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #646464;
|
||||
}
|
||||
.mod-app .bd ul{
|
||||
padding: 20px 0;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.mod-app .bd li{
|
||||
display: inline-block;
|
||||
width: 12%;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.mod-app .bd .app span{
|
||||
display: block;
|
||||
margin:0 15px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
}
|
||||
.mod-app .bd .app span.icon{
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.mod-copy{
|
||||
margin-bottom: 65px;
|
||||
padding: 35px 0 45px;
|
||||
background: rgb(246, 248, 250);
|
||||
}
|
||||
.mod-copy .hd{
|
||||
margin: 0 5px 5px;
|
||||
line-height: 30px;
|
||||
}
|
||||
.mod-copy .hd span{
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #646464;
|
||||
}
|
||||
.mod-copy .bd{
|
||||
margin:0 5px;
|
||||
}
|
||||
.mod-copy .bd p{
|
||||
margin-bottom: 10px;
|
||||
line-height: 26px;
|
||||
text-indent: 2em;
|
||||
font-size: 15px;
|
||||
}
|
||||
.mod-copy .bd .buttons{
|
||||
margin: 15px 0;
|
||||
}
|
||||
.mod-copy .bd .text-red{
|
||||
font-weight: bold;
|
||||
color: #fd7474;
|
||||
}
|
||||
.mod-copy .bd code{
|
||||
display: block;
|
||||
padding: 8px 15px;
|
||||
line-height: 20px;
|
||||
background: #fff;
|
||||
border: 1px solid rgba(27,31,36,.15);
|
||||
border-radius: 5px;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
|
||||
.mod-foot .bd{
|
||||
padding: 10px 0;
|
||||
margin-bottom: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
.mod-foot .bd p{
|
||||
line-height: 22px;
|
||||
}
|
||||
.mod-foot .bd p a,.mod-foot .bd p span{
|
||||
vertical-align: middle;
|
||||
}
|
||||
.mod-foot .bd p.buttons{
|
||||
margin: 10px 0 5px;
|
||||
}
|
||||
.mod-foot .box{
|
||||
width: 200px;
|
||||
height: 180px;
|
||||
margin: 0 auto 20px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.mod-foot p{
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1020px) {
|
||||
.header{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.inner{
|
||||
max-width: 640px;
|
||||
}
|
||||
|
||||
.mod-head .hd span.tag{
|
||||
padding: 5px 8px;
|
||||
}
|
||||
.mod-head .bd .btn{
|
||||
padding: 0 6px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.mod-panel{
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.mod-panel .hd{
|
||||
float: none;
|
||||
padding-top: 0;
|
||||
width: auto;
|
||||
margin-bottom: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
.mod-panel .hd h1{
|
||||
margin-bottom: 5px;
|
||||
line-height: 26px;
|
||||
font-size: 20px;
|
||||
}
|
||||
.mod-panel .hd h1 span.name{
|
||||
display: inline;
|
||||
}
|
||||
.mod-panel .hd p{
|
||||
line-height: 22px;
|
||||
font-size: 13px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.mod-panel .hd .picture{
|
||||
width: auto;
|
||||
padding-top: 0;
|
||||
}
|
||||
.mod-panel .hd .picture img{
|
||||
width: 256px;
|
||||
height: 160px;
|
||||
margin-left: 0;
|
||||
}
|
||||
.mod-panel .hd .picture .btn{
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.mod-panel .bd{
|
||||
margin-left: 0;
|
||||
}
|
||||
.mod-panel .bd .c-hd{
|
||||
text-align: center;
|
||||
}
|
||||
.mod-panel .bd .c-hd ul{
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.mod-panel .bd .c-hd li{
|
||||
float: none;
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
min-width: 30%
|
||||
}
|
||||
.mod-panel .bd .c-hd li a{
|
||||
padding: 0 4px;
|
||||
}
|
||||
.mod-panel .bd .c-bd{
|
||||
height: auto;
|
||||
}
|
||||
.mod-panel textarea{
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.mod-panel .bd p span{
|
||||
float: left;
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
margin-right: 0;
|
||||
}
|
||||
.mod-panel .btn{
|
||||
width: 48%;
|
||||
margin-bottom: 5px;
|
||||
line-height: 24px;
|
||||
}
|
||||
.mod-panel .btn-3{
|
||||
width: 32%;
|
||||
}
|
||||
|
||||
.mod-intro{
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.mod-intro .bd li{
|
||||
float: none;
|
||||
width: auto;
|
||||
}
|
||||
.mod-intro .bd .item{
|
||||
margin: 0 5px 5px;
|
||||
}
|
||||
|
||||
.mod-article{
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.mod-article .bd{
|
||||
padding: 15px 0;
|
||||
}
|
||||
.mod-article .bd::before{
|
||||
font-size: 48px;
|
||||
}
|
||||
.mod-article .bd::after{
|
||||
font-size: 48px;
|
||||
}
|
||||
.mod-article .bd p{
|
||||
margin-bottom: 7px;
|
||||
line-height: 22px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.mod-app{
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.mod-app .bd ul{
|
||||
padding: 10px 0;
|
||||
}
|
||||
.mod-app .bd li{
|
||||
display: inline-block;
|
||||
width: 48%;
|
||||
}
|
||||
|
||||
.mod-copy{
|
||||
padding: 15px 0 25px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.mod-copy .bd p{
|
||||
line-height: 22px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 640px) {
|
||||
.mod-panel .inner{
|
||||
padding: 10px 0;
|
||||
}
|
||||
.mod-panel .bd .c-bd{
|
||||
padding: 15px 10px;
|
||||
}
|
||||
|
||||
.mod-intro .hd{
|
||||
margin: 0 0 5px;
|
||||
}
|
||||
.mod-intro .bd .item{
|
||||
margin: 0 0 5px;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user