JLNTV_IPD/data_location
4
0
Fork 0
mirror of https://github.com/mumuy/data_location.git synced 2025-12-04 11:42:09 +08:00
Code Issues Projects Releases Wiki Activity

updated 样式优化

Browse Source
This commit is contained in:
mumuy 2025-10-17 00:00:08 +08:00
parent add64f0d7e
commit ae7af12cd4
2 changed files with 66 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
index.html
View File

@ -95,7 +95,7 @@
<select name="city"></select> <select name="city"></select>
<select name="district"></select> <select name="district"></select>
</div> </div>
<div class="table-inner"></div> <div class="result-container"></div>
</div> </div>
</section> </section>
<section id="search" class="mod-panel"> <section id="search" class="mod-panel">
@ -105,7 +105,9 @@
</div> </div>
<div class="bd"> <div class="bd">
<form action="" method="post"> <form action="" method="post">
<input type="text" name="location" value="" maxlength="18" placeholder="请输入想要找的地名"/> <div class="input-wrapper">
<input type="text" name="location" value="" maxlength="18" placeholder="请输入想要找的地名"/>
</div>
</form> </form>
</div> </div>
</section> </section>
@ -116,10 +118,12 @@
</div> </div>
<div class="bd"> <div class="bd">
<form action="" method="post"> <form action="" method="post">
<input type="search" name="id" value="" maxlength="18" placeholder="请输入身份证号码" autocomplete="off"/> <div class="input-wrapper">
<button class="btn">查询</button> <input type="search" name="id" value="" maxlength="18" placeholder="请输入身份证号码" autocomplete="off"/>
<button class="btn">查询</button>
</div>
</form> </form>
<div class="table-inner"></div> <div class="result-container"></div>
</div> </div>
</section> </section>
<section class="module mod-article"> <section class="module mod-article">
@ -305,17 +309,45 @@
'code':'110101', 'code':'110101',
'onChange':function(data){ 'onChange':function(data){
var code = data['code'].toString(); var code = data['code'].toString();
var trs_html = []; $location.find('.result-container').html(`
if(diffMap2[code]){ <div class="table-inner">
trs_html = diffMap2[code].map(function(value){ <table>
return '<tr><td>'+value+'</td><td>'+getName(value)+'</td></tr>'; <caption>当前行政区划</caption>
}); <thead>
$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>\ <tr>
<table><caption>历史行政区划</caption><thead><tr><th width="25%">区划代码</th><th>行政区划地址</th></tr></thead><tbody>'+trs_html.join('')+'</tbody></table>'); <th width="30%">区划代码</th>
}else{ <th>行政区划地址</th>
$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>\ </tr>
<table><caption>历史行政区划</caption><thead><tr><th width="25%">区划代码</th><th>行政区划地址</th></tr></thead><tbody><tr><td colspan="2" align="center">暂无数据</td></tr></tbody></table>'); </thead>
} <tbody>
<tr>
<td>${code}</td>
<td>${getName(code)}</td>
</tr>
</tbody>
</table>
</div>
<div class="table-inner">
<table>
<caption>历史行政区划</caption>
<thead>
<tr>
<th width="30%">区划代码</th>
<th>行政区划地址</th>
</tr>
</thead>
<tbody>
${
diffMap2[code]?
diffMap2[code].map(function(value){
return '<tr><td>'+value+'</td><td>'+getName(value)+'</td></tr>';
}).join(''):
'<tr><td colspan="2" align="center">暂无数据</td></tr>'
}
</tbody>
</table>
</div>
`);
} }
}); });
@ -335,17 +367,21 @@
<td>${diffMap[code].map(function(value){return '<p>'+getName(value)+'</p>';})}</td> <td>${diffMap[code].map(function(value){return '<p>'+getName(value)+'</p>';})}</td>
</tr>`; </tr>`;
} }
$idcard.find('.table-inner').html(`<table> $idcard.find('.result-container').html(`
<tbody> <div class="table-inner">
<tr><td class="th" width="25%">证件类型</td><td>${result['type']}</td></tr> <table>
<tr><td class="th">国籍</td><td>${result['country']}</td></tr> <tbody>
<tr><td class="th">首次签发地</td><td>${result['sign']}</td></tr> <tr><td class="th" width="25%">证件类型</td><td>${result['type']}</td></tr>
${newAddress} <tr><td class="th">国籍</td><td>${result['country']}</td></tr>
<tr><td class="th">出生日期</td><td>${result['birthday'].replace(/(\d{4})(\d{2})(\d{2})/,'$1年$2月$3日')}</td></tr> <tr><td class="th">首次签发地</td><td>${result['sign']}</td></tr>
<tr><td class="th">性别</td><td>${result['sex']}</td></tr> ${newAddress}
<tr><td class="th">有效性</td><td>${(result['isValid']?'<span class="text-green">有效</span>':'<span class="text-red">无效</span>')}</td></tr> <tr><td class="th">出生日期</td><td>${result['birthday'].replace(/(\d{4})(\d{2})(\d{2})/,'$1年$2月$3日')}</td></tr>
</tbody> <tr><td class="th">性别</td><td>${result['sex']}</td></tr>
</table>`); <tr><td class="th">有效性</td><td>${(result['isValid']?'<span class="text-green">有效</span>':'<span class="text-red">无效</span>')}</td></tr>
</tbody>
</table>
</div>
`);
} }
return false; return false;
}); });

6
static/style/index.css
View File

@ -160,15 +160,15 @@
word-wrap: break-word; word-wrap: break-word;
} }
.mod-panel .bd .table-inner{ .mod-panel .bd .table-inner{
margin-top: 15px;
overflow-x: auto; overflow-x: auto;
} }
.mod-panel .bd table{ .mod-panel .bd table{
width: 100%; width: 100%;
margin-bottom: 15px;
} }
.mod-panel .bd caption{ .mod-panel .bd caption{
line-height: 30px; line-height: 32px;
font-size: 15px; font-size: 16px;
font-weight: bold; font-weight: bold;
} }
.mod-panel .bd thead{ .mod-panel .bd thead{