SxsnWechat/pagesHome/activityDetail.vue

<template>
	<view class="common_page adffc" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title="公益活动详情" bgColor="transparent"></cus-header>
		<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/19/54b75bc8-d926-449b-95a5-1126f700b481.png" class="top_bg_img" mode="widthFix"></image>
		<div class="lunbo">
			<up-swiper
				:list="imgList"
				@change="e => current = e.current"
				:autoplay="false"
				height="440rpx"
			>
				<template #indicator>
					<view class="indicator adf">
						<view class="indicator__dot" v-for="(item, index) in imgList" :key="index"
							:class="[index === current && 'indicator__dot--active']">
						</view>
					</view>
				</template>
			</up-swiper>
		</div>
		<div class="box box1">
			<div class="box1-top">
				<text class="box1-top-status">{{'进行中'}}</text>
				<text class="box1-top-title">{{'《环保知识知多少》让孩子成为大自然的守护者！'}}</text>
			</div>
			<div class="box1-line" style="margin-top: 36rpx;"></div>
			<div class="box1-place adfacjb">
				<div class="box1-place-left adffcjb">
					<text>活动地点</text>
					<div class="addr">{{'深圳市南山区南山街道丰潭路'}}</div>
				</div>
				<div class="box1-place-right">
					<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/239a8c29-499b-407b-a9b5-90447248d9ab.png"></image>
				</div>
			</div>
			<div class="box1-line" style="margin-top: 24rpx;"></div>
			<div class="box1-member adfacjb">
				<div class="box1-member-left adffc">
					<text>招募人数</text>
					<div class="num"><text>{{35}}</text> /{{50}}</div>
				</div>
				<div class="box1-member-right adffc" @tap="handleReviewMembers">
					<div class="review adfac">
						<text>查看报名人员</text>
						<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/b7b7531b-33fa-4ec3-841b-796be9035191.png"></image>
					</div>
					<div class="avatars">
						<up-avatar-group :urls="avatars" size="30" gap="0.4" :maxCount="3"></up-avatar-group>
					</div>
				</div>
			</div>
			<div class="box1-line" style="margin-top: 33rpx;"></div>
			<div class="box1-time adffc">
				<text>活动时间</text>
				<div class="text">{{'2025年06月01日 12:00'}} - {{'2025年06月15日12:00'}}</div>
			</div>
			<div class="box1-line" style="margin-top: 30rpx;"></div>
			<div class="box1-need adffc">
				<text>报名要求</text>
				<div class="text"><text>{{200}}</text>爱心值</div>
				<div class="tip">每{{200}}爱心值守护一条河流，让河流恢复往日的清澈模样</div>
			</div>
			<div class="box1-line" style="margin-top: 30rpx;"></div>
			<div class="box1-info adfacjb">
				<div class="box1-info-pre">
					<text>年龄限制</text>
					<div class="text">{{10}}岁以上</div>
				</div>
				<div class="box1-info-pre line">
					<text>可获得义工时长</text>
					<div class="hour"><text>{{2}}</text> 小时</div>
				</div>
			</div>
			<div class="box1-line" style="margin-top: 30rpx;"></div>
			<div class="box1-info adfacjb">
				<div class="box1-info-pre">
					<text>联系人</text>
					<div class="text">{{'周小瑾'}}/{{'13111987668'}}</div>
				</div>
				<div class="box1-info-pre line">
					<text>公益合作</text>
					<div class="text">{{'深圳善行少年基金会'}}</div>
				</div>
			</div>
		</div>
		<div class="box box2">
			<div class="box-title">活动详情</div>
			<div class="box2-detail">
				<up-read-more :toggle="true" showHeight="374rpx" color="#989998" fontSize="24rpx" openText="收起更多信息" closeText="展开更多信息">
				    <rich-text :nodes="detail"></rich-text>
				</up-read-more>
			</div>
		</div>
		<div class="bottom">
			<div class="time">
				报名时间：{{'2025年06月01日 12:00'}} - {{'2025年06月15日12:00'}} 
			</div>
			<div class="btns adfacjb">
				<div class="left adffcacjc" @tap="share=true">
					<up-icon name="share-square" color="#252525" size="48rpx"></up-icon>
					<text>分享</text>
				</div>
				<div class="right" @click="handleApply">立即报名</div>
			</div>
		</div>
		<div class="fail" v-if="fail">
			<div class="fbox adffcac">
				<image class="clock" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/5fe8627b-adc4-4e24-8e86-45771d3ba5a2.png"></image>
				<image class="close" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/3d94527a-da92-4d8b-9e99-44683c4f5c84.png" @click="fail=false"></image>
				<image class="alert" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/fdf05bfa-5593-4448-940e-437152bbbaf9.png" mode="widthFix"></image>
				<div class="texts adffcacjc">
					<div class="text">您当前爱心值不足，无法报名活动</div>
					<div class="tip">欢迎联系专属客服，了解更多公益活动，积攒爱心值</div>
				</div>
				<image class="down" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/c7d4983d-ca93-4833-8922-e010dd1d450a.png"></image>
				<div class="user adfac">
					<div class="user-left">
						<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/20ff1438-01a9-454c-b62c-501ed47c39a6.png"></image>
					</div>
					<div class="user-right">
						<div class="name">陈婧航</div>
						<div class="memo">@深圳善行少年基金会</div>
					</div>
				</div>
				<div class="finfo adffcac">
					<div class="finfo-code adffcacjc">
						<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/fbb4ac12-163e-48bd-9066-27b068078107.png"></image>
					</div>
					<div class="finfo-title">长按识别二维码</div>
					<div class="finfo-tip">添加您的专属公益向导</div>
					<div class="finfo-btn">了解善行少年</div>
					<div class="finfo-zblj" @click="fail=false">暂不了解</div>
				</div>
			</div>
		</div>
		<div class="share" v-if="share">
			<div class="sbox">
				<div class="sbox-title">分享给好友</div>
				<image class="close" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/7d1c7cf4-199a-4008-8114-ee0e1a8f0cc3.png" @click="share=false"></image>
				<div class="sbox-items adfac">
					<div class="sbox-items-pre adffcac" @click="shareToFriend">
						<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/a993c721-a4c7-4f5e-95cc-6451a50bfdce.png"></image>
						<text>分享页面</text>
					</div>
					<div class="sbox-items-pre adffcac" @click="generatePoster">
						<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/0c87d8a1-d7c5-466c-84aa-87ec5f163955.png"></image>
						<text>生成海报</text>
					</div>
					<div class="sbox-items-pre adffcac" @click="shareToTimeline">
						<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/732ac5fd-af58-44d8-9625-aaf96c24fed0.png"></image>
						<text>分享到朋友圈</text>
					</div>
				</div>
			</div>
		</div>
		
		<!-- 添加海报生成的canvas -->
		<canvas 
			canvas-id="posterCanvas" 
			:style="{width: canvasWidth + 'px', height: canvasHeight + 'px'}"
			style="position: fixed; top: -9999px; left: -9999px;"
		></canvas>
		
		<!-- 海报预览弹窗 -->
		<div class="poster-preview" v-if="showPoster">
			<div class="poster-box">
				<div class="poster-header">
					<text>生成海报</text>
					<image class="close" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/7d1c7cf4-199a-4008-8114-ee0e1a8f0cc3.png" @click="showPoster=false"></image>
				</div>
				<div class="poster-content">
					<image :src="posterUrl" mode="widthFix" class="poster-img"></image>
				</div>
				<div class="poster-actions">
					<button class="save-btn" @click="savePoster">保存到相册</button>
					<button class="share-btn" @click="sharePoster">分享给好友</button>
				</div>
			</div>
		</div>
	</view>
</template>

<script setup name="">
	import CusHeader from '@/components/CusHeader/index.vue'
	import { onShareAppMessage, onShareTimeline, onLoad } from '@dcloudio/uni-app';
	import { ref, reactive } from 'vue'
	
	const id = ref('')
	const imgList = ref(['https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/5378bfeb-32f5-4325-aaef-5270e4a55a3a.png'])
	const detail = ref(`山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？<br>山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？`)
	const avatars = ref([
		'https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/565ca09a-88e2-4c2c-a89e-98bd51fbea7f.png',
		'https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/565ca09a-88e2-4c2c-a89e-98bd51fbea7f.png',
		'https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/565ca09a-88e2-4c2c-a89e-98bd51fbea7f.png',
		'https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/565ca09a-88e2-4c2c-a89e-98bd51fbea7f.png',
		'https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/565ca09a-88e2-4c2c-a89e-98bd51fbea7f.png'
	])
	const fail = ref(false)
	const share = ref(false)
	const showPoster = ref(false)
	const posterUrl = ref('')
	const canvasWidth = ref(375)
	const canvasHeight = ref(667)
	const activityData = reactive({
		title: '《环保知识知多少》让孩子成为大自然的守护者！',
		time: '06.01-12:00 ~ 06.02-12:00',
		address: '深圳市南山区南山街道丰潭路',
		organizer: '锦鲤俱乐部'
	})
	
	const handleReviewMembers = () => {
		uni.navigateTo({
			url:'/pagesHome/recruitsNumber'
		})
	}
	
	const handleApply = () => {
		uni.navigateTo({
			url:'/pagesHome/activityApply'
			// url:'/pagesHome/signSuccess'
			// url:'/pagesHome/fillNonprofitArchives'
		})
	}
	
	// 分享给好友
	const shareToFriend = () => {
		share.value = false
		uni.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage']
		})
	}
	
	// 分享到朋友圈
	const shareToTimeline = () => {
		share.value = false
		// 朋友圈分享会触发 onShareTimeline
		uni.showShareMenu({
			withShareTicket: true,
			menus: ['shareTimeline']
		})
	}
	
	// 生成海报
	const generatePoster = async () => {
		share.value = false
		uni.showLoading({
			title: '正在生成海报...'
		})
		
		try {
			await createPoster()
			uni.hideLoading()
			showPoster.value = true
		} catch (error) {
			uni.hideLoading()
			uni.showToast({
				title: '海报生成失败',
				icon: 'none'
			})
		}
	}
	
	// 创建海报
	const createPoster = () => {
		return new Promise((resolve, reject) => {
			const ctx = uni.createCanvasContext('posterCanvas')
			
			// 设置画布尺寸
			const width = canvasWidth.value
			const height = canvasHeight.value
			
			// 绘制背景
			const gradient = ctx.createLinearGradient(0, 0, 0, height)
			gradient.addColorStop(0, '#87CEEB')
			gradient.addColorStop(1, '#98FB98')
			ctx.fillStyle = gradient
			ctx.fillRect(0, 0, width, height)
			
			// 加载并绘制背景图片（山峰）
			const bgImg = 'https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/5378bfeb-32f5-4325-aaef-5270e4a55a3a.png'
			
			uni.getImageInfo({
				src: bgImg,
				success: (res) => {
					// 绘制背景图
					ctx.drawImage(res.path, 0, 0, width, height * 0.6)
					
					// 绘制绿色标签
					ctx.fillStyle = '#B7F358'
					ctx.fillRect(20, 30, 120, 30)
					
					// 绘制标签文字
					ctx.fillStyle = '#000000'
					ctx.font = 'bold 14px PingFang-SC'
					ctx.fillText('节能低碳小妙招', 30, 50)
					
					// 绘制主标题
					ctx.fillStyle = '#FFFFFF'
					ctx.font = 'bold 24px PingFang-SC'
					ctx.fillText('环保知识', 50, 120)
					ctx.fillText('知多少', 50, 150)
					
					// 绘制白色信息区域背景
					ctx.fillStyle = '#FFFFFF'
					ctx.fillRect(20, height * 0.6 + 20, width - 40, height * 0.35)
					
					// 绘制活动信息
					ctx.fillStyle = '#000000'
					ctx.font = '16px PingFang-SC'
					const startY = height * 0.6 + 50
					
					// 活动标题
					ctx.font = 'bold 16px PingFang-SC'
					ctx.fillText(activityData.title.substring(0, 20), 30, startY)
					if (activityData.title.length > 20) {
						ctx.fillText(activityData.title.substring(20), 30, startY + 25)
					}
					
					// 时间图标和文字
					ctx.font = '14px PingFang-SC'
					ctx.fillStyle = '#666666'
					ctx.fillText('🕐', 30, startY + 60)
					ctx.fillText(activityData.time, 50, startY + 60)
					
					// 地址图标和文字
					ctx.fillText('📍', 30, startY + 85)
					ctx.fillText(activityData.address, 50, startY + 85)
					
					// 组织方
					ctx.fillText('👥', 30, startY + 110)
					ctx.fillText(activityData.organizer, 50, startY + 110)
					
					// 绘制小程序码区域
					ctx.fillStyle = '#F5F5F5'
					ctx.fillRect(width - 120, height - 140, 100, 100)
					
					ctx.fillStyle = '#000000'
					ctx.font = '12px PingFang-SC'
					ctx.fillText('微信扫一扫', width - 110, height - 25)
					
					// 执行绘制
					ctx.draw(false, () => {
						// 导出图片
						uni.canvasToTempFilePath({
							canvasId: 'posterCanvas',
							width: width,
							height: height,
							destWidth: width * 2,
							destHeight: height * 2,
							success: (res) => {
								posterUrl.value = res.tempFilePath
								resolve(res.tempFilePath)
							},
							fail: reject
						})
					})
				},
				fail: () => {
					// 如果图片加载失败，绘制纯色背景
					drawSimplePoster(ctx, width, height, resolve, reject)
				}
			})
		})
	}
	
	// 绘制简单海报（备用方案）
	const drawSimplePoster = (ctx, width, height, resolve, reject) => {
		// 绘制渐变背景
		const gradient = ctx.createLinearGradient(0, 0, 0, height)
		gradient.addColorStop(0, '#87CEEB')
		gradient.addColorStop(1, '#98FB98')
		ctx.fillStyle = gradient
		ctx.fillRect(0, 0, width, height)
		
		// 绘制白色内容区域
		ctx.fillStyle = '#FFFFFF'
		ctx.fillRect(20, 100, width - 40, height - 200)
		
		// 绘制标题
		ctx.fillStyle = '#000000'
		ctx.font = 'bold 20px PingFang-SC'
		ctx.fillText('公益活动邀请', width / 2 - 70, 150)
		
		// 绘制活动信息
		ctx.font = '16px PingFang-SC'
		ctx.fillText(activityData.title.substring(0, 15), 30, 200)
		if (activityData.title.length > 15) {
			ctx.fillText(activityData.title.substring(15), 30, 225)
		}
		
		ctx.font = '14px PingFang-SC'
		ctx.fillStyle = '#666666'
		ctx.fillText('活动时间：' + activityData.time, 30, 270)
		ctx.fillText('活动地点：' + activityData.address.substring(0, 12), 30, 295)
		
		ctx.draw(false, () => {
			uni.canvasToTempFilePath({
				canvasId: 'posterCanvas',
				width: width,
				height: height,
				destWidth: width * 2,
				destHeight: height * 2,
				success: (res) => {
					posterUrl.value = res.tempFilePath
					resolve(res.tempFilePath)
				},
				fail: reject
			})
		})
	}
	
	// 保存海报到相册
	const savePoster = () => {
		uni.saveImageToPhotosAlbum({
			filePath: posterUrl.value,
			success: () => {
				uni.showToast({
					title: '保存成功',
					icon: 'success'
				})
				showPoster.value = false
			},
			fail: (err) => {
				if (err.errMsg.includes('auth deny')) {
					uni.showModal({
						title: '提示',
						content: '需要您授权保存图片到相册',
						confirmText: '去设置',
						success: (res) => {
							if (res.confirm) {
								uni.openSetting()
							}
						}
					})
				} else {
					uni.showToast({
						title: '保存失败',
						icon: 'none'
					})
				}
			}
		})
	}
	
	// 分享海报给好友
	const sharePoster = () => {
		// 这里可以实现分享海报的逻辑
		uni.showToast({
			title: '请保存后手动分享',
			icon: 'none'
		})
	}
	
	onLoad(options=>{
		id.value = options?.id;
	})
	
	// 分享给好友
	onShareAppMessage(() => {
		return {
			title: activityData.title,
			path: '/pagesHome/activityDetail?id=' + id.value,
			imageUrl: imgList.value[0] // 使用活动图片作为分享图
		};
	});
	
	// 分享到朋友圈
	onShareTimeline(() => {
		return {
			title: activityData.title,
			query: 'id=' + id.value,
			imageUrl: posterUrl.value || imgList.value[0] // 优先使用海报，否则使用活动图片
		};
	});
</script>

<style scoped lang="scss">
	.common_page{
		padding-bottom: 276rpx;
		
		.lunbo{
			width: 100%;
			height: 440rpx;
			margin-top: 20rpx;
			position: relative;
		}
		
		.box{
			background: linear-gradient(45deg,#FFFFFF 70%,#F2FFE8 100%);
			border-radius: 24rpx;
			padding: 36rpx 24rpx 30rpx;
			margin-top: 20rpx;
			position: relative;
			&-title{
				width: 170rpx;
				height: 44rpx;
				padding-left: 2rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 800;
				font-size: 36rpx;
				color: #151B29;
				line-height: 36rpx;
				background-image: url('https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/11/6ec1f999-fcbb-4a0b-a1a5-d0b5e1374bb1.png');
				background-size: 170rpx 31rpx;
				background-position: 0 20rpx;
				background-repeat: no-repeat;
			}
		}
		
		.box1{
			&-top{
				&-status{
					padding: 10rpx 20rpx;
					background: url('https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/46184afd-e7cd-4ffa-b32f-7390f7a1decc.png') no-repeat;
					background-size: 100% 100%;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 24rpx;
					color: #151B29;
					line-height: 33rpx;
				}
				&-title{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 36rpx;
					color: #151B29;
					line-height: 54rpx;
					margin-left: 10rpx;
				}
			}
			&-line{
				width: 100%;
				height: 1rpx;
				background: #E7E7E7;
			}
			&-place{
				&-left{
					width: calc(100% - 228rpx);
					text{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #989998;
						line-height: 26rpx;
					}
					.addr{
						width: 100%;
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 26rpx;
						color: #151B29;
						line-height: 26rpx;
						margin-top: 24rpx;
					}
				}
				&-right{
					width: 188rpx;
					height: 115rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
			&-member{
				margin-top: 37rpx;
				&-left{
					&>text{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #989998;
						line-height: 26rpx;
					}
					.num{
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 26rpx;
						color: #676775;
						line-height: 48rpx;
						margin-top: 25rpx;
						text{
							font-size: 36rpx;
							color: #151B29;
						}
					}
				}
				&-right{
					.review{
						text{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #989998;
							line-height: 26rpx;
						}
						image{
							width: 28rpx;
							height: 28rpx;
							margin-left: 8rpx;
						}
					}
					.avatars{
						margin-top: 27rpx;
						display: flex;
						justify-content: flex-end;
					}
				}
			}
			&-time{
				margin-top: 30rpx;
				text{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #989998;
					line-height: 26rpx;
				}
				.text{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 26rpx;
					color: #151B29;
					line-height: 26rpx;
					margin-top: 24rpx;
				}
			}
			&-need{
				margin-top: 30rpx;
				&>text{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #989998;
					line-height: 26rpx;
				}
				.text{
					margin-top: 30rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #676775;
					line-height: 26rpx;
					text{
						font-weight: bold;
						font-size: 36rpx;
						color: #151B29;
					}
				}
				.tip{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #C9A771;
					line-height: 26rpx;
					margin-top: 20rpx;
				}
			}
			&-info{
				margin-top: 30rpx;
				&-pre{
					width: 50%;
					&.line{
						border-left: 1rpx solid #E7E7E7;
						padding-left: 24rpx;
						box-sizing: border-box;
					}
					&>text{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #989998;
						line-height: 26rpx;
					}
					.text{
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 26rpx;
						color: #151B29;
						line-height: 26rpx;
						margin-top: 24rpx;
					}
					.hour{
						margin-top: 24rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #676775;
						line-height: 26rpx;
						text{
							font-weight: bold;
							font-size: 36rpx;
							color: #151B29;
						}
					}
				}
			}
		}
		
		.box2{
			&-detail{
				margin-top: 40rpx;
			}
		}
		
		.bottom{
			width: 100%;
			height: 256rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -2rpx 8rpx 0rpx rgba(178,178,178,0.1);
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 30rpx 24rpx 0;
			box-sizing: border-box;
			.time{
				padding: 19rpx 24rpx 12rpx;
				background: #F8F8F9;
				border-radius: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #4B545C;
				line-height: 33rpx;
			}
			.btns{
				margin-top: 24rpx;
				.left{
					margin-left: 30rpx;
					text{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #151B29;
						line-height: 26rpx;
						margin-top: 17rpx;
					}
				}
				.right{
					width: 540rpx;
					height: 90rpx;
					background: #B7F358;
					border-radius: 45rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #151B29;
					line-height: 90rpx;
					text-align: center;
					letter-spacing: 2rpx;
				}
			}
		}
	
		.fail{
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			background: rgba(0,0,0,0.4);
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			.fbox{
				background: #FFFFFF;
				background-image: url('https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/e5ca0b95-ae33-4a93-8955-fe1d5e05ed2d.png');
				background-repeat: no-repeat;
				background-position: top left;
				background-size: 100% 399rpx;
				border-radius: 24rpx 24rpx 0 0;
				position: relative;
				padding: 40rpx 30rpx 123rpx;
				
				.clock{
					width: 219rpx;
					height: 143rpx;
					position: absolute;
					left: 51rpx;
					top: -37rpx;
				}
				.close{
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					top: 40rpx;
					right: 36rpx;
				}
				.alert{
					width: 212rpx;
				}
				.texts{
					width: 100%;
					margin-top: 69rpx;
					background: #FFFFFF;
					border-radius: 24rpx;
					border: 1rpx dotted #979797;
					padding: 36rpx 0;
					.text{
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 36rpx;
						color: #252525;
						line-height: 36rpx;
					}
					.tip{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #676775;
						line-height: 26rpx;
						margin-top: 24rpx;
					}
				}
				.down{
					width: 514rpx;
					height: 34rpx;
					margin-top: 20rpx;
				}
				.user{
					margin-top: 30rpx;
					width: 100%;
					padding-left: 50rpx;
					box-sizing: border-box;
					&-left{
						image{
							width: 98rpx;
							height: 98rpx;
						}
					}
					&-right{
						margin-left: 20rpx;
						.name{
							font-family: PingFang-SC, PingFang-SC;
							font-weight: bold;
							font-size: 32rpx;
							color: #252525;
							line-height: 32rpx;
						}
						.memo{
							font-family: PingFang-SC, PingFang-SC;
							font-weight: bold;
							font-size: 24rpx;
							color: #05A9FE;
							line-height: 24rpx;
							margin-top: 24rpx;
						}
					}
				}
				.finfo{
					width: 100%;
					margin-top: 36rpx;
					&-code{
						width: 310rpx;
						height: 310rpx;
						background: #FFFFFF;
						border: 3rpx solid #C5E3FE;
						image{
							width: 244rpx;
							height: 244rpx;
						}
					}
					&-title{
						margin-top: 24rpx;
						font-size: 28rpx;
						color: #252525;
						line-height: 40rpx;
					}
					&-tip{
						margin-top: 10rpx;
						font-size: 24rpx;
						color: #656775;
						line-height: 40rpx;
					}
					&-btn{
						width: calc(100% - 20rpx);
						height: 90rpx;
						background: #B7F358;
						border-radius: 45rpx;
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 32rpx;
						color: #151B29;
						line-height: 90rpx;
						text-align: center;
						margin-top: 48rpx;
					}
					&-zblj{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #989998;
						line-height: 40rpx;
						margin-top: 48rpx;
						padding-bottom: 5rpx;
						border-bottom: 1rpx solid #989998;
					}
				}
			}
		}
		
		.share{
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			background: rgba(0,0,0,0.4);
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			.sbox{
				position: relative;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 0rpx 0rpx;
				padding: 50rpx 30rpx 148rpx;
				&-title{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 36rpx;
					color: #151B29;
					line-height: 36rpx;
					text-align: center;
				}
				.close{
					width: 27rpx;
					height: 27rpx;
					position: absolute;
					top: 50rpx;
					right: 40rpx;
				}
				&-items{
					margin-top: 88rpx;
					&-pre{
						width: calc(100% / 3);
						image{
							width: 94rpx;
							height: 94rpx;
						}
						text{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 26rpx;
							color: #252525;
							line-height: 26rpx;
							text-align: center;
							margin-top: 24rpx;
						}
					}
				}
			}
		}
	
		.poster-preview {
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			background: rgba(0,0,0,0.8);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			z-index: 9999;
			
			.poster-box {
				width: 80%;
				max-width: 600rpx;
				background: #FFFFFF;
				border-radius: 24rpx;
				overflow: hidden;
				
				.poster-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 30rpx;
					border-bottom: 1rpx solid #E7E7E7;
					
					text {
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 32rpx;
						color: #151B29;
					}
					
					.close {
						width: 40rpx;
						height: 40rpx;
					}
				}
				
				.poster-content {
					padding: 30rpx;
					display: flex;
					justify-content: center;
					
					.poster-img {
						width: 100%;
						border-radius: 12rpx;
					}
				}
				
				.poster-actions {
					display: flex;
					padding: 0 30rpx 30rpx;
					gap: 20rpx;
					
					button {
						flex: 1;
						height: 80rpx;
						border-radius: 40rpx;
						border: none;
						font-size: 28rpx;
						font-weight: bold;
					}
					
					.save-btn {
						background: #F5F5F5;
						color: #151B29;
					}
					
					.share-btn {
						background: #B7F358;
						color: #151B29;
					}
				}
			}
		}
	}
</style>