commit
a193a2be8c
6 changed files with 940 additions and 88 deletions
@ -0,0 +1,38 @@ |
|||||||
|
<template> |
||||||
|
<div class="bigbox"> |
||||||
|
<!-- <div class="menu"></div> --> |
||||||
|
<div class="content"><Content></Content></div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import Content from './task_content/TaskContent.vue' |
||||||
|
export default { |
||||||
|
props: ['iscollapse'], |
||||||
|
components: { |
||||||
|
Content |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="less" scoped> |
||||||
|
.bigbox { |
||||||
|
margin: 1rem 4rem 0 2rem; |
||||||
|
display: flex; |
||||||
|
.menu { |
||||||
|
width: 15%; |
||||||
|
height: 80vh; |
||||||
|
// background-color: aqua; |
||||||
|
} |
||||||
|
.content { |
||||||
|
width: 100%; |
||||||
|
height: 80vh; |
||||||
|
//background-color: antiquewhite; |
||||||
|
} |
||||||
|
.activecontent { |
||||||
|
width: 85%; |
||||||
|
height: 80vh; |
||||||
|
// background-color: antiquewhite; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,228 @@ |
|||||||
|
<template> |
||||||
|
<div class="bigcontent"> |
||||||
|
<div class="c_header"> |
||||||
|
<div class="header_left"> |
||||||
|
<span> |
||||||
|
<i class="el-icon-s-order"></i> |
||||||
|
部门任务 |
||||||
|
</span> |
||||||
|
<span> |
||||||
|
<i class="el-icon-s-management"></i> |
||||||
|
需求，任务 |
||||||
|
</span> |
||||||
|
<span class="left_smallbox"></span> |
||||||
|
</div> |
||||||
|
<div class="header_right"> |
||||||
|
<span class="right_box"></span> |
||||||
|
<span class="right_box"></span> |
||||||
|
<span class="right_box"></span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="c_content"> |
||||||
|
<div class="content_box" v-for="item in TotalData" :key="item.id"> |
||||||
|
<div class="status_title"> |
||||||
|
<HeaderCard |
||||||
|
:title="item.status" |
||||||
|
:color="item.color" |
||||||
|
:total="item.total" |
||||||
|
></HeaderCard> |
||||||
|
</div> |
||||||
|
<div class="status_content" @scroll="loadMore(item.id)" ref="box"> |
||||||
|
<ContenCard |
||||||
|
:color="item.color" |
||||||
|
:projectData="item.data" |
||||||
|
ref="childCard" |
||||||
|
></ContenCard> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import ContenCard from './content_card/ContentCard.vue' |
||||||
|
import HeaderCard from './content_card/HeaderCard.vue' |
||||||
|
// import { getTaskAdmin } from '@/api/manage.js' |
||||||
|
import { getAction, getFileAccessHttpUrl } from '@/api/manage.js' |
||||||
|
export default { |
||||||
|
components: { |
||||||
|
ContenCard, |
||||||
|
HeaderCard |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
TotalData: [ |
||||||
|
{ |
||||||
|
id: 0, |
||||||
|
status: '未发布', |
||||||
|
statusNum: 0, |
||||||
|
color: 'black', |
||||||
|
data: [], |
||||||
|
total: '', |
||||||
|
currentPage: 1 |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 1, |
||||||
|
status: '开发中', |
||||||
|
statusNum: 1, |
||||||
|
color: 'blue', |
||||||
|
data: [], |
||||||
|
total: '', |
||||||
|
currentPage: 1 |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 2, |
||||||
|
status: '已提交', |
||||||
|
statusNum: 3, |
||||||
|
color: 'orange', |
||||||
|
data: [], |
||||||
|
total: '', |
||||||
|
currentPage: 1 |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 3, |
||||||
|
status: '已审核', |
||||||
|
color: 'green', |
||||||
|
statusNum: 4, |
||||||
|
data: [], |
||||||
|
total: '', |
||||||
|
currentPage: 1 |
||||||
|
} |
||||||
|
], |
||||||
|
url: { |
||||||
|
list: '/task/task/list', |
||||||
|
queryById: 'task/task/queryById' |
||||||
|
}, |
||||||
|
loading: true, // 加载中 |
||||||
|
lastPage: false // 是否最后一页 |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 分类获取全部数据 |
||||||
|
async getAllData(index) { |
||||||
|
const res = await getAction(this.url.list, { |
||||||
|
workStatus: this.TotalData[index].statusNum |
||||||
|
}) |
||||||
|
if (res.success) { |
||||||
|
this.TotalData[index].data = res.result.records |
||||||
|
this.TotalData[index].total = res.result.total |
||||||
|
this.TotalData[index].data.forEach((element) => { |
||||||
|
element.headpic = getFileAccessHttpUrl(element.headpic) |
||||||
|
element.taskPic = getFileAccessHttpUrl(element.taskPic) |
||||||
|
}) |
||||||
|
} else { |
||||||
|
this.$message.warning(res.message) |
||||||
|
} |
||||||
|
console.log(this.TotalData[1].data) |
||||||
|
}, |
||||||
|
|
||||||
|
// 分页获取 |
||||||
|
async getDataByPage(index, current) { |
||||||
|
this.loading = true |
||||||
|
if (!this.lastPage) { |
||||||
|
const res = await getAction(this.url.list, { |
||||||
|
workStatus: this.TotalData[index].statusNum, |
||||||
|
pageNo: current |
||||||
|
}) |
||||||
|
this.TotalData[index].data = [ |
||||||
|
...this.TotalData[index].data, |
||||||
|
...res.result.records |
||||||
|
] |
||||||
|
if (res.result.records.length < 10) { |
||||||
|
this.lastPage = true |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
// 滑动到底部加载更多 |
||||||
|
loadMore(index) { |
||||||
|
let scrollDom = this.$refs.box |
||||||
|
if ( |
||||||
|
scrollDom[index].clientHeight + scrollDom[index].scrollTop + 1 >= |
||||||
|
scrollDom[index].scrollHeight |
||||||
|
) { |
||||||
|
scrollDom[index].scrollTop -= 10 |
||||||
|
this.TotalData[index].currentPage = |
||||||
|
this.TotalData[index].currentPage + 1 |
||||||
|
this.getDataByPage(index, this.TotalData[index].currentPage) |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
// 点击头像获取任务负责人信息 |
||||||
|
async getHeadInformation() { |
||||||
|
// const res=await |
||||||
|
} |
||||||
|
}, |
||||||
|
created() { |
||||||
|
this.getAllData(0) |
||||||
|
this.getAllData(1) |
||||||
|
this.getAllData(2) |
||||||
|
this.getAllData(3) |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="less" scoped> |
||||||
|
.bigcontent { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
.c_header { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
width: 100%; |
||||||
|
height: 6%; |
||||||
|
// background-color: aqua; |
||||||
|
.header_left { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
height: 100%; |
||||||
|
width: 20%; |
||||||
|
line-height: 2.2rem; |
||||||
|
font-size: 16px; |
||||||
|
color: #666666; |
||||||
|
.left_smallbox { |
||||||
|
width: 1rem; |
||||||
|
height: 0.5rem; |
||||||
|
line-height: 2.2rem; |
||||||
|
// background-color: #d9d9d9; |
||||||
|
} |
||||||
|
} |
||||||
|
.header_right { |
||||||
|
width: 30%; |
||||||
|
height: 100%; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
.right_box { |
||||||
|
display: inline-block; |
||||||
|
width: 30%; |
||||||
|
height: 100%; |
||||||
|
background: #d9d9d9; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.c_content { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
//background-color: aquamarine; |
||||||
|
.content_box { |
||||||
|
width: 24%; |
||||||
|
height: 100%; |
||||||
|
//background-color: rgb(230, 186, 129); |
||||||
|
.status_title { |
||||||
|
height: 8%; |
||||||
|
margin-bottom: 2%; |
||||||
|
} |
||||||
|
.status_content { |
||||||
|
height: 90%; |
||||||
|
overflow-y: scroll; |
||||||
|
// background-color: rgb(224, 163, 163); |
||||||
|
} |
||||||
|
} |
||||||
|
// 滚动条消失 |
||||||
|
.status_content::-webkit-scrollbar { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,501 @@ |
|||||||
|
<template> |
||||||
|
<div class="cardcard"> |
||||||
|
<template v-for="item in projectData"> |
||||||
|
<div class="card_content" :key="item.id"> |
||||||
|
<el-card |
||||||
|
class="little_card" |
||||||
|
:class=" |
||||||
|
color == 'black' |
||||||
|
? { card_black: true } |
||||||
|
: color == 'blue' |
||||||
|
? { card_blue: true } |
||||||
|
: color == 'orange' |
||||||
|
? { card_orange: true } |
||||||
|
: { card_green: true } |
||||||
|
" |
||||||
|
> |
||||||
|
<div style="padding: 0rem 0rem 0 1.5rem"> |
||||||
|
<div class="admin_title"> |
||||||
|
<template> |
||||||
|
<el-checkbox class="check"></el-checkbox> |
||||||
|
</template> |
||||||
|
<!-- 任务总述 --> |
||||||
|
<el-tooltip |
||||||
|
v-if="item.taskName.length > 13" |
||||||
|
:content="item.taskName" |
||||||
|
placement="top" |
||||||
|
> |
||||||
|
<span> |
||||||
|
{{ |
||||||
|
item.taskName.length > 13 |
||||||
|
? item.taskName.slice(0, 11) + '...' |
||||||
|
: item.taskName |
||||||
|
}} |
||||||
|
</span> |
||||||
|
</el-tooltip> |
||||||
|
<span v-else> |
||||||
|
{{ |
||||||
|
item.taskName.length > 18 |
||||||
|
? item.taskName.slice(0, 17) + '...' |
||||||
|
: item.taskName |
||||||
|
}} |
||||||
|
</span> |
||||||
|
|
||||||
|
<!-- 头像 --> |
||||||
|
<span class="pic" @click="LookPeople(item.managerUsers)"> |
||||||
|
<el-tooltip |
||||||
|
:content="item.managerUsers_dictText" |
||||||
|
placement="top" |
||||||
|
> |
||||||
|
<img |
||||||
|
:src="item.headpic" |
||||||
|
alt="" |
||||||
|
style=" |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
cursor: pointer; |
||||||
|
border-radius: 50%; |
||||||
|
" |
||||||
|
/> |
||||||
|
</el-tooltip> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- 项目内容/判断类型（文字？文件？照片） --> |
||||||
|
<div class="substance"> |
||||||
|
<div v-if="item.contentType == 'text'"> |
||||||
|
{{ item.taskDescribe }} |
||||||
|
</div> |
||||||
|
<!-- 类型是图片 --> |
||||||
|
<div v-else-if="item.contentType == 'image'" class="sub_image"> |
||||||
|
<img |
||||||
|
:src="item.taskPic" |
||||||
|
alt="" |
||||||
|
style=" |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
border-radius: 10px 10px 10px 10px; |
||||||
|
" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<!-- 类型是文档 --> |
||||||
|
<div v-else-if="item.contentType == 'file'" class="sub_document"> |
||||||
|
<div class="document"> |
||||||
|
<iframe |
||||||
|
:src="item.taskFile" |
||||||
|
frameborder="0" |
||||||
|
style=" |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
border-radius: 10px 10px 10px 10px; |
||||||
|
" |
||||||
|
></iframe> |
||||||
|
</div> |
||||||
|
<div class="s_operate"> |
||||||
|
<div>点击查看</div> |
||||||
|
<div>上传文档</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div></div> |
||||||
|
</div> |
||||||
|
<div class="time"> |
||||||
|
<i class="el-icon-date" style="font-size: 18px"></i> |
||||||
|
<!-- <span>项目工期:</span> --> |
||||||
|
<div class="timearea"> |
||||||
|
<!-- <span class="starttime"> |
||||||
|
{{ (item.startTime || '').slice(0, 10) }} |
||||||
|
</span> |
||||||
|
<span>至</span> --> |
||||||
|
<span>截止到</span> |
||||||
|
<span class="endtime"> |
||||||
|
{{ (item.expectedEndTime || '').slice(0, 10) }} |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<!-- 进度 --> |
||||||
|
<div class="schedule"> |
||||||
|
<span>项目进度:</span> |
||||||
|
<span class="s_tiao"> |
||||||
|
<!-- :percentage="Number(item.schedule)" --> |
||||||
|
<el-progress :percentage="30" :show-text="false"></el-progress> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="operate"> |
||||||
|
<div class="o_left"> |
||||||
|
<el-button |
||||||
|
type="primary" |
||||||
|
round |
||||||
|
class="but" |
||||||
|
size="small" |
||||||
|
></el-button> |
||||||
|
<el-button |
||||||
|
type="success" |
||||||
|
round |
||||||
|
class="but" |
||||||
|
size="small" |
||||||
|
></el-button> |
||||||
|
</div> |
||||||
|
<span class="edit">编辑</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<!-- 弹出框 --> |
||||||
|
<el-drawer |
||||||
|
:visible.sync="drawer" |
||||||
|
direction="rtl" |
||||||
|
:before-close="handleClose" |
||||||
|
trigger="click" |
||||||
|
> |
||||||
|
<template slot="title"> |
||||||
|
<i class="el-icon-more" style="cursor: pointer"></i> |
||||||
|
<el-dropdown trigger="click" style="position: absolute; left: 3rem"> |
||||||
|
<span class="el-dropdown-link"> |
||||||
|
<i class="el-icon-arrow-down el-icon--right"></i> |
||||||
|
</span> |
||||||
|
<el-dropdown-menu slot="dropdown"> |
||||||
|
<el-dropdown-item>黄金糕</el-dropdown-item> |
||||||
|
<el-dropdown-item>狮子头</el-dropdown-item> |
||||||
|
</el-dropdown-menu> |
||||||
|
</el-dropdown> |
||||||
|
</template> |
||||||
|
|
||||||
|
<div class="drawer"> |
||||||
|
<div class="drawer_header"> |
||||||
|
<div class="d_content"> |
||||||
|
<div class="d_pic"></div> |
||||||
|
<div class="d_name">夏艳玲</div> |
||||||
|
<div class="d_position">xxx码农</div> |
||||||
|
<div class="d_cont"> |
||||||
|
<a href="" style="margin-right: 0.5rem">xx项目</a> |
||||||
|
<a href="" style="margin-right: 0.5rem">大禹项目管理</a> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="drawer_body"> |
||||||
|
<div class="body_title">任务动态</div> |
||||||
|
<div class="body_content"> |
||||||
|
<div class="block"> |
||||||
|
<el-timeline> |
||||||
|
<el-timeline-item timestamp="2018/4/12" placement="top"> |
||||||
|
<div class="timeline"> |
||||||
|
<span class="year">09</span><span class="month">12月</span> |
||||||
|
</div> |
||||||
|
<div class="type">设计稿</div> |
||||||
|
<div ref="a" class="work_sum"> |
||||||
|
上传大禹项目管理系统竞赛项目设计稿一份1111 |
||||||
|
</div> |
||||||
|
<el-card style="width: 85%; height: 5rem; margin-left: 1rem"> |
||||||
|
<iframe |
||||||
|
src="" |
||||||
|
frameborder="0" |
||||||
|
style="width: 100%; height: 100%" |
||||||
|
></iframe> |
||||||
|
</el-card> |
||||||
|
</el-timeline-item> |
||||||
|
<el-timeline-item timestamp="2018/4/12" placement="top"> |
||||||
|
<div class="timeline"> |
||||||
|
<span class="year">09</span><span class="month">12月</span> |
||||||
|
</div> |
||||||
|
<div class="type">设计稿</div> |
||||||
|
<div ref="aa" class="work_sum">上传大禹项目设计稿一份</div> |
||||||
|
<el-card style="width: 85%; height: 5rem; margin-left: 1rem"> |
||||||
|
<iframe |
||||||
|
src="" |
||||||
|
frameborder="0" |
||||||
|
style="width: 100%; height: 100%" |
||||||
|
></iframe> |
||||||
|
</el-card> |
||||||
|
</el-timeline-item> |
||||||
|
</el-timeline> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-drawer> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
props: ['color', 'projectData'], |
||||||
|
data() { |
||||||
|
return { |
||||||
|
drawer: false |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
LookPeople(userid) { |
||||||
|
console.log(userid) |
||||||
|
this.drawer = true |
||||||
|
this.Check() |
||||||
|
}, |
||||||
|
// 让任务内容的特定字段变成链接可跳转 |
||||||
|
Check() { |
||||||
|
const s = '大禹项目' |
||||||
|
const ss = '竞赛项目' |
||||||
|
const reg = new RegExp('(' + s + ')|(' + ss + ')', 'g') |
||||||
|
this.$nextTick(() => { |
||||||
|
this.$refs.a.innerHTML = this.$refs.a.innerHTML.replace( |
||||||
|
reg, |
||||||
|
'<a href="$1">$1</a><a href="$2">$2</a>' |
||||||
|
) |
||||||
|
}) |
||||||
|
}, |
||||||
|
handleClose(done) { |
||||||
|
this.$confirm('确认关闭？') |
||||||
|
.then((_) => { |
||||||
|
done() |
||||||
|
}) |
||||||
|
.catch((_) => {}) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="less" scoped> |
||||||
|
.cardcard { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
// overflow: scroll; |
||||||
|
.card_content { |
||||||
|
width: 99%; |
||||||
|
.little_card { |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
margin-top: 1rem; |
||||||
|
// 项目标题 |
||||||
|
.admin_title { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
position: relative; |
||||||
|
width: 100%; |
||||||
|
font-size: 16px; |
||||||
|
font-weight: 700; |
||||||
|
color: #000000; |
||||||
|
.check { |
||||||
|
position: absolute; |
||||||
|
left: -1.5rem; |
||||||
|
} |
||||||
|
.pic { |
||||||
|
position: relative; |
||||||
|
display: inline-block; |
||||||
|
width: 1rem; |
||||||
|
height: 1rem; |
||||||
|
border-radius: 50%; |
||||||
|
// background-color: rgb(10, 228, 155); |
||||||
|
} |
||||||
|
} |
||||||
|
// 项目内容 |
||||||
|
.substance { |
||||||
|
margin-top: 1rem; |
||||||
|
font-size: 14px; |
||||||
|
color: #999999; |
||||||
|
.sub_image { |
||||||
|
width: 100%; |
||||||
|
height: 20vh; |
||||||
|
background-color: rgb(207, 207, 207); |
||||||
|
border-radius: 10px 10px 10px 10px; |
||||||
|
} |
||||||
|
.sub_document { |
||||||
|
display: flex; |
||||||
|
width: 100%; |
||||||
|
height: 20vh; |
||||||
|
.document { |
||||||
|
width: 55%; |
||||||
|
height: 100%; |
||||||
|
background-color: #52c93f; |
||||||
|
border-radius: 10px 10px 10px 10px; |
||||||
|
} |
||||||
|
.s_operate { |
||||||
|
position: relative; |
||||||
|
top: 2.7rem; |
||||||
|
left: 1.5rem; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: space-between; |
||||||
|
width: 25%; |
||||||
|
height: 40%; |
||||||
|
color: #3e75e6; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
// 项目时间 |
||||||
|
.time { |
||||||
|
display: flex; |
||||||
|
margin-top: 1rem; |
||||||
|
font-size: 13px; |
||||||
|
color: #999999; |
||||||
|
.timearea { |
||||||
|
width: 80%; |
||||||
|
margin-left: 1rem; |
||||||
|
//background-color: #3e75e6; |
||||||
|
.starttime { |
||||||
|
width: 45%; |
||||||
|
padding: 0.1rem; |
||||||
|
display: inline-block; |
||||||
|
background: #f0f0f0; |
||||||
|
} |
||||||
|
.endtime { |
||||||
|
width: 45%; |
||||||
|
padding: 0.1rem; |
||||||
|
display: inline-block; |
||||||
|
//background: #f0f0f0; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
// 项目进度 |
||||||
|
.schedule { |
||||||
|
display: flex; |
||||||
|
font-size: 13px; |
||||||
|
color: #999999; |
||||||
|
margin-top: 1rem; |
||||||
|
.s_tiao { |
||||||
|
top: 0.4rem; |
||||||
|
position: relative; |
||||||
|
width: 70%; |
||||||
|
margin-left: 0.3rem; |
||||||
|
} |
||||||
|
} |
||||||
|
//操作 |
||||||
|
.operate { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
width: 100%; |
||||||
|
margin-top: 1rem; |
||||||
|
.o_left { |
||||||
|
display: flex; |
||||||
|
width: 60%; |
||||||
|
// background-color: antiquewhite; |
||||||
|
.but { |
||||||
|
width: 50%; |
||||||
|
} |
||||||
|
} |
||||||
|
.edit { |
||||||
|
font-size: 13px; |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 弹窗头部 |
||||||
|
.drawer_header { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
height: 20vh; |
||||||
|
// background-color: #52c93f; |
||||||
|
.d_content { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
width: 60%; |
||||||
|
height: 100%; |
||||||
|
.d_pic { |
||||||
|
width: 5rem; |
||||||
|
height: 5rem; |
||||||
|
border-radius: 50%; |
||||||
|
background-color: #2147fb; |
||||||
|
} |
||||||
|
.d_name { |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
.d_position { |
||||||
|
font-size: 14px; |
||||||
|
color: #8c8a8a; |
||||||
|
} |
||||||
|
.d_cont { |
||||||
|
font-size: 12px; |
||||||
|
color: #8c8a8a; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 弹窗内容主题 |
||||||
|
.drawer_body { |
||||||
|
position: relative; |
||||||
|
margin-top: 4vh; |
||||||
|
width: 100%; |
||||||
|
height: 65vh; |
||||||
|
// background-color: #ffa326; |
||||||
|
border-top: 1px dotted #d4d4d4; |
||||||
|
.body_title { |
||||||
|
position: absolute; |
||||||
|
width: 40%; |
||||||
|
left: 30%; |
||||||
|
top: -2%; |
||||||
|
background-color: #ffffff; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.body_content { |
||||||
|
position: absolute; |
||||||
|
top: 1.5rem; |
||||||
|
width: 100%; |
||||||
|
height: 95%; |
||||||
|
// background-color: #52c93f; |
||||||
|
.block { |
||||||
|
margin-left: 2rem; |
||||||
|
.timeline { |
||||||
|
position: absolute; |
||||||
|
left: -1.3rem; |
||||||
|
top: -0.3rem; |
||||||
|
width: 3.5rem; |
||||||
|
height: 1.5rem; |
||||||
|
background-color: #ffffff; |
||||||
|
.year { |
||||||
|
font-size: 18px; |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
.month { |
||||||
|
margin-left: 0.2rem; |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
} |
||||||
|
.type { |
||||||
|
width: 2.5rem; |
||||||
|
background: #c0f1e3; |
||||||
|
margin-bottom: 0.5rem; |
||||||
|
margin-left: 1.2rem; |
||||||
|
font-size: 12px; |
||||||
|
color: white; |
||||||
|
} |
||||||
|
.work_sum { |
||||||
|
margin-left: 1rem; |
||||||
|
margin-bottom: 1rem; |
||||||
|
} |
||||||
|
|
||||||
|
/deep/.el-timeline-item__timestamp.is-top { |
||||||
|
// padding-top: 10px; |
||||||
|
margin-left: 1rem; |
||||||
|
} |
||||||
|
/deep/.el-card__body { |
||||||
|
padding: 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
// .cardcard::-webkit-scrollbar { |
||||||
|
// display: none; |
||||||
|
// } |
||||||
|
.card_black { |
||||||
|
border-left: 4px solid black; |
||||||
|
} |
||||||
|
.card_blue { |
||||||
|
border-left: 4px solid #2147fb; |
||||||
|
} |
||||||
|
.card_orange { |
||||||
|
border-left: 4px solid #ffa326; |
||||||
|
} |
||||||
|
.card_green { |
||||||
|
border-left: 4px solid #52c93f; |
||||||
|
} |
||||||
|
/deep/.el-drawer { |
||||||
|
width: 24% !important; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,71 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<div |
||||||
|
class="card_header" |
||||||
|
:class=" |
||||||
|
color == 'black' |
||||||
|
? { black: true } |
||||||
|
: color == 'blue' |
||||||
|
? { blue: true } |
||||||
|
: color == 'orange' |
||||||
|
? { orange: true } |
||||||
|
: { green: true } |
||||||
|
" |
||||||
|
> |
||||||
|
<span |
||||||
|
>{{ title }}<span class="number">{{ total }}</span></span |
||||||
|
> |
||||||
|
<span class="icon"> |
||||||
|
<i class="el-icon-plus"></i> |
||||||
|
<i class="el-icon-more" style="margin-left: 0.5rem"></i> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
props: ['title', 'color', 'total'] |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="less" scoped> |
||||||
|
.card_header { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
width: 100%; |
||||||
|
line-height: 3rem; |
||||||
|
font-size: 17px; |
||||||
|
color: #333333; |
||||||
|
font-weight: 400; |
||||||
|
|
||||||
|
.number { |
||||||
|
position: relative; |
||||||
|
display: inline-block; |
||||||
|
min-width: 1.5rem; |
||||||
|
min-height: 1.5rem; |
||||||
|
margin-left: 1rem; |
||||||
|
border-radius: 50%; |
||||||
|
border: 2px solid #999999; |
||||||
|
text-align: center; |
||||||
|
line-height: 1.3rem; |
||||||
|
color: #999999; |
||||||
|
} |
||||||
|
.icon { |
||||||
|
font-weight: bold; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
} |
||||||
|
.black { |
||||||
|
border-bottom: 3px solid black; |
||||||
|
} |
||||||
|
.blue { |
||||||
|
border-bottom: 3px solid #2147fb; |
||||||
|
} |
||||||
|
.orange { |
||||||
|
border-bottom: 3px solid #ffa326; |
||||||
|
} |
||||||
|
.green { |
||||||
|
border-bottom: 3px solid #52c93f; |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue