MoeNovaClient/pages/crowdFunding/crowdfundingDetails.vue

<template>
	<view class="crowdfunding-details">
		<view class="custom-navbar" :style="navBgStyle">
			<view class="navbar-left scale-tap" @click="goBack">
				<image src="@/static/crowdFunding/back.png" mode="widthFix"></image>
			</view>
			<view class="navbar-center one-omit" style="max-width: 70vw; " :style="{ opacity: navBgOpacity }">
				{{ detail.title }}
			</view>
			<view class="navbar-right scale-tap" @click="showShare = true">
				<image src="@/static/crowdFunding/share.png" mode="widthFix"></image>
			</view>
		</view>
		<!-- 顶部视频图片混合轮播 -->
		<view class="swiper-container">
			<swiper class="top-swiper" :indicator-dots="false" circular :current="currentMediaIndex"
				@change="handleSwiperChange" :duration="300">
				<swiper-item v-for="(item, idx) in mediaList" :key="idx" class="swiper-item">
					<view v-if="item.type === 'video'" class="media-wrapper">
						<!-- <DomVideoPlayer style="z-index: -100; position: static;" :src="item.src" :poster="item.poster"
							:id="'video-' + idx" :controls="false" :autoplay="false" :loop="false" :muted="false"
							:objectFit="'contain'" @play="onVideoPlay(idx)" @pause="onVideoPause"
							@ended="onVideoEnded" /> -->
						<DomVideoPlayer :ref="'domVideoPlayer' + idx"
							:src="item.src" autoplay
							loop controls muted  @play="onVideoPlay(idx)" @pause="onVideoPause(idx)"/>
					</view>
					<image v-else class="swiper-img" :src="item.src" mode="aspectFill" />
				</swiper-item>
			</swiper>
			<!-- 自定义指示点 -->
			<view class="custom-dots">
				<view v-for="(item, index) in mediaList" :key="index"
					:class="['dot', currentMediaIndex === index ? 'active' : '']" @click="switchMedia(index)"></view>
			</view>
		</view>

		<view class="content">
			<!-- 项目信息 -->
			<view class="section project-card">
				<view class="project-title">{{ detail.title }}</view>
				<view class="progress-bar-wrap">
					<uv-line-progress height="8rpx" :showText="false"
						:percentage="(detail.current_amount / detail.goal_amount * 100).toFixed(2)"
						inactiveColor="#F0F0F0" activeColor="#ACF934"></uv-line-progress>
					<view class="progress-percent">{{ (detail.current_amount / detail.goal_amount * 100).toFixed(2) +
						'%'
						}}</view>
				</view>
				<view class="project-stats">
					<view class="stat-block">
						<view class="stat-main amountOfMoney">￥{{ detail.current_amount }}</view>
						<view class="stat-sub">{{ detail.supporter_count }}人支持</view>
					</view>
					<view class="stat-block">
						<view class="stat-main">{{ detail.daysRemaining }}天</view>
						<view class="stat-sub">剩余时间</view>
					</view>
					<view class="stat-block">
						<view class="stat-main">￥{{ detail.goal_amount }}</view>
						<view class="stat-sub">众筹目标</view>
					</view>
				</view>
			</view>


			<!-- 项目更新 -->
			<view class="section project-update" v-if="projectUpdate && projectUpdate.numb">
				<view class="project-update-left scale-tap"
					@click="goPage('/pages/crowdFunding/projectUpdateDetails?id=' + projectUpdate.id)">
					<view class="project-update-left-title">
						<view>·第{{ projectUpdate.numb }}次更新</view>
						<view style="color: #999;">{{ projectUpdate.create_time }}</view>
					</view>
					<view class="project-update-left-content">
						<view class="two-omit">{{ projectUpdate.title }}</view>
						<view class="image">
							<image :src="projectUpdate.image" />
						</view>
					</view>
				</view>
				<view class="project-update-right scale-tap"
					@click="goPage('/pages/crowdFunding/discussionArea?tags=update&id=' + projectId)">
					<view>历史更新</view>
					<image src="@/static/crowdFunding/updateDetails.png"></image>

				</view>
			</view>

			<view class="section comment scale-tap"
				@click="goPage('/pages/crowdFunding/discussionArea?tags=comment&id=' + projectId)">
				<view class="comment-title">
					<view>项目讨论({{ totalNumberOfComments }})</view>
					<view class="comment-more">查看更多
						<image src=" @/static/crowdFunding/right.png">
						</image>
					</view>
				</view>
				<view class="comment-content">
					<block v-for="(item, idx) in commentList" :key="idx">
						<view class="comment-item">
							<image class="comment-avatar" :src="item.avatar"></image>
							<view class="comment-item-main">
								<view class="comment-item-content">{{ item.content }}</view>
							</view>
							<view class="comment-item-like">
								<image class="like-icon"
									:src="item.liked ? '/static/icon/icon-18.png' : '/static/icon/icon-19.png'"></image>
								<text class="like-num">{{ item.likeNum }}</text>
							</view>
						</view>
					</block>
				</view>
			</view>

			<!-- 塔罗牌介绍 -->
			<view class="section poster">
				<view class="initiator-bar">
					<image class="initiator-avatar" :src="detail.creator_avatar" />
					<view class="initiator-info">
						<text class="initiator-name">{{ detail.creator_nickname }}</text>
						<div class="initiator-tag" @click="certificationTips()">
							<image src="@/static/crowdFunding/authentication.png" mode="widthFix"></image>
							<div>发起人</div>
						</div>
					</view>
					<view class="initiator-service-btn  blick-btn-animation"
						@click="goPage('/pages/crowdFunding/customerService?id=' + detail.creator_id + '&zc_id=' + detail.id)">
						<image class="service-icon" src="@/static/crowdFunding/service.png" />
						<text>客服</text>
					</view>
				</view>
				<block v-for="(item, idx) in detail.content_images" :key="idx">
					<image class="intro-img" :src="item" mode="widthFix" />
				</block>
			</view>



			<!-- 风险说明 -->
			<view class="section risk-section">
				<view class="risk-row" @click="goWeb('https://e.zhichao.art/web/refund.php', '退款说明')">
					<view class="risk-title">退款政策</view>
					<view class="risk-more  ">查看更多
						<image src="@/static/crowdFunding/right.png" class="risk-more-icon" />
					</view>
				</view>
				<view class="risk-desc">众筹结束前最后1个小时无法申请退款</view>
				<view class="risk-row risk-row-border"
					@click="goWeb('https://e.zhichao.art/web/crowdtips.php', '风险提示')">
					<view class="risk-title">风险提示</view>
					<view class="risk-more  ">查看更多
						<image src="@/static/crowdFunding/right.png" class="risk-more-icon" />
					</view>
				</view>
				<view class="risk-content">
					<view>1. 您参与众筹是支持将创意变为现实的过程，而不是直接的商品交易，因此存在一定风险。请您根据自己的判断选择，支持众筹项目。</view>
					<view>2. 众筹存在于发起人与支持者之间，摩点作为第三方平台，提供网络空间、技术支持等服务。众筹的回报产品和承诺由发起人负责。</view>
				</view>
			</view>
		</view>
		<view class="bottom-bar-reserveASeat"></view>
		<view class="bottom-bar">
			<view class="bottom-bar-left">
				<view class="bar-btn" @click="toggleFavorite">
					<image v-if="isFavorite" src="@/static/crowdFunding/collect-active.png"
						class="scale-tap bar-icon" />
					<image v-else src="@/static/crowdFunding/collect.png" class="scale-tap bar-icon" />
					<view class="bar-text">{{ isFavorite ? '已收藏' : '收藏' }}</view>
				</view>
				<!-- <view class="bar-btn">
					<image v-if="true" src="@/static/crowdFunding/like.png" class=" scale-tap bar-icon" />
					<image v-else src="@/static/crowdFunding/like-active.png" class=" scale-tap bar-icon" />
					<view class="bar-text">看好</view>
				</view> -->
			</view>
			<button class="buy-btn blick-btn-animation" @click="specificationsOpen()">立即购买支持</button>
		</view>
		<image src="@/static/crowdFunding/backToTop.png" class="back-top scale-tap" v-show="navBgOpacity > 0.9"
			@click="scrollToTop"></image>

		<!-- 分享弹窗 -->
		<SharePopup :visible="showShare" :userId="0" :share-title="shareTitle" :share-desc="shareDesc"
			:share-img="shareImg" view="crowdfundingDetails" :link="shareLink" @close="showShare = false"
			:isReportContent="true" />

		<productSpecifications ref="specSheet" :rewards="rewards" :title="detail.title" @confirm="onSpecConfirm" />

	</view>
</template>

<script>
import VideoPlayer from "@/components/VideoPlayer/VideoPlayer.vue";
import SharePopup from "@/components/SharePopup/SharePopup.vue";
import productSpecifications from "./components/productSpecifications/productSpecifications.vue";
import DomVideoPlayer from "@/components/DomVideoPlayer/DomVideoPlayer.vue";
export default {
	components: {
		VideoPlayer,
		SharePopup,
		productSpecifications,
		DomVideoPlayer
	},
	data() {
		return {
			mediaList: [],
			videoPlaying: false,
			currentMediaIndex: 0,
			commentList: [
			],
			navBgOpacity: 0,
			swiperHeight: 0,
			showShare: false,
			shareTitle: '',
			shareDesc: '',
			shareImg: '',
			shareLink: "https://e.zhichao.art/site/#/mobile-download",
			userId: 0, // 可根据实际登录用户赋值
			isFavorite: false, // 是否已收藏
			projectId: null, // 当前项目id
			detail: {}, // 众筹详情
			projectUpdate: '',
			rewards: [],
			totalNumberOfComments: 0
		}
	},
	computed: {
		navBgStyle() {
			return {
				background: `rgba(255,255,255,${this.navBgOpacity})`,
				transition: 'background 0.3s'
			}
		}
	},
	methods: {
		// 返回上一页
		goBack() {
			uni.navigateBack({
				delta: 1,
			});
		},
		scrollToTop() {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 300
			});
		},
		switchMedia(index) {
			if (this.currentMediaIndex === index) return;

			// 如果当前在播放视频，先暂停
			if (this.mediaList[this.currentMediaIndex]?.type === 'video') {
				const videoContext = uni.createVideoContext('video-' + this.currentMediaIndex, this);
				if (videoContext) {
					videoContext.pause();
				}
			}

			this.currentMediaIndex = index;
		},
		handleSwiperChange(e) {
			const lastIndex = this.currentMediaIndex;
			this.currentMediaIndex = e.detail.current;

			// 如果上一个是视频，暂停它
			if (this.mediaList[lastIndex]?.type === 'video') {
				const videoContext = uni.createVideoContext('video-' + lastIndex, this);
				if (videoContext) {
					videoContext.pause();
					this.videoPlaying = false;
				}
			}
		},
		onVideoPlay(idx) {
			// 更新当前播放的视频索引
			this.$refs['domVideoPlayer' + idx].play();
		},
		onVideoPause(idx) {
			this.$refs['domVideoPlayer' + idx].pause();
		},
		onVideoEnded() {
			this.videoPlaying = false;
		},
		goPage(url) {
			uni.navigateTo({
				url: url
			});
		},
		onSpecConfirm(selectedSpec) {
			uni.navigateTo({
				url: '/pages/crowdFunding/orderConfirm',
				success: function (res) {
					// 通过 eventChannel 向被打开页面传送数据
					res.eventChannel.emit('acceptDataFromOpener', { selectedSpec: selectedSpec, detail: this.detail });
				}.bind(this)
			});
		},
		specificationsOpen() {
			this.$refs.specSheet.show();
		},
		toggleFavorite() {
			if (!this.projectId) {

				return;
			}
			const action = this.isFavorite ? 'remove' : 'add';
			uni.request({
				url: this.$apiHost + '/crowdfund/favorite',
				method: 'POST',
				header: {
					"content-type": "application/x-www-form-urlencoded",
				},
				data: {
					uuid: getApp().globalData.uuid,
					skey: getApp().globalData.skey,
					crowdfund_id: this.projectId,
					action
				},
				success: (res) => {
					console.log(res.data, "收藏");

					if (res.data && res.data.success && res.data.success == 'yes') {
						this.isFavorite = !this.isFavorite;
						uni.showToast({ title: this.isFavorite ? '已收藏' : '已取消收藏', icon: 'none' });
					} else {
						uni.showToast({ title: res.data.msg || '操作失败', icon: 'none' });
					}
				},
				fail: () => {
					uni.showToast({ title: '网络错误', icon: 'none' });
				}
			});

		},
		getDetail() {
			if (!this.projectId) return;
			uni.request({
				url: this.$apiHost + '/crowdfund/detail',
				method: 'GET',
				data: {
					id: this.projectId,
					uuid: getApp().globalData.uuid,
					skey: getApp().globalData.skey

				},
				success: (res) => {
					if (res.data && res.data.success === 'yes' && res.data.data) {
						this.processingDataDetails(res.data.data);
						// 可根据接口返回字段设置isFavorite等
					}
				}
			});
			uni.request({
				url: this.$apiHost + '/crowdfund/favorite/status',
				method: 'GET',
				data: {
					crowdfund_id: this.projectId,
					uuid: getApp().globalData.uuid,
					skey: getApp().globalData.skey
				},
				success: (res) => {
					if (res.data && res.data.success === 'yes' && res.data.data) {
						console.log(res.data.data, "收藏");
						this.isFavorite = res.data.data.is_favorited;
						// 可根据接口返回字段设置isFavorite等
					}
				}
			});
			uni.request({
				url: this.$apiHost + '/crowdfund/articles',
				method: 'GET',
				data: {
					crowdfund_id: this.projectId,
					page: 1,
					pageSize: 1,
					uuid: getApp().globalData.uuid,
					skey: getApp().globalData.skey
				},
				success: (res) => {
					if (res.data && res.data.success === 'yes' && res.data.data) {
						if (Array.isArray(res.data.data.list)) {
							this.projectUpdate = res.data.data.list[0]
							this.projectUpdate.create_time = this.projectUpdate.create_time.replace(/-/g, '.').slice(0, 16)
							console.log(this.projectUpdate, 8888);

						}
					}
				}
			});
			uni.request({
				url: this.$apiHost + '/Article/getcomments',
				data: {
					uuid: getApp().globalData.uuid,
					type: 'crowdfund',
					id: this.projectId,
					page: 1,
					limit: 2,
				},
				header: {
					"content-type": "application/json",
					'sign': getApp().globalData.headerSign
				},
				success: (res) => {
					console.log("评论列表:", res.data);
					if (res.data.success == "yes") {
						this.totalNumberOfComments = res.data.total
						// 确保数据存在且是数组，然后只取前两条
						this.commentList = (res.data.list || []).slice(0, 2).map(item => ({
							avatar: item.user_avatar || '',
							content: item.user_content || '',
							likeNum: item.like_count || 0,
							liked: item.is_like || false
						}));

					} else {
						// 如果请求失败，使用默认空数组
						this.commentList = [];
						uni.showToast({
							title: '获取评论列表失败',
							icon: 'none'
						});
					}
				},
				fail: (e) => {
					console.log("----e:", e);
					// 请求失败时使用默认空数组
					this.commentList = [];
				}
			});

		},
		goWeb(url, title) {
			uni.navigateTo({
				url: `/pages/webview/index?url=${encodeURIComponent(url)}&title=${encodeURIComponent(title)}`
			})
		},
		processingDataDetails(data) {

			this.detail = data;
			// 确保 image_list 始终是一个数组
			data.image_list = data.image_list || [];

			const videoItem = data.video_url ? [{
				type: 'video',
				poster: data.main_image,
				src: data.video_url,
			}] : [];

			const imageItems = data.image_list.map(v => ({
				type: 'image',
				src: v
			}));

			// 计算剩余天数
			if (data.start_time && data.end_time) {
				const startDate = new Date(data.start_time.replace(/-/g, '/'));
				const endDate = new Date(data.end_time.replace(/-/g, '/'));
				const now = new Date();

				// 如果当前时间在开始时间之前，显示总天数
				if (now < startDate) {
					this.detail.daysRemaining = Math.ceil((endDate - startDate) / (1000 * 60 * 60 * 24));
				}
				// 如果当前时间在结束时间之后，显示0天
				else if (now > endDate) {
					this.detail.daysRemaining = 0;
				}
				// 如果当前时间在开始和结束时间之间，显示剩余天数
				else {
					this.detail.daysRemaining = Math.ceil((endDate - now) / (1000 * 60 * 60 * 24));
				}
			} else {
				this.detail.daysRemaining = 0;
			}
			// 计算进度
			this.detail.progress = (data.current_amount / data.goal_amount * 100).toFixed(2)
			console.log(this.detail.progress, "进度");

			if (Number.isNaN) this.detail.progress = 0
			this.mediaList = [...videoItem, ...imageItems];

			this.rewards = data.rewards

			this.shareTitle = data.title;
			this.shareDesc = data.description;
			this.shareImg = data.image_list[0];

			console.log("回报数据", this.rewards);
			console.log("顶部轮播数据", this.mediaList, "mediaList");
			console.log("详情", this.detail, "detail");
		},
		certificationTips() {
			uni.showToast({
				title: '官方已实名认证',
				icon: 'none'
			});
		}
	},
	mounted() {
		this.$nextTick(() => {
			// 动态获取轮播图高度
			uni.createSelectorQuery().in(this).select('.top-swiper').boundingClientRect(rect => {
				if (rect) {
					this.swiperHeight = rect.height;
				}
			}).exec();
		});
	},
	onPageScroll(e) {
		const threshold = this.swiperHeight || uni.upx2px(400); // 优先用实际高度
		let opacity = 0;
		if (e.scrollTop > 0) {
			opacity = Math.min(e.scrollTop / threshold, 1);
		}
		this.navBgOpacity = opacity;
	},
	onLoad(options) {
		// 获取id
		this.projectId = options.id || null;
		this.getDetail();
	},
	onShow() {
		this.getDetail();
	},

}
</script>


<style lang="scss" scoped>
.crowdfunding-details {

	/* 自定义导航栏样式 */
	.custom-navbar {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: calc(90rpx + var(--status-bar-height));
		padding: 0 20rpx;
		position: fixed;
		top: 0;
		z-index: 100;
		padding: 12rpx 24rpx;
		padding-top: calc(var(--status-bar-height) + 12rpx);
		background: transparent;
		transition: background 0.3s;

		image {
			width: 64rpx;
			height: 64rpx;
		}
	}

	.swiper-container {
		position: relative;
		width: 100vw;
		height: 100vw;
		background: #000;

		.top-swiper {
			width: 100%;
			height: 100%;

			.swiper-item {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.media-wrapper {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #000;
			}

			.swiper-video {
				width: 100%;
				height: 100%;
			}

			.swiper-img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		.custom-dots {
			position: absolute;
			bottom: 20rpx;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			gap: 16rpx;

			.dot {
				width: 12rpx;
				height: 12rpx;
				border-radius: 50%;
				background: rgba(255, 255, 255, 0.5);
				transition: all 0.3s;

				&.active {
					width: 24rpx;
					border-radius: 6rpx;
					background: #fff;
				}
			}
		}
	}

	.content {
		background: #f2f6f2;
		padding: 20rpx;

		.section {
			background: #fff;
			border-radius: 12rpx;
			padding: 16rpx;
			padding-bottom: 20rpx;
			margin: 12rpx 0;

			.section-title {
				font-size: 28rpx;
				font-family: 'PingFang SC-Medium';
				margin-bottom: 6rpx;
			}

			.section-content {
				color: #333;
				font-size: 24rpx;
				line-height: 1.8;
			}

			.intro-img {
				width: 100%;
				margin: 0;
				padding: 0;
				margin-bottom: -10rpx;
			}
		}

		.project-card {
			padding-bottom: 15rpx;

			.project-title {
				font-size: 36rpx;
				color: 1f1f1f;
				font-family: "PingFang SC-Bold";
				font-weight: 400;
			}

			.progress-bar-wrap {
				display: flex;
				align-items: center;
				font-size: 20rpx;
				color: #1F1F1F;
				padding-top: 30rpx;
				padding-bottom: 14rpx;

				.progress-percent {
					padding-left: 12rpx;
				}
			}

			.project-stats {
				display: flex;
				justify-content: space-between;
				padding-top: 0;

				.stat-block {
					display: flex;
					flex-direction: column;
					align-items: center;
					text-align: center;
					justify-content: center;
					color: #1F1F1F;

					&:first-child {
						align-items: flex-start;
					}

					&:last-child {
						display: flex;
						flex-direction: column;
						align-items: center;
						text-align: center;
						justify-content: center;
						color: #1F1F1F;

						&:first-child {
							align-items: flex-start;
						}

						&:last-child {
							align-items: flex-end;
						}

						.stat-main {
							font-size: 28rpx;

							&.amountOfMoney {
								font-size: 32rpx;
								font-family: "PingFang SC-Bold";
							}
						}

						.stat-sub {
							font-size: 20rpx;
						}
					}
				}
			}
		}

		.project-update {
			background: transparent;
			height: 166rpx;
			display: flex;
			width: 100%;
			justify-content: space-between;
			padding: 0;

			>view {
				border-radius: 12rpx;
				background: #fff;
				flex-shrink: 0;
			}

			.project-update-left {
				width: 590rpx;
				height: 100%;
				padding: 16rpx;

				.project-update-left-title {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 22rpx;
				}

				.project-update-left-content {
					display: flex;
					align-items: center;
					margin-top: 8rpx;

					>view {
						font-size: 24rpx;
						font-weight: 400;
						font-family: "PingFang SC-Bold";
					}

					.image {
						width: 180rpx;
						height: 78rpx;
						overflow: hidden;
						margin-left: 26rpx;
						border-radius: 8rpx;

						image {
							overflow: hidden;
							width: 100%;
						}
					}
				}

			}

			.project-update-right {
				width: 108rpx;
				height: 100%;
				font-size: 22rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;

				image {
					margin-top: 12rpx;
					width: 28rpx;
					height: 28rpx;
				}
			}
		}

		.poster {
			padding: 0;
			padding-top: 16rpx;
		}
	}

	.comment {
		border-radius: 12rpx;
		background: #fff;
		margin-top: 24rpx;
		padding: 0 0 16rpx 0;

		.comment-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 26rpx;
			color: #333;
			padding: 18rpx 20rpx 0 20rpx;

			.comment-more {
				color: #999;
				font-size: 22rpx;
				display: flex;
				align-items: center;

				image {
					width: 20rpx;
					height: 20rpx;
					margin-left: 4rpx;
				}
			}
		}

		.comment-content {
			padding: 0 20rpx;

			.comment-item {
				display: flex;
				//align-items: flex-start;
				align-items: center;
				padding: 18rpx 0 0 0;
				border-bottom: 1rpx solid #f5f5f5;

				&:last-child {
					border-bottom: none;
				}

				.comment-avatar {
					width: 48rpx;
					height: 48rpx;
					border-radius: 50%;
					margin-right: 16rpx;
					flex-shrink: 0;
				}

				.comment-item-main {
					flex: 1;
					display: flex;
					flex-direction: column;

					.comment-item-content {
						color: #1f1f1f;
						font-size: 24rpx;
						line-height: 1.7;
						margin-bottom: 8rpx;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						overflow: hidden;
						text-overflow: ellipsis;
						word-break: break-all;
					}
				}

				.comment-item-like {
					display: flex;
					align-items: center;
					margin-left: 36rpx;

					.like-icon {
						width: 28rpx;
						height: 28rpx;
						margin-right: 4rpx;
					}

					.like-num {
						font-size: 22rpx;
						color: #888;
					}
				}
			}
		}
	}

	.bottom-bar-reserveASeat {
		width: 100%;
		height: calc(12rpx + 88rpx + var(--window-bottom) + 30rpx);
	}

	.bottom-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #fff;
		padding: 14rpx 40rpx;
		padding-bottom: calc(14rpx + var(--window-bottom));
		box-sizing: border-box;

		.bottom-bar-left {
			display: flex;
			align-items: center;
			gap: 32rpx;

			.bar-btn {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 80rpx;
				height: 80rpx;
				border-radius: 12rpx;

				.bar-icon {
					width: 48rpx;
					height: 48rpx;
					margin-bottom: 4rpx;
				}

				.bar-text {
					font-size: 20rpx;
					color: #1f1f1f;
					font-family: "PingFang SC";
				}
			}
		}


		.buy-btn {
			width: 588rpx;
			height: 88rpx;
			background: #1f1f1f;
			color: #ACF934;
			font-size: 32rpx;
			border-radius: 80rpx;
			border: none;
			font-weight: bold;
			text-align: center;
			line-height: 80rpx;
			margin-left: 24rpx;
		}

	}
}

.back-top {
	position: fixed;
	bottom: calc(126rpx + var(--window-bottom));
	right: 16rpx;
	width: 82rpx;
	height: 82rpx;
}

.initiator-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #fff;
	border-radius: 10rpx;
	padding: 18rpx 24rpx 18rpx 18rpx;
	margin: 0;

	.initiator-avatar {
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
		margin-right: 18rpx;
		flex-shrink: 0;
	}

	.initiator-info {
		display: flex;
		align-items: center;
		flex: 1;
		min-width: 0;
	}

	.initiator-name {
		font-size: 30rpx;
		color: #222;
		font-weight: bold;
		margin-right: 12rpx;
		max-width: 260rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.initiator-tag {
		background: #1a1a1a;
		color: #b6ff4b;
		font-size: 20rpx;
		border-radius: 8rpx;
		padding: 2rpx 12rpx;
		margin-left: 2rpx;
		display: inline-flex;
		align-items: center;

		image {
			width: 28rpx;
			height: 28rpx;
		}
	}

	.initiator-service-btn {
		display: flex;
		align-items: center;
		background: #1a1a1a;
		color: #b6ff4b;
		font-size: 28rpx;
		border-radius: 128rpx;
		padding: 0 24rpx 0 12rpx;
		height: 56rpx;
		margin-left: 18rpx;
		font-weight: bold;
	}

	.service-icon {
		width: 32rpx;
		height: 32rpx;
		margin-right: 8rpx;
	}
}

.scale-tap {
	transition: transform 0.15s;
}

.scale-tap:active {
	transform: scale(0.92);
}

.risk-section {
	background: #fff;
	border-radius: 12rpx;
	margin: 24rpx 0 0 0;
	padding: 0 0 18rpx 0;
	position: relative;
	overflow: hidden;

	.risk-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 18rpx 24rpx 0 0rpx;
		font-size: 28rpx;
		color: #1f1f1f;
		background: #fff;

		&.risk-row-border {
			border-top: 1rpx solid #f2f2f2;
			margin-top: 18rpx;
			padding-top: 18rpx;
		}
	}

	.risk-title {
		font-size: 28rpx;
		color: #1f1f1f;
		font-family: 'PingFang SC-Bold';
		font-weight: 400;

	}

	.risk-more {
		color: #1f1f1f;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		font-weight: 400;
		font-family: 'PingFang SC-Bold';

		.risk-more-icon {
			width: 24rpx;
			height: 24rpx;
			margin-left: 4rpx;
			margin-top: 4rpx;
		}
	}

	.risk-desc {
		font-size: 24rpx;
		color: #999;
		padding: 8rpx 24rpx 0 0;
		font-family: 'PingFang SC-Regular';
	}

	.risk-content {
		font-size: 24rpx;
		color: #999;
		padding: 12rpx 24rpx 0 0;
		font-family: 'PingFang SC-Regular';
		line-height: 1.7;

		>view {
			margin-bottom: 6rpx;
		}
	}
}
</style>