1148 lines
27 KiB
Vue
1148 lines
27 KiB
Vue
<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, 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() {
|
||
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;
|
||
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)
|
||
});
|
||
},
|
||
|
||
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>
|