jp-railway/pages/canteenManagement/mine/qrCode.vue

<template>
	<view>
		<u-navbar title="收款二维码"></u-navbar>
		<!-- 二维码 -->
		<view class="code-box">
			<view class="qr-code">
				<img src="../../../assets/img/qrCode.png" alt="">
				<view class="logo">
					<img src="../../../assets/img/qrLogo.png" alt="">
				</view>
			</view>
			<view class="hint">
				用微信扫描二维码，可以付款就餐
			</view>
			
		</view>
		<!-- 保存到相册 -->
		<view class="save">
			<view class="photo">
				<img src="../../../assets/img/antFill-picture@1x.png" alt="">
			</view>
			<view class="text">
				保存到相册
			</view>
			
		</view>
		
	</view>
</template>

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

<style lang="scss" scoped>
	page{
		font-family: 'PingFang Regular';
	}
	// 二维码
	.code-box{
		margin: 80rpx 56rpx;
		padding: 92rpx 0rpx;
		border-radius: 8px;
		text-align: center;
		background-color: rgba(255, 255, 255, 1);
		.qr-code{
			width: 400rpx;
			height: 400rpx;
			position: relative;
			margin: auto;
			img{
				width: 100%;
				height: 100%;
			}
		}
		.logo{
			width: 112rpx;
			height: 112rpx;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			border: 4px solid #fff;
			border-radius: 4px;
			img{
				width: 100%;
				height: 100%;
			}
		}
		.hint{
			color: rgba(51, 51, 51, 1);
			margin-top: 16rpx;
			font-weight: bold;
		}
	}

 // 保存到相册
 .save{
	 margin-top: 80rpx;
	 text-align: center;
	 .photo{
		 height: 120rpx;
		 width: 120rpx;
		 border-radius: 999px;
		 background-color: rgba(255, 255, 255, 1);
		 text-align: center;
		 margin: auto;
         line-height: 120rpx;
          
		 img{
			 vertical-align: middle;
		 }
		 
	 }
	 .text{
	 			 color: rgba(119, 119, 119, 1);
	 			 font-size: 24rpx;
	 			 margin-top: 8rpx;
	 }
 }
</style>