修改

src/pages/scheduling/scheduleBoard.vue

 <style>
-  .schedu_left {
+  .scheduMain {
+    height: 100%;
+    width: 100%;
+    padding: 15px;
+    background-color: #f2f4f7;
+    overflow: hidden;
+  }
+
+  .scheduMain .schedu_left {
     width: 248px;
     flex: 0 0 auto;
     position: relative;
-    padding-top: 75px;
-    background-color: #296AFE;
+    background-image: url(../../assets/images/sched_bg.png);
+    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 {
-    padding: 0;
-    min-height: calc(100% - 30px);
-    margin: 15px !important;
+  .mySched {
     border-radius: 8px;
-    background: #FFF;
     overflow: hidden;
+    height: 100%;
+    background-color: #fff;
   }
 
   .schedu_ImgDiv {
@@ -21,7 +35,7 @@
     height: 68px;
     border-radius: 20px;
     overflow: hidden;
-    margin: auto;
+    margin: 75px auto 0;
   }
 
   .schedu_ImgDiv img {
@@ -70,40 +84,101 @@
     height: 34px;
     background: linear-gradient(90deg, #00BDD3, #00D761);
     border-radius: 10px;
-    margin:100px auto 24px;
+    margin: 100px auto 24px;
     text-align: center;
     line-height: 31px;
-    color:#fff;
+    color: #fff;
     font-size: 14px;
     cursor: pointer;
   }
-  .sche_daka{
-    font-size:18px;
+
+  .sche_daka {
+    font-size: 18px;
     position: relative;
     left: 5px;
     top: 2px;
   }
-  .schedu_jiaojie{
-    width:120px;
-    height:34px;
+
+  .schedu_jiaojie {
+    width: 120px;
+    height: 34px;
     line-height: 34px;
     text-align: center;
     border-radius: 10px;
-    border:1px solid #91AEFF;
-    color:#C4D4FF;
-    font-size:14px;
-    margin:auto;
-    cursor:pointer;
+    border: 1px solid #91AEFF;
+    color: #C4D4FF;
+    font-size: 14px;
+    margin: auto;
+    cursor: pointer;
+  }
+
+  .sche_rightTop {
+    width: 100%;
+    height: 80px;
+    background-color: #fff;
+  }
+
+  .myscroll {
+    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;
   }
-  .scheduleBoard{
-    max-height: calc(100% - 10px);
-    height: calc(100% - 10px);
+
+  .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>
+
 <template>
-  <div class="scheduleBoard">
-    <div class="schedule-body">
-      <div class="flex row okr">
+  <div class="scheduMain">
+    <div class="flex row mySched">
       <div class="schedu_left">
         <div class="schedu_ImgDiv">
           <img :src="dataList.DutyManIcon" alt="" />
@@ -121,13 +196,42 @@
         </div>
         <div class="schedu_jiaojie">值班交接</div>
       </div>
-        <div class="" style="padding-top:16px;">
-          123
+      <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="Sche_Bottom">
+          <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>
 </template>
+
 <script>
   import {
     OnDuty
@@ -141,12 +245,12 @@
           Id: 0,
           Shfit: 0
         },
-        dataList:{}
+        dataList: {}
       }
     },
     created() {
       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.Shfit = this.$route.query.Shift
         this.getList();
@@ -157,7 +261,7 @@
       getList() {
         OnDuty(this.msg).then(res => {
           if (res.Code == 1) {
-            console.log(res,'数据来也');
+            console.log(res, '数据来也');
             this.dataList = res.Data;
           }
         })