<!DOCTYPE html>
|
<html lang="en">
|
<!-- 保安員信息 -->
|
|
<head>
|
<meta charset="UTF-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<style>
|
.securityInfo {
|
color: #000;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
flex-direction: column;
|
/* background-color: rgba(42, 66, 110, 0.8); */
|
background: #0ED2F7;
|
/* fallback for old browsers */
|
background: -webkit-linear-gradient(to left, #B2FEFA, #0ED2F7);
|
/* Chrome 10-25, Safari 5.1-6 */
|
background: linear-gradient(to left, #B2FEFA, #0ED2F7);
|
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
|
width: 100%;
|
height: 100%;
|
}
|
|
.top {
|
width: 100%;
|
height: 224px;
|
/* background-color: aquamarine; */
|
|
background: #0BB9C8;
|
/* fallback for old browsers */
|
background: -webkit-linear-gradient(to left, #0BB9C8, #0cd9e7, #0cd9e7, #0BB9C8);
|
/* Chrome 10-25, Safari 5.1-6 */
|
background: linear-gradient(to left, #0BB9C8, #0cd9e7, #0cd9e7, #0BB9C8);
|
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
|
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
flex-direction: column;
|
}
|
|
.avatar {
|
width: 80px;
|
height: 80px;
|
border-radius: 50px;
|
}
|
|
.avatar img {
|
width: 100%;
|
height: 100%;
|
border-radius: 50px;
|
}
|
|
.realName {
|
margin-top: 15px;
|
font-size: 16px;
|
letter-spacing: 1px;
|
color: #fff;
|
}
|
|
.content {
|
margin: 5px 0;
|
padding: 5px;
|
width: 95%;
|
background-color: rgba(65, 64, 66, 0.1);
|
border-radius: 5px;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.row-content {
|
width: 100%;
|
height: 60px;
|
/* background-color: seashell; */
|
display: flex;
|
align-items: center;
|
/* justify-content: center; */
|
color: #fff;
|
margin: 0 auto;
|
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
|
}
|
|
.title {
|
margin-left: 6%;
|
display: inline-block;
|
width: 26%;
|
min-width: 80px;
|
}
|
</style>
|
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
|
</head>
|
|
|
<body>
|
<div class="securityInfo">
|
<!-- <div class="top">
|
<div class="avatar">
|
<img src="./img/bazbj.png">
|
</div>
|
<div class="realName">
|
<span>張三</span>
|
</div>
|
</div>
|
<div class="content">
|
<div class="row-content">
|
<span class="title">名称</span>
|
<span> 张三</span>
|
</div>
|
<div class="row-content">
|
<span class="title">公司名称</span>
|
<span> 南昌市保安服务公司</span>
|
</div>
|
<div class="row-content">
|
<span class="title">性别</span>
|
<span> 男</span>
|
</div>
|
<div class="row-content">
|
<span class="title">年龄</span>
|
<span> 50</span>
|
</div>
|
<div class="row-content">
|
<span class="title">保安证编号</span>
|
<span> 赣洪202100001</span>
|
</div>
|
|
|
</div> -->
|
</div>
|
<script>
|
var getData = function (name) {
|
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
|
var r = window.location.search.substr(1).match(reg);
|
if (r != null) return decodeURI(r[2]);
|
return null;
|
};
|
var securityNumber = getData("securityNumber");
|
// var realName = getData("realName");
|
// var age = getData("age");
|
// var sex = getData("sex");
|
// var deptName = getData("deptName");
|
// var avatar = getData("avatar");
|
// alert(securityNumber);
|
|
|
axios.get('http://223.82.109.183:2080/api/qrCode/getUserInfo?securityNumber=' + securityNumber).then(function (res) {
|
// axios.get('http://192.168.0.114:81/qrCode/getUserInfo?securityNumber=赣洪202100008').then(function(res) {
|
|
var data = res.data;
|
console.log(data, 456);
|
|
|
var str = `<div class="top">
|
<div class="avatar">
|
<img src="${data.avatar}">
|
</div>
|
<div class="realName">
|
<span>${data.realName}</span>
|
</div>
|
</div>
|
<div class="content">
|
<div class="row-content">
|
<span class="title">名 称</span>
|
<span> ${data.realName}</span>
|
</div>
|
|
<div class="row-content">
|
<span class="title">性 别</span>
|
<span> ${data.sex == 1 ? '男' : data.sex == 2 ? '女' : ''}</span>
|
</div>
|
|
<div class="row-content">
|
<span class="title">年 龄</span>
|
<span> ${data.age}</span>
|
</div>
|
|
<div class="row-content">
|
<span class="title">籍 贯</span></span></span>
|
<span> ${data.nativeplace}</span>
|
</div>
|
|
<div class="row-content">
|
<span class="title">联系电话</span>
|
<span> ${data.phone}</span>
|
</div>
|
|
<div class="row-content">
|
<span class="title">公司名称</span>
|
<span> ${data.deptName}</span>
|
</div>
|
|
<div class="row-content">
|
<span class="title">保安证编号</span>
|
<span> ${data.securitynumber}</span>
|
</div>
|
|
</div>`
|
|
var dom = $('.securityInfo');
|
dom.empty();
|
dom.append(str);
|
});
|
</script>
|
</body>
|
|
</html>
|
