DigitalScholl/Learun.Framework.Ultimate V7/LearunApp-2.2.0/pages/EducationalAdministration/StudentQRCode/components/content2.vue

<template>
	<view id="sQrCode">
		<view class="sQrCode">
			<view class="sQrLogo">
				<image mode="widthFix" class="sQrLogoBg" src="@/common/images/xcBg.jpg"></image>
				<view class="sQrLogoImg1"><image mode="widthFix" src="@/common/images/logoXc.png"></image></view>
				<view class="sQrLogoImg2"><image mode="widthFix" src="@/common/images/logoXcTxt.png"></image></view>
			</view>
			<view class="sQrBox">
				<view class="sQrT">健康通行登记</view>
				<view class="sQrList">
					<view>
						<text>姓名</text>
						<text class="sQrListTxt">{{ data.stuInfo.StuName }}</text>
					</view>
					<view>
						<text>专业</text>
						<text class="sQrListTxt">{{ data.majorInfo.MajorName }}</text>
					</view>
					<view>
						<text>班级</text>
						<text class="sQrListTxt">{{ data.classInfo.ClassName }}</text>
					</view>
					<view>
						<text>学号</text>
						<text class="sQrListTxt">{{ data.stuInfo.StuNo }}</text>
					</view>
					<view>
						<text>宿舍</text>
						<text style="font-weight: bold;">{{ data.roomInfo }}</text>
					</view>
				</view>
				
				<view class="sQrType2">
				    <view class="sQrTypePhoto">
				        <view>
							<image mode="widthFix" :src="imgSrc"></image>
						</view>
				    </view>
				    <view class="sQrTypeCon">
				        <view class="sQrTypeT">健康信息 ： </view>
				        <view class="sQrTypeTxt">{{ info }}</view>
				    </view>
				    <view class="sQrTypeImg">
				        <img src="images/xcYc.png" alt="">
				    </view>
				</view>
			</view>
			<view class="sQrTxt1">温馨提示 :  示:因疫情防控需要，校园实行封闭管理，仅限校内经许可的师生员工通行，敬请理解和配合。 </view>
		</view>
	</view>
</template>

<script>
import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
export default {
	name: 'stuqrCode',
	components: { tkiQrcode },
	props: {
		stuNo: {
			type: String
		},
		info: {
			type: String
		}
	},
	data() {
		return {
			data: {
				stuInfo: {},
				majorInfo: {},
				classInfo: {}
			},
			imgSrc: '',
			size: 300
		};
	},
	methods: {
		init() {
			let _this = this;
			console.log(_this);
			_this.LOADING('加载数据中…');
			_this.HTTP_GET('learun/adms/EducationalAdministration/StuInfoBasic/stuinfoDetail', _this.stuNo, '加载数据时出错').then(res => {
				this.HIDE_LOADING();
				console.log(res);
				_this.data = res;
				_this.imgSrc = _this.API.slice(0,-1) + res.stuInfo.Photo;
				console.log(_this.imgSrc)
			});
		}
	},
	created() {
		this.init();
	}
};
</script>

<style lang="less" scoped>
#sQrCode {
	height: 100%;
	background-color: #eef2f3;
	padding-bottom: 30px;
}
.sQrLogoBg {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	width: 100%;
}
.sQrLogo {
	background-size: 100% 100%;
	text-align: center;
	line-height: 0;
	padding: 20px 0 70px;
	position: relative;
}
.sQrLogo view {
	position: relative;
	z-index: 2;
}
.sQrLogoImg1 image {
	width: 20%;
}

.sQrLogoImg1 {
	margin-bottom: 10px;
}

.sQrLogoImg2 image {
	width: 50%;
}

.sQrBox {
	margin: -50px 20px 0;
	background-color: #fff;
	padding: 30px 38px;
	border-radius: 10px;
	-webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, .1);
	-moz-box-shadow: 0 4px 10px rgba(0, 0, 0, .1);
	box-shadow: 0 4px 10px rgba(0, 0, 0, .1);
	/* overflow: hidden; */
	position: relative;
	z-index: 99;
}
.sQrT {
    font-weight: bold;
    text-align: center;
    font-size: 22px;
    margin-bottom: 20px;
    color: #000;
}
.sQrT2 {
	font-weight: bold;
	text-align: center;
	font-size: 24px;
	margin-bottom: 20px;
	color: #F8B500;
}

.sQrList {
	background-color: #F8F8F8;
	margin: 0 10px;
	padding: 10px 30px;
	border-radius: 4px
}

.sQrList view {
	padding: 7px 10px;
	font-size: 14px;
	color: #000;
	border-top: 1px solid #D7D7D7;
}

.sQrList view:first-child {
	border: 0;
}

.sQrList view text {
	color: #AEAEAE;
	margin-right: 10px;
}

.sQrType2 {
	// background-color: #F8B500;
	padding: 20px 0;
	text-align: center;
	color: #fff;
	margin: 30px -38px -30px;
	border-radius: 0 0 10px 10px;
}

.sQrType2>* {
	display: inline-block;
	vertical-align: middle;
	text-align: left;
}

.sQrTypeT {
	font-size: 14px;
}

.sQrTypeTxt {
	font-size: 24px;
	font-weight: bold;
	margin-top: 3px;
}

.sQrTypeImg {
	margin-left: 15px;
	width: 43px;
	line-height: 0;
}

.sQrTypeImg image {
	width: 100%;
}

.sQrTxt1 {
	margin: 30px 50px 20px;
	font-size: 14px;
	color: #AEAEAE;
}

.sQrBtn3 {
	margin: 20px 20px 0;
	background-color: #CED0D0;
	/* -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .1);
	-moz-box-shadow: 0 0 10px rgba(0, 0, 0, .1);
	box-shadow: 0 0 10px rgba(0, 0, 0, .1); */
	border-radius: 8px;
	height: 50px;
	line-height: 50px;
	font-weight: bold;
	color: #fff;
	font-size: 16px;
	text-align: center;
}

.sQrBtn3 image {
	width: 23px;
	margin-right: 10px;
	position: relative;
	top: 2px;
}

.sQrType2 .sQrTypePhoto {
	// border: 4px solid #F8B500;
	border-radius: 4px;
	width: 85px;
	margin: -30px 10px -30px 0;
	background: #fff;
}

.sQrTypePhoto view {
	height: 0;
	overflow: hidden;
	padding-bottom: 139.516129%;
	line-height: 0;
}

.sQrTypePhoto image {
	width: 100%;
}
</style>