<template>

  <!-- pages/index/index.wxml -->
 <view :style="{marginTop: titleTop + 'px', height: 'calc(100% - ' + titleTop+'px)'}" class="sy-container">
	 <view class="topView" @click="my()">
		 <view class="headImg" ></view>
	 </view>
	 <view class="title">任务</view>

	 <view class="top-tab">
		 <view class="tab">
			 <view class="item-container" @click="tabChange(1)">
				 <view class="item" style="width: 170rpx">
					 <view :class="nowTab == 1 ? 'tab-title-focus' : 'tab-title'">
						 任务列表
					 </view>
					 <view :class="nowTab == 1 ? 'bottom-line-focus' : 'bottom-line'" ></view>
				 </view>
			 </view>

			 <view class="item-container" @click="tabChange(2)">
				 <view class="item" style="width: 170rpx">
					 <view :class="nowTab == 2 ? 'tab-title-focus' : 'tab-title'">
						 我的任务
					 </view>
					 <view :class="nowTab == 2 ? 'bottom-line-focus' : 'bottom-line'"></view>
				 </view>
			 </view>
		 </view>
		 <view class="filter-btn" @click="filterOpen">
			 筛选
		 </view>
	 </view>



	 <!-- 普通弹窗 -->
	 <uni-popup ref="popup" >
		 <view class="popup-content dialog" :class="{'popup-height': type === 'left' || type === 'right' }">
			 <view class="filter-line1">
				 <view class="label">任务名称</view>
				 <input type="text"  v-model="queryParams.taskName"></input>
			 </view>
			 <view class="filter-line1">
				 <view class="label">日期</view>
				 <view class="example-body">
					 <uni-datetime-picker type="date" :clear-icon="true" v-model="queryParams.taskDate" @maskClick="maskClick" @change="timeChange($event)"/>
				 </view>
			 </view>
			 <view class="filter-line2">
				 <view class="reset-btn" @click="reset()">重置</view>
				 <view class="submit-btn" @click="search">确定</view>
			 </view>
		 </view>
	 </uni-popup>
	 <scroll-view v-if="nowTab==1" class="list"
				  :scroll-top="scrollTop"
				  scroll-y="true"
				  :refresher-enabled="isOpenRefresh"
				  :refresher-triggered="triggered"
				  @refresherrefresh="refresh"
				  @scrolltoupper="upper"
				  @scroll="scroll"
				  @scrolltolower="loadMore"
				  @refresherpulling="onPulling"
	 >

		 	<view class="item2" v-for="(task, index) in taskList"  :key="index">
			 <view class="line1">
				 <view class="task-name">
					 {{task.taskName}}
				 </view>
<!--				 <view :class="toDate(task.taskDate) == '已结束' ? 'task-status-end' : 'task-status'">-->
<!--					 {{toDate(task.taskDate)}}-->
<!--				 </view>-->


				 <view class="price">
					 <view class="num">¥{{task.dayPrice}}元</view>
					 <view class="unit">/天</view>
				 </view>
			 </view>

			 <view class="line3">
				 <view class="num-container" style="background-color: #f1f0f0;">
					 <view class="num-label">
						 用工日期
					 </view>
					 <view class="num">
						 {{task.taskDate}}
					 </view>
				 </view>

				 <view class="num-container" style="background-color: #e4e4fd;">
					 <view class="num-label">
						 用工人数
					 </view>
					 <view class="num">
						 {{task.useNum}}
					 </view>
				 </view>
				 <view class="num-container" style="background-color: #fce6ea;">
					 <view class="num-label">
						 报名人数
					 </view>
					 <view class="num">
						 {{task.baomingNum}}
					 </view>
				 </view>

			 </view>

			 <view class="line4">
				 <view class="date-label">
					 <view class="icon"></view>
					 发布时间: {{task.createTime}}
				 </view>
				 <view v-if="task.selfSign == null" class="button button-1" @click="baoming(task)"></view>
				 <view v-else class="button button-2" ></view>
			 </view>

		 </view>

		 <view v-if="showLoading" class="load-more">加载中...</view>
		 <view v-if="showNoMore" class="no-more">没有更多数据了</view>
	 </scroll-view>


	 <scroll-view v-if="nowTab==2" class="list"
				  :scroll-top="scrollTop"
				  scroll-y="true"
				  :refresher-enabled="isOpenRefresh"
				  :refresher-triggered="triggered"
				  @refresherrefresh="refresh"
				  @scrolltoupper="upper"
				  @scroll="scroll"
				  @scrolltolower="loadMore"
				  @refresherpulling="onPulling">

		 <view class="item2" v-for="(task, index) in taskList"  :key="index">
			 <view class="line1">

				 <view class="name-status">
					 <view class="task-name">
						 {{task.taskName}}
					 </view>
					 <view class="status-base" :class="'sign-status' + getSignStatus(task).status"/>

				 </view>


				 <view class="price">
					 <view class="num">¥{{task.dayPrice}}元</view>
					 <view class="unit">/天</view>
				 </view>
			 </view>

			 <view class="line3">
				 <view class="num-container" style="background-color: #f1f0f0;">
					 <view class="num-label">
						 用工日期
					 </view>
					 <view class="num">
						 {{task.taskDate}}
					 </view>
				 </view>

				 <view class="num-container" style="background-color: #e4e4fd;">
					 <view class="num-label">
						 用工人数
					 </view>
					 <view class="num">
						 {{task.useNum}}
					 </view>
				 </view>
				 <view class="num-container" style="background-color: #fce6ea;">
					 <view class="num-label">
						 报名人数
					 </view>
					 <view class="num">
						 {{task.baomingNum}}
					 </view>
				 </view>

			 </view>

			 <view class="line4">
				 <view class="date-label" style="width: 100%">
					 <view class="icon"></view>
					 发布时间: {{task.createTime}}
				 </view>
				 <view v-if="getSignStatus(task).status == -1 && toDate(task.taskDate) != '已结束' " class="button qx-button" @click="cancelBaoming(task)"></view>
			 </view>

		 </view>

		 <view v-if="showLoading" class="load-more">加载中...</view>
		 <view v-if="showNoMore" class="no-more">没有更多数据了</view>
	 </scroll-view>


 </view>

  
  
</template>

<script>
	import { getTaskList, getSelfTaskList, cancelBaoming } from "@/api/employee/task";
	// import { getCodeImg } from '@/api/employee/login'
  export default {
  	props: {
		titleTop: {type: Number},
		nowTab1: {type: Number},
		statusBarHeight: {type: Number}
	},
	  watch: {
		  nowTab1(newValue) {
			  // 处理逻辑
			  this.nowTab = newValue;
			  this.getList();
		  }
	  },
	data() {
		return {
			// titleTop: 0,
			nowTab: this.nowTab1,
			// statusBarHeight: 0,
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				dateStatus: 0,
				taskName: null,
				taskDate: null,
			},
			taskList: [],
			nowSelect: "查看全部",
			searchVal: null,
			realName: "",
			// 是否显示加载更多的loading
			showLoading: false,
			// 是否显示无更多数据提示
			showNoMore: false,
			triggered: false,
			isOpenRefresh: true,
			containerScrollTop: 0,
		};
	  },
    created: function() {
		console.log("dddddddddddddd")

		this.realName = this.$store.state.user.nickName
		this.getList();
    },
	 methods:{
		 onPageScroll(e){
			 this.containerScrollTop = e.scrollTop
			 if (this.containerScrollTop > 0){
				 this.isOpenRefresh = false
			 }else{
				 this.isOpenRefresh = true
			 }
		 },
		 onReachBottom(e){
			 console.log("onReachBottom", e)
			 if (this.showLoading || this.showNoMore) {
				 return;
			 }
			 // 显示加载更多的loading
			 this.showLoading = true;
			 // 请求数据
			 this.getList();
		 },
		 // 刷新函数
		 refresh() {
			 // 请求数据
			 this.triggered = true;
			 this.queryParams.pageNum = 1;
			 this.getList();
		 },
		 upper(){
			 // console.log("upper")
		 },
		 scroll(e){
			 // console.log("scroll", e.detail)
		 },
		 onPulling(e) {
			 // console.log("onpulling", e.detail);
			 if (e.detail.dy < 8) return  // 防止上滑页面也触发下拉
			 this.triggered = true;
		 },
		 // 加载更多函数
		 loadMore() {
		 	// console.log("loadMore")
			 // 判断是否正在加载更多或已经没有更多数据
			 if (this.showLoading || this.showNoMore) {
				 return;
			 }
			 // 显示加载更多的loading
			 this.showLoading = true;
			 // 请求数据
			 this.getList();
		 },

		 filterOpen(){
			 this.$refs.popup.open('bottom')
		 },
		  openSelect(){
			  // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
			  this.$refs.popup.open('bottom')
		  },
		 closeSelect(){
			 // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
			 this.$refs.popup.close()
		 },
		 filter(type){
			 this.closeSelect()
			 this.queryParams.dateStatus = type;
			 if (type == 0){
				 this.nowSelect = "查看全部";
			 }else if (type == 1){
				 this.nowSelect = "进行中的任务";
			 }else if (type == 2){
				 this.nowSelect = "已结束的任务";
			 }

			 this.getList();
		 },
		 timeChange(e) {
			 this.single = e;
			 console.log("-change事件:", e);
			 this.queryParams.taskDate = e;
		 },

		 getList() {
			 if (this.nowTab == 1){
				 this.queryParams.self = false;
			 }else{
				 this.queryParams.self = true;
			 }
			if (this.showNoMore && this.queryParams.pageNum > 1){
				return
			}
			var that = this;
			if (this.nowTab == 1) {
				getTaskList(this.queryParams).then(response => {
					if (that.queryParams.pageNum > 1) {
						that.taskList = that.taskList.concat(response.rows);
					} else {
						that.taskList = response.rows;
					}

					that.queryParams.pageNum++;
					if (response.rows.length < this.queryParams.pageSize) {
						that.showNoMore = true;
					} else {
						that.showNoMore = false;
					}
					that.showLoading = false;
					that.triggered = false;
					that.total = response.total;

					console.log(response)
				});
			}else{
				getSelfTaskList(this.queryParams).then(response => {
					if (that.queryParams.pageNum > 1){
						that.taskList = that.taskList.concat(response.rows);
					}else{
						that.taskList = response.rows;
					}

					that.queryParams.pageNum++;
					if (response.rows.length < this.queryParams.pageSize){
						that.showNoMore = true;
					}else{
						that.showNoMore = false;
					}
					that.showLoading = false;
					that.triggered = false;
					that.total = response.total;

					console.log(response)
				});
			}

		 },

		 goDetails(task){
			 uni.navigateTo({
				 url: "taskDetails?id=" + task.id
			 })
		 },
		 my(){
			 uni.navigateTo({
				 url: "employee/my"
			 })
		 },
		 search(){
			 this.queryParams.pageNum = 1;
			 this.getList();
			 this.$refs.popup.close();
		 },
		 reset(){
			 this.queryParams.taskName = null;
			 this.queryParams.taskDate = null;
			 this.queryParams.pageNum = 1;
			 this.getList();
			 this.$refs.popup.close();
		 },

		 tabChange(tab){
			 this.queryParams.pageNum = 1;
			 this.nowTab = tab;
			 this.getList();
		 },
		 getSignStatus(task){
			 if (task.selfSign == null){
				 return {"text": "未到", "status": 0};
			 }
			 var status = task.selfSign.status;

			 if (status == 1){
				 return {"text": "已到", "status": 1};
			 }else if (status == 0){
				 return {"text": "未到", "status": 0};
			 }else{
				 return {"text": "未点名", "status": -1};
			 }

		 },
		 getPayStatus(sign){
			 if (sign.stEmployeeFundRecord == null || sign.stEmployeeFundRecord.payStatus == 0){
				 return {"text": "未发放", "status": 0};
			 }
			 if (sign.stEmployeeFundRecord.payStatus == 1){
				 return {"text": "已发放", "status": 1};
			 }
			 if (sign.stEmployeeFundRecord.payStatus == 2){
				 return {"text": "发放失败", "status": 2};
			 }
			 return {"text": "未发放", "status": 0};
		 },
		 baoming(row){
			 uni.navigateTo({
				 url: "baoming?taskId=" + row.id + "&taskName=" + row.taskName
			 })
		 },
		 cancelBaoming(task){
			 var that = this;
			 cancelBaoming({"id": task.selfSign.id}).then(response => {
			 	 that.queryParams.pageNum = 1;
				 that.getList();
			 });
		 },
		 toDate(str){
			 var strArray = str.split(" ");
			 var strDate = strArray[0].split("-");
			 // var strTime = strArray[1].split(":");
			 var taskFinishTime = new Date(strDate[0], (strDate[1]-parseInt(1)), (strDate[2]));//任务结束的晚上0点
			 taskFinishTime.setDate(taskFinishTime.getDate() + 1);
			 // console.log("date", taskFinishTime, this.getTomorrowZeroTime())
			 return new Date() > taskFinishTime ? "已结束" : "进行中"
		 },
		 getTomorrowZeroTime() {
			 const now = new Date(); // 获取当前时间
			 const tomorrow = new Date(now); // 复制当前时间对象
			 tomorrow.setDate(now.getDate() + 1); // 日期加1，得到明天
			 tomorrow.setHours(0, 0, 0, 0); // 将小时、分钟、秒和毫秒都设置为0
			 return tomorrow;
		 },

	 }
  }
</script>

<style lang='scss'>
	html, body {
		background-color: #ffffff;
		height: 100%;
	}
	page{
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
	}

	.load-more, .no-more {
		display: grid;
		place-content: center;
		padding: 10rpx;
		color: #999;
		height: 100rpx;
	}
	.sy-container{
		position: relative;
		height: 100%;
		overflow: hidden;
		background-image:url('http://8.155.21.176:9000/yonggong/images/bg.png');
		background-size: 100% 100%;

		.title {
			position: absolute;
			top: 0;
			font-size: 25rpx;
			color: #000000;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 90rpx;
			z-index: 0;
			background-color: #ffffff;
		}
		.topView{
			display: flex;
			width: 120rpx;
			padding: 0 10rpx 0 20rpx;
			z-index: 1;
			position: relative;
			background-color: #ffffff;
			.headImg{
				width: 70rpx;
				height: 70rpx;
				background-image: url("http://8.155.21.176:9000/yonggong/images/wode.png");
				background-size: 100% 100%;
			}
		}

		.top-tab{
			width: 100%;
			height: 80rpx;
			margin-top: 20rpx;
			background-color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
			padding-left: 30rpx;
			padding-right: 30rpx;
			border-top: #dcdcdc solid 1rpx;
			/*margin-bottom: 10rpx;*/
			.tab{
				width: 90%;
				display: flex;
				align-items: center;
				height: 80rpx;
				/*justify-content: center;*/

				.item-container{
					width: 200rpx;
					margin-left: 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					.item{
						width: 190rpx;
						display: grid;
						place-items: center;

						.tab-title-focus{
							/*width: 100%;*/
							height: 50rpx;
							line-height: 60rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-weight: 550;
							font-size: 30rpx;
							/*color: #519fef;*/
						}
						.bottom-line-focus{
							height: 10rpx;
							border-radius: 10rpx;
							width: 90rpx;
							/*background-color: #519fef;*/
							background-image: url("http://8.155.21.176:9000/yonggong/images/fxlist/now-page-line.png");
							background-size: 100% 100%;
						}

						.tab-title{
							/*width: 100%;*/
							height: 50rpx;
							line-height: 60rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-weight: 550;
							font-size: 30rpx;
						}
						.bottom-line{
							height: 10rpx;
							border-radius: 10rpx;
							width: 100%;
						}
					}
				}
			}

			.filter-btn{
				width: 10%;
				font-size: 30rpx;
				font-weight: 550;
				color: #999999;
			}
		}
		.uni-popup__wrapper{
			background-color: #ffffff;
			border-radius: 10rpx;
			width: 100%;
		}
		.dialog {
			width: 100%;
			height: 100%;
			padding: 50rpx;
			display: grid;
			/*place-items: flex-start;*/
			border-radius: 10rpx 10rpx 0 0 ;
			background-color: #ffffff;
			.filter-line1{
				width: 80%;
				margin-bottom: 40rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.label{
					width: 30%;
				}
				input{
					width: 70%;
					border: 1px solid #e5e5e5;
					height: 55rpx !important;
					line-height: 55rpx !important;
					box-sizing: border-box;
					border-radius: 4px;
				}
				.uni-date-x{
					border: 1px solid #e5e5e5;
				}
				.uni-date__x-input{
					height: 55rpx !important;
					line-height: 55rpx !important;
				}
				.uni-date-x--border{
					border: none !important;
				}
				.example-body{
					width: 70%;
					height: 50rpx;
				}
			}
			.filter-line2{
				display: flex;
				justify-content: center;
				border-top: 1rpx solid #cecece;
				padding-top: 20rpx;
				.reset-btn{
					font-size: 30rpx;
					margin-left: 8rpx;
					border-radius: 10rpx;
					width: 180rpx;
					height: 65rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.submit-btn{
					background-color: #11a9ee;
					color: #ffffff;
					font-weight: 650;
					font-size: 30rpx;
					margin-left: 8rpx;
					border-radius: 10rpx;
					width: 250rpx;
					height: 65rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-left: auto; /* 推动元素到右边 */
				}
			}
		}

		.search-container{
			margin-top: 10rpx;
			border-top: 1rpx solid #dbdbdb;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 20rpx 30rpx 20rpx 30rpx;
			.search{
				width: 100%;
				height: 80rpx;
				border-radius: 450px;
				border: 1px solid #6c6c6c;
				display: flex;
				align-items: center;
				/*justify-content: center;*/
				.icon{
					width: 15%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.search-input{
					width: 82%;
				}

			}
		}

		.filter{
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 10rpx;
			.select{
				width: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.dateSelect{
				width: 50%;
				display: flex !important;
				align-items: center !important;
				justify-content: center !important;
			}
		}
		.selectContext{
			background-color: #ffffff;
			width: 100%;
			/*height: 500rpx;*/
			margin-bottom: 0px;
			.select-item{
				height: 100rpx;
				width: 100%;
				display: grid;
				place-items: center;
				font-size: 35rpx;
				border-bottom: 1rpx solid #dbdbdb;
			}
			.select-item:last-child {
				border-bottom: none;
			}
		}
		.vue-ref{
			padding-bottom: 0px !important;
		}

		.uni-date-x{
			background-color: transparent !important;
			color: #000000 !important;
			width: 80%;
			justify-content: right;
		}
		.uni-date__x-input{
			display: flex !important;
			align-items: center !important;
			justify-content: center !important;
			/*justify-content: flex-end !important;*/
			/*margin-left: auto; !* 推动元素到右边 *!*/
		}
		.uni-date__icon-clear{
			width: 20%;
		}
		.uni-date-x--border{
			border: 0 solid #dbdbdb !important;
		}
		.icon-calendar{
			display: none; /* 隐藏图标 */
		}
		/*.uni-date__x-input{*/
		/*	display: flex;*/
		/*	align-items: center;*/
		/*	justify-content: center;*/
		/*}*/



		.list{
			padding: 0rpx 15rpx 0rpx 15rpx;
			height: calc(100% - 170rpx);
			.item{
				background-color: #FFFFFF;
				width: 100%;
				border-radius: 10rpx;
				box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
				padding: 5rpx 25rpx 25rpx 25rpx;
				margin: 10rpx 0rpx 10rpx 0rpx;
				.line1{
					height: 100rpx;
					display: flex;
					align-items: center;
					/*justify-content: center;*/
					border-bottom: 1rpx solid #dbdbdb;
					.task-name{
						font-size: 28rpx;
						width: 270rpx; /* 设置div的宽度 */
						white-space: nowrap; /* 防止文本换行 */
						overflow: hidden; /* 隐藏超出div的内容 */
						text-overflow: ellipsis; /* 显示省略号来代表被截断的内容 */
					}
					.task-status{
						border: 1rpx solid #3daf00;
						background-color: #e1f8d5;
						margin-left: 8rpx;
						border-radius: 10rpx;
						width: 100rpx;
						height: 45rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 22rpx;
					}
					.task-status-end{
						border: 1rpx solid #af000f;
						background-color: #fcd2d2;
						margin-left: 8rpx;
						border-radius: 10rpx;
						width: 100rpx;
						height: 45rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 22rpx;
					}
					.day-price{
						margin-left: auto;
						font-size: 28rpx;
					}
					.price{
						margin-left: 10rpx;
						font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
						font-weight: 650;
						font-size: 38rpx;
						color: #FF0000;
					}
				}

				.line2{
					height: 100rpx;
					display: flex;
					align-items: center;
					/*justify-content: center;*/
					.date-label{

					}
					.year{
						background-color: #5fccfd;
						color: #ffffff;
						font-weight: 650;
						font-size: 30rpx;
						margin-left: 8rpx;
						border-radius: 10rpx;
						width: 100rpx;
						height: 45rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					.month{
						background-color: #5fccfd;
						color: #ffffff;
						font-weight: 650;
						font-size: 30rpx;
						margin-left: 8rpx;
						border-radius: 10rpx;
						width: 100rpx;
						height: 45rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					.day{
						background-color: #5fccfd;
						color: #ffffff;
						font-weight: 650;
						font-size: 30rpx;
						margin-left: 8rpx;
						border-radius: 10rpx;
						width: 100rpx;
						height: 45rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					.sign-status{
						border: 1rpx solid #3daf00;
						background-color: #e1f8d5;
						color: #3daf00;
						margin-left: auto;
						border-radius: 10rpx;
						width: 100rpx;
						height: 45rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 22rpx;
					}
					.sign-status-end{
						border: 1rpx solid #af000f;
						color: #af000f;
						background-color: #fcd2d2;
						margin-left: auto;
						border-radius: 10rpx;
						width: 100rpx;
						height: 45rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 22rpx;
					}
				}

				.line3{
					height: 150rpx;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					border-bottom: 1rpx solid #dbdbdb;
					padding-bottom: 35rpx;
					.use-num{
						width: 50%;
						.num{
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: center;
							color: #3a8ee6;
							font-weight: 650;
							font-size: 40rpx;
						}
						.num-label{
							margin-top: 10rpx;
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
					.bm-num{
						width: 50%;
						.num{
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: center;
							color: #07c436;
							font-weight: 650;
							font-size: 40rpx;
						}
						.num-label{
							margin-top: 10rpx;
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}

				}

				.line4{
					display: flex;
					align-items: center;
					/*justify-content: center;*/
					margin-top: 20rpx;
					.date-label{
						color: #7b7b7b;
					}
					.button{
						background-color: #11a9ee;
						color: #ffffff;
						font-weight: 650;
						font-size: 30rpx;
						margin-left: 8rpx;
						border-radius: 10rpx;
						width: 250rpx;
						height: 65rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-left: auto; /* 推动元素到右边 */
					}
					.button-2{
						background-color: #b8b8b8;
						color: #ffffff;
						font-weight: 650;
						font-size: 30rpx;
						margin-left: 8rpx;
						border-radius: 10rpx;
						width: 250rpx;
						height: 65rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-left: auto; /* 推动元素到右边 */
					}

				}

			}
			.item2{
				background-color: #FFFFFF;
				width: 95%;
				border-radius: 20rpx;
				box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
				padding: 10rpx 25rpx 35rpx 25rpx;
				margin: 20rpx auto 20rpx auto;
				.line1{
					height: 100rpx;
					display: flex;
					align-items: center;
					/*justify-content: center;*/
					/*border-bottom: 1rpx solid #dbdbdb;*/

					.name-status{
						display: flex;
						align-items: center;
						.task-name{
							font-size: 33rpx;
							font-weight: 590;
							max-width: 350rpx; /* 设置div的宽度 */
							white-space: nowrap; /* 防止文本换行 */
							overflow: hidden; /* 隐藏超出div的内容 */
							text-overflow: ellipsis; /* 显示省略号来代表被截断的内容 */
						}

						.status-base{
							margin-left: 5rpx;
							width: 70rpx;
							height: 30rpx;
							background-size: 100% 100%;
						}
						.sign-status1{
							background-image: url("http://8.155.21.176:9000/yonggong/images/index/yd-status.png");
						}
						.sign-status0{
							background-image: url("http://8.155.21.176:9000/yonggong/images/index/wd-status.png");
						}
						.sign-status-1{
							/*background-image: url("http://8.155.21.176:9000/yonggong/images/index/wd-status.png");*/
						}
						.task-status{
							background-image: url("http://8.155.21.176:9000/yonggong/images/index/wd-status.png");
						}
						.task-status-end{
							background-image: url("http://8.155.21.176:9000/yonggong/images/index/wd-status.png");
						}
					}


					.day-price{
						margin-left: auto;
						font-size: 28rpx;
					}
					.price{
						margin-left: auto;
						color: #FF0000;
						font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
						display: flex;
						align-items: flex-end;
						height: 38rpx;
						.num{
							font-weight: 650;
							font-size: 38rpx;
							line-height: 38rpx;
						}
						.unit{
							font-weight: 450;
							font-size: 20rpx;
						}
					}
				}



				.line3{
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 15rpx 20rpx 0 20rpx;
					.num-container{
						width: 25%;
						display: grid;
						place-items: center;
						margin-right: 5%;
						border-radius: 10rpx;
						padding: 15rpx;
						.num-label{
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 23rpx;
							color: #979696;
						}
						.num{
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 20rpx;
							color: #131313;
							overflow: hidden; /* 隐藏超出div的内容 */
							text-overflow: ellipsis; /* 显示省略号来代表被截断的内容 */
							margin-top: 10rpx;
						}
					}
					.num-container:last-child {
						margin-right: 0;
					}
				}

				.line4{
					display: flex;
					align-items: center;
					/*justify-content: center;*/
					margin-top: 40rpx;
					height: 65rpx;
					.date-label{
						display: flex;
						align-items: center;
						border-top: #f1f1f1 solid 1rpx;
						height: 100%;
						width: 70%;
						.icon{
							width: 20rpx;
							height: 20rpx;
							background-image: url("http://8.155.21.176:9000/yonggong/images/index/clock.png");
							background-size: 100% 100%;
							margin-right: 5rpx;
						}
						font-size: 20rpx;
						color: #bfbfbf;
					}
					.button{
						background-size: 100% 100%;
						margin-left: 8rpx;
						width: 160rpx;
						height: 65rpx;
						margin-left: auto; /* 推动元素到右边 */
					}
					.button-1{
						background-image: url("http://8.155.21.176:9000/yonggong/images/index/qbm-btn.png");
					}
					.button-2{
						background-image: url("http://8.155.21.176:9000/yonggong/images/index/ybm-btn.png");
					}
					.qx-button{
						width: 220rpx;
						background-image: url("http://8.155.21.176:9000/yonggong/images/index/qxbm-btn.png");
					}
				}

			}
		}

	}
	.vue-ref{
		padding-bottom: 0px !important;
	}


</style>
