hn_cloud_web/smz-web/pages/work/sysMag/facePhotoForm.html

173 lines
4.0 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>查看</title>
<link rel="stylesheet" type="text/css" media="screen" href="../../../layui/css/layui.css">
<link rel="stylesheet" type="text/css" media="screen" href="../../../css/viewer.min.css">
<script type="text/javascript" src="../../../js/libs/jquery-3.7.1.min.js"></script>
<script type="text/javascript" src="../../../layui/layui.js"></script>
<script type="text/javascript" src="../../../../public/public.js"></script>
<script type="text/javascript" src="../../../js/publicJs.js"></script>
<script type="text/javascript" src="../../../js/jq.js"></script>
<script type="text/javascript" src="../../../js/viewer/viewer.min.js"></script>
<style>
body,html{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
float: left;
background-repeat: no-repeat;
background-size: 100%;
}
#dataDiv{
width: 100%;
height: 50%;
float: left;
}
#ulDiv {
width: 98%;
height: 84%;
position: absolute;
top: 50px;
left: 22px;
overflow-x: hidden;
overflow-y: scroll;
}
#dowebok {
width: 100%;
height: 99%;
}
.disPhotoLi {
width: 17.6%;
height: 30.6% !important;
float: left;
margin: 1%;
border: 1px solid #e8eceb;
}
.img {
width: 100%;
height: 100%;
}
.disPhotoP1 {
color: #fff;
font-size: 13px;
margin-top: 4%;
}
.disPhotoP2 {
color: #fff;
font-size: 13px;
margin-top: 4%;
}
.disPhotoP3 {
color: #fff;
font-size: 13px;
margin-top: 2%;
}
.disPhotoP4 {
color: #fff;
font-size: 13px;
margin-top: 4%;
}
/* chrome下的滚动条样式 */
::-webkit-scrollbar {
width: 15px;
height: 15px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px white;
border-radius: 5px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
border-radius: 10px;
background: white;
-webkit-box-shadow: inset 0 0 6px white;
}
::-webkit-scrollbar-thumb:window-inactive {
background: white;
}
::-webkit-scrollbar-corner {
background-color: white; //
}
.layui-laydate-content thead tr{
background: white;
}
</style>
</head>
<body>
<div id="dataDiv">
<div id="ulDiv">
<ul id="dowebok">
</ul>
</div>
</div>
<div>
<span>用户名:</span><input type="text" name="bankCardNumber" maxlength="40" required lay-verify="required" id="userName" class="layui-input">
<span>手机号:</span><input type="text" name="bankCardNumber" maxlength="40" required lay-verify="required" id="phone" class="layui-input">
<span>采集时间:</span><input type="text" name="bankCardNumber" maxlength="40" required lay-verify="required" id="collectTime" class="layui-input">
</div>
</body>
</html>
<script type="text/javascript">
var userName = localStorage.getItem("userName");
var phone = localStorage.getItem("phone");
var collectTime = localStorage.getItem("collectTime");
var facePhoto = localStorage.getItem("facePhoto");
$(function() {
$("#userName").val(userName);
$("#phone").val(phone);
if(collectTime!="null"){
$("#collectTime").val(collectTime);
}
if(facePhoto!="null"){
getFacePhoto(facePhoto);
}else{
getFacePhoto(null);
}
});
// 加载图片
function getFacePhoto(data) {
$("#dowebok").empty();
var result = data;
if(result!=null){
var html="";
var path= smz_ht_url +"/" + result;
html+="<li class='disPhotoLi'>";
html += '<img data-original="'+path+'" src="' + path + '" class="img" />';
html+=" </li>";
$("#dowebok").append(html);
var viewer = new Viewer(document.getElementById('dowebok'), {
url: 'data-original',
show: function (){
viewer.update();
}
});
}else{
var html="<li style='color:black;float: left;border: none; font-size: 20px;height: 20%;position: absolute;\n" + "left: 315px;\n" + "top: 170px;'>没有相关数据</li>";
$("#dowebok").append(html);
}
}
</script>