<template>
	<view class="page">
		<u-navbar :title="title" :border-bottom="false" :background="bgc" title-color='#fff' title-size='36'
			:title-bold='true' height='45' id="navbar">
		</u-navbar>
		<view class="tit">
			邀请好友认养蜂箱
		</view>
		<view class="img">
			<view class="qrbpx">
				<view class="tips">
					用微信扫一扫
				</view>
				<view class="imgs">
					
				</view>
				<view class="code">
					编码16895634218
				</view>
			</view>
			<view class="share">
				<view class="share_li" style="margin-left: 136rpx;">
					<image src="https://api.ccttiot.com/smartmeter/img/static/un17gT0JM8FjA6xk5kpe" mode=""></image>
					<view class="txt">
						存入相册
					</view>
				</view>
				<view class="share_li" style="margin-right: 136rpx;">
					<image src="https://api.ccttiot.com/smartmeter/img/static/upmGmVeLxK5WI3OR8TOi" mode=""></image>
					<view class="txt">
						微信好友
					</view>
				</view>
			</view>
		</view>
		

	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: " #FFD34D",
				},
				title: "认养邀请",

			}
		},
		onLoad() {

		},
		onShow() {

		},
		methods: {
			shareImg(){
			  wx.downloadFile({
			    url: 'https://res.wx.qq.com/wxdoc/dist/assets/img/demo.ef5c5bef.jpg',//分享的图片的链接
			    success: (res) => {
			      wx.showShareImageMenu({
			        path: res.tempFilePath
			      })
			    }
			  })
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
		background-image: url('https://api.ccttiot.com/smartmeter/img/static/uvGHxEbHxpMUf9RnG7dZ');
		background-size: cover;
		/* 确保背景图覆盖整个区域 */
		background-repeat: no-repeat;
			/* 防止背景图重复 */
		background-position: center;
	}
	.page {
		width: 750rpx;
		.tit{
			margin: 76rpx auto;
			width: 316rpx;
			height: 54rpx;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 500;
			font-size: 40rpx;
			color: #FFFFFF;
			line-height: 54rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}
		.img{
			margin: 0 auto;
			width: 624rpx;
			height: 1030rpx;
			background-image: url('https://api.ccttiot.com/smartmeter/img/static/usiti6HV7sOrG5UnWecR');
			background-size: cover;
			/* 确保背景图覆盖整个区域 */
			background-repeat: no-repeat;
			/* 防止背景图重复 */
			background-position: center;
			padding-top: 230rpx;
			.share{
				margin-top: 56rpx;
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				justify-content: space-between;
				.share_li{
					display: flex;
					flex-wrap: wrap;
					width: 112rpx;
					image{
						margin-left: 24rpx;
						width: 62rpx;
						height: 62rpx;
					}
					.txt{
						margin-top: 10rpx;
						width: 112rpx;
						font-weight: 500;
						font-size: 28rpx;
						color: #FFD045;
					}
				}
			}
			.qrbpx{
				padding:26rpx 68rpx ;
				margin-left: 64rpx;
				width: 496rpx;
				height: 596rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0,0,0,0.3);
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				.tips{
					margin: auto; 
					width: 214rpx;
					height: 50rpx;
					font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
					font-weight: 600;
					font-size: 36rpx;
					color: #3D3D3D;
					line-height: 50rpx;
					text-align: center;
					font-style: normal;
					text-transform: none;
				}
				.imgs{
					margin-top: 16rpx;
					width: 364rpx;
					height: 364rpx;
					background: #3D3D3D;
				}
				.code{
					margin-top: 34rpx;
					width: 100%;
					text-align: center;
					font-weight: 600;
					font-size: 36rpx;
					color: #3D3D3D;
				}
			}
		} 
	}
</style>