<template>
	<view>
		<touch-popup ref="popup" background="linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%)" :backShow="true">
			<view class="bck">
				<view style="width: 100%;height: 15px;"></view>
				<view class="star1">
					<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/shequ/star1.png" mode="widthFix"></image>
				</view>
				<view class="star2">
					<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/shequ/star2.png" mode="widthFix"></image>
				</view>
				<view class="star3">
					<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/shequ/star3.png" mode="widthFix"></image>
				</view>
				<view class="star4">
					<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/shequ/star4.png" mode="widthFix"></image>
				</view>
				<view class="star5">
					<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/shequ/star5.png" mode="widthFix"></image>
				</view>
				<view class="logo">
					<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/shequ/松鼠ip.png" mode="widthFix"></image>
				</view>
				
				<view class="title center">
					社区号
				</view>
				<view class="qrcode">
					<view class="item">
						<view>
							<image show-menu-by-longpress src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/shequ/wx-qrcode.png" mode="widthFix"></image>
						</view>
						<view>
							微信
						</view>
					</view>
					<view class="item">
						<view>
							<image show-menu-by-longpress src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/shequ/douyin-qrcode.png" mode="widthFix"></image>
						</view>
						<view>
							抖音
						</view>
					</view>
					<view class="item">
						<view>
							<image show-menu-by-longpress src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/shequ/qq-qrcode.png" mode="widthFix"></image>
						</view>
						<view>
							QQ
						</view>
					</view>
					<view class="item">
						<view>
							<image show-menu-by-longpress src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/shequ/xhs-qrcode.png" mode="widthFix"></image>
						</view>
						<view>
							小红书
						</view>
					</view>
				</view>
			</view>
		</touch-popup>
	</view>
</template>

<script setup>
	const app = getApp()
	import { ref, defineExpose, computed } from 'vue'
	import touchPopup from '@/components/touch-popup/touch-popup'
	const popup = ref() // ref组件
	
	const open = () => {
		popup.value.open()
	}
	defineExpose({
		open
	}) // 暴露方法
</script>

<style scoped>
	.item image {
			width: 120px;
		}
	.item view:first-child {
			flex: 1;
			display: flex;
			padding: 10px;
			background-color: #fff;
			border-radius: 15px;
		}
	.item view:last-child {
			display: flex;
			font-size: 18px;
			font-weight: bold;
			padding: 5px;
		}
	.item {
		padding-top: 15px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.qrcode {
		padding: 15px 20px;
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
	.title {
		padding: 15px;
	}
	.logo image {
			width: 400rpx;
		}
	.logo {
		position: absolute;
		display: flex;
		left: 0;
		bottom: 0;
	}
	.star5 image {
			width: 44px;
		}
	.star5 {
		position: absolute;
		right: 12px;
		bottom: 29px;
	}
	.star4 image {
			width: 14px;
		}
	.star4 {
		position: absolute;
		right: 18px;
		bottom: 150px;
	}
	.star3 image {
			width: 14px;
		}
	.star3 {
		position: absolute;
		left: 18px;
		top: calc(50% + 30px);
	}
	.star2 image {
			width: 20px;
		}
	.star2 {
		position: absolute;
		left: 15px;
		top: calc(40% - 50px);
	}
	.star1 image {
			width: 32px;
			height: auto;
		}
	.star1 {
		position: absolute;
		top: 35px;
		left: calc(50% - 100px);
	}
	.bck {
		height: 100%;
		background: url('https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/shequ/bck.png') no-repeat;
		background-size: 750rpx;
		background-position: bottom;
	}
</style>