| | |
| | | /* display: flex; */ |
| | | align-items: center; |
| | | justify-content: center; |
| | | background-color: #666666; |
| | | } |
| | | |
| | | |
| | | .print { |
| | | position: absolute; |
| | | left: 20px; |
| | | top: 10px; |
| | | position: relative; |
| | | left: 45%; |
| | | margin-top: 30px; |
| | | width: 7%; |
| | | height: 36px; |
| | | border-radius: 9px; |
| | | background-color: #409EFF; |
| | | border: 0px; |
| | | color: #fff; |
| | | letter-spacing: 4px; |
| | | } |
| | | |
| | | |
| | | #table { |
| | | margin-left: 35%; |
| | | margin-left: 26%; |
| | | color: #000; |
| | | position: fixed; |
| | | align-items: center; |
| | | justify-content: center; |
| | | flex-direction: column; |
| | | width: 400px; |
| | | height: 250px; |
| | | width: 750px; |
| | | height: 550px; |
| | | border-radius: 7px; |
| | | margin-top: -250px; |
| | | margin-top: -550px; |
| | | background: url(./img/bazbj.png) no-repeat; |
| | | background-size: 100% 100%; |
| | | } |
| | | |
| | | |
| | | #table1 { |
| | | margin-left: 35%; |
| | | margin-left: 26%; |
| | | color: #000; |
| | | width: 400px; |
| | | height: 250px; |
| | | width: 750px; |
| | | height: 550px; |
| | | background-color: #fff; |
| | | border-radius: 7px; |
| | | margin-top: 200px; |
| | | margin-top: 100px; |
| | | } |
| | | |
| | | |
| | | .user-info-table { |
| | | margin-top: 30px; |
| | | width: 90%; |
| | |
| | | border: 1px solid #000; |
| | | background-color: #fff; |
| | | } |
| | | |
| | | |
| | | .table-top { |
| | | width: 100%; |
| | | height: 20%; |
| | | margin-top: 20px; |
| | | height: 16%; |
| | | margin-top: 30px; |
| | | text-align: center; |
| | | font-size: 32px; |
| | | letter-spacing: 10px; |
| | | font-size: 4rem; |
| | | letter-spacing: 15px; |
| | | } |
| | | |
| | | |
| | | .table-center { |
| | | font-size: 14px; |
| | | font-size: 2rem; |
| | | width: 100%; |
| | | height: 60%; |
| | | font-weight: 200; |
| | | } |
| | | |
| | | |
| | | .img-title { |
| | | width: 100%; |
| | | font-size: 14px; |
| | | } |
| | | |
| | | .table-center-right { |
| | | width: 70px; |
| | | height: 70px; |
| | | line-height: 70px; |
| | | margin-left: 290px; |
| | | margin-top: -100px; |
| | | border-radius: 100px; |
| | | width: 152px; |
| | | height: 205px; |
| | | line-height: 205px; |
| | | margin-left: 510px; |
| | | margin-top: -350px; |
| | | border-radius: 10px; |
| | | /* border: 1px solid; */ |
| | | text-align: center; |
| | | } |
| | | |
| | | |
| | | .table-center-right img { |
| | | width: 70px; |
| | | width: 100%; |
| | | height: 100%; |
| | | display: inline-block; |
| | | vertical-align: middle; |
| | | border-radius: 10px; |
| | | } |
| | | |
| | | |
| | | .security-info { |
| | | margin-left: 20px; |
| | | margin-top: 18px; |
| | | margin-left: 5rem; |
| | | margin-top: 1.8rem; |
| | | } |
| | | |
| | | |
| | | .table-down { |
| | | font-size: 14px; |
| | | width: 100%; |
| | | margin-top: -40px; |
| | | } |
| | | |
| | | |
| | | .paper-unit { |
| | | margin-left: 20px; |
| | | float: left; |
| | | } |
| | | |
| | | |
| | | .paper-date { |
| | | margin-left: 215px; |
| | | } |
| | | |
| | | |
| | | .user-info-tr { |
| | | height: 50px; |
| | | font-size: 14px; |
| | | } |
| | | |
| | | |
| | | .avatar { |
| | | width: 140px; |
| | | height: 190px; |
| | | } |
| | | |
| | | |
| | | .title { |
| | | margin-top: 20px; |
| | | font-size: 28px; |
| | | font-weight: 500; |
| | | } |
| | | |
| | | |
| | | .avatar { |
| | | width: 140px; |
| | | height: 190px; |
| | | } |
| | | |
| | | |
| | | .my-picture { |
| | | width: 150px; |
| | | /* height: 200px; */ |
| | | } |
| | | |
| | | .avatar { |
| | | width: 100%; |
| | | } |
| | | |
| | | .qrCode { |
| | | margin-top: 0px; |
| | | margin-left: 25px; |
| | | } |
| | | </style> |
| | | <script src="https://unpkg.com/axios/dist/axios.min.js"></script> |
| | |
| | | |
| | | <body> |
| | | <div class="fo"> |
| | | <div> |
| | | <button onclick="preview(1)" class="print">打印</button> |
| | | </div> |
| | | |
| | | |
| | | <!--startprint--> |
| | | <div id="print"> |
| | |
| | | </div> |
| | | </div> --> |
| | | <!--endprint--> |
| | | |
| | | </div> |
| | | |
| | | |
| | | <div> |
| | | <button onclick="preview(1)" class="print">打印</button> |
| | | </div> |
| | | </div> |
| | | <script> |
| | | var getData = function(name) { |
| | | var getData = function (name) { |
| | | var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); |
| | | var r = window.location.search.substr(1).match(reg); |
| | | if (r != null) return unescape(r[2]); |
| | |
| | | var securityName = JSON.parse(getData("data")).securityName; |
| | | // console.log(JSON.parse(getData("data")), 111); |
| | | |
| | | axios.get('http://223.82.109.183:2080/apply/userDetail?id=' + id).then(function(res) { |
| | | axios.get('http://61.131.136.25:2080/api/apply/userDetail?id=' + id).then(function (res) { |
| | | |
| | | var data = res.data.data; |
| | | var str = `<div id="table1"></div> |
| | | var img = data.avatar ? `<div class="avatar"><img src="${data.avatar}"></div>` : `<div class="img-title">暂无照片</div>` |
| | | axios.get('http://61.131.136.25:2080/api/qrCode/getQrCodeBase64?securityNumber=' + data.securitynumber).then(function (res1) { |
| | | console.log(res1.data, 333); |
| | | var qrCode = res1.data ? `<div class="qrCode"><img src="${res1.data}"></div>` : `<div"></div>` |
| | | var str = `<div id="table1"></div> |
| | | <div id="table"> |
| | | <div class="table-top"> |
| | | <span>保安员证</span> |
| | |
| | | </div> |
| | | <div class="security-info"> |
| | | <span>性别:</span> |
| | | <span> ${data.sex==1?"男":(data.sex==2?"女":"")}</span> |
| | | <span> ${data.sex == 1 ? "男" : (data.sex == 2 ? "女" : "")}</span> |
| | | </div> |
| | | <div class="security-info"> |
| | | <span>编号:</span> |
| | | <span> ${data.securitynumber}</span> |
| | | </div> |
| | | <div class="security-info"> |
| | | <span>发证机关:</span> |
| | | <span> 南昌市公安局</span> |
| | | </div> |
| | | <div class="security-info"> |
| | | <span>发证日期:</span> |
| | | <span> ${data.paperTime}</span> |
| | | </div> |
| | | </div> |
| | | <div class="table-center-right"> |
| | | <img src="${data.myPicture}"> |
| | | </div> |
| | | </div> |
| | | <div class="table-down"> |
| | | <div class="paper-unit"> |
| | | <span>发证机关:</span> |
| | | <span> 南昌市公安局</span> |
| | | </div> |
| | | <div class="paper-date"> |
| | | <span>发证日期:</span> |
| | | <span> </span> |
| | | ${img} |
| | | ${qrCode} |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div>` |
| | | // <img src="${data.avatar}"> |
| | | var dom = $('#print'); |
| | | dom.empty(); |
| | | dom.append(str); |
| | | }) |
| | | |
| | | var dom = $('#print'); |
| | | dom.empty(); |
| | | dom.append(str); |
| | | }) |
| | | |
| | | function preview(oper) { |