From 8c6cf205affbbc8ada74f00a7ca25ebca867e9ed Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Mon, 27 Sep 2021 11:44:44 +0800
Subject: [PATCH] 图表颜色
---
public/securityPrint.html | 123 +++++++++++++++++++++++++---------------
1 files changed, 76 insertions(+), 47 deletions(-)
diff --git a/public/securityPrint.html b/public/securityPrint.html
index 6935f39..d920bb3 100644
--- a/public/securityPrint.html
+++ b/public/securityPrint.html
@@ -12,38 +12,44 @@
/* 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 {
@@ -56,39 +62,47 @@
.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 {
@@ -131,6 +145,15 @@
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>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
@@ -139,9 +162,7 @@
<body>
<div class="fo">
- <div>
- <button onclick="preview(1)" class="print">打印</button>
- </div>
+
<!--startprint-->
<div id="print">
@@ -182,9 +203,11 @@
</div>
</div> -->
<!--endprint-->
+
</div>
-
-
+ <div>
+ <button onclick="preview(1)" class="print">打印</button>
+ </div>
</div>
<script>
var getData = function(name) {
@@ -199,9 +222,14 @@
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://223.82.109.183: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://223.82.109.183: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>
@@ -220,27 +248,28 @@
<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) {
--
Gitblit v1.9.3