Skip to content

C
confucius
Commit e10f598a authored by zhengke's avatar zhengke
Browse files
Options

修改

parent cb17056d
Hide whitespace changes
Inline Side-by-side
Showing with 150 additions and 46 deletions
src/pages/scheduling/scheduleBoard.vue
View file @ e10f598a
<style> <style>
.schedu_left { .scheduMain {
height: 100%;
width: 100%;
padding: 15px;
background-color: #f2f4f7;
overflow: hidden;
}
.scheduMain .schedu_left {
width: 248px; width: 248px;
flex: 0 0 auto; flex: 0 0 auto;
position: relative; position: relative;
padding-top: 75px; background-image: url(../../assets/images/sched_bg.png);
background-color: #296AFE; background-repeat: no-repeat;
background-size: 100% auto;
height: 100%;
}
.scheduMain .okr-menu-active {
color: var(--q-color-primary);
font-weight: bold;
background: #ecf1ff;
} }
.schedule-body { .mySched {
padding: 0;
min-height: calc(100% - 30px);
margin: 15px !important;
border-radius: 8px; border-radius: 8px;
background: #FFF;
overflow: hidden; overflow: hidden;
height: 100%;
background-color: #fff;
} }
.schedu_ImgDiv { .schedu_ImgDiv {
...@@ -21,7 +35,7 @@ ...@@ -21,7 +35,7 @@
height: 68px; height: 68px;
border-radius: 20px; border-radius: 20px;
overflow: hidden; overflow: hidden;
margin: auto; margin: 75px auto 0;
} }
.schedu_ImgDiv img { .schedu_ImgDiv img {
...@@ -70,64 +84,154 @@ ...@@ -70,64 +84,154 @@
height: 34px; height: 34px;
background: linear-gradient(90deg, #00BDD3, #00D761); background: linear-gradient(90deg, #00BDD3, #00D761);
border-radius: 10px; border-radius: 10px;
margin:100px auto 24px; margin: 100px auto 24px;
text-align: center; text-align: center;
line-height: 31px; line-height: 31px;
color:#fff; color: #fff;
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;
} }
.sche_daka{
font-size:18px; .sche_daka {
font-size: 18px;
position: relative; position: relative;
left: 5px; left: 5px;
top: 2px; top: 2px;
} }
.schedu_jiaojie{
width:120px; .schedu_jiaojie {
height:34px; width: 120px;
height: 34px;
line-height: 34px; line-height: 34px;
text-align: center; text-align: center;
border-radius: 10px; border-radius: 10px;
border:1px solid #91AEFF; border: 1px solid #91AEFF;
color:#C4D4FF; color: #C4D4FF;
font-size:14px; font-size: 14px;
margin:auto; margin: auto;
cursor:pointer; cursor: pointer;
}
.sche_rightTop {
width: 100%;
height: 80px;
background-color: #fff;
} }
.scheduleBoard{
max-height: calc(100% - 10px); .myscroll {
height: calc(100% - 10px); background-color: #F6F8FA;
}
.sche_Topflex {
display: flex;
width: 80%;
height: 80px;
justify-content: space-between;
align-items: center;
}
.Sctop_Color {
font-size: 18px;
color: #000000;
width: 246px;
text-align: center;
}
.Scotop_little {
color: #AAAAAA;
font-size: 14px;
margin-right: 15px;
}
.Scdu_benci::after {
content: "";
position: absolute;
height: 29px;
width: 2px;
background: #EBEBEB;
right: 0;
}
.sche_mid {
display: flex;
width: 100%;
justify-content: space-between;
}
.sche_midList {
width: 32%;
height: 300px;
background: #fff;
border-radius: 16px;
overflow: hidden;
}
.Sche_Bottom{
margin:26px 0 0 40px;
}
.scheList_TOP{
width:100%;
height:107px;
border-radius: 16px;
overflow: hidden;
} }
</style> </style>
<template> <template>
<div class="scheduleBoard"> <div class="scheduMain">
<div class="schedule-body"> <div class="flex row mySched">
<div class="flex row okr"> <div class="schedu_left">
<div class="schedu_left"> <div class="schedu_ImgDiv">
<div class="schedu_ImgDiv"> <img :src="dataList.DutyManIcon" alt="" />
<img :src="dataList.DutyManIcon" alt="" /> </div>
</div> <div class="schedu_Name">
<div class="schedu_Name"> {{dataList.DutyManName}}
{{dataList.DutyManName}} </div>
</div> <div class="schedu_Status">
<div class="schedu_Status"> <span class="schedu_st zbz"></span>值班中
<span class="schedu_st zbz"></span>值班中 <!-- <span class="schedu_st xxz"></span>休息中
<!-- <span class="schedu_st xxz"></span>休息中
<span class="schedu_st wdk"></span>未打卡 --> <span class="schedu_st wdk"></span>未打卡 -->
</div>
<div class="clockon_Duty">
值班打卡<i class="iconfont icon-jiejue1 sche_daka"></i>
</div>
<div class="schedu_jiaojie">值班交接</div>
</div>
<div class="col scroll myscroll">
<div class="sche_rightTop">
<div class="sche_Topflex">
<div class="Sctop_Color Scdu_benci" style="position:relative;">本次值班信息</div>
<div class="Sctop_Color">
<span class="Scotop_little">校区</span>城中一校区
</div>
<div class="Sctop_Color" style="width:300px;">
<span class="Scotop_little">时间</span>2021.04.27 周二 9:30
</div>
<div class="Sctop_Color">
<span class="Scotop_little">班次</span>早班
</div>
</div> </div>
<div class="clockon_Duty">
值班打卡<i class="iconfont icon-jiejue1 sche_daka"></i>
</div>
<div class="schedu_jiaojie">值班交接</div>
</div> </div>
<div class="" style="padding-top:16px;"> <div class="Sche_Bottom">
123 <div class="sche_mid">
<div class="sche_midList">
<div class="scheList_TOP">
<img src="../../assets/images/work_list.png" />
</div>
</div>
<div class="sche_midList">
</div>
<div class="sche_midList">
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { import {
OnDuty OnDuty
...@@ -141,12 +245,12 @@ ...@@ -141,12 +245,12 @@
Id: 0, Id: 0,
Shfit: 0 Shfit: 0
}, },
dataList:{} dataList: {}
} }
}, },
created() { created() {
console.log(this.$route.query.Shift); console.log(this.$route.query.Shift);
if(this.$route.query.Shift&&this.$route.query.Id){ if (this.$route.query.Shift && this.$route.query.Id) {
this.msg.Id = this.$route.query.Id this.msg.Id = this.$route.query.Id
this.msg.Shfit = this.$route.query.Shift this.msg.Shfit = this.$route.query.Shift
this.getList(); this.getList();
...@@ -157,7 +261,7 @@ ...@@ -157,7 +261,7 @@
getList() { getList() {
OnDuty(this.msg).then(res => { OnDuty(this.msg).then(res => {
if (res.Code == 1) { if (res.Code == 1) {
console.log(res,'数据来也'); console.log(res, '数据来也');
this.dataList = res.Data; this.dataList = res.Data;
} }
}) })
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment