star-uni/pages/task/detail.vue

<template>
	<view>
		<scroll-view scroll-y="true" class="scroll-content" :enhanced="true" :bounces="false" :show-scrollbar="false" @scroll="pageScroll">
			<view class="detail-body">
				<view :class="scrollHeight>20?'cu-bar fixed bg-bluev-head':'cu-bar fixed'" :style="barStyle">
					<view class="action" @tap="BackPage">
						<text class="cuIcon-back"></text>
						<view class="backText">任务详情</view>
					</view>
				</view>
				<view class="detail-banner">
					<image src="https://p9-dy.byteimg.com/obj/ecom-shop-material/jpeg_m_e3fa80e91300b16e0df15e2bcbd8c003_sx_426270_www800-800" mode="widthFix"></image>
				</view>
				<view class="detail-content">
					<view class="bg-title"></view>
					<view class="bg"><image src="/static/task/detail-bg.png" mode="widthFix"></image></view>
					<view class="detail-zindex">
						<view class="detail-title">
							【拍3盒赠1试用】妇炎洁熊果苷凝胶 <br>女性抑菌凝胶养护抑菌保湿滋润-星川任务-20-星川任务-20-星川任务-20-星川任务-20
						</view>
						<view class="detail-platform">
							<view class="platform-item"><image src="/static/image/douyin.svg"></image>抖音</view>
						</view>
						<view class="detail-time">
							<view class="time-item">
								<view class="time-icon"><text class="cuIcon-timefill"></text>活动时间</view>
								<view class="time-text">08.21-08.30</view>
							</view>
							<view class="time-item">
								<view class="time-icon"><text class="cuIcon-group_fill"></text>参与人员</view>
								<view class="time-text">100/200人</view>
							</view>
						</view>
						<view class="user-total">
							<view class="total-item">
								<view class="num">102</view>
								<view class="name">招募名额</view>
							</view>
							<view class="total-item">
								<view class="num">102</view>
								<view class="name">已报名</view>
							</view>
							<view class="total-item">
								<view class="num">102</view>
								<view class="name">售价(元)</view>
							</view>
							<view class="total-item">
								<view class="num">10<text>%</text></view>
								<view class="name">达人佣金</view>
							</view>
						</view>
						
						<view class="detail-info">
							<view class="title">
								<view class="name">
									<text>任务信息</text>
									<image src="https://blue-data.oss-cn-guangzhou.aliyuncs.com/star/tab-active-badge.png"></image>
								</view>
							</view>
							<view class="info-item">
								<view class="left">内容形式</view>
								<view class="val">图文视频</view>
							</view>
							<view class="info-item">
								<view class="left">内容要求</view>
								<view class="val">15～60秒</view>
							</view>
							<view class="info-item">
								<view class="left">内容形式</view>
								<view class="val">分享使用感受，突出产品卖点，点赞达到500+，收藏数达到100+</view>
							</view>
							<view class="info-item">
								<view class="left">发布平台</view>
								<view class="val">小红书</view>
							</view>
							<view class="info-item">
								<view class="left">内容要求</view>
								<view class="val">原创内容，严禁抄袭</view>
							</view>
						</view>
						<view class="detail-info">
							<view class="title">
								<view class="name">
									<text>更多解读</text>
									<image src="https://blue-data.oss-cn-guangzhou.aliyuncs.com/star/tab-active-badge.png"></image>
								</view>
							</view>
							<view class="rich-content">
								
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="detail-footer">
			<view class="collect">
				<view class="icon">
					<image src="/static/task/star.svg"></image>
				</view>
				<view class="name">收藏</view>
			</view>
			<view class="btn">
				<button class="u-button full">立即报名</button>
			</view>
		</view>
	</view>
</template>

<script>
var app;
export default {
	data() {
		return {
			scrollHeight:0,
			StatusBar: this.StatusBar,
			CustomBar: this.CustomBar,
			barStyle:""
		}
	},
	onLoad() {
		app = this;
		var StatusBar= this.StatusBar;
		var CustomBar= this.CustomBar;
		var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
		app.barStyle = style;
	},
	methods: {
		pageScroll(event) {
			var scrollHeight = event.detail.scrollTop;
			app.scrollHeight = scrollHeight;
		},
		BackPage() {
			uni.navigateBack({
				delta: 1
			});
		}
	}
}
</script>

<style>
page{background-color: rgba(245, 245, 245, 1);}

.detail-bar{opacity: 0;}

.detail-footer{position: fixed;bottom: 0;left: 0;right: 0;background-color: #fff;padding: 16rpx 24rpx calc(16rpx + env(safe-area-inset-bottom));box-shadow: 0 -4rpx 24rpx rgba(21, 24, 29, 0.06);box-sizing: border-box;display: flex;align-items: center;gap: 20rpx;z-index: 999}
.detail-footer .collect{display: flex;align-items: center;flex-direction: column;justify-content: center;font-size: 24rpx;color: #000;}
.detail-footer .collect image{width: 50rpx;height: 50rpx;}
.detail-footer .btn{flex: 1;margin-left: 20rpx;}
.detail-footer .u-button{font-size: 32rpx;height: 80rpx;border-radius: 40rpx;line-height: 80rpx;color: #333;border: 2rpx solid rgba(33, 34, 38, 1);background-color: #fff;width: 100%;font-weight: 800;}
.detail-footer .u-button::after{border: 0;}
.detail-footer .u-button.full{background-color: rgba(33, 34, 38, 1);color: #fff;}

.cu-bar.fixed{box-shadow: none;}
.cu-bar .backText{opacity: 0;}
.cu-bar.bg-bluev-head .backText{opacity: 1;}
.detail-banner image{width: 100%;}
.detail-content{position: relative;margin-top: -20rpx;}
.detail-content .bg {position: absolute;top: 0;left: 0;right: 0;}
.detail-content .bg-title {position: absolute;top: 0;left: 0;right: 0;}
.detail-content .bg image{width: 100%;}
.detail-content .bg-title{background-color: #c3ebfb; height: 80rpx;}
.detail-content .detail-zindex{position: relative;z-index: 999;padding: 20rpx;}
.detail-content .detail-title{font-size: 32rpx;color: #000;font-weight: 800;}

.detail-content .detail-info{background-color: #fff;border-radius: 20rpx;padding: 20rpx;margin: 20rpx 0;}
.detail-content .detail-info .info-item{display: flex;align-items: baseline;gap: 20rpx;padding: 10rpx 0;}
.detail-content .detail-info .info-item .left{color: rgba(0, 0, 0, 0.2);font-size: 28rpx;}
.detail-content .detail-info .info-item .val{color: #212226;font-size: 28rpx;flex: 1;}
.detail-content .detail-info .title{display: flex;align-items: center;justify-content: space-between;margin-bottom: 20rpx;}
.detail-content .detail-info .name{font-size: 32rpx;color: #000;font-weight: 800;position: relative;}
.detail-content .detail-info .name text{position: relative;z-index: 999;font-family: "bluevBold";}
.detail-content .detail-info .name image{width: 82rpx;height: 52rpx;position: absolute;right: -20rpx;bottom: 0;z-index: 99;}

.detail-content .detail-time{display: flex;align-items: center;justify-content: space-between;gap: 20rpx;}
.detail-content .detail-time .time-item{display: flex;align-items: center;justify-content: space-between;gap: 20rpx;}
.detail-content .detail-time .time-item .time-icon{color: #212226;font-size: 28rpx;font-weight: 800;display: flex;align-items: center;gap: 10rpx;}
.detail-content .detail-time .time-item .time-icon text{margin-top: 2rpx;}
.detail-content .detail-time .time-item .time-text{color: #8c8c8c;font-size: 28rpx;}


.detail-content .detail-platform{display: flex;align-items: center;margin: 20rpx 0;}
.detail-content .detail-platform .platform-item{display: flex;align-items: center;background-color: #fff;border-radius: 40rpx;font-size: 28rpx;color: #000;padding: 10rpx 30rpx;gap: 10rpx;}
.detail-content .detail-platform .platform-item image{width: 30rpx;height: 30rpx;}

.detail-content .user-total{display: flex;align-items: flex-start;justify-content: space-between;width: 100%;flex-direction: row;margin: 40rpx 0;}
.detail-content .user-total .total-item{min-width: 0%;display: flex;flex-direction: column;align-items: center;justify-content: center;flex: 1;}
.detail-content .user-total .total-item .num{color: #212226;font-size: 36rpx;font-weight: 800;line-height: 1.1;text-align: center;}
.detail-content .user-total .total-item .name{color: rgba(21, 21, 21, 0.45);font-size: 22rpx;line-height: 1.2;text-align: center;margin-top: 10rpx;}
</style>