From a00051cff8f31cec457339b5f7d3f05a0ba26acd Mon Sep 17 00:00:00 2001 From: PASSER-BY Date: Tue, 2 Aug 2022 20:00:23 +0800 Subject: [PATCH] =?UTF-8?q?updated=20=E6=B7=BB=E5=8A=A0Demo=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 253 ++++++++++++++++++ static/image/bg.svg | 54 ++++ static/script/index.js | 0 static/style/index.css | 592 +++++++++++++++++++++++++++++++++++++++++ 4 files changed, 899 insertions(+) create mode 100644 index.html create mode 100644 static/image/bg.svg create mode 100644 static/script/index.js create mode 100644 static/style/index.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..a71a9eb --- /dev/null +++ b/index.html @@ -0,0 +1,253 @@ + + + + + + + + + + + + 中国行政区划 行政区划代码 省市区三级数据 身份证号码查询 + + + + + + +
+
+
+
+
+ + + Github + + 个人网站 +
+
+
+
+
+
+
+
+

中国行政区划数据数据开源

+

行政区划共有34个省级行政区，包含23个省、5个自治区、4个直辖市、2个特别行政区

+

其中大陆地区有-个地级市、-个地区、-个自治州、-个盟

+
+
+
+
+ 行政区划历史查询 + 三级联动插件 > +
+
+

+ + + +

+
+
+
+
+
身份证号码查询
+
+
+

+ + +

+
+
+
+
+
+
+
+
+
+
数据开源
+
+

数据基于「MIT许可协议」开源，除需在源码中保留版权信息和许可声明外，你有权利使用、复制、修改、合并、出版发行、散布、再授权及贩售软件及软件的副本。算法持续更新中，如发现错漏或有想法建议可在此 反馈问题。

+
+ Follow @mumuy + Fork + Star + Download +
+

为了及时获取最新最全的行政区划数据，建议你直接下载本项目数据：

+ https://passer-by.com/data_location/list.json +
+
+
+
+
+
+

Copyright © passer-by.com

+
+
+
+
+
+ + + + + + + + diff --git a/static/image/bg.svg b/static/image/bg.svg new file mode 100644 index 0000000..ab41146 --- /dev/null +++ b/static/image/bg.svg @@ -0,0 +1,54 @@ + + + + 编组 5备份 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/script/index.js b/static/script/index.js new file mode 100644 index 0000000..e69de29 diff --git a/static/style/index.css b/static/style/index.css new file mode 100644 index 0000000..88a12b7 --- /dev/null +++ b/static/style/index.css @@ -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; + } +}