youngee_b_api/pages/tasksquare/success.vue

<template>
	<view>
		<!-- 胶囊 -->
		<mvBar :mysNavConfig="mysNavConfig"></mvBar>
		<view class="home">
			<view class="card">
				<view class=""
					style="display: flex;justify-content:space-around;width: 80%;margin: 0 auto;margin-top: 20rpx;margin-bottom: 20rpx;align-items: center;">
					<!-- <image src="https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/task21.png" mode=""
						style="width: 112rpx;height: 130rpx;"></image> -->
					<image src="../../static/img/sucess.png" mode=""
						style="width: 150rpx;height: 150rpx;"></image>
					<view class="" style="font-size: 32rpx;">
						<p>已报名成功</p>
						<p>今日报名次数剩余：{{times}}次</p>
						<p>分享任务可获得更多任务~</p>
						<!-- 	<p class='ipon' style='margin-top: 5rpx;'>今日报名次数剩余：4次</p>
					<p class='ipon'>分享任务可申请更多任务</p> -->
					</view>

				</view>
			</view>
			<view class="card" style="margin-top: 6%;">
				<view class="" style="width: 90%;margin: 0 auto;margin-top: 20rpx;margin-bottom: 20rpx;">

					<p class='ipon1' style='margin-top: 5rpx;'>1.任务确认结果可随时在<span
							style="color: deepskyblue;">我的任务</span>中查看 </p>
					<p class='ipon1'> 2.品牌同意合作后我们会再次与您确认合作意向和收货地址，请及时操作，否则资格可能会被取消~ </p>
					<p class='ipon1'>3.请<span style="color: deepskyblue;">订阅</span>我们的通知消息~以防止超时操作的情况~</p>
					<p class='ipon1'> 4.点击右上角添加小程序，能更快找到我们哦~</p>
					<view class="" style="width: 80%;background-color: #C9C9C9;border-radius: 10rpx;">
						<view class="Tasktext">
							<image src="https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/task20.png" mode="">
							</image>
							<span>样叽</span>
							<image src="https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/task16.png"
								style="width: 20rpx;margin-left: 2%; height: 26rpx;" mode=""></image>
						</view>
						<view class=""
							style="border-bottom: 2rpx solid #333333;width: 95%; margin: 0 auto; margin-top: 2%;margin-bottom: 2%;">
						</view>
						<view class=""
							style="display: flex;justify-content:space-around;margin-top: 5%;padding-bottom: 10rpx;">
							<view class="" style="margin: 0 auto;">
								<view class="iimmg" style="margin: 0 auto;">
									<image src="https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/task22.png"
										mode=""></image>
								</view>
								<p class='ppan'>发送给朋友</p>
							</view>

							<view class="" style="margin: 0 auto;">
								<view class="iimmg" style="margin: 0 auto;">
									<image src="https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/task23.png"
										mode=""></image>
								</view>
								<p class='ppan'>添加到我的小程序</p>
							</view>
						</view>
					</view>
				</view>


			</view>
			<view class="" style="width: 100%;height: 180rpx;"> </view>
		</view>
		<view class="signup">
			<view class="signuptext">
				<button type="default" class="but1" @click="dingyue()"> 订阅通知</button>
			</view>

			<view class="signupbut">
				<button type="default" class="but1" @click="mymission()"> 查看任务</button>

			</view>

		</view>

	</view>
</template>

<script>
	import mvBar from "@/components/mys_navBar/mysNavBar";
	export default {
		components: {
			mvBar,
		},
		data() {
			return {
				times: 5,
				mysNavConfig: {
					/* 占位开启  */
					// navPadding: true,
					/* 背景 */
					// bgColor: "#f8f8f8",
					/* 开启单页显示首页图标 */
					isHome: true,
					/* 固定导航  */
					navFixed: true,
					/* 标题 （屏幕中心居中 两边图标中心居中使用slot center1） */
					navTitle: {
						text: "报名成功",
						color: "",
						fontSize: "32rpx", // px upx rpx
						fontWeight: "", // 100 - 700
					},
					btnType: "type2",
					onLeftClick: "/pages/tasksquare/tasksquare",
					/* type2 按钮 */
					type2Config: {
						// 左图标
						leftPath: "/static/img/png2.png",
						// 右图标
						rightPath: "/static/img/png4.png",
						// 圆角
						radius: "40rpx",
					},
					/* 定义右侧图标 */
					// rightIconPath: "/static/s.png",
				},
			};
		},
		methods: {
			// 进入任务列表页面

			mymission() {
				uni.navigateTo({
					url: '/pages/mymission/mymission'
				});
			},
			dingyue() {
				uni.showToast({
					title: '订阅成功',
					duration: 2000
				});
			},
		}
	};
</script>
<style>
	page {
		background-color: #F4F4F4;
	}
</style>
<style lang="scss" scoped>
	.butto {
		text-align: center;
	}

	.option {
		padding: 20rpx;
	}

	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
		;
	}

	.swiper {
		height: 300rpx;
	}

	.swiper-item {
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}

	.info {
		position: absolute;
		right: 20rpx;
	}

	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}

	.card {
		width: 88%;
		padding: 24rpx;
		margin-top: 30rpx;
		border-radius: 10rpx;
		background-color: #ffffff;
		margin: 0 auto;
		box-shadow: 0px 0px 10rpx 2rpx #FFFFFF;
	}

	.ipon {
		color: #333333;
		font-size: 26rpx;
		font-weight: 500;
		margin-bottom: 10rpx;
	}

	.ipon1 {
		color: #333333;
		font-size: 32rpx;
		margin-bottom: 5%;
	}

	.signup {
		box-shadow: 0rpx 5rpx 40rpx #ccc;
		width: 100%;
		position: fixed;
		bottom: 0rpx;
		display: flex;
		height: 90rpx;
		padding-top: 2%;
		background-color: #FFFFFF;
		justify-content: space-around;
	}

	.signuptext {
		text-align: center;
		margin-top: 2%;

	}

	.signuptext p {
		font-size: 60%;
		color: #333333;
	}

	.signupbut {
		text-align: center;
		margin-top: 2%;
	}

	.but1 {
		width: 120%;
		text-align: center;
		background-color: dodgerblue;
		border-radius: 10rpx;
		color: white;
		font-size: 28rpx;
		line-height: 200%;
		justify-content: center;
		font-weight: 500;
		height: 80%;
	}

	.Tasktext {
		// padding-top: 5%;
		padding: 6%;
		// height: 80rpx;
		margin-top: 2%;
	}

	.Tasktext span {
		color: #333333;
		font-size: 60%;
		font-weight: 550;
		text-indent: 2em;

	}

	.Tasktext image {
		vertical-align: middle;
		width: 50rpx;
		height: 50rpx;
		display: inline-block;
		padding-right: 14rpx;
	}

	.iimmg {
		width: 80rpx;
		height: 80rpx;
		background-color: #FFFFFF;
		border-radius: 15%;
	}

	.iimmg image {
		width: 60%;
		height: 60%;
		padding: 20%;
	}

	.ppan {
		font-size: 60%;
		margin-top: 1%;
	}
</style>