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>
		<view class="lunbo">
			<up-swiper
				:list="imgList"
				@change="e => current = e.current"
				:autoplay="true"
				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>
		</view>
		<view class="box box1">
			<view class="box1-top">
				<text class="box1-top-status" :class="{'end':activityInfo?.activeState==3}">{{statusCfg[activityInfo?.activeState]||'未知'}}</text>
				<text class="box1-top-title">{{activityInfo?.activityName||''}}</text>
			</view>
			<view class="box1-line" style="margin-top: 36rpx;"></view>
			<view class="box1-place adfacjb">
				<view class="box1-place-left adffcjb">
					<text>活动地点</text>
					<view class="addr">{{activityInfo?.provinceName||''}}{{activityInfo?.cityName||''}}{{activityInfo?.address||''}}</view>
				</view>
				<view class="box1-place-right">
					<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/239a8c29-499b-407b-a9b5-90447248d9ab.png"></image>
				</view>
			</view>
			<view class="box1-line" style="margin-top: 24rpx;"></view>
			<view class="box1-member adfacjb">
				<view class="box1-member-left adffc">
					<text>招募人数</text>
					<view class="num"><text>{{activityInfo?.recruitmentNow}}</text> /{{activityInfo?.recruitmentMax||'不限'}}</view>
				</view>
				<view class="box1-member-right adffc" @tap="handleReviewMembers">
					<view class="review adfac">
						<text>查看报名人员</text>
						<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/b7b7531b-33fa-4ec3-841b-796be9035191.png"></image>
					</view>
					<view class="avatars">
						<up-avatar-group :urls="avatars" size="30" gap="0.4" :maxCount="3"></up-avatar-group>
					</view>
				</view>
			</view>
			<view class="box1-line" style="margin-top: 33rpx;"></view>
			<view class="box1-time adffc">
				<text>活动时间</text>
				<view class="text">{{activityInfo?.activityStartTime}} - {{activityInfo?.activityEndTime}}</view>
			</view>
			<view class="box1-line" style="margin-top: 30rpx;"></view>
			<view class="box1-need adffc">
				<text>报名要求</text>
				<template v-if="activityInfo?.activityLimit==1">
					<view class="text"><text>{{activityInfo?.valueLimit||0}}</text>爱心值</view>
					<view class="tip">{{activityInfo?.loveValueContent||''}}</view>
				</template>
				<template v-else-if="activityInfo?.activityLimit==2">
					<view class="text"><text>{{activityInfo?.valueLimit||0}}</text>张专享券</view>
					<view class="tip">{{activityInfo?.loveValueContent||''}}</view>
				</template>
				<template v-else-if="activityInfo?.activityLimit==3">
					<view class="text"><text>免费</text></view>
					<view class="tip"></view>
				</template>
			</view>
			<view class="box1-line" style="margin-top: 30rpx;"></view>
			<view class="box1-info adfacjb">
				<view class="box1-info-pre">
					<text>年龄限制</text>
					<view class="text" v-if="activityInfo?.userAgeMax">{{activityInfo?.userAgeMin}}岁 到 {{activityInfo?.userAgeMax}}岁</view>
					<view class="text" v-else>不限制</view>
				</view>
				<view class="box1-info-pre line">
					<text>可获得义工时长</text>
					<!-- typeId=='1977564860095348737'为义工活动，义工时长只有义工活动才有 -->
					<view class="hour" v-if="activityInfo?.typeId=='1977564860095348737'"><text>{{activityInfo?.serviceHours||0}}</text> 小时</view>
					<view class="hour" v-else>无</view>
				</view>
			</view>
			<view class="box1-line" style="margin-top: 30rpx;"></view>
			<view class="box1-info adfacjb">
				<view class="box1-info-pre">
					<text>联系人</text>
					<view class="text">{{activityInfo?.contact||''}}/{{activityInfo?.contactPhone||''}}</view>
				</view>
				<view class="box1-info-pre line">
					<text>公益合作</text>
					<view class="text">{{activityInfo?.channelName||''}}</view>
				</view>
			</view>
		</view>
		<view class="box box2">
			<view class="box-title">活动详情</view>
			<view class="box2-detail" v-if="activityInfo&&activityInfo.activityDetails">
				<up-read-more :toggle="true" showHeight="374rpx" color="#989998" fontSize="24rpx" openText="收起更多信息" closeText="展开更多信息">
				    <rich-text :nodes="activityInfo.activityDetails"></rich-text>
				</up-read-more>
			</view>
		</view>
		<view class="bottom">
			<view class="time">
				报名时间：{{activityInfo?.signupStartTime}} - {{activityInfo?.signupEndTime}} 
			</view>
			<view class="btns adfacjb">
				<view class="left adffcacjc" @tap="showShareOptions">
					<up-icon name="share-square" color="#252525" size="48rpx"></up-icon>
					<text>分享</text>
				</view>
				<view class="right" @click="handleApply" v-if="activityInfo?.activeState==1&&activityInfo?.signupState==0">立即报名</view>
				
				<view class="right" @click="handleCancel" v-else-if="activityInfo?.activeState==1&&activityInfo?.signupState==1">取消报名</view>
				<view class="right" @click="handleSignup" v-else-if="activityInfo?.activeState==2&&activityInfo?.signupState==1">我要签到</view>
				<view class="right" @click="handleFill" v-else-if="activityInfo?.activeState==3&&activityInfo?.signupState==1">填写公益档案</view>
				
				<view class="right end" v-else-if="activityInfo?.activeState==0">活动未开始</view>
				<view class="right end" v-else-if="activityInfo?.activeState==2&&activityInfo?.signupState==0">活动进行中不可报名</view>
				<view class="right end" v-else-if="activityInfo?.activeState==3">活动已结束</view>
				<view class="right end" v-else-if="activityInfo?.activeState==4">已报满暂无活动名额</view>
			</view>
		</view>
		<view class="fail" v-if="fail">
			<view 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>
				<view class="texts adffcacjc">
					<view class="text">您当前{{activityLimitCfg[activityInfo?.activityLimit]}}不足，无法报名活动</view>
					<view class="tip">欢迎联系专属客服，了解更多公益活动，积攒{{activityLimitCfg[activityInfo?.activityLimit]}}</view>
				</view>
				<image class="down" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/c7d4983d-ca93-4833-8922-e010dd1d450a.png"></image>
				<view class="user adfacjc">
				<!-- <view class="user adfac"> -->
					<!-- <view class="user-left">
						<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/20ff1438-01a9-454c-b62c-501ed47c39a6.png"></image>
					</view>
					<view class="user-right">
						<view class="name">陈婧航</view>
						<view class="memo">@深圳善行少年基金会</view>
					</view> -->
					"善行少年"咨询微信
				</view>
				<view class="finfo adffcac">
					<view class="finfo-code adffcacjc">
						<!-- <image :src="imageUrl" @longpress="handleLongPress(imageUrl)"></image> -->
						<image :src="imageUrl" :show-menu-by-longpress="true"></image>
					</view>
					<view class="finfo-title">长按识别二维码</view>
					<view class="finfo-tip">添加您的专属公益向导</view>
					<view class="finfo-btn" @click="toWebView">了解善行少年</view>
					<view class="finfo-zblj" @click="fail=false">暂不了解</view>
				</view>
			</view>
		</view>
		<view class="share" v-if="share">
			<view class="sbox">
				<view class="sbox-title">分享给好友</view>
				<image class="close" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/7d1c7cf4-199a-4008-8114-ee0e1a8f0cc3.png" @click="share=false"></image>
				<view class="sbox-items adfac">
					<view class="sbox-items-pre adffcac">
						<button class="share-btn" open-type="share">
							<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/a993c721-a4c7-4f5e-95cc-6451a50bfdce.png"></image>
							<text>分享页面</text>
						</button>
					</view>
					<view 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>
					</view>
					<view 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>
					</view>
				</view>
			</view>
		</view>
		
		<view class="posterbox adffcacjc" v-if="posterShow">
			<div class="posterbox-card adffcac">
				<div class="posterbox-card-img">
					<image src="https://sxsn.ringzle.com/happytree-admin/profile/2025/12/12/e8218de1-d059-4197-b677-f9d2e446971e.png"></image>
				</div>
				<div class="posterbox-card-info adfacjb">
					<div class="posterbox-card-info-left">
						<div class="posterbox-card-info-left-title">{{'《环保知识知多少》让孩子成为健康公益大使'}}</div>
						<div class="posterbox-card-info-left-p adf" style="margin-top: 12rpx;">
							<image src="https://sxsn.ringzle.com/happytree-admin/profile/2025/12/12/7ae66915-7988-4827-86fa-991c1a850e24.png"></image>
							<text>{{'06.01-12:00 ~ 06.02-12:00'}}</text>
						</div>
						<div class="posterbox-card-info-left-p adf">
							<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/11/e9025f86-a59e-4f82-92f0-9d22e846193c.png"></image>
							<text>{{'深圳市南山区南山街道丰潭路'}}</text>
						</div>
						<div class="posterbox-card-info-left-name adfac">
							<image src="https://sxsn.ringzle.com/happytree-admin/profile/2025/12/12/5a43c6f6-32c7-42a1-be09-3fe13575be10.png"></image>
							<text>锦鲤俱乐部</text>
						</div>
					</div>
					<div class="posterbox-card-info-right adffcac">
						<image src="https://sxsn.ringzle.com/happytree-admin/profile/2025/12/12/7e272eb5-272f-4ec2-909c-cb4582ee9124.jpg"></image>
						<text>微信扫一扫</text>
					</div>
				</div>
			</div>
			<div class="posterbox-menu adfacjb">
				<div class="posterbox-menu-pre adffcac" v-for="(item,index) in menuList" :key="index">
					<image :src="item.img"></image>
					<text>{{item.title}}</text>
				</div>
			</div>
			<div class="posterbox-close adfacjc">
				<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/12/10/c1050d39-c090-49e5-974c-40da9d08648c.png" @click="posterShow=false"></image>
			</div>
		</view>
	</view>
</template>

<script setup name="">
	import CusHeader from '@/components/CusHeader/index.vue'
	import { onLoad } from '@dcloudio/uni-app';
	import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
	import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app' 
	const { proxy } = getCurrentInstance()
	
	const id = ref('')
	const activityInfo = ref(null)
	const statusCfg = ref({
		0:'未开始',
		1:'报名中',
		4:'报名中',
		2:'进行中',
		3:'已结束'
	})
	const activityLimitCfg = ref({
		1:'爱心值',
		2:'专享券',
		3:'免费'
	})
	const imgList = ref([])
	const detail = ref('')
	const avatars = ref([])
	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 imageUrl = ref('https://transcend.ringzle.com/xiaozhi-app/profile/2025/11/21/50ac5bc4-8f92-46a5-81d5-60908b84e9f0.png')
	const posterShow = ref(false)
	const menuList = ref([
		{ img:'https://transcend.ringzle.com/xiaozhi-app/profile/2025/12/10/37642ab3-3085-4730-875a-435a4ffef73f.png',title:'发送给朋友' },
		{ img:'https://transcend.ringzle.com/xiaozhi-app/profile/2025/12/10/f09f3499-a578-4638-bd75-b997161689b8.png',title:'分享到朋友圈' },
		{ img:'https://transcend.ringzle.com/xiaozhi-app/profile/2025/12/10/6f18c1c5-323b-4476-98fd-e0c428790c3b.png',title:'收藏' },
		{ img:'https://transcend.ringzle.com/xiaozhi-app/profile/2025/12/10/a34f93bc-d787-4d82-973d-c498ea306808.png',title:'保存图片' },
	])
	
	const handleReviewMembers = () => {
		uni.navigateTo({
			url:'/pagesHome/recruitsNumber?activityId='+activityInfo.value?.id+'&recruitmentMax='+activityInfo.value?.recruitmentMax+'&recruitmentMin='+activityInfo.value?.recruitmentMin
		})
	}
	
	//立即报名
	const handleApply = async () => {
		let { loveValue, couponIds } = await getUserLoveTicket();
		let url = `/pagesHome/activityApply?activity=${encodeURIComponent(JSON.stringify(activityInfo.value))}`;
		
		if((activityInfo.value?.activityLimit==1&&loveValue<activityInfo?.value.valueLimit)
		||(activityInfo.value?.activityLimit==2&&couponIds?.length<activityInfo?.value.valueLimit)){
			fail.value = true;
			return 
		}
		uni.navigateTo({ url })
	}
	//取消报名
	const handleCancel = () => {
		uni.reLaunch({
			url:'/pages/nonprofit?type=1'
		})
		// uni.showModal({
		// 	title:'温馨提示',
		// 	content:'确认取消本次报名吗？取消后可再次报名本活动。',
		// 	success: (res) => {
		// 		if(res.confirm){
		// 			proxy.$api.get(`/core/activity/signup/cancelSignup/${activityInfo.value?.signupId||''}`).then(({data:res})=>{
		// 				if(res.code!==0) return proxy.$showToast(res.msg)
		// 				getActivityDetail(id.value)
		// 				proxy.$showToast('取消报名成功')
		// 			})
		// 		}
		// 	}
		// })
	}
	//我要签到
	const handleSignup = () => {
		uni.reLaunch({
			url:'/pages/nonprofit?type=2'
		})
	}
	//填写公益档案
	const handleFill = () => {
		uni.reLaunch({
			url:'/pages/nonprofit?type=3'
		})
	}
	
	const getUserLoveTicket = () => {
		return new Promise(resolve=>{
			let userId = JSON.parse(uni.getStorageSync('userInfo'))?.id;
			proxy.$api.get(`/core/activity/signup/userAsset/${userId}/${activityInfo.value?.id}`).then(({data:res})=>{
				if(res.code!==0) return proxy.$showToast(res.msg)
				resolve({loveValue:res.data?.loveValue||0,couponIds:res.data?.couponIds||0})
			})
		}) 
	}
	
	onShareAppMessage((res) => {
		const sharerId = JSON.parse(uni.getStorageSync('userInfo'))?.id;
		return {
		  title: activityInfo.value?.activityName || '发现一个好物，分享给你！',
		  path: `/pagesHome/activityDetail?shareADId=${activityInfo.value?.id}&shareUserId=${sharerId}`,
		  imageUrl: activityInfo.value?.coverFile
		};
	})
	
	onShareTimeline((res) => {
		const sharerId = JSON.parse(uni.getStorageSync('userInfo'))?.id;
		return {
		  title: activityInfo.value?.activityName || '发现一个好物，分享给你！',
		  query: `shareADId=${activityInfo.value?.id}&shareUserId=${sharerId}`,
		  imageUrl: activityInfo.value?.coverFile
		};
	})
	
	const showShareOptions = () => {
		share.value = true;
		uni.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline'] // 显示分享给朋友和分享到朋友圈
		}).then(res => {
			console.log('显示分享菜单成功', res);
		}).catch(err => {
			console.error('显示分享菜单失败', err);
		});
	}
	
	// 分享到朋友圈
	const shareToTimeline = () => {
		uni.showModal({
			title:'温馨提示',
			content:'分享到朋友圈请点击页面右上方的“···”标志后选择“分享到朋友圈”进行分享'
		})
	}
	
	// 生成海报
	const generatePoster = async () => {
		share.value = false;
		posterShow.value = true;
	}
	
	const toWebView = () => {
		uni.navigateTo({
			url:'/pages/webView?src=https://mp.weixin.qq.com/s/-oQlSBucYU_ifgd1j6eL3A?scene=1&click_id=2'
		})
	}
	  
	const getActivityDetail = (id) => {
		proxy.$api.get(`/core/activity/${id}`).then(({data:res})=>{
			if(res.code!==0) return proxy.$showToast(res.msg)
			activityInfo.value = res.data;
			if(activityInfo.value.signupState==0
			&&activityInfo.value.activeState===1
			&&activityInfo.value.recruitmentNow==(activityInfo.value.recruitmentMax||99999)){
				activityInfo.value.activeState = 4;//已报满暂无活动名额
			}
			imgList.value = activityInfo.value?.imageFiles&&(activityInfo.value?.imageFiles.split(',')||[])
			for(let i=0;i<activityInfo.value.recruitmentNow;i++){
				avatars.value.push('https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/565ca09a-88e2-4c2c-a89e-98bd51fbea7f.png')
			}
		})
	}
	
	onLoad(options=>{
		id.value = options?.id||options?.shareADId||'';
		if(id.value) {
			getActivityDetail(id.value)
		}
	})
</script>

<style scoped lang="scss">
	.share-btn {
		background-color: transparent;
		border: none;
		padding: 0;
		margin: 0;
		line-height: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		&::after {
			border: none;
		}
	}

	.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;
					&.end{
						background: linear-gradient( 270deg, #FD8A8A 0%, #FE6161 100%);
						border-radius: 16px 4px 16px 4px;
						color: #FFFFFF;
					}
				}
				&-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;
					&.end{
						background: #F7F7F7;
					}
				}
			}
		}
	
		.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{
					width: 100%;
					// margin-top: 30rpx;
					// padding-left: 50rpx;
					margin-top: 50rpx;
					box-sizing: border-box;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #252525;
					line-height: 32rpx;
					&-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;
						}
					}
				}
			}
		}
	
		.posterbox{
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			background: rgba(0,0,0,0.7);
			
			&-card{
				width: calc(100% - 220rpx);
				background: #FFFFFF;
				padding: 24rpx 20rpx;
				box-sizing: border-box;
				&-img{
					width: 100%;
					height: 368rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				&-info{
					width: 100%;
					margin-top: 14rpx;
					&-left{
						width: calc(100% - 163rpx);
						&-title{
							font-family: PingFang-SC, PingFang-SC;
							font-weight: bold;
							font-size: 24rpx;
							color: #252525;
							line-height: 36rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
						&-p{
							margin-top: 3rpx;
							image{
								width: 24rpx;
								height: 24rpx;
							}
							text{
								font-family: PingFang-SC, PingFang-SC;
								font-weight: bold;
								font-size: 20rpx;
								color: #8B8B8B;
								line-height: 36rpx;
								margin-left: 10rpx;
							}
						}
						&-name{
							margin-top: 6rpx;
							image{
								width: 30rpx;
								height: 30rpx;
							}
							text{
								font-family: PingFang-SC, PingFang-SC;
								font-weight: bold;
								font-size: 20rpx;
								color: #8B8B8B;
								line-height: 36rpx;
								margin-left: 10rpx;
							}
						}
					}
					&-right{
						width: 163rpx;
						image{
							width: 123rpx;
							height: 123rpx;
						}
						text{
							font-family: PingFang-SC, PingFang-SC;
							font-weight: bold;
							font-size: 20rpx;
							color: #8B8B8B;
							line-height: 36rpx;
							margin-top: 20rpx;
						}
					}
				}
			}
			
			&-menu{
				width: 100%;
				margin-top: 239rpx;
				&-pre{
					width: 25%;
					image{
						width: 103rpx;
						height: 104rpx;
					}
					text{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: rgba(255,255,255,0.6);
						line-height: 33rpx;
						margin-top: 32rpx;
					}
				}
			}
			
			&-close{
				margin-top: 58rpx;
				image{
					width: 64rpx;
					height: 64rpx;
				}
			}
		}
	}
</style>