HTML
<div class="cm_table">
<div class="cm_header cm_height50">
<div class="cm_th_title">会议室</div>
<div class="cm_80">
<div v-for="item in timeList" :key="item" class="cm_td_t1">
{{ item }}
</div>
</div>
</div>
<div class="cm_body cm_height100 ">
<div class="cm_th_title">第七會議室</div>
<div class="cm_80 cm_relative">
<div v-for="(item,index) in timeList1" :key="index" class="cm_td_t2">
</div>
<div
v-for="(item,index) in meetList"
:key="index+'sr32k4'"
class="cm_absolute cm_meet_text"
:style="{
background: colorList[index],
left: (item.left) + '%' ,
height: 72/meetList.length + 'px' ,
'line-height': 72/meetList1.length + 'px' ,
top: ((72/meetList.length)*(index)) + 'px' ,
width:item.width+'%'
}"
>
<el-tooltip class="item" effect="dark" :content="item.meetName" placement="bottom">
<div>{{ item.meetName }}</div>
</el-tooltip>
</div>
</div>
</div>
<div class="cm_body cm_height100 ">
<div class="cm_th_title">C座902</div>
<div class="cm_80 cm_relative">
<div v-for="(item,index) in timeList1" :key="index" class="cm_td_t2">
</div>
<div
v-for="(item,index) in meetList1"
:key="index+'eet43'"
class="cm_absolute cm_meet_text"
:style="{
background: colorList[index],
left: (item.left) + '%' ,
height: 72/meetList1.length + 'px' ,
'line-height': 72/meetList1.length + 'px' ,
top: ((72/meetList1.length)*(index)) + 'px' ,
width:item.width+'%'
}"
>
<el-tooltip class="item" effect="dark" :content="item.meetName" placement="bottom">
<div>{{ item.meetName }}</div>
</el-tooltip>
</div>
</div>
</div>
</div>
JS
<script>
export default {
name: 'meetingCard',
data() {
return {
colorList: [
'#74a1f0',
'#8b8bb5',
'#525b92',
'#74a1f0',
'#8b8bb5',
'#525b92'
],
meetList: [
{
meetName: '08:00',
// 2.9412 * (0 + 5) 5是对应索引,会议时间
width: 2.9412 * (0 + 5),
// left: 2.9412 * (0 + x), x 开始时间的索引
left: 2.9412 * (0 + 0)
},
{
meetName: '13:30',
width: 2.9412 * (0 + 5),
left: 2.9412 * (0 + 5)
},
{
meetName: '13:30',
width: 2.9412 * (0 + 15),
left: 2.9412 * (0 + 2)
}
],
meetList1: [
{
meetName: '13:30',
width: 2.9412 * (0 + 15),
left: 2.9412 * (0 + 12)
}
],
timeList: [
'08:00', '09:00',
'10:00', '11:00', '12:00', '13:00',
'14:00', '15:00', '16:00', '17:00',
'18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00'
],
timeList1: [
'08:00', '08:30',
'09:00', '09:30',
'10:00', '10:30',
'11:00', '11:30',
'12:00', '12:30',
'13:00', '13:30',
'14:00', '14:30',
'15:00', '15:30',
'16:00', '16:30',
'17:00', '17:30',
'18:00', '18:30',
'19:00', '19:30',
'20:00', '20:30',
'21:00', '21:30',
'22:00', '22:30',
'23:00', '23:30',
'24:00', '24:30'
]
}
}
}
</script>
css
<style lang="scss" scoped>
.cm_relative{
position: relative;
}
.cm_absolute{
position:absolute;
}
.cm_meet_text{
text-align: center;
color: #fff;
line-height: 24px;
}
.cm_table{
margin: 50px;
border: 1px #ebeef5 solid;
}
.cm_height50{
height: 50px;
line-height: 50px;
}
.cm_height100{
height: 72px;
line-height: 72px;
}
.cm_header{
display: flex;
background:#f5f7fa;
border-bottom: 1px solid #ebeef5;
}
.cm_body{
display: flex;
background:#fff;
border-bottom: 1px solid #ebeef5;
}
.cm_td_t1{
width: calc( 100%/17);
border-right: 1px solid #ebeef5;
border-bottom: 1px solid #ebeef5;
text-align: center;
border-bottom: 0;
}
.cm_td_t2{
width: calc( 100%/34 );
text-align: center;
border-right: 1px solid #ebeef5;
border-bottom: 1px solid #ebeef5;
border-bottom: 0;
}
.cm_th_title{
width: 15%;
text-align: center;
border-right: 1px solid #ebeef5;
border-bottom: 1px solid #ebeef5;
border-bottom: 0;
}
.cm_80{
display: flex;
width: 85%;
}
</style>
使用：
VUE,Element-ui,Scss
