977 lines
25 KiB
Vue
977 lines
25 KiB
Vue
<template>
|
|
<view class="fullHeight workStationIndexPage">
|
|
<headers :navList="navList">
|
|
</headers>
|
|
<scroll-view class="smallHeight" scroll-y>
|
|
<view class="stations-nav">
|
|
<view class="headers_statistics">
|
|
<ul>
|
|
<li>
|
|
进行中
|
|
<span>{{ peddingNum }}</span>
|
|
</li>
|
|
<li class="item_center">
|
|
已完成
|
|
<span>{{ closeNum }}</span>
|
|
</li>
|
|
<li>
|
|
已延期
|
|
<span>{{ postponeNum }}</span>
|
|
</li>
|
|
</ul>
|
|
</view>
|
|
<view class="list_title">
|
|
<view class="list_h2">{{ listTitle }}</view>
|
|
<view class="list_btn">
|
|
<ul>
|
|
<li v-for="(item, index) in listNav" :class="[true ? 'nav'+index : '', opType == index+1 ? 'activeNav' : '']" :ref="'nav'+index" :key="index" @click="checkTab(index)">{{ item.name }}</li>
|
|
</ul>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="card_box" v-if="cardList.length > 0">
|
|
<view class="card_list">
|
|
<view class="card_wrapper" v-for="(item, index) in cardList" :key="index">
|
|
<view class="card_item">
|
|
<view class="card_status">
|
|
<span class="card_date">{{ item.endDayNum }}天</span>
|
|
<!-- <span v-if="item.status == 0" class="card_action">审批</span> -->
|
|
<span v-if="item.taskLevel == 1" class="card_ordinary">一般</span>
|
|
<span v-if="item.taskLevel == 2" class="card_danger">重要</span>
|
|
</view>
|
|
<view class="card_wrap" @click="showCard(item,index)">
|
|
<view class="card_content">{{ item.taskTitle }}</view>
|
|
<view class="card_plan">
|
|
<view class="card_num">
|
|
子任务数量：
|
|
<span>{{ item.subtask.totalnum }}</span>
|
|
</view>
|
|
<view class="card_people" v-if="item.taskUserName">
|
|
<span v-for="(itm, idx) in item.peopleList" :key="idx">{{ itm }}</span>
|
|
<view class="more">...</view>
|
|
</view>
|
|
</view>
|
|
<view class="card_progress">
|
|
<view class="progress"><view class="progress_content" :style="{ width: item.subtask.completeratio + '%' }"></view></view>
|
|
<span>{{ item.subtask.completeratio }}%</span>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="card_radio" :class="[true ? 'radio'+index : '']" :ref="'radio'+[index]" @click="checkFinish(item,index)">
|
|
<image v-if="item.taskState == 1" src="/static/workstation/card_radio_uncheck.png"></image>
|
|
<image v-else src="/static/workstation/card_radio_check.png"></image>
|
|
</view>
|
|
<view class="card_bottom" v-if="item.children.length > 0 && item.isShow">
|
|
<span></span>
|
|
<span></span>
|
|
</view>
|
|
</view>
|
|
<uni-transition ref="ani" :show="item.children.length > 0" :duration="1000">
|
|
<view class="card_detail" :class="[ item.isShow && item.children.length > 0 ?'card_show': '', item.isShow ? 'card'+index : '']" :style="{'height':item.height, 'padding': item.padding}" :ref="'card'+index">
|
|
<view class="card_top" v-if="item.children.length > 0">
|
|
<span></span>
|
|
<span></span>
|
|
</view>
|
|
<view class="detail_list">
|
|
<view class="detail_item" v-for="(item2, index2) in item.children" :key="index2">
|
|
<view class="detail_status">
|
|
<span>{{ item2.endDayNum }}天</span>
|
|
</view>
|
|
<view class="flex">
|
|
<view class="detail_radio" @click="checkChild(item2,index)">
|
|
<span v-if="item2.subtaskState == 1" class="detail_uncheck"></span>
|
|
<span v-else><image src="/static/workstation/card_radio_check.png"></image></span>
|
|
</view>
|
|
<view class="detail_lable" @click="previewData(item)">
|
|
<view class="detail_text">{{ item2.subtaskTitle }}</view>
|
|
<view class="flex">
|
|
<view class="detail_progress">
|
|
<view class="progress"><view class="progress_content" :style="{ width: item2.progressRatio + '%' }"></view></view>
|
|
<span>{{ item2.progressRatio }}%</span>
|
|
</view>
|
|
<view class="detail_people">
|
|
<span>{{ item2.subtaskDistributeName.substring(0,1) }}</span>
|
|
<view class="more">...</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</uni-transition>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="no-data" v-else>暂无数据</view>
|
|
<view class="add_btn" @click="addProject">
|
|
<span>+</span>
|
|
新建任务
|
|
</view>
|
|
</scroll-view>
|
|
<footers2></footers2>
|
|
<view class="finish_radio" :style="{'display': moveStyle.display, 'bottom': moveStyle.bottom, 'left': moveStyle.left, 'top': moveStyle.top}">
|
|
<image src="/static/workstation/card_radio_check.png"></image>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import footers2 from '../../../components/footers/footers2.vue';
|
|
import headers from '../headers.vue';
|
|
export default {
|
|
data() {
|
|
return {
|
|
listTitle: '任务列表',
|
|
listNav: [
|
|
{
|
|
name: '已完成'
|
|
},
|
|
{
|
|
name: '未完成'
|
|
}
|
|
],
|
|
navList: [
|
|
{
|
|
name: "任务清单"
|
|
},
|
|
{
|
|
name: "通知公告"
|
|
},
|
|
{
|
|
name: "工作日程"
|
|
}
|
|
],
|
|
peddingNum: '0',
|
|
closeNum: '0',
|
|
postponeNum: '0',
|
|
opType: 2,
|
|
ischeck: true,
|
|
cardList: [],
|
|
userInfo: "",
|
|
projectSn: "",
|
|
pageNo: 1,
|
|
pageSize: 100,
|
|
total: 0,
|
|
timer: null,
|
|
moveStyle:{
|
|
display: 'none',
|
|
bottom: 0,
|
|
left: 0,
|
|
top: null
|
|
}
|
|
};
|
|
},
|
|
components: {
|
|
footers2,
|
|
headers
|
|
},
|
|
onReady(){
|
|
// let query = uni.createSelectorQuery().in(this).select('.add_btn');
|
|
// console.log(query)
|
|
// query.boundingClientRect(data => {
|
|
// console.log(data);
|
|
// }).exec();
|
|
},
|
|
created(){
|
|
this.userInfo = JSON.parse(uni.getStorageSync('userInfo'))
|
|
this.projectSn = this.userInfo.sn
|
|
console.log(this.projectSn)
|
|
this.loadData()
|
|
this.selectWorkerTotal()
|
|
},
|
|
onReachBottom() {
|
|
console.log(1)
|
|
this.loadData()
|
|
},
|
|
methods: {
|
|
previewData(val){
|
|
uni.navigateTo({
|
|
url:'./editProject?id='+ val.id
|
|
})
|
|
},
|
|
loadData(callback){
|
|
let data = {
|
|
projectSn: this.projectSn,
|
|
pageNo: 1,
|
|
pageSize: 1000,
|
|
opType: this.opType
|
|
}
|
|
let _this = this
|
|
this.sendRequest({
|
|
url: "xmgl/workstationTaskRecord/selectWorkstationTaskPageList",
|
|
data: data,
|
|
method: "POST",
|
|
success(res){
|
|
// console.log(res.result.records)
|
|
_this.total = res.result.total
|
|
res.result.records.forEach(item=>{
|
|
let peopleArr = []
|
|
if (item.taskUserName){
|
|
item.taskUserName.split(',').forEach(itm=>{
|
|
peopleArr.push(itm.substring(0,1))
|
|
})
|
|
}
|
|
item.peopleList = peopleArr
|
|
item.children = []
|
|
item.isShow = false
|
|
})
|
|
_this.cardList = res.result.records
|
|
if(callback){
|
|
callback();
|
|
}
|
|
// console.log(_this.cardList)
|
|
}
|
|
})
|
|
// console.log(this.cardList)
|
|
},
|
|
selectWorkerTotal(){
|
|
let _this = this
|
|
this.sendRequest({
|
|
url: "xmgl/workstationTaskRecord/selectWorkstationTaskCount",
|
|
data: {projectSn: this.projectSn},
|
|
method: "POST",
|
|
success(res){
|
|
// console.log(res)
|
|
if(res.code == 200){
|
|
_this.peddingNum = res.result.notCompleteTaskNum
|
|
_this.closeNum = res.result.completeTaskNum
|
|
_this.postponeNum = res.result.overdueTaskNum
|
|
}
|
|
}
|
|
})
|
|
},
|
|
checkTab(index){
|
|
this.opType = index + 1
|
|
this.loadData()
|
|
},
|
|
checkChild(item, index){
|
|
console.log(item)
|
|
item.subtaskState = item.subtaskState == 1 ? 2 : 1
|
|
let allCheck = false
|
|
let _this = this
|
|
this.sendRequest({
|
|
url: "xmgl/workstationSubtask/edit",
|
|
data: {
|
|
// projectSn: this.projectSn,
|
|
id: item.id,
|
|
subtaskState: item.subtaskState,
|
|
taskId: item.taskId
|
|
},
|
|
method: "POST",
|
|
success(res){
|
|
// console.log(res)
|
|
let callback = ()=>{
|
|
_this.$nextTick(()=>{
|
|
_this.showCard(_this.cardList[index], index)
|
|
})
|
|
}
|
|
_this.loadData(callback)
|
|
}
|
|
})
|
|
|
|
|
|
// item.isCheck = !item.isCheck
|
|
// let allCheck = false
|
|
// for (let i = 0; i<this.cardList[index].children.length; i++){
|
|
// if(this.cardList[index].children[i].isCheck) {
|
|
// allCheck = true
|
|
// } else {
|
|
// allCheck = false;
|
|
// this.cardList[index].isFinish = false
|
|
// return;
|
|
// }
|
|
// }
|
|
// if(allCheck && !this.cardList[index].isFinish){
|
|
// this.checkFinish(this.cardList[index],index);
|
|
// }
|
|
},
|
|
showCard(item, index){
|
|
// console.log(item)
|
|
item.isShow = !item.isShow
|
|
let _this = this
|
|
this.sendRequest({
|
|
url: "xmgl/workstationSubtask/selectSubtaskList",
|
|
data: {taskId: item.id},
|
|
method: "POST",
|
|
success(res){
|
|
// console.log(res.result)
|
|
if(res.result.length> 0){
|
|
item.children = res.result
|
|
// console.log(_this.cardList)
|
|
// let query = uni.createSelectorQuery()
|
|
// let data = query.select('card'+index)
|
|
// data.boundingClientRect()
|
|
// query.exec(function(res){
|
|
// console.log(res)
|
|
// })
|
|
// console.log(data)
|
|
_this.$nextTick(()=>{
|
|
let height = 0
|
|
if(item.children.length > 0){
|
|
// console.log(this.$refs['card'+index][0], e)
|
|
if(item.isShow){
|
|
// let obj = uni.createSelectorQuery().select('.card'+index)
|
|
// obj.boundingClientRect(function(data) { // data - 各种参数
|
|
// height = data.height + 37
|
|
// item.height = height + 'px'
|
|
// console.log(item.height)
|
|
// that.movableBoxTop = data.top;
|
|
// }).exec()
|
|
// console.dir(_this)
|
|
// _this.$refs['card'+index][0].$el.style.padding = "20rpx 11px 36rpx 26rpx";
|
|
} else {
|
|
// console.log(1)
|
|
if(_this.timer){
|
|
_this.timer = null
|
|
}
|
|
// item.height = '0px'
|
|
// item.padding = 0
|
|
_this.timer = setTimeout(()=>{
|
|
item.children = []
|
|
},400)
|
|
}
|
|
}
|
|
})
|
|
} else {
|
|
if(uni.getStorageSync('attendee')){
|
|
uni.removeStorage({
|
|
key: 'attendee',
|
|
success: function (res) {
|
|
console.log('success');
|
|
}
|
|
})
|
|
}
|
|
uni.navigateTo({
|
|
url: './editProject?id='+item.id
|
|
})
|
|
}
|
|
}
|
|
})
|
|
// let data = uni.createSelectorQuery().select('card'+index)
|
|
// this.$nextTick(()=>{
|
|
// let height = 0
|
|
// if(item.children.length > 0){
|
|
// // console.log(this.$refs['card'+index][0], e)
|
|
// if(item.isShow){
|
|
// height = this.$refs['card'+index][0].$el.offsetHeight + 37
|
|
// this.$refs['card'+index][0].$el.style.height = height + 'px'
|
|
// } else {
|
|
// this.$refs['card'+index][0].$el.style.height = 0
|
|
// }
|
|
// }
|
|
// })
|
|
// console.log(this.$refs['card'+index][0], e)
|
|
},
|
|
addProject(){
|
|
if(uni.getStorageSync('attendee')){
|
|
uni.removeStorage({
|
|
key: 'attendee',
|
|
success: function (res) {
|
|
console.log('success');
|
|
}
|
|
})
|
|
}
|
|
uni.navigateTo({
|
|
url: './addProject'
|
|
})
|
|
},
|
|
checkFinish(item,index){
|
|
console.log(item)
|
|
item.taskState = item.taskState == 1 ? 2 : 1
|
|
let _this = this
|
|
this.sendRequest({
|
|
url: "xmgl/workstationTaskRecord/updateTaskRecord",
|
|
data: {
|
|
projectSn: this.projectSn,
|
|
id: item.id,
|
|
taskState: item.taskState
|
|
},
|
|
method: "POST",
|
|
success(res){
|
|
console.log(res)
|
|
if(res.code == 200){
|
|
for (let i = 0; i<_this.cardList[index].children.length; i++){
|
|
_this.cardList[index].children[i].subtaskState = item.taskState
|
|
}
|
|
if(item.taskState == 2){
|
|
_this.$nextTick(()=>{
|
|
let dom = _this.$refs['radio'+index][0].$el
|
|
_this.moveDom(dom,index)
|
|
setTimeout(()=>{
|
|
_this.loadData()
|
|
}, 1000)
|
|
})
|
|
} else {
|
|
_this.loadData()
|
|
}
|
|
}
|
|
|
|
}
|
|
})
|
|
// for (let i = 0; i<this.cardList[index].children.length; i++){
|
|
// if(item.isFinish) {
|
|
// this.cardList[index].children[i].isCheck = true
|
|
// } else {
|
|
// this.cardList[index].children[i].isCheck = false;
|
|
// }
|
|
// }
|
|
// console.log(this.$refs['radio'+index][0])
|
|
// if(item.isFinish){
|
|
// let dom = this.$refs['radio'+index][0].$el
|
|
// this.moveDom(dom,index)
|
|
// }
|
|
|
|
},
|
|
moveDom(dom,index){
|
|
let startData = {}
|
|
let targetData = {}
|
|
let moveData = {}
|
|
let getStartData = new Promise((res)=>{
|
|
let obj = uni.createSelectorQuery().select('.radio'+index)
|
|
obj.boundingClientRect(function(data) { // data - 各种参数
|
|
// console.log(JSON.stringify(data))
|
|
res(data)
|
|
// that.movableBoxTop = data.top;
|
|
}).exec()
|
|
}).then(data=>{
|
|
startData = data
|
|
let gettargetData = new Promise((res)=>{
|
|
let obj2 = uni.createSelectorQuery().select('.nav0')
|
|
obj2.boundingClientRect(function(data) { // data - 各种参数
|
|
// console.log(JSON.stringify(data))
|
|
res(data)
|
|
// that.movableBoxTop = data.top;
|
|
}).exec()
|
|
}).then(data=>{
|
|
console.log(data)
|
|
targetData = data
|
|
let getMoveData= new Promise((res)=>{
|
|
let obj3 = uni.createSelectorQuery().select('.finish_radio')
|
|
obj3.boundingClientRect(function(data) { // data - 各种参数
|
|
// console.log(JSON.stringify(data))
|
|
res(data)
|
|
// that.movableBoxTop = data.top;
|
|
}).exec()
|
|
}).then(data=>{
|
|
console.log(data)
|
|
moveData = data
|
|
var timer = null,
|
|
timer2 = null;
|
|
// moveDom.style.display = 'block';
|
|
this.moveStyle.display = 'block';
|
|
this.moveStyle.left = startData.left + 'px';
|
|
this.moveStyle.left = startData.top + 'px';
|
|
// moveDom.style.left = startDom.getBoundingClientRect().left + 'px';
|
|
// moveDom.style.top = startDom.getBoundingClientRect().top + 'px';
|
|
|
|
// 获取起始位置
|
|
var nStartX = startData.left,
|
|
nStartY = startData.top;
|
|
// var nStartX = startDom.getBoundingClientRect().left,
|
|
// nStartY = startDom.getBoundingClientRect().top;
|
|
// console.log(nStartX,nStartY)
|
|
// 获取终点位置
|
|
var nEndX = targetData.left,
|
|
nEndY = targetData.top,
|
|
// var nEndX = targetDom.getBoundingClientRect().left,
|
|
// nEndY = targetDom.getBoundingClientRect().top,
|
|
nTopX = nEndX - 8,
|
|
nTopY = nEndY - 8;
|
|
|
|
var a = ((nStartY - nEndY) * (nStartX - nTopX) - (nStartY - nTopY) * (nStartX - nEndX)) / ((nStartX * nStartX - nEndX * nEndX) * (nStartX - nTopX) - (nStartX * nStartX - nTopX * nTopX) * (nStartX - nEndX));
|
|
var b = ((nEndY - nStartY) - a * (nEndX * nEndX - nStartX * nStartX)) / (nEndX - nStartX);
|
|
var c = nStartY - a * nStartX * nStartX - b * nStartX;
|
|
var x = nStartX;
|
|
let _this = this
|
|
// console.log(nEndY, nEndX)
|
|
timer = setInterval(function() {
|
|
x+= 5;
|
|
var y = a * x * x + b * x + c;
|
|
if (x >= nEndX) {
|
|
x = nEndX;
|
|
y = nEndY;
|
|
_this.moveStyle.display = 'none'
|
|
clearInterval(timer);
|
|
}
|
|
// console.log( _this.moveStyle.left,_this.moveStyle.top)
|
|
_this.moveStyle.left = x + 'px';
|
|
_this.moveStyle.top = y + 'px';
|
|
}, 10)
|
|
// console.log(startData,targetData,moveData)
|
|
})
|
|
})
|
|
})
|
|
// let obj2 = uni.createSelectorQuery().select('.nav0')
|
|
// obj2.boundingClientRect(function(data) { // data - 各种参数
|
|
// // console.log(JSON.stringify(data))
|
|
// targetData = data
|
|
// // that.movableBoxTop = data.top;
|
|
// }).exec()
|
|
// let obj3 = uni.createSelectorQuery().select('.finish_radio')
|
|
// obj3.boundingClientRect(function(data) { // data - 各种参数
|
|
// // console.log(JSON.stringify(data))
|
|
// moveData = data
|
|
// // that.movableBoxTop = data.top;
|
|
// }).exec()
|
|
// let obj = uni.createSelectorQuery().select('.finish_radio')
|
|
// obj.boundingClientRect(function(data) { // data - 各种参数
|
|
// console.log(JSON.stringify(data))
|
|
// // that.movableBoxTop = data.top;
|
|
// }).exec()
|
|
// var startDom = dom;
|
|
// var targetDom = this.$refs['nav0'][0];
|
|
// var moveDom = document.querySelector('.finish_radio');
|
|
// console.log(targetDom)
|
|
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.smallHeight {
|
|
height: calc(100% - 54rpx);
|
|
box-sizing: border-box;
|
|
}
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
.add_btn {
|
|
position: fixed;
|
|
right: 12rpx;
|
|
bottom: 124rpx;
|
|
// width: 84rpx;
|
|
// height: 84rpx;
|
|
width: 124rpx;
|
|
height: 124rpx;
|
|
display: flex;
|
|
font-size: 16rpx;
|
|
background: #fff;
|
|
border-radius: 50%;
|
|
border: 8rpx solid rgba(18, 127, 236, 0.08);
|
|
color: #127fec;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
span {
|
|
font-size: 20rpx;
|
|
}
|
|
}
|
|
.workStationIndexPage {
|
|
padding-top: 220rpx;
|
|
box-sizing: border-box;
|
|
background: #f6f6f6;
|
|
:deep( .headers_box ){
|
|
// padding-bottom: 72rpx;
|
|
width: 100%;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 2;
|
|
}
|
|
.stations-nav{
|
|
background: #127FEC;
|
|
padding-bottom: 60rpx;
|
|
border-radius: 0px 0px 40rpx 40rpx;
|
|
}
|
|
.headers_statistics {
|
|
margin-bottom: 30rpx;
|
|
ul {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
list-style: none;
|
|
width: 100%;
|
|
height: 54rpx;
|
|
padding: 0;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
|
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
|
li {
|
|
flex: 1;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
line-height: 54rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
span {
|
|
font-size: 36rpx;
|
|
color: #fff;
|
|
margin-left: 20rpx;
|
|
}
|
|
}
|
|
.item_center {
|
|
border-left: 1px solid rgba(255, 255, 255, 0.2);
|
|
border-right: 1px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
}
|
|
}
|
|
.list_title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.list_h2 {
|
|
color: #fff;
|
|
font-size: 30rpx;
|
|
font-weight: 500;
|
|
margin-left: 54rpx;
|
|
}
|
|
.list_btn {
|
|
margin-right: 30rpx;
|
|
ul {
|
|
list-style: none;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 12rpx;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
padding: 0;
|
|
overflow: hidden;
|
|
li {
|
|
color: rgba(255, 255, 255, 0.6);
|
|
width: 120rpx;
|
|
height: 46rpx;
|
|
line-height: 46rpx;
|
|
font-size: 28rpx;
|
|
text-align: center;
|
|
}
|
|
.activeNav {
|
|
background: #fff;
|
|
color: #127fec;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.card_box {
|
|
margin-top: -40rpx;
|
|
padding-bottom: 48rpx;
|
|
.card_list {
|
|
.card_item {
|
|
width: 666rpx;
|
|
margin: 0 auto;
|
|
background: #fff;
|
|
border-radius: 16rpx;
|
|
padding: 64rpx 22rpx 18rpx 26rpx;
|
|
box-sizing: border-box;
|
|
box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.1);
|
|
position: relative;
|
|
margin-bottom: 18rpx;
|
|
.card_status {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
overflow: hidden;
|
|
border-radius: 0 16rpx 0 0;
|
|
span {
|
|
font-size: 24rpx;
|
|
line-height: 48rpx;
|
|
display: inline-block;
|
|
height: 48rpx;
|
|
padding: 0 52rpx 0 16rpx;
|
|
margin-right: -40rpx;
|
|
border-radius: 0 0 0 16rpx;
|
|
}
|
|
.card_date {
|
|
background: #f3f8f5;
|
|
color: #68d199;
|
|
}
|
|
.card_action {
|
|
background: #ffe8db;
|
|
color: #fe9b65;
|
|
}
|
|
.card_ordinary {
|
|
background: #9293ed;
|
|
color: #fff;
|
|
}
|
|
.card_danger {
|
|
background: #fa8686;
|
|
color: #fff;
|
|
}
|
|
}
|
|
.card_content {
|
|
font-size: 30rpx;
|
|
margin-bottom: 16rpx;
|
|
padding-left: 34rpx;
|
|
}
|
|
.card_plan {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 24rpx;
|
|
margin-bottom: 8rpx;
|
|
padding-left: 34rpx;
|
|
.card_num {
|
|
color: #6c7178;
|
|
span {
|
|
color: #2f3548;
|
|
margin-left: 4rpx;
|
|
}
|
|
}
|
|
.card_people {
|
|
display: flex;
|
|
align-items: center;
|
|
span {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
border-radius: 50%;
|
|
background: rgba(18, 127, 236, 0.1);
|
|
color: #127fec;
|
|
display: inline-block;
|
|
text-align: center;
|
|
line-height: 44rpx;
|
|
margin-right: 8rpx;
|
|
}
|
|
.more {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
line-height: 44rpx;
|
|
color: #127fec;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
.card_progress {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
color: #68d198;
|
|
font-size: 24rpx;
|
|
padding-left: 34rpx;
|
|
margin-bottom: 22rpx;
|
|
.progress {
|
|
background: rgba(108, 113, 120, 0.2);
|
|
width: 512rpx;
|
|
height: 6rpx;
|
|
border-radius: 4rpx;
|
|
overflow: hidden;
|
|
.progress_content {
|
|
background: #68d199;
|
|
border-radius: 4rpx;
|
|
height: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
.card_radio {
|
|
position: absolute;
|
|
left: -24rpx;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 64rpx;
|
|
height: 64rpx;
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.card_bottom {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 100%;
|
|
span {
|
|
display: block;
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.5);
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
}
|
|
.card_detail {
|
|
width: 666rpx;
|
|
background: #fff;
|
|
margin: 0 auto;
|
|
box-sizing: border-box;
|
|
border-radius: 16rpx;
|
|
margin-bottom: 18rpx;
|
|
.card_top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 100%;
|
|
margin-bottom: 24rpx;
|
|
span {
|
|
display: block;
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.5);
|
|
border-radius: 50%;
|
|
position: relative;
|
|
}
|
|
span:after {
|
|
content: ' ';
|
|
display: block;
|
|
width: 4rpx;
|
|
height: 74rpx;
|
|
background: #127fec;
|
|
position: absolute;
|
|
top: -64rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
.detail_list {
|
|
.card_bottom {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 100%;
|
|
span {
|
|
display: block;
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.5);
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
.detail_item {
|
|
width: 614rpx;
|
|
margin: 0 auto;
|
|
background: rgba(16, 126, 238, 0.04);
|
|
position: relative;
|
|
border-radius: 16rpx;
|
|
margin-bottom: 18rpx;
|
|
box-sizing: border-box;
|
|
padding: 40rpx 40rpx 22rpx 22rpx;
|
|
.detail_status {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
span {
|
|
background: rgba(18, 127, 236, 0.44);
|
|
color: #fff;
|
|
display: inline-block;
|
|
width: 56rpx;
|
|
height: 36rpx;
|
|
border-radius: 0 0 0 20rpx;
|
|
font-size: 20rpx;
|
|
text-align: center;
|
|
line-height: 36rpx;
|
|
}
|
|
}
|
|
.detail_radio {
|
|
span {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
display: block;
|
|
margin-top: 20rpx;
|
|
margin-right: 22rpx;
|
|
}
|
|
.detail_uncheck {
|
|
border: 1px solid rgba(108, 113, 120, 0.3);
|
|
border-radius: 50%;
|
|
box-sizing: border-box;
|
|
}
|
|
image {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
}
|
|
}
|
|
.detail_lable {
|
|
flex: 1;
|
|
}
|
|
.detail_text {
|
|
font-size: 28rpx;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
.detail_progress {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
color: #127fec;
|
|
font-size: 24rpx;
|
|
.progress {
|
|
background: rgba(108, 113, 120, 0.2);
|
|
width: 192rpx;
|
|
height: 6rpx;
|
|
border-radius: 4rpx;
|
|
overflow: hidden;
|
|
margin-right: 24rpx;
|
|
.progress_content {
|
|
background: #127fec;
|
|
border-radius: 4rpx;
|
|
height: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
.detail_people {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
font-size: 24rpx;
|
|
color: #127fec;
|
|
span {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
border-radius: 50%;
|
|
background: rgba(18, 127, 236, 0.1);
|
|
display: inline-block;
|
|
text-align: center;
|
|
line-height: 44rpx;
|
|
margin-right: 8rpx;
|
|
}
|
|
.more {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
line-height: 44rpx;
|
|
color: #127fec;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// .card_wrap:hover .card_detail{
|
|
// transform: rotateX(0deg) !important;
|
|
// padding: 20rpx 22rpx 36rpx 26rpx !important;
|
|
// opacity: 1 !important;
|
|
// height: auto !important;
|
|
// }
|
|
.card_show {
|
|
transform: rotateX(0deg) !important;
|
|
padding: 20rpx 22rpx 36rpx 26rpx !important;
|
|
// opacity: 1 !important;
|
|
height: auto !important;
|
|
}
|
|
.card_wrapper{
|
|
// transform-style: preserve-3d;
|
|
transition: height 1s linear;
|
|
// margin-bottom: 18rpx;
|
|
// transform-origin: top;
|
|
}
|
|
.card_detail {
|
|
// padding: 0;
|
|
// opacity: 0;
|
|
// height: 0;
|
|
transform-style: preserve-3d;
|
|
transform-origin: top;
|
|
transform: rotateX(90deg);
|
|
transition: all 0.5s ease;
|
|
}
|
|
.finish_radio{
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 64rpx;
|
|
height: 64rpx;
|
|
display: none;
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.no-data{
|
|
text-align: center;
|
|
width: 100%;
|
|
margin-top: 100px;
|
|
}
|
|
</style>
|