This commit is contained in:
mumuy 2025-10-16 20:54:23 +08:00
parent 2ccf4692b1
commit 1a325f8ab2
2 changed files with 264 additions and 358 deletions

View File

@ -9,9 +9,12 @@
<meta name="renderer" content="webkit"> <meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-transform" /> <meta http-equiv="Cache-Control" content="no-transform" />
<meta name="format-detection" content="telephone=no"/> <meta name="format-detection" content="telephone=no"/>
<title>中国行政区划 行政区划代码 省市区三级数据 身份证号码查询</title>
<meta name="keywords" content="中国行政区划,行政区划代码,省市区三级联动,身份证号码查询,身份证解析,中华人民共和国行政区划"/> <meta name="keywords" content="中国行政区划,行政区划代码,省市区三级联动,身份证号码查询,身份证解析,中华人民共和国行政区划"/>
<meta name="description" content="收录了从1980年至今40多年来的中国行政区划数据用于地名的选择和身份证号码解析等"/> <meta name="description" content="收录了从1980年至今40多年来的中国行政区划数据用于地名的选择和身份证号码解析等"/>
<title>中国行政区划 行政区划代码 省市区三级数据 身份证号码查询</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel="canonical" href="https://passer-by.com/data_location/"/>
<link rel="stylesheet" href="https://passer-by.com/static/style/common.css">
<link rel="stylesheet" href="static/style/index.css"> <link rel="stylesheet" href="static/style/index.css">
<script type="text/javascript"> <script type="text/javascript">
setTimeout(function(){ setTimeout(function(){
@ -25,25 +28,49 @@
</head> </head>
<body> <body>
<div class="wrapper"> <div class="wrapper">
<div class="header"> <header>
<div class="inner"> <div class="mod-head">
<div class="mod-head"> <div class="inner">
<div class="bd"> <div class="bd">
<a class="btn" href="https://github.com/mumuy/data_location/" rel="nofollow" target="_blank" title="Github"> <div class="logo">
<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> <a href="/"><img src="https://passer-by.com/static/image/public/logo.png" width="180" height="64" alt="路人甲"/></a>
<span>Github</span> </div>
</a> <nav>
<a class="btn" href="/">个人网站</a> <li class="active"><a href="https://passer-by.com/project.html">项目</a></li>
<li><a href="https://passer-by.com/writing.html">文字</a></li>
<li><a href="https://passer-by.com/photograph.html">摄影</a></li>
<li><a href="https://passer-by.com/comment.html">留言</a></li>
<li><a href="https://passer-by.com/about.html">关于</a></li>
</nav>
<div class="operation">
<a class="btn" href="https://github.com/mumuy/data_location/" rel="nofollow" target="_blank" title="Github">
<svg aria-hidden="true" class="octicon" title="GitHub " version="1.1" viewBox="0 0 16 16" width="24" height="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>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="mod-bg">
<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
<defs>
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.4)"></use>
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.6)"></use>
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.2)"></use>
<use xlink:href="#gentle-wave" x="48" y="7" fill="rgba(255,255,255,1)"></use>
</g>
</svg>
</div>
</header>
<div class="container"> <div class="container">
<div class="mod-panel"> <div class="inner">
<div class="inner"> <section class="mod-poster">
<div class="hd"> <div class="bd">
<h1>中国行政区划数据<span class="tag">数据开源</span></h1> <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>34</b>个省级行政区,包含<b>23</b>个省、<b>5</b>个自治区、<b>4</b>个直辖市、<b>2</b>个特别行政区</p>
<p>其中大陆地区地级行政区有<b class="city1">-</b>个地级市、<b class="city2">-</b>个地区、<b class="city3">-</b>个自治州、<b class="city4">-</b>个盟</p> <p>其中大陆地区地级行政区有<b class="city1">-</b>个地级市、<b class="city2">-</b>个地区、<b class="city3">-</b>个自治州、<b class="city4">-</b>个盟</p>
<p>县级行政区有<b class="county1">-</b>个市辖区、<b class="county2">-</b>个县级市、<b class="county3">-</b>个县、<b class="county4">-</b>个自治县、<b class="county5">-</b>个旗、<b class="county6">-</b>个自治旗、<b class="county7">-</b>个特区、<b class="county8">-</b>个林区</p> <p>县级行政区有<b class="county1">-</b>个市辖区、<b class="county2">-</b>个县级市、<b class="county3">-</b>个县、<b class="county4">-</b>个自治县、<b class="county5">-</b>个旗、<b class="county6">-</b>个自治旗、<b class="county7">-</b>个特区、<b class="county8">-</b>个林区</p>
<div class="buttons"> <div class="buttons">
@ -57,54 +84,47 @@
</a> </a>
</div> </div>
</div> </div>
<div class="bd"> </section>
<div id="location" class="box"> <section id="location" class="mod-panel">
<div class="c-hd"> <div class="hd">
<span class="title">行政区划历史查询</span> <h3 class="title">行政区划历史查询</h3>
<a class="more" href="https://jquerywidget.com/jquery-citys/" target="_blank">三级联动插件 &gt;</a> <a class="more" href="https://jquerywidget.com/jquery-citys/" target="_blank">三级联动插件 &gt;</a>
</div>
<div class="c-bd">
<p>
<select name="province"></select>
<select name="city"></select>
<select name="district"></select>
</p>
<div class="table-inner"></div>
</div>
</div>
<div id="search" class="box">
<div class="c-hd">
<span class="title">行政区划模糊搜索</span>
<a class="more" href="https://jquerywidget.com/jquery-suggestion/" target="_blank">搜索建议插件 &gt;</a>
</div>
<div class="c-bd">
<form action="" method="post">
<p>
<input type="text" name="location" value="" maxlength="18" placeholder="请输入想要找的地名"/>
</p>
</form>
</div>
</div>
<div id="idcard" class="box">
<div class="c-hd">
<span class="title">身份证号码查询</span>
<a class="more" href="https://passer-by.com/idcard/" target="_blank">中国身份证号码解析 &gt;</a>
</div>
<div class="c-bd">
<form action="" method="post">
<p>
<input type="search" name="id" value="" maxlength="18" placeholder="请输入身份证号码" autocomplete="off"/>
<button class="btn">查询</button>
</p>
</form>
<div class="table-inner"></div>
</div>
</div>
</div> </div>
</div> <div class="bd">
</div> <div class="input-wrapper">
<div class="mod-article"> <select name="province"></select>
<div class="inner"> <select name="city"></select>
<select name="district"></select>
</div>
<div class="table-inner"></div>
</div>
</section>
<section id="search" class="mod-panel">
<div class="hd">
<h3 class="title">行政区划模糊搜索</h3>
<a class="more" href="https://jquerywidget.com/jquery-suggestion/" target="_blank">搜索建议插件 &gt;</a>
</div>
<div class="bd">
<form action="" method="post">
<input type="text" name="location" value="" maxlength="18" placeholder="请输入想要找的地名"/>
</form>
</div>
</section>
<section id="idcard" class="mod-panel">
<div class="hd">
<h3 class="title">身份证号码查询</h3>
<a class="more" href="https://passer-by.com/idcard/" target="_blank">中国身份证号码解析 &gt;</a>
</div>
<div class="bd">
<form action="" method="post">
<input type="search" name="id" value="" maxlength="18" placeholder="请输入身份证号码" autocomplete="off"/>
<button class="btn">查询</button>
</form>
<div class="table-inner"></div>
</div>
</section>
<section class="module mod-article">
<div class="hd"><span>关于行政区划代码</span></div>
<div class="bd"> <div class="bd">
<p>行政区划就是国家为了进行分级管理而实行的国土和政治、行政权力的划分。一般说来,行政区划是以在不同区域内,为全面实现地方国家机构能顺利实现各种职能而建立的不同级别政权机构作为标志。行政区划的层级与一个国家的中央地方关系模式、国土面积的大小、政府与公众的关系状况等因素有关。</p> <p>行政区划就是国家为了进行分级管理而实行的国土和政治、行政权力的划分。一般说来,行政区划是以在不同区域内,为全面实现地方国家机构能顺利实现各种职能而建立的不同级别政权机构作为标志。行政区划的层级与一个国家的中央地方关系模式、国土面积的大小、政府与公众的关系状况等因素有关。</p>
<p>行政区划代码也称行政代码它是国家行政机关的识别符号一般执行两项国家标准《中华人民共和国行政区划代码》GB/T2260-2007)和《县以下行政区划代码编制规则》GB/T10114-2003)。由9位阿拉伯数字组成相当于机关单位的身份号码。按照国务院《行政区划管理条例》规定行政区划代码由民政部门确定、发布。该标准对我国县以上行政区划的代码做了规定用六位阿拉伯数字分层次代表我国的省自治区、直辖市、地区市、州、盟、县区、市、旗的名称。代码从左至右的含义是</p> <p>行政区划代码也称行政代码它是国家行政机关的识别符号一般执行两项国家标准《中华人民共和国行政区划代码》GB/T2260-2007)和《县以下行政区划代码编制规则》GB/T10114-2003)。由9位阿拉伯数字组成相当于机关单位的身份号码。按照国务院《行政区划管理条例》规定行政区划代码由民政部门确定、发布。该标准对我国县以上行政区划的代码做了规定用六位阿拉伯数字分层次代表我国的省自治区、直辖市、地区市、州、盟、县区、市、旗的名称。代码从左至右的含义是</p>
@ -112,9 +132,9 @@
<p>第三、四位表示市地区、自治州、盟及国家直辖市所属市辖区和县的汇总码。其中01-2051-70表示省直辖市21-50表示地区自治州、盟</p> <p>第三、四位表示市地区、自治州、盟及国家直辖市所属市辖区和县的汇总码。其中01-2051-70表示省直辖市21-50表示地区自治州、盟</p>
<p>第五、六位表示县市辖区、县级市、旗。01-20表示市辖区或地区自治州、盟辖县级市21-70表示县81-99表示省直辖县级市71-80表示工业园区或者经济开发区。</p> <p>第五、六位表示县市辖区、县级市、旗。01-20表示市辖区或地区自治州、盟辖县级市21-70表示县81-99表示省直辖县级市71-80表示工业园区或者经济开发区。</p>
</div> </div>
</div> </section>
</div> </div>
<div class="mod-copy"> <section class="module mod-copy">
<div class="inner"> <div class="inner">
<div class="hd"><span>数据开源</span></div> <div class="hd"><span>数据开源</span></div>
<div class="bd"> <div class="bd">
@ -136,21 +156,33 @@
<code><a href="https://passer-by.com/data_location/list2.json" target="_blank">https://passer-by.com/data_location/list2.json</a></code> <code><a href="https://passer-by.com/data_location/list2.json" target="_blank">https://passer-by.com/data_location/list2.json</a></code>
</div> </div>
</div> </div>
</div> </section>
<script type="text/javascript" src="https://passer-by.com/public/script/projects.js"></script> <div class="inner">
<div class="mod-foot"> <script type="text/javascript" src="https://passer-by.com/static/script/projects.js"></script>
<div class="inner">
<div class="bd">
<p>Copyright &copy; <a href="http://passer-by.com">passer-by.com</a></p>
</div>
</div>
</div>
<div class="mod-fixedbar">
<div class="bd">
<a class="gotop" href="javascript:;" rel="nofollow"><img src="static/image/gotop.png" width="24" height="24"></a>
</div>
</div> </div>
</div> </div>
<footer>
<div class="mod-fixedbar">
<div class="bd">
<ul>
<li>
<a class="gotop" href="javascript:;" rel="nofollow">
<img src="https://www.passer-by.com/static/image/public/icon-gotop.png" width="24" height="24" alt="回到顶部">
</a>
</li>
</ul>
</div>
</div>
<div class="mod-foot">
<div class="bd">
<p>
<span>Copyright &copy; 2025</span>
<a href="/">路人甲</a>
<span>版权所有</span>
</p>
</div>
</div>
</footer>
</div> </div>
<script type="text/javascript" src="https://jquerywidget.com/public/script/jquery.min.js"></script> <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" src="https://jquerywidget.com/code/jquery.citys.js"></script>
@ -163,7 +195,7 @@
var historyMap = {}; var historyMap = {};
var diffMap = {}; // 旧对新 var diffMap = {}; // 旧对新
var diffMap2 = {}; // 新对旧 var diffMap2 = {}; // 新对旧
var $module = $('.mod-panel'); var $module = $('.mod-poster');
var getName = function(code){ var getName = function(code){
var code1 = code.replace(/\d{4}$/,'0000'); var code1 = code.replace(/\d{4}$/,'0000');
var code2 = code.replace(/\d{2}$/,'00'); var code2 = code.replace(/\d{2}$/,'00');
@ -297,6 +329,7 @@
alert('身份证号码格式错误!'); alert('身份证号码格式错误!');
}else{ }else{
var newAddress = ''; var newAddress = '';
var code = id.match(/^\d{6}/)[0];
if(diffMap[code]){ if(diffMap[code]){
newAddress = `<tr> newAddress = `<tr>
<td class="th"><span>现所属地</span></td> <td class="th"><span>现所属地</span></td>
@ -342,6 +375,7 @@
})(); })();
</script> </script>
<script async defer src="https://cdn.bootcdn.net/ajax/libs/github-buttons/2.21.1/buttons.min.js"></script> <script async defer src="https://cdn.bootcdn.net/ajax/libs/github-buttons/2.21.1/buttons.min.js"></script>
<script type="text/javascript" src="https://passer-by.com/public/script/stat.js"></script> <script type="text/javascript" src="https://passer-by.com/static/script/common.js"></script>
<script type="text/javascript" src="https://passer-by.com/static/script/stat.js"></script>
</body> </body>
</html> </html>

View File

@ -1,112 +1,31 @@
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} .module{
html{ margin: 160px 0;
height:100%;
} }
body{ .module .hd{
height: 100%; margin-bottom: 6px;
font-size: 14px; line-height: 32px;
font-family: Arial,Helvetica,"Microsoft Yahei";
color: rgb(110, 119, 129);
} }
button, input { .module .hd span{
font-family: Arial,Helvetica,"Microsoft Yahei"; font-size: 20px;
} font-weight: bold;
img{ color: var(--title-color);
vertical-align: middle;
}
a{
text-decoration: none;
color: rgb(110, 119, 129);
}
a:hover{
text-decoration: underline;
} }
.wrapper{ .mod-poster{
background: url('../image/word_map.png') center 10px no-repeat,url('../image/bg.svg') center top repeat-x; margin-bottom: 25px;
} }
.header{ .mod-poster .bd{
margin-bottom: 15px; padding: 60px 0;
line-height: 24px;
} }
.container{ .mod-poster .bd h1{
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{
min-height: 150px;
padding: 35px 0;
line-height: 22px;
}
.mod-panel .hd h1{
margin-bottom: 10px; margin-bottom: 10px;
line-height: 48px; line-height: 48px;
font-weight: bold; font-weight: bold;
font-size: 36px; font-size: 36px;
color:#1a2b3b; color:var(--title-color);
} }
.mod-panel .hd h1 span.tag{ .mod-poster .bd h1 span.tag{
display: inline-block; display: inline-block;
padding: 0 8px; padding: 0 8px;
margin: 0 5px; margin: 0 5px;
@ -118,18 +37,21 @@ a:hover{
border-radius: 4px; border-radius: 4px;
box-shadow: 0 1px 5px 0 rgba(0,0,0,0.03); box-shadow: 0 1px 5px 0 rgba(0,0,0,0.03);
} }
.mod-panel .hd p { .mod-poster .bd p{
margin-bottom: 10px;
line-height: 26px; line-height: 26px;
font-size: 15px;
} }
.mod-panel .hd .buttons{ .mod-poster .bd b{
margin-top: 10px; margin: 0 3px;
color: #fd7474;
}
.mod-poster .buttons{
margin-bottom: 20px; margin-bottom: 20px;
padding: 10px; padding: 10px;
border-radius: 6px; border-radius: 6px;
line-height: 32px; line-height: 32px;
} }
.mod-panel .hd .btn { .mod-poster .btn {
display: inline-block; display: inline-block;
height: 44px; height: 44px;
min-width: 120px; min-width: 120px;
@ -148,62 +70,94 @@ a:hover{
border-radius: 21px; border-radius: 21px;
text-decoration: none; text-decoration: none;
} }
.mod-panel .hd .btn img,.mod-panel .hd .btn span{ .mod-poster .btn img,.mod-poster .btn span{
vertical-align: middle; vertical-align: middle;
} }
.mod-panel .hd .btn:hover{ .mod-poster .btn:hover{
background: #1b85da; background: #1b85da;
} }
.mod-panel .hd .btn-green{ .mod-poster .btn-green{
background: #4bae4f; background: #4bae4f;
color: #fff; color: #fff;
} }
.mod-panel .hd .btn-green:hover{ .mod-poster .btn-green:hover{
background: #47a04b; background: #47a04b;
} }
.mod-panel .hd .btn-red{ .mod-poster .bd .btn-red{
background: #f56954; background: #f56954;
color: #fff; color: #fff;
} }
.mod-panel .hd .btn-red:hover{ .mod-poster .btn-red:hover{
background: #f4543c;; background: #f4543c;;
} }
.mod-panel .hd .btn-orange{ .mod-poster .btn-orange{
background: #ff9000; background: #ff9000;
color: #fff; color: #fff;
} }
.mod-panel .hd .btn-orange:hover{ .mod-poster .btn-orange:hover{
background: #e18309; background: #e18309;
} }
.mod-panel .hd b{
margin: 0 3px; .mod-panel{
color: #fd7474; margin-bottom: 25px;
}
.mod-panel .bd .box{
margin-bottom: 20px;
background: #fff; background: #fff;
box-shadow: 0 1px 5px 0 rgba(0,0,0,0.05); border: 1px solid #f0f0f099;
border: 1px solid rgba(0,0,0,0.075); border-radius: 8px;
box-shadow: 1px 2px 12px rgba(0, 0, 0, 0.02);
} }
.mod-panel .bd .c-hd{ .mod-panel .hd{
padding: 10px 20px 10px 5px; position: relative;
border-bottom: 1px solid #f4f4f4; padding: 10px 20px;
border-bottom: 1px solid #f0f0f099;
line-height: 24px;
} }
.mod-panel .bd .c-hd .title{ .mod-panel .hd .title{
height: 20px; display: inline-block;
padding-left: 12px;
border-left: 3px solid #2095f2;
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
color: #1a2b3b; color: var(--title-color);
} }
.mod-panel .bd .c-hd .more{ .mod-panel .hd .more{
float: right; float: right;
text-decoration: none; text-decoration: none;
color: #999; color: #999;
} }
.mod-panel .bd .c-bd{ .mod-panel .hd::after{
padding:20px; position: absolute;
left: 2px;
top: 50%;
content: '';
width: 4px;
height: 24px;
background: #2095f2;
margin-top: -12px;
border-radius: 3px;
}
.mod-panel .bd{
padding: 20px;
}
.mod-panel .bd p{
margin-bottom: 10px;
line-height: 26px;
text-indent: 2em;
}
.mod-panel .bd h4{
line-height: 30px;
font-size: 16px;
font-weight: bold;
color: var(--title-color);
}
.mod-panel .bd code{
display: block;
margin-bottom: 20px;
padding: 15px;
background: #f8f8f8;
border-radius: 6px;
}
.mod-panel .bd pre{
white-space: break-spaces;
word-break: break-all;
word-wrap: break-word;
} }
.mod-panel .bd .table-inner{ .mod-panel .bd .table-inner{
padding-top:20px; padding-top:20px;
@ -217,39 +171,48 @@ a:hover{
font-size: 15px; font-size: 15px;
font-weight: bold; font-weight: bold;
} }
.mod-panel .bd thead{
background: #f6f8fa;
}
.mod-panel .bd th,.mod-panel .bd td{ .mod-panel .bd th,.mod-panel .bd td{
padding: 6px 12px; padding: 6px 12px;
border: 1px solid #e2e2e2; border: 1px solid #e1e6ea;
line-height: 22px; line-height: 24px;
} }
.mod-panel .bd td.th{ .mod-panel .bd td.th{
background: #f5f5f5; background: #f6f8fa;
} }
.mod-panel .bd thead{ .mod-panel .bd td p{
background: #f5f5f5; margin-bottom: 0;
text-indent: 0;
} }
.mod-panel .bd select{ .mod-panel .bd select{
height: 32px; height: 36px;
padding: 0 10px; padding: 0 10px;
border: 1px solid #e2e2e2; border: 1px solid #e2e2e2;
border-radius: 4px; box-sizing: border-box;
vertical-align: middle;
outline: none; outline: none;
border-radius: 4px;
} }
.mod-panel .bd input[type="text"],.mod-panel .bd input[type="search"]{ .mod-panel .bd input[type="text"],.mod-panel .bd input[type="search"]{
width: 240px; width: 240px;
height: 32px; height: 36px;
padding: 0 10px; padding: 0 10px;
border: 1px solid #e2e2e2; border: 1px solid #e2e2e2;
border-radius: 4px; border-radius: 4px;
vertical-align: middle; vertical-align: middle;
outline: none; outline: none;
box-sizing: border-box;
} }
.mod-panel .bd .btn { .mod-panel .bd .btn {
height: 34px; height: 36px;
min-width: 80px; min-width: 80px;
padding:0 15px;
background: #2095f2; background: #2095f2;
border: medium none; border: medium none;
line-height: 34px; box-sizing: border-box;
line-height: 36px;
vertical-align: middle; vertical-align: middle;
font-size: 15px; font-size: 15px;
color: #fff; color: #fff;
@ -302,11 +265,8 @@ a:hover{
resize: none; resize: none;
outline: none; outline: none;
} }
.mod-panel .bd p{ .mod-panel .bd label{
line-height: 22px; white-space: nowrap;
}
.mod-panel .bd p span{
margin-right: 4px;
} }
.mod-panel .bd .text-green{ .mod-panel .bd .text-green{
color: #4bae4f; color: #4bae4f;
@ -314,7 +274,12 @@ a:hover{
.mod-panel .bd .text-red{ .mod-panel .bd .text-red{
color:#f56954; color:#f56954;
} }
.mod-panel .input-wrapper{
line-height: 24px;
}
.mod-panel .input-wrapper span{
margin-right: 5px;
}
.mod-panel .suggestion{ .mod-panel .suggestion{
background: #fff; background: #fff;
} }
@ -373,6 +338,12 @@ a:hover{
.mod-article{ .mod-article{
margin-bottom: 65px; margin-bottom: 65px;
} }
.mod-article .hd{
margin-top: -36px;
}
.mod-article .hd span{
font-size: 24px;
}
.mod-article .bd{ .mod-article .bd{
position: relative; position: relative;
padding: 30px 0; padding: 30px 0;
@ -396,64 +367,21 @@ a:hover{
.mod-article .bd p{ .mod-article .bd p{
margin-bottom: 12px; margin-bottom: 12px;
line-height: 28px; line-height: 28px;
font-size: 15px;
text-indent: 2em; 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{ .mod-copy{
margin-bottom: 65px; margin-bottom: 65px;
padding: 35px 0; padding: 35px 0;
background: rgb(246, 248, 250); 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{ .mod-copy .bd{
margin:0 5px; margin:0 5px;
} }
.mod-copy .bd p{ .mod-copy .bd p{
line-height: 26px; margin-bottom: 12px;
line-height: 28px;
text-indent: 2em; text-indent: 2em;
font-size: 15px;
} }
.mod-copy .bd .buttons{ .mod-copy .bd .buttons{
margin: 15px 0; margin: 15px 0;
@ -474,100 +402,33 @@ a:hover{
} }
.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;
}
.mod-fixedbar .bd {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 99;
}
.mod-fixedbar .bd a{
position: relative;
display: block;
width: 48px;
height: 48px;
margin-bottom: 2px;
background: rgba(255,255,255,0.8);
box-shadow: 1px 1px 6px rgba(0,0,0,0.1);
line-height: 48px;
text-align: center;
}
.mod-fixedbar .bd a:hover{
background: rgba(255,255,255,0.9);
}
@media screen and (max-width: 1020px) { @media screen and (max-width: 1020px) {
.header{ .mod-poster{
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; margin-bottom: 25px;
} }
.mod-panel .hd{ .mod-poster .bd{
float: none; float: none;
padding-top: 0; padding: 0 0 10px;
width: auto; width: auto;
margin-bottom: 15px; margin-bottom: 15px;
} }
.mod-panel .hd h1{ .mod-poster .bd h1{
margin-bottom: 5px; margin-bottom: 5px;
line-height: 26px; line-height: 26px;
font-size: 20px; font-size: 20px;
} }
.mod-panel .hd p{ .mod-poster .bd p{
line-height: 22px; line-height: 22px;
font-size: 13px; font-size: 13px;
overflow: hidden; overflow: hidden;
} }
.mod-panel .hd .btn {
min-width: 64px;
margin: 2px 1px;
padding: 0 15px;
height: 36px;
line-height: 35px;
font-size: 14px;
}
.mod-article{ .mod-article{
margin-bottom: 25px; margin-bottom: 25px;
} }
.mod-article .hd span{
font-size: 20px;
}
.mod-article .bd{ .mod-article .bd{
padding: 15px 0; padding: 15px 0;
} }
@ -594,26 +455,37 @@ a:hover{
} }
@media screen and (max-width: 640px) { @media screen and (max-width: 640px) {
.mod-panel .inner{ .mod-poster .buttons{
padding: 10px; margin-bottom: 10px;
padding: 10px 0;
} }
.mod-panel .bd .c-bd{ .mod-poster .btn{
min-width: 64px;
margin: 2px 1px;
padding: 0 15px;
height: 36px;
line-height: 35px;
font-size: 14px;
}
.mod-poster .btn img{
display: none;
}
.mod-panel .bd{
padding: 15px 10px; padding: 15px 10px;
} }
.mod-panel .bd input[type="text"]{ .mod-panel .bd input[type="text"]{
width: 200px; width: 200px;
} }
.mod-panel .bd .btn{ .mod-panel .bd .c-ft {
padding: 10px;
}
.mod-panel .btn {
min-width: 64px; min-width: 64px;
} margin: 2px 1px;
padding: 0 15px;
.mod-fixedbar .bd {
right: 10px;
bottom: 10px;
}
.mod-fixedbar .bd a{
width: 36px;
height: 36px; height: 36px;
line-height: 36px; line-height: 35px;
font-size: 14px;
} }
} }