jp-housekeep-manage/pages/managementList/authorizedQRCode.vue

<template>
	<view>
		<u-navbar title="授权二维码" title-color="#101010">
			
		</u-navbar>
		
		<view class="main">
			<view class="company">
				荆鹏软件园
			</view>
			<view class="energy-meter">
				荆鹏A栋9楼总电表
			</view>
			<!-- 个人信息 -->
			<view class="infos">
				<view class="photo">
					<img src="@/assets/img/PEokWS2@3x.png" alt="" />
				</view>
				<view class="details">
					<view class="name">
						王乐康  <span></span>
					</view>
					<view class="tel">
						19533319000
					</view>
				</view>
				
				<view class="dial">
					<img src="@/assets/img/antOutline-phone 1.svg" alt="" />
				</view>
			</view>
			<!-- 二维码 -->
			<view class="qr-code">
				<view class="title">
					扫描下方的二维码申请授权
				</view>
				<view class="win">
				    
				    <view class="border-corner left-top"></view>
				    <view class="border-corner right-top"></view>
				    <view class="border-corner left-bottom"></view>
				    <view class="border-corner right-bottom"></view>
				    <view class="code-box">
				    	<img src="@/assets/img/qrCode.png" alt="" />
				    </view>
				</view>
				
			</view>
			
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	page{
		background-color: rgba(94,161,255,1);
	}
</style>

<style lang="scss" scoped>
	.main{
		margin: 48rpx;
		padding: 48rpx 0rpx;
		background-color: #fff;
		box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.39);
		border-radius: 20px;
		
		.company{
			width: 344rpx;
			height: 72rpx;
			line-height: 72rpx;
			border-radius: 28px;
			background-color: rgba(83,150,255,1);
			color: rgba(255,255,255,1);
			font-size: 36rpx;
			text-align: center;
			margin: auto;
		}
		.energy-meter{
			color: rgb(16,16,16);
			font-size: 32rpx;
			margin-top: 20rpx;
			text-align: center;
			font-weight: bold;
		}
		
		.infos{
			display: flex;
			align-items: c;
			margin-top: 48rpx;
			padding:48rpx 80rpx;
			border: 1px solid rgba(244,244,244,1);
			.photo{
				img{
					width: 80rpx;
					height: 80rpx;
					border-radius: 50px;
				}
			}
			.details{
				margin-left: 16rpx;
				.name{
					color: rgba(51,51,51,1);
					font-size: 32rpx;
					display: flex;
					align-items: center;
					span{
						display: inline-block;
						width: 84px;
						height: 16px;
						border-radius: 4px;
						border: 1px solid rgba(187,190,194,1);
						margin-left: 8rpx;
					}
				}
				.tel{
					color: rgba(119,119,119,1);
					font-size: 24rpx;
					margin-top: 4rpx;
				}
			}
			.dial{
				width: 64rpx;
				height: 64rpx;
				background-color: rgba(22,119,255,1);
				border-radius: 50px;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: auto;
				img{
					width: 40rpx;
					height: 40rpx;
				}
			}
			
		}
		
	}
	// 二维码
	.qr-code{
		padding: 48rpx 0rpx;
		text-align: center;
		.title{
			color: rgb(16,16,16);
			font-size: 32rpx;
			
			
		}
		.code-box {
		    width: 200px;
		    height: 200px;
		    border: 1px solid rgb(153, 204, 255);
		    border-radius: 4px;
			img{
				width: 400rpx;
				height: 400rpx;
			}
		}
		
		.win {
		    margin-top: 32rpx;
		    padding: 30rpx;
		    position: relative;
		    display: inline-block;
		}
		
		.border-corner{
		    z-index: 2500;
		    position: absolute;
		    width: 70rpx;
		    height: 70rpx;
		    background: rgba(0,0,0,0);
		    border: 4px solid #5396FF;
		}
		.left-top{
		    top: 0;
		    left: 0;
		    border-right: none;
		    border-bottom: none;
		    border-top-left-radius: 4px;
		}
		.right-top{
		    top: 0;
		    right: 0;
		    border-left: none;
		    border-bottom: none;
		    border-top-right-radius: 4px;
		}
		.left-bottom{
		    bottom: 0;
		    left: 0;
		    border-right: none;
		    border-top: none;
		    border-bottom-left-radius: 4px;
		}
		.right-bottom{
		    bottom: 0;
		    right: 0;
		    border-left: none;
		    border-top: none;
		    border-bottom-right-radius: 4px;
		}
		
		
	}
	
	
	
</style>