youngee_b_api/pages/workspace/workspace.vue

<template>
	<view>
		<!-- 胶囊 -->
		<mvBar :mysNavConfig="mysNavConfig"></mvBar>
		<view :style="{paddingTop:navH}" style="background-color: #fff;"></view>
		<view class="menu-head">
			<view class="menu" style="padding-bottom: 10rpx;">
				<view class="menu-item" @click="toShowSec()">
					<view class="menu-item-p">
						<p v-bind:class="showSec?'lor':'unlor'">带货</p>
					</view>
					<!-- <span class="point" v-if="showPoint2" key="1"></span> -->
				</view>
				<view class="menu-item" @click="toShowTask()">
					<view class="menu-item-p">
						<p v-bind:class="showTask?'lor':'unlor'">种草</p>
					</view>
					<!-- <span class="point" v-if="showPoint1" key="0"></span> -->
				</view>
			</view>
			<!-- 种草子选项 -->
			<view class="menu" v-if="showTask">

				<view class="menu-item" @click="toShow(index)" v-for="(item,index) in taskTabList">
					<view class="menu-item-p">
						<p v-bind:class="showList[index]?'lor':'unlor'">{{item}}</p>
					</view>
					<span class="point" v-if="showPoint[index]" :key="index"></span>
				</view>
			</view>
			<!-- 带货子选项 -->
			<view class="menu" v-if="showSec">
				<view class="menu-item" @click="toShow(4)">
					<view class="menu-item-p">
						<p v-bind:class="showList[4]?'lor':'unlor'">已报名</p>
					</view>
					<span class="point" v-if="reward_stage_highlight==1" key="0"></span>
				</view>
				<view class="menu-item" @click="toShow(5)">
					<view class="menu-item-p">
						<p v-bind:class="showList[5]?'lor':'unlor'">待领悬赏</p>
					</view>
					<span class="point"  v-if="reward_stage_highlight==1" key="1"></span>
				</view>
			</view>
		</view>

		<view class="home" v-if="showList[0] && !loading">
			<view class="task" v-for="item in taskLists[0]" @click="toTaskDetail(item)">
				<view class="task-card">
					<view class="task-head">
						<view class="task-head-account">
							<image class="platform-img" :src="item.platform_icon_url"></image>
							<p>{{item.platform_nick_name}}</p>
						</view>
						<view class="task-head-status">
							<p>{{item.task_stage_txt}}</p>
						</view>
					</view>
					<view class="task-info">
						<view class="task-info-left">
							<image class="project-img" :src="item.product_img_url"></image>
							<view class="task-info-txt">
								<p style="color: #000;font-size: 32rpx;">{{item.project_name}}</p>
								<p style="color: #F0D232;" v-if="!item.time_out">上传截止时间：{{item.upload_ddl}}</p>
								<p style="color: #f70c0c;" v-else>超时：{{item.upload_ddl}}</p>
								<p>预计违约扣款金额：￥{{item.show_cut_payment}}</p>
								<p>预计收益：￥{{item.show_task_reward}}</p>
							</view>
						</view>
						<view class="task-info-right" v-if="item.isShowModify">
							<image src="../../static/img/icon-edit.png" style="height: 60rpx;width: 60rpx;"></image>
							<p style="font-size: 32rpx;color: #ffcb41;font-weight: 600">改</p>
						</view>
					</view>
					<view style="text-align: right;" v-if="item.task_stage > 6">
						<p style="display: inline-block;">实际收益：￥{{item.show_real_reward}}</p>
					</view>
				</view>
			</view>
		</view>

		<view class="home" v-if="showList[1] && !loading">
			<view class="task" v-for="item in taskLists[1]" @click="toTaskDetail(item)">
				<view class="task-card">
					<view class="task-head">
						<view class="task-head-account">
							<image class="platform-img" :src="item.platform_icon_url"></image>
							<p>{{item.platform_nick_name}}</p>
						</view>
						<view class="task-head-status">
							<p>{{item.task_stage_txt}}</p>
						</view>
					</view>
					<view class="task-info">
						<view class="task-info-left">
							<image class="project-img" :src="item.product_img_url"></image>
							<view class="task-info-txt">
								<p style="color: #000;font-size: 32rpx;">{{item.project_name}}</p>
								<p style="color: #F0D232;" v-if="!item.time_out">上传截止时间：{{item.upload_ddl}}</p>
								<p style="color: #f70c0c;" v-else>超时：{{item.upload_ddl}}</p>
								<p>预计违约扣款金额：￥{{item.show_cut_payment}}</p>
								<p>预计收益：￥{{item.show_task_reward}}</p>
							</view>
						</view>
						<view class="task-info-right" v-if="item.isShowModify">
							<image src="../../static/img/icon-edit.png" style="height: 60rpx;width: 60rpx;"></image>
							<p style="font-size: 32rpx;color: #ffcb41;font-weight: 600">改</p>
						</view>
					</view>
					<view style="text-align: right;" v-if="item.task_stage > 6">
						<p style="display: inline-block;">实际收益：￥{{item.show_real_reward}}</p>
					</view>
				</view>
			</view>
		</view>

		<view class="home" v-if="showList[2] && !loading">
			<view class="task" v-for="item in taskLists[2]" @click="toTaskDetail(item)">
				<view class="task-card">
					<view class="task-head">
						<view class="task-head-account">
							<image class="platform-img" :src="item.platform_icon_url"></image>
							<p>{{item.platform_nick_name}}</p>
						</view>
						<view class="task-head-status">
							<p>{{item.task_stage_txt}}</p>
						</view>
					</view>
					<view class="task-info">
						<view class="task-info-left">
							<image class="project-img" :src="item.product_img_url"></image>
							<view class="task-info-txt">
								<p style="color: #000;font-size: 32rpx;">{{item.project_name}}</p>
								<p style="color: #F0D232;" v-if="!item.time_out">上传截止时间：{{item.upload_ddl}}</p>
								<p style="color: #f70c0c;" v-else>超时：{{item.upload_ddl}}</p>
								<p>预计违约扣款金额：￥{{item.show_cut_payment}}</p>
								<p>预计收益：￥{{item.show_task_reward}}</p>
							</view>
						</view>
						<view class="task-info-right" v-if="item.isShowModify">
							<image src="../../static/img/icon-edit.png" style="height: 60rpx;width: 60rpx;"></image>
							<p style="font-size: 32rpx;color: #ffcb41;font-weight: 600">改</p>
						</view>
					</view>
					<view style="text-align: right;" v-if="item.task_stage > 6">
						<p style="display: inline-block;">实际收益：￥{{item.show_real_reward}}</p>
					</view>
				</view>
			</view>
		</view>

		<view class="home" v-if="showList[3] && !loading">
			<view class="task" v-for="item in taskLists[3]" @click="toTaskDetail(item)">
				<view class="task-card">
					<view class="task-head">
						<view class="task-head-account">
							<image class="platform-img" :src="item.platform_icon_url"></image>
							<p>{{item.platform_nick_name}}</p>
						</view>
						<view class="task-head-status">
							<p>{{item.task_stage_txt}}</p>
						</view>
					</view>
					<view class="task-info">
						<view class="task-info-left">
							<image class="project-img" :src="item.product_img_url"></image>
							<view class="task-info-txt">
								<p style="color: #000;font-size: 32rpx;">{{item.project_name}}</p>
								<p style="color: #F0D232;" v-if="!item.time_out">上传截止时间：{{item.upload_ddl}}</p>
								<p style="color: #f70c0c;" v-else>超时：{{item.upload_ddl}}</p>
								<p v-if="item.fee_form != 1">预计违约扣款金额：￥{{item.show_cut_payment}}</p>
								<p>预计收益：￥{{item.show_task_reward}}</p>
							</view>
						</view>
						<view class="task-info-right" v-if="item.isShowModify">
							<image src="../../static/img/icon-edit.png" style="height: 60rpx;width: 60rpx;"></image>
							<p style="font-size: 32rpx;color: #ffcb41;font-weight: 600">改</p>
						</view>
					</view>
					<view style="text-align: right;" v-if="item.task_stage > 6">
						<p style="display: inline-block;">实际收益：￥{{item.show_real_reward}}</p>
					</view>
				</view>
			</view>
		</view>
			<!-- 已报名 -->
		<view class="home" v-if="showList[4] && !loading">
			<view class="task" v-for="item in taskLists[4]" @click="toSecTaskDetail(item)">
				<view class="task-card">
					<view class="task-info">
						<!-- 左侧图片和文字 -->
						<view class="task-info-left">
							<!-- 图片 -->
							<image class="project-img" :src="item.product_img_url"></image>
							<image v-if="item.isFinished" class="overlay-img"
								src="https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/home4.png"></image>
							<!-- 描述 -->
							<view class="task-info-txt">
								<view class="Tasktext">
									<image class="platform-img" :src="item.PlatformInfo.platform_icon"></image>
									<span>
										{{item.SelectionInfo.selection_name}}
									</span>
								</view>
								<p style="color: #ffcb41 ;">任务截至时间:{{item.ddl}}</p>
								<p>售价：￥{{item.price}} 佣金率：{{item.exclusive_commission}}%</p>
								<!-- sectask表有已经有 -->
								<p>全部销售量/有效销售量：{{item.sale_num_all}}单/{{item.sale_actual}}单</p>
								<p v-if="item.task_mode==1">悬赏金额/悬赏有效销售量：
									￥{{item.RewardStrategy[0].per_reward}}/{{item.RewardStrategy[0].sale_actual}}单</p>
								<p v-if="item.sample_mode==1">免费领样状态：{{ getFreeStageText(item.free_stage) }}</p>
							</view>
						</view>
						<!-- 右侧图标 -->
						<view class="task-info-right">
							<image
								src="https://horastar.obs.cn-east-3.myhuaweicloud.com/talent_upload/icon-arrow-right.png"
								style="height: 30rpx;width: 30rpx;"></image>
						</view>
					</view>
					<view class="container">
						<p class="left-text" v-if="item.reward_stage == 1">
							<span style="color: red;">待领悬赏</span>
						</p>
					
						<!-- 当 item.reward_stage 为 2 时，显示 "已领悬赏" 并设置文字颜色为绿色 -->
						<p class="left-text" v-else-if="item.reward_stage == 2">
							<span style="color: green;">已领悬赏</span>
						</p>
						<p class="right-text" v-if="item.reward_stage==2">实际收益：<span
								style="color: red;">￥{{item.RewardStrategy[0].per_reward}}</span></p>
					</view>
				</view>
			</view>
		</view>
		<!-- 待领悬赏 -->
		<view class="home" v-if="showList[5] && !loading">
			<view class="task" v-for="item in taskLists[5]" @click="toSecTaskDetail(item)">
				<view class="task-card">
					<view class="task-info">
						<!-- 左侧图片和文字 -->
						<view class="task-info-left">
							<!-- 图片 -->
							<image class="project-img" :src="item.product_img_url"></image>
							<image v-if="item.isFinished" class="overlay-img"
								src="https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/home4.png"></image>
							<!-- 描述 -->
							<view class="task-info-txt">
								<view class="Tasktext">
									<image class="platform-img" :src="item.PlatformInfo.platform_icon"></image>
									<span>
										{{item.SelectionInfo.selection_name}}
									</span>
								</view>
								<p style="color: #ffcb41 ;">任务截至时间:{{item.ddl}}</p>
								<p>售价：￥{{item.price}} 佣金率：{{item.exclusive_commission}}%</p>
								<!-- sectask表有已经有 -->
								<p>全部销售量/有效销售量：{{item.sale_num_all}}单/{{item.sale_actual}}单</p>
								<p v-if="item.task_mode==1">悬赏金额/悬赏有效销售量：
									￥{{item.RewardStrategy[0].per_reward}}/{{item.RewardStrategy[0].sale_actual}}单</p>
								<p v-if="item.sample_mode==1">免费领样状态：{{ getFreeStageText(item.free_stage) }}</p>
							</view>
						</view>
						<!-- 右侧图标 -->
						<view class="task-info-right">
							<image
								src="https://horastar.obs.cn-east-3.myhuaweicloud.com/talent_upload/icon-arrow-right.png"
								style="height: 30rpx;width: 30rpx;"></image>
						</view>
					</view>
					<view class="container">
						<p class="left-text" v-if="item.reward_stage == 1">
							<span style="color: red;">待领悬赏</span>
						</p>
					
						<!-- 当 item.reward_stage 为 2 时，显示 "已领悬赏" 并设置文字颜色为绿色 -->
						<p class="left-text" v-else-if="item.reward_stage == 2">
							<span style="color: green;">已领悬赏</span>
						</p>
						<p class="right-text" v-if="item.reward_stage==2">实际收益：<span
								style="color: red;">￥{{item.RewardStrategy[0].per_reward}}</span></p>
					</view>
				</view>
			</view>
		</view>

		<view style="height: 100rpx;"></view>
	</view>
</template>

<script>
	import mvBar from "@/components/mys_navBar/mysNavBar";
	import {
		fansview,
		money,
		getDaysAndHoursBetweenDates,
	} from '@/components/utils.js';
	export default {
		components: {
			mvBar,
		},
		data() {
			return {
				navH: getApp().globalData.navHeight,
				loading: true,
				showPoint: [false, false, false, false, false, false],
				showTask: false,
				showSec: true,
				showList: [
					false, false, false, false, true, false
				],
				taskLists: [
					[],
					[],
					[],
					[],
					[]
				],
				reward_stage_highlight: 0,
				taskTabList: [
					"待传脚本",
					"待传初稿",
					"待传链接",
					"待传数据"
				],
				secTaskTabList: [
					"待传作业"
				],
				secTaskTabList1: [
					"已报名",
					"待领悬赏"
				],
				lastCallTime: null,
				taskStageList: [],
				secTaskStageList: [],
				mysNavConfig: {
					/* 开启单页显示首页图标 */
					isHome: true,
					/* 固定导航  */
					navFixed: true,
					/* 标题 （屏幕中心居中 两边图标中心居中使用slot center1） */
					navTitle: {
						text: "工作台",
						color: "",
						fontSize: "32rpx", // px upx rpx
						fontWeight: "normal", // 100 - 700
					},
				},
				list: [{
					account: {
						platform: "https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/lQLPDhrXwll1_MsjI7CSK_6e62AG2AGOvh1HgAcA_35_35.png",
						nickname: "丸子在成都",
					},
					status: "待确认",
					mainphoto: "https://static1.paizi.com/uploadfile/2018/1013/20181013013207465.png",
					taskname: "醉码头火锅太古里店",
				}, {
					account: {
						platform: "https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/pingtai2.png",
						nickname: "成都的一颗丸子",
					},
					status: "待确认",
					mainphoto: "https://tse1-mm.cn.bing.net/th/id/R-C.978cb3a3b27875a0cc9d78a254b30b8f?rik=yrP2kNCtfQYEgQ&riu=http%3a%2f%2fnews.southcn.com%2fgd%2fcontent%2fimages%2fattachement%2fpng%2fsite4%2f20190917%2feca86b61fd551eeb23c507.png&ehk=xuWbgLrNmyhNJaByMZPJrX81PrzXrLHqHM%2fdYatFhrs%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1",
					taskname: "奥运吉祥物冰墩墩盲盒",
				}],
			}
		},
		async onShow() {
			this.token = uni.getStorageSync('token')
			await this.$https.get('/youngee/c/t/g/is-login')
				.then(res => {
					if (res.data.code == 403) {
						this.token = ""
						uni.clearStorage();
					}
				});
			if (this.token === '') {
				uni.showModal({
					content: '请先登录',
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/login/login'
							});
						} else if (res.cancel) {
							uni.switchTab({
								url: '/pages/tasksquare/tasksquare'
							});
						}
					}
				});
			}

			let curTab = 0
			this.showList.forEach(async function(item, index) {
				if (item === true) {
					curTab = index
				}
			});
			await this.getInfoList()

			if (parseInt(curTab) < 4) {
				this.getTaskList(parseInt(curTab));
			} else {
				this.getSecTaskList(parseInt(curTab));
			}
			//展示小红点
		},
		methods: {
			getFreeStageText(freeStage) {
				switch (freeStage) {
					case 1:
						return '已申请';
					case 2:
						return '已拒绝';
					case 3:
						return '待发货';
					case 4:
						return '已发货';
					case 5:
						return '已收货';
					default:
						return '未知状态';
				}
			},
			handleCopy(content) {
				wx.setClipboardData({
					data: content,
					success: function(res) {
						console.log("复制成功");
					}
				});
			},
			toLogisticDetail(secTaskId) {
				var data = {
					taskId: secTaskId,
				};
				data = JSON.stringify(data)
				uni.navigateTo({
					url: '/page_workspace/selection/logistics/logisticsdetail?textObj=' + encodeURIComponent(data)
				});
			},
			getInfoList() {
				return this.$http.get('/youngee/c/g/get-info-tables')
					.then(res => {
						if (res.data.code == 0) {
							this.taskStageList = res.data.data.TaskStage
							this.secTaskStageList = res.data.data.SecTaskStage
						}
					})
			},
			// 默认选择0
			toShowTask() {
				this.showTask = true;
				this.showSec = false;
				this.toShow(0)
			},
			// 默认选择4
			toShowSec() {
				this.showTask = false;
				this.showSec = true;
				this.toShow(4)
			},
			toShow(value) {
				console.log("toshow的参数-->", value)
				let that = this
				// item表示当前遍历到的元素，index表示该元素在列表中的索引位置
				this.showList.forEach(function(item, index) {
					if (index == value) {
						that.showList[index] = true
					} else {
						that.showList[index] = false
					}
				})

				if (value < 4) {
					this.getTaskList(value);
				} else {
					this.getSecTaskList(value);
				}
				console.log("showList--->", that.showList)
			},
			toTaskDetail(item) {
				uni.navigateTo({
					url: '/page_workspace/task/taskdetail?taskId=' + item.task_id,
					success(res) {},
					fail(err) {}
				});
			},
			toSecTaskDetail(item) {
				uni.navigateTo({
					url: '/page_workspace/selection/sectaskdetail1?taskId=' + item.task_id,
					success(res) {},
					fail(err) {}
				});
			},

			async getTaskList(value) {
				let that = this
				this.loading = true
				uni.showLoading({
					title: '加载中'
				});
				await this.$https.get('/youngee/c/t/g/get-task-exe-num')
					.then(res => {
						if (res.data.data != null) {
							let nums = res.data.data
							this.showPoint.forEach(function(item, index) {
								that.showPoint[index] = false
							})
							for (let i = 0; i < nums.length; ++i) {
								if (nums[i].task_stage == 7 && nums[i]["COUNT(*)"] != 0) {
									this.showPoint[0] = true
								}
								if (nums[i].task_stage == 9 && nums[i]["COUNT(*)"] != 0) {
									this.showPoint[1] = true
								}
								if (nums[i].task_stage == 11 && nums[i]["COUNT(*)"] != 0) {
									this.showPoint[2] = true
								}
								if (nums[i].task_stage == 13 && nums[i]["COUNT(*)"] != 0) {
									this.showPoint[3] = true
								}
							}
						}
					});
				var taskList = [];
				await this.$https.get('/youngee/c/t/g/get-task-exe-list' +
					"?" +
					"taskStage" +
					"=" +
					value).then(res => {
					taskList = res.data.data
					if (taskList != null) {
						for (let i = 0; i < taskList.length; ++i) {
							// 主图
							let productPhoto = JSON.parse(taskList[i].product_photo_snap);
							for (let j = 0; j < productPhoto.length; j++) {
								if (productPhoto[j].Symbol == 1) {
									taskList[i].product_img_url = productPhoto[j].PhotoUrl
								}
							}

							// 带货链接
							taskList[i].product_url = product.product_url

							// 待修改标识
							if ((taskList[i].task_stage == 7 && taskList[i].script_status == 3) ||
								(taskList[i].task_stage == 9 && taskList[i].sketch_status == 3) ||
								(taskList[i].task_stage == 11 && taskList[i].link_status == 3) ||
								(taskList[i].task_stage == 13 && taskList[i].data_status == 3)) {
								taskList[i].isShowModify = true
							} else {
								taskList[i].isShowModify = false
							}

							// 任务阶段展示文字
							taskList[i].task_stage_txt = this.taskStageList[taskList[i].task_stage - 1]
								.task_stage

							// 任务收益
							taskList[i].real_reward = taskList[i].task_reward * (100 - taskList[i]
								.break_rate) / 100
							taskList[i].cut_payment = taskList[i].task_reward - taskList[i].real_reward
							taskList[i].show_task_reward = money(taskList[i].task_reward)
							taskList[i].show_real_reward = money(taskList[i].real_reward)
							taskList[i].show_cut_payment = money(taskList[i].cut_payment)

							// 截止时间
							let ddl = this.thistime(taskList[i].cur_break_at)
							console.log("isTimeOut", ddl.isTimeOut)
							console.log("ddl", ddl.deadline_time)
							taskList[i].time_out = ddl.isTimeOut
							taskList[i].upload_ddl = ddl.isTimeOut ? ddl.deadline_time : taskList[i]
								.cur_break_at.replace(/-/g,
									"/").slice(0, -3)
						}
					}
					this.taskLists[value] = taskList
				})
				uni.hideLoading();
				this.loading = false
			},

			getProductInfoApi(item) {
				console.log("into product")
				return this.$https.get('/youngee/c/t/g/get-product-detail' +
						"?productid=" +
						item
					)
					.then(res => {
						console.log("getproductsuccess---", res)
						this.productInfo = res.data.data
						this.lastCallTime = Date.now();

					})
			},

			async getSecTaskList(value) {
				this.loading = true
				uni.showLoading({
					title: '加载中'
				});
			
				var secTaskList = [];
				await this.$https.get('/youngee/c/t/g/get-exe-sec-task-list' +
					"?" +
					"taskStage" +
					"=" +
					value).then(res => {
					console.log("get-exe-sec-task-list----",res)
					secTaskList = res.data.data
					if (secTaskList != null) {
						for (let i = 0; i < secTaskList.length; ++i) {
							console.log("****secTaskList[i]*******", secTaskList[i])
							let product_info = secTaskList[i].YounggeeProduct
							let product_photo_info = secTaskList[i].YounggeeProductPhoto
							let selection_platform = secTaskList[i].PlatformInfo
							secTaskList[i].price = product_info.product_price
							secTaskList[i].exclusive_commission = product_info.exclusive_commission
							//小红点
							if(secTaskList[i].reward_stage==1){
								this.reward_stage_highlight=1
							}
							// 主图
							if (product_photo_info != null && product_photo_info != '') {
								for (let j = 0; j < product_photo_info.length; j++) {
									if (product_photo_info[j].symbol == 1) {
										secTaskList[i].product_img_url = product_photo_info[j].photo_url
									}
								}
							}
							//截至时间
							secTaskList[i].ddl = secTaskList[i].SelectionInfo.task_ddl
							// 判断是否到期
							secTaskList[i].isFinished = this.isFinish(secTaskList[i].ddl)
						}
					}
					this.taskLists[value] = secTaskList;
				})
				uni.hideLoading();
				this.loading = false
			},
			
			isFinish(ddl) {
				var timeNow = new Date();
				var ddl = new Date(ddl.replace(/-/g, "/"));
				var diff = getDaysAndHoursBetweenDates(timeNow, ddl);
				let remain_days = diff.days;
				let remain_hours = diff.hours;
				if (remain_days <= 0 & remain_hours <= 0) return true;
				else return false;
			},

			// 计算结束时间
			thistime(val) {
				// 转换格式
				var beginTime = new Date(val.replace(/-/g, "/"));
				// 当前时间
				var thisTime = new Date();
				// 相减
				var dateMiss = beginTime.getTime() - thisTime.getTime();
				let isTimeOut = dateMiss < 0 ? true : false
				dateMiss = dateMiss < 0 ? -dateMiss : dateMiss
				// 天数
				var day = Math.floor(dateMiss / (24 * 3600 * 1000));
				// 减去天数剩下的毫秒数
				var backOne = dateMiss % (24 * 3600 * 1000);
				// 小时数
				var hours = Math.floor(backOne / (3600 * 1000));
				// 减去小时数剩下的毫秒数
				var backHour = backOne % (3600 * 1000);
				// 分钟数
				var min = Math.floor(backHour / (60 * 1000));
				var deadline_time = day + '天' + hours + '时' + min + '分'
				var result = {
					isTimeOut: isTimeOut,
					deadline_time: deadline_time
				}
				return result
			},
		}
	}
</script>

<style lang="scss" scoped>
	view {
		font-size: 14px;
		line-height: inherit;
	}
	.overlay-img {
		position: absolute;
		width: 200rpx;
		height: 200rpx;
		background-color: black;
		opacity: 0.5;
		pointer-events: none;
		/* This makes the overlay image not interfere with any click events on the main image */
	}
	
	.container {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 20rpx;
	}
	
	.left-text {
		text-align: left;
		flex: 1;
		font-size: 30rpx;
		padding-left: 20rpx;
	}
	
	.right-text {
	
		text-align: right;
		flex: 1;
		font-size: 30rpx;
		padding-right: 20rpx;
		padding-top: 15rpx;
	}

	.menu-head {
		// padding-top: 20rpx;
		background-color: #fff;
		position: fixed;
		width: 100%;
	}

	.menu {
		border-bottom: #FCCF41;
		background-color: #FFFFFF;
		justify-content: space-around;
		height: 60rpx;
		width: 100%;
		display: flex;
		z-index: 10;
	}

	.menu-item {
		display: flex;
	}

	.menu-item-p p {
		font-weight: 600;

		&.lor {
			border-bottom: 5rpx solid #F0D232;
			color: #F0D232;
			padding-bottom: 15rpx;
		}

		&.unlor {
			border-bottom: 5rpx solid #fff;
			color: #81838f;
			padding-bottom: 15rpx;
		}
	}

	.home {
		margin-top: 150rpx;
	}


	.task-card {
		margin: 10rpx 0;
		// border-bottom: 1rpx #d7d7d7 solid;
		height: 350rpx;
		background-color: #f2f2f2;

		.platform-img {
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
			flex-shrink: 0;
		}

		.task-head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10rpx 20rpx;

			.task-head-account {
				display: flex;
			}

			.platform-img {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
				flex-shrink: 0;
			}

			.task-head-status p {
				color: red;
			}
		}

		.task-info {
			display: flex;
			justify-content: space-between;
			padding: 10rpx 20rpx;

			.task-info-left {
				display: flex;
				// align-items: center;

				.project-img {
					height: 200rpx;
					width: 200rpx;
					flex-shrink: 0;
					// background-color: #b3c96b;
				}

				.task-info-txt {
					margin-left: 10rpx;
				}

				.task-info-txt p {
					font-size: 24rpx;
					color: #85859d;
					letter-spacing: 2rpx;
				}
			}

			.task-info-right {
				// width: 100rpx;
				// height: 100rpx;
				border-radius: 50%;
				// border: #ffcb41 2rpx solid;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.task-info-right p {
				font-size: 24rpx;
			}
		}
	}

	// .task {
	// 	margin-bottom: 20rpx;
	// 	border-bottom: 1rpx #d7d7d7 solid;

	// 	.task-head {
	// 		display: flex;
	// 		justify-content: space-between;
	// 		align-items: center;
	// 		padding: 10rpx 20rpx;

	// 		.task-head-account {
	// 			display: flex;
	// 		}

	// 		.task-head-status {
	// 			color: red;
	// 		}
	// 	}

	// 	.task-info {
	// 		display: flex;
	// 		align-items: center;
	// 		justify-content: space-between;
	// 		padding: 10rpx 20rpx;

	// 		.task-info-left {
	// 			display: flex;
	// 			align-items: center;
	// 		}

	// 		.task-info-right {
	// 			width: 100rpx;
	// 			height: 100rpx;
	// 			border-radius: 50%;
	// 			border: #ffcb41 2rpx solid;
	// 			display: flex;
	// 			align-items: center;
	// 			justify-content: center;
	// 		}
	// 	}
	// }

	.line {
		border-bottom: 1rpx #AAAAAA solid;
	}

	.menu-point {
		position: relative;
		left: 30rpx;
		top: 20rpx;
	}

	.point {
		width: 20rpx;
		height: 20rpx;
		background: red;
		border-radius: 50%;
	}

	.but2 {
		background-color: #FFFFFF;
		border: 1rpx solid #f2d22d;
		border-radius: 20rpx;
		font-size: 28rpx;
		line-height: 180%;
		font-weight: 500;
		position: relative;
		height: 80%;
		margin: 0;
	}
</style>