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