| | |
| | | </div> |
| | | <div class="center" v-loading="pageLoading"> |
| | | <scroll-pagination @load="init" :finishLoding="finishLoding"> |
| | | <div> |
| | | <div class="clearfix"> |
| | | <div class="fixed-left"> |
| | | <div class="content-title" style="padding-left: 16px;box-sizing: border-box;"> |
| | | 人员名称 |
| | |
| | | <div class="user-pic">{{ item.name.charAt(0) }}</div> |
| | | <div class="user-info"> |
| | | <p style="font-size: 14px;color: #3A7BFA;line-height: 24px;">{{ item.name }}</p> |
| | | <p style="color: #999999;font-size: 12px;transform: scale(0.8) translateX(-20px);white-space: nowrap;width: 150px;overflow-x: show;">早: {{ item.day0 }},中: {{ item.day1 }},夜: {{ item.day2 }},休: {{ item.day3 }},假: {{ item.day4 }}</p> |
| | | <p style="color: #999999;font-size: 12px;transform: scale(0.8) translateX(-20px);white-space: nowrap;width: 150px;overflow-x: show;">早: {{ item.day0 }}, 中: {{ item.day1 }}, 夜: {{ item.day2 }}, 休: {{ item.day3 }}, 假: {{ item.day4 }}</p> |
| | | <p style="margin-top: 4px;"><span style="color: #999999;font-size: 12px;display: inline-block;transform: scale(0.8) translateX(-10px);">合计出勤: </span><span style="font-size: 16px; |
| | | color: #FF4902;">{{ item.totalAttendance }}天</span></p> |
| | | </div> |
| | |
| | | </div> |
| | | </div> |
| | | <div class="content-body" v-for="(item,index) in list" :key="'c'+index" |
| | | :class="{hoverType:currentUserIndex==index}"v-on:mouseenter="onMouseEnter(index)" |
| | | v-on:mouseenter="onMouseEnter(index)" |
| | | v-on:mouseleave="currentUserIndex=null"> |
| | | <div class="content-body-item" v-for="(m,i) in item.list" :key="'d'+i"> |
| | | <div class="content-body-item" v-for="(m,i) in item.list" :key="'d'+i" :class="{hoverType:currentUserIndex==index}"> |
| | | <div class="work-box" :class="{type0:m.shift==='0',type1:m.shift==='1',type2:m.shift==='2',type3:m.shift==='3',type4:m.shift==='4',}"> |
| | | <div class="work-box-left"> |
| | | <span>{{ getShiftByDic(m.shift) }}</span> |
| | |
| | | width: 100%; |
| | | height: calc(100% - 40px ); |
| | | background-color: #fff; |
| | | position: relative; |
| | | overflow-y: auto; |
| | | display: flex; |
| | | } |
| | | >>>.scroll-pagination{ |
| | | overflow-y: scroll; |
| | | scrollbar-width: none; /* 对于 Firefox 和 IE 的兼容写法 */ |
| | | } |
| | | >>>.scroll-pagination::-webkit-scrollbar { |
| | | display: none; /* 对于 Chrome, Safari 和 Opera 的写法 */ |
| | | } |
| | | .fixed-left { |
| | | position: absolute; |
| | | left: 0; |
| | | top: 0; |
| | | float: left; |
| | | width: 220px; /* 左边区域宽度 */ |
| | | /* min-height: calc(100% - 10px); 视口高度 */ |
| | | background-color: #fff; |
| | | box-shadow: 2px -2px 5px rgba(51,51,51,0.12); /* 左边阴影 */ |
| | | } |
| | | |
| | | .clearfix::after { |
| | | content: ""; |
| | | display: table; |
| | | clear: both; |
| | | } |
| | | .scroll-right { |
| | | width: calc(100% - 220px); /* 减去左边区域宽度 */ |
| | | min-height: calc(100% - 10px); /* 视口高度 */ |
| | |
| | | |
| | | .content { |
| | | min-height: calc(100% - 10px); /* 视口高度 */ |
| | | /* min-width: 2000px; */ |
| | | } |
| | | .content-title{ |
| | | height: 52px; |
| | |
| | | border-bottom: 1px solid #EEEEEE; |
| | | } |
| | | .content-title-right{ |
| | | /* min-width: 2000px; */ |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | |
| | | background: #FDE2E2; |
| | | color: #F56C6C; |
| | | } |
| | | .el-icon-arrow-down::before{ |
| | | color: #c6c4c4; |
| | | } |
| | | .type0 .el-icon-arrow-down::before{ |
| | | color: #fff; |
| | | } |
| | | .type1 .el-icon-arrow-down::before{ |
| | | color: #fff; |
| | | } |
| | | .type2 .el-icon-arrow-down::before{ |
| | | color: #fff; |
| | | } |
| | | .type3 .el-icon-arrow-down::before{ |
| | | color: #fff; |
| | | } |
| | | .type4 .el-icon-arrow-down::before{ |
| | | color: #fff; |
| | | } |
| | | .work-box-left{ |
| | | display: flex; |
| | | justify-content: center; |