forked from zhba/zhba_enterprises
public/securityInfo.html
@@ -13,11 +13,11 @@ justify-content: center; flex-direction: column; /* background-color: rgba(42, 66, 110, 0.8); */ background: #0ED2F7; /* background: #0ED2F7; */ /* fallback for old browsers */ background: -webkit-linear-gradient(to left, #B2FEFA, #0ED2F7); /* background: -webkit-linear-gradient(to left, #B2FEFA, #0ED2F7); */ /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to left, #B2FEFA, #0ED2F7); /* background: linear-gradient(to left, #B2FEFA, #0ED2F7); */ /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ width: 100%; height: 100%; @@ -25,13 +25,14 @@ .top { width: 100%; height: 224px; margin-top: 15px; /* height: 224px; */ /* background-color: aquamarine; */ background: #0BB9C8; /* background: #0BB9C8; */ /* fallback for old browsers */ background: -webkit-linear-gradient(to left, #0BB9C8, #0cd9e7, #0cd9e7, #0BB9C8); /* 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); /* 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; @@ -40,51 +41,70 @@ } .avatar { width: 80px; height: 80px; border-radius: 50px; width: 98%; height: 140px; border-radius: 1px; } .avatar img { width: 100%; height: 100%; border-radius: 50px; border-radius: 3px; } .realName { margin-top: 15px; font-size: 16px; font-size: 2rem; letter-spacing: 1px; color: #fff; } .content { margin: 5px 0; padding: 5px; /* margin: 5px 0; */ /* padding: 5px; */ width: 95%; background-color: rgba(65, 64, 66, 0.1); border-radius: 5px; /* background-color: rgba(65, 64, 66, 0.1); */ /* border-radius: 5px; */ display: flex; flex-direction: column; } .row-content { width: 100%; height: 60px; height: 3.2rem; /* background-color: seashell; */ display: flex; align-items: center; /* justify-content: center; */ color: #fff; color: #939393; margin: 0 auto; border-bottom: 1px solid rgba(255, 255, 255, 0.5); border-bottom: 1px solid rgba(220, 220, 220, 0.4); } .row-contents { width: 100%; height: 3.2rem; /* background-color: seashell; */ display: flex; align-items: center; /* justify-content: center; */ color: #939393; margin: 0 auto; } .title { margin-left: 4%; display: inline-block; width: 29%; width: 30%; min-width: 80px; font-size: 0.9rem; font-weight: 550; } .content-data { position: absolute; right: 1.8rem; font-size: 0.95rem; } </style> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> @@ -94,6 +114,7 @@ <body> <div class="securityInfo"> <!-- <div class="top"> <div class="avatar"> <img src="./img/bazbj.png"> @@ -111,20 +132,6 @@ <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> @@ -135,12 +142,6 @@ 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) { @@ -148,62 +149,75 @@ var data = res.data; // console.log(data, 456); //计算生日 var birthday = data.cardid.substring(6, 10) + "." + data.cardid.substring(10, 12) + "." + data.cardid.substring(12, 14); //计算发证机关 var fzjg = ""; if (data.securitynumber.indexOf("赣") != -1) { fzjg = "南昌市公安局" } var str = `<div class="top"> <div class="avatar"> <img src="${data.avatar}"> </div> <div class="realName"> <span>${data.realName}</span> <img src="img/securityInfo/security.png"> </div> </div> <div class="content"> <div class="row-content"> <span class="title">名 称</span> <span> ${data.realName}</span> <span class="title">姓名:</span> <span class="content-data"> ${data.realName}</span> </div> <div class="row-content"> <span class="title">性 别</span> <span> ${data.sex == 1 ? '男' : data.sex == 2 ? '女' : ''}</span> <span class="title">性别:</span> <span class="content-data"> ${data.sex == 1 ? '男' : data.sex == 2 ? '女' : ''}</span> </div> <div class="row-content"> <span class="title">年 龄</span> <span> ${data.age}</span> <span class="title">联系电话:</span> <span class="content-data"> ${data.phone}</span> </div> <div class="row-content"> <span class="title">身份证号:</span> <span class="content-data"> ${data.cardid}</span> </div> <div class="row-content"> <span class="title">出身日期:</span> <span class="content-data"> ${birthday}</span> </div> <div class="row-content"> <span class="title">籍 贯</span></span></span> <span> ${data.nativeplace}</span> <span class="title">年龄:</span> <span class="content-data"> ${data.age}</span> </div> <div class="row-content"> <span class="title">联系电话</span> <span> ${data.phone}</span> <span class="title">发证机关:</span> <span class="content-data"> ${fzjg}</span> </div> <div class="row-content"> <span class="title">公司名称</span> <span> ${data.deptName}</span> <span class="title">保安证编号:</span> <span class="content-data"> ${data.securitynumber}</span> </div> <div class="row-content"> <span class="title">保安证编号</span> <span> ${data.securitynumber}</span> <span class="title">公司名称:</span> <span class="content-data"> ${data.deptName}</span> </div> <div class="row-content"> <span class="title">派遣单位名称:</span> <span class="content-data"> ${data.dispatchUnitName}</span> </div> <div class="row-content"> <span class="title">派遣单位名称</span> <span> ${data.dispatchUnitName}</span> <span class="title">派遣开始时间:</span> <span class="content-data"> ${data.dispatchStartTime}</span> </div> <div class="row-content"> <span class="title">派遣开始时间</span> <span> ${data.dispatchStartTime}</span> </div> <div class="row-content"> <span class="title">派遣结束时间</span> <span> ${data.dispatchEndTime}</span> <div class="row-contents"> <span class="title">派遣结束时间:</span> <span class="content-data"> ${data.dispatchEndTime}</span> </div> </div>`
