shortPlay-mini/pages/task/info/info.vue

<template>
	<view class="p-20">
		<view>
			<view class="top-img flex justify-center items-center">
				<image src="../../../static/uni.png" mode="widthFix"></image>
			</view>
			<view class="information p-20 flex flex-row">
				<image class="img" src="../../../static/uni.png" mode="aspectFit"></image>
				<view class="flex-1 flex flex-col">
					<text class="title">老公的金丝雀怀孕后</text>
					<text>抖音 | CPM</text>
					<text>地球行者品宣部</text>
				</view>
			</view>
			<view class="way-percent flex flex-row">
				<view class="flex-1 flex flex-col justify-center items-center">
					<view class="biger">52</view>
					<view class="smaller">视频数</view>
				</view>
				<view class="flex-1 flex flex-col justify-center items-center">
					<view class="biger">3.22w</view>
					<view class="smaller">播放次数</view>
				</view>
				<view class="flex-1 flex flex-col justify-center items-center">
					<view class="biger">217</view>
					<view class="smaller">获赞数</view>
				</view>
				<view class="flex-1 flex flex-col justify-center items-center">
					<view class="biger">42</view>
					<view class="smaller">评论数</view>
				</view>
			</view>
			<view class="p-30 bg-white introduce">
				<view>任务奖励：根据视频表现持续瓜分现金，先到先得</view>
				<view>总奖金池：<text style="color: red;">1,0000.00</text></view>
				<view>
					<text>奖励已瓜分</text>
					<cmd-progress :percent="16"></cmd-progress>
				</view>
			</view>
			<view class="info">
				<u-tabs style="padding: 20upx 0;" :scrollable="false" :list="tabs" lineColor="#007aff" :activeStyle="{
						color: '#303133',
						fontWeight: 'bold'
					}" :inactiveStyle="{
						color: '#606266',
						transform: 'scale(1)'
					}" itemStyle="height: 34px; padding-bottom: 10upx;" @change="change">
				</u-tabs>
				<view v-if="currentIndex === 0">
					<view class="inside-content">
						<text>链接：https://pan.baidu.com/s/1vqFyozWUCc5NSYdqIqcP2A?pwd=uye7</text>
						<view class="copy-wrap"><text class="copy">复制链接</text></view>
					</view>
				</view>
				
				<view class="imageine" v-else-if="currentIndex === 1">
					暂无信息
				</view>
			</view>
		</view>
		<view class="fix-btn p-20">
			<u-button shape="circle" type="primary">立即领取</u-button>
		</view>

	</view>
</template>

<script>
	import cmdProgress from "@/components/cmd-progress/cmd-progress.vue"
	export default {
		components: {
			cmdProgress
		},
		data() {
			return {
				tabs: [{
					name: '任务玩法'
				}, {
					name: '播放排行'
				}],
				currentIndex: 0,
			}
		},
		created() {

		},
		methods: {
			change(e) {
				this.currentIndex = e.index
			},
			change2(e) {
				this.promotionActive = e.index
			}
		}
	}
</script>

<style lang="scss">
	.top-img {
		height: 300upx;
		overflow: hidden;

		image {
			height: 600upx;
		}
	}

	.fix-btn {
		width: 100vw;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		background-color: #fff;
	}

	.information {
		background-color: #fff;
		border-radius: 20upx;

		.img {
			width: 120upx;
			height: 120upx;
			border-radius: 10upx;
			overflow: hidden;
		}

		.flex-1 {
			padding-left: 20upx;

			.title {
				color: #323333;
				font-size: 28upx;
			}

			text {
				color: #aaa;
				font-size: 23upx;
				padding: 2upx 0;
			}
		}
	}

	.introduce {
		padding: 30upx;
		border-radius: 20upx;
		color: #aaa;
		font-size: 25upx;

		>view {
			padding: 5upx 0;
		}
	}

	.way-percent {
		padding: 30upx 0;
		border-top: 0;

		.biger {
			font-size: 30upx;
			font-weight: bold;
			color: #323333;
		}

		.smaller {
			font-size: 24upx;
			color: #7d8394;
			margin-top: 10upx;
		}
	}

	.info {
		margin-top: 30upx;
	}

	.inside-content {
		font-size: 28upx;
		padding: 30upx;
		color: #666;
		word-break: break-all;
		background-color: #fff;
		border-radius: 20upx;
		margin-top: 20upx;

		.copy-wrap {
			padding-top: 50upx;
		}

		.copy {
			color: $uni-theme;
		}
	}

	.imageine {
		font-size: 28upx;
		padding: 30upx;
		color: #666;
		word-break: break-all;
		border-top: 1upx solid #ebedf0;
	}
</style>