访客邀约，短信跳转页面样式重新制作

src/main/webapp/WEB-INF/pages/wechat/visitorinfo.jsp

@@ -17,7 +17,7 @@
 	<script type="text/javascript" src="${ctx }/scripts/visitor/exif.js?v=4.0"></script>
 	<script type="text/javascript" src="${ctx }/scripts/mobileBUGFix.mini.js?v=4.0"></script>
 	<script type="text/javascript" src="${ctx }/scripts/visitor/visitorinfo.js?v=2.1213"></script>
-	<link rel="stylesheet" href="${ctx }/styles/visitor/visitorinfo.css?v=2.1213" type="text/css">
+	<link rel="stylesheet" href="${ctx }/styles/visitor/visitorinfo.css?v=20221107" type="text/css">
 	<link rel="stylesheet" type="text/css" href="${ctx }/styles/visitor/loadview.css" />
 	<link rel="stylesheet" href="${ctx }/styles/visitor/layer.css" type="text/css">
 	<script type="text/javascript" src="${ctx }/scripts/visitor/controlOptionMenu.js?v=4.0"></script>
@@ -68,8 +68,9 @@
 						</div>
 					</c:if>
 					<c:if test="${fn:contains(passType,'2')}">
-						<div class="qrcode_wrap" style="font-size: 18px;color: #007BFF;background: #ffffff;border-bottom-right-radius: 10px;border-bottom-left-radius:10px">
-							<p class="qrcode_title" style="padding-bottom:10px">通行码</p>
+						<div class="qrcode_wrap"
+							 style="margin-top: 20px;font-size: 18px;color: #019C61;background: #ffffff;border-radius: 10px;margin-bottom: 20px;">
+							<p class="qrcode_title">通行码</p>
 							<p style="font-size: 15px;color: #333333;text-align:center;padding-bottom:10px">可在闸机二维码读头设备处扫码通行</p>
 							<div class="qrcode_img_wrap">
 								<div id="visitorCode"></div>
@@ -78,7 +79,8 @@
 						</div>
 					</c:if>
 					<c:if test="${fn:contains(passType,'3')}">
-						<div class="qrcode_wrap" style="margin-top: 20px;font-size: 18px;color: #007BFF;background: #ffffff;border-radius: 10px;">
+						<div class="qrcode_wrap"
+							 style="margin-top: 20px;font-size: 18px;color: #019C61;background: #ffffff;border-radius: 10px;margin-bottom: 20px;">
 							<p class="qrcode_title">请在客服处扫码打印访客单</p>
 							<div class="qrcode_img_wrap">
 								<div id="code"></div>
@@ -88,30 +90,47 @@
 					</c:if>
 				</div>
 			</c:if>
-			<div class="net" id="headradius" style="padding-top: 20px;border-top-right-radius: 10px;border-top-left-radius:10px;">
+			<div class="net net_box" id="headradius" style="padding-top: 20px;border-radius: 10px">
 				<c:if test="${organization.id == 615||organization.id == 969||organization.id == 1247}">
-					<img id="headimg" type="hidden"  style="margin-left: 15px;width: calc(100% - 30px);" src="https://superdesk.avic-s.com/super_cloud/attachment/visitorImg/visitor_image.png" />
+					<img id="headimg" type="hidden"  style="margin-left: 15px;width: calc(100% - 30px);"
+						 src="https://superdesk.avic-s.com/super_cloud/attachment/visitorImg/visitor_image.png?v=20221107" />
 				</c:if>
 				<c:if test="${organization.id != 615&&organization.id != 969&&organization.id != 1247}">
-					<p id="headtext" type="hidden" class="welcomeSty" style="font-size: 30px;">欢迎到访</p>
+					<div id="headtext" type="hidden" class="welcome-text">
+						<div style="flex: 1;">欢迎到访</div>
+						<div class="welcome-img"></div>
+					</div>
 				</c:if>
-				<div class="headTime" style="font-size: 15px;">
-					<span class="netCircle"></span>
-					${visitorInfo.toDate }&nbsp;${visitorInfo.week }&nbsp;&nbsp;共${visitorInfo.count}位同行
+				<div class="headTime head_font">
+					${visitorInfo.toDate }&nbsp;${visitorInfo.week }&nbsp;&nbsp;共<span style="color: #019C61;">${visitorInfo.count}</span>位同行
+				</div>
+				<div class="box-line"></div>
+				<div class="surveyed_init">访客信息</div>
+				<div class="user-info-box">
+					<div class="info-cell">
+						<div class="info-title">访客姓名：</div>
+						<div>${visitorInfo.visitorName }</div>
+					</div>
+					<div class="info-cell">
+						<div class="info-title">手机号码：</div>
+						<div>${visitorInfo.visitorPhone}</div>
+					</div>
 				</div>
-				<p>
-					<span class="peerName_pic" style="font-size: 26px;">${visitorInfo.visitorName }</span>
-					<span style="color: #fff; text-decoration: underline;">${visitorInfo.visitorPhone }</span>
-				</p>
-				<p class="company" style="font-size: 15px;">${visitorInfo.visitorCompanyName }</p>
 				<c:if test="${not empty visitorInfo.clientUserName}">
-					<button id="detailsbtn" class="details" type="button">详情&nbsp;</button>
-					<div class="openOrColse">
-						<p class="openOrColsePeople">被访人：<span style="font-size: 26px;">${visitorInfo.clientUserName }</span>&nbsp;<a
-								href="tel:${visitorInfo.clientPhone}"
-								style="color: #fff; text-decoration: none;">${visitorInfo.clientPhone}</a></p>
-						<img class="locatioPicture" src="${ctx }/images/visitor/dit.png">
-						<label class="locatioLable">地址：${visitorInfo.clientAddress }</label>
+					<div class="surveyed_init">被访信息</div>
+					<div class="user-info-box">
+						<div class="info-cell">
+							<div class="info-title">被&nbsp;&nbsp;访&nbsp;人：</div>
+							<div>${visitorInfo.clientUserName }</div>
+						</div>
+						<div class="info-cell">
+							<div class="info-title">手机号码：</div>
+							<div><a style="color:#019C61;" href="tel:${visitorInfo.clientPhone}">${visitorInfo.clientPhone}</a></div>
+						</div>
+						<div class="info-cell">
+							<div class="info-title">公司地址：</div>
+							<div>${visitorInfo.clientAddress}</div>
+						</div>
 					</div>
 				</c:if>
 
@@ -196,7 +215,6 @@
 <script type="text/javascript">
 
 	$(document).ready(function () {
-		console.log('orgId == ', $('#orgId').val())
 		$(window).resize(infinite);
 		infinite();
 		if ($('#orgId').val() != 615&&$('#orgId').val() != 969&&$('#orgId').val() != 1247) {
@@ -210,8 +228,6 @@
 				height: 138,
 				text: $('#visitorQrCode').val()
 			})
-		} else {
-			$('#headradius').attr("style", "padding-top: 20px;border-radius: 10px");
 		}
 
 		console.log('显示详情')

src/main/webapp/styles/visitor/visitorinfo.css

@@ -28,12 +28,12 @@ html, body {
 }
 
 .bottomView {
-	width: 78%;
+	width: calc(100% - 30px);
 	min-height: 31.66rem;
-	margin: 20px auto;
+	margin: 15px auto;
 	padding-bottom: 10px;
 	background: #ffffff;
-	box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.10);
+	box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.10);
 	border-radius: 1rem;
 	margin-bottom: 3rem;
 	color: #fefffe
@@ -48,6 +48,74 @@ html, body {
 	/* margin-bottom: 6px; */
 	padding-bottom: 2.5rem;
 }
+
+.net_box {
+	background: #ffffff !important;
+	margin-top: 0 !important;
+	box-shadow: 0 4px 8px 0 rgba(227,227,227,0.5);
+}
+
+.head_font {
+	margin-left: 18px !important;
+	font-size: 15px !important;
+	color: #333333 !important;
+	font-family: PingFangSC-Medium, PingFang SC;
+	font-weight: 500 !important;
+}
+
+.surveyed_init {
+	margin-left: 15px;
+	font-size: 15px;
+	font-family: PingFangSC-Medium, PingFang SC;
+	font-weight: 500;
+	color: #333333;
+}
+
+.surveyed_init:after {
+	content: " ";
+	float: left;
+	margin-top: 3px;
+	width: 4px;
+	height: 15px;
+	background: #019C61;
+	margin-right: 10px;
+	border-radius: 2px;
+}
+
+.box-line {
+	margin-top: 10px;
+	margin-left: 15px;
+	margin-bottom: 10px;
+	width: calc(100% - 30px);
+	border: 1px dashed #E7E7E7;
+}
+
+.user-info-box {
+	margin-top: 8px;
+	margin-bottom: 10px;
+	margin-left: 10px;
+	width: calc(100% - 40px);
+	background: #F8F8F8;
+	border-radius: 10px;
+	display: grid;
+	padding: 10px;
+	color: #333;
+	font-size: 15px;
+	font-family: PingFangSC-Regular, PingFang SC;
+	font-weight: 400;
+}
+
+.info-cell {
+	padding: 3px 0;
+	display: flex;
+}
+
+.info-title {
+	width: 80px;
+	color: #666666 !important;
+	display: inline-table;
+}
+
 /*详情按钮*/
 .details {
 	margin-left: 2.5rem;
@@ -148,6 +216,23 @@ html, body {
 	font-size: 1.8rem;
 	margin-bottom: 1rem;
 }
+
+.welcome-text {
+	margin-left: 15px;
+	color: #019C61;
+	font-size: 30px;
+	margin-bottom: 10px;
+	font-family: Alibaba-PuHuiTi-B, Alibaba-PuHuiTi;
+	font-weight: normal;
+	display: flex;
+}
+
+.welcome-img {
+	width: 105px;
+	height: 76px;
+	background:url(../../images/visitor/welcome_img.png) no-repeat center/contain;
+}
+
 /*公司*/
 .company {
 	margin-left: 2.5rem;
@@ -193,7 +278,7 @@ html, body {
 	padding-left: 8rem;
 	color: white;
 	font-size: 1.1rem;
-	line-height: 2rem;`
+	line-height: 2rem;
 }
 .peerName_pic {
 	padding-left: 2.5rem;
@@ -335,4 +420,4 @@ html, body {
 	line-height: 3.33rem;
 	color: #fff;
 	background-color: #006DB6;
-}
+}