优化履职页面样式

src/components/DatePicker/index.vue

@@ -1,10 +1,11 @@
 <template>
   <div class="date-picker">
-    <div class="date-picker-box">
+    <div class="date-picker-box" >
       <vc-date-picker
         ref="Calendar"
         class="calendar"
         v-model="date"
+        :is-expanded="false"
         :disabled-dates='disabledDates'
         @transition-start="queryMoth"
         @dayclick="onDayClick">
@@ -47,6 +48,7 @@ export default {
     showPicker (){
       let weeksBox = document.getElementsByClassName('vc-day');
       let pickerBox = document.getElementsByClassName('date-picker-box')[0];
+      console.log(this.num,'num')
       if( this.showPicker){
         for(let i = 0; i < weeksBox.length;i++){
           weeksBox[i].style.transitionDuration = `.5s`;
@@ -55,6 +57,7 @@ export default {
         pickerBox.style.height = `${this.height}px`;
         console.log('show')
       }else {
+        alert(this.num)
         this.height = pickerBox.offsetHeight;
         for(let i = 0; i < weeksBox.length;i++){
           weeksBox[i].style.transitionDuration = `.5s`;
@@ -67,8 +70,9 @@ export default {
   },
   methods:{
     foldBox(){
-      let date =  this.$refs.Calendar
-      console.log(date,'this.$refs.Calendar')
+      let Calendar =  this.$refs.Calendar;
+      this.num = Calendar.dateParts[0].week - 1;
+      console.log(this.num,Calendar,'Calendar')
       this.showPicker = !this.showPicker;
     },
     // 获取年、月份
@@ -83,8 +87,8 @@ export default {
     onDayClick(day){
       if(day.isDisabled) return;
       console.log(day,'day')
-      let dayLine = day.classes[7].substring(5);
-      this.num = dayLine -1;
+      // let dayLine = day.classes[7].substring(5);
+      // this.num = dayLine -1;
       this.$emit('change',day.id)
     },
   }
@@ -144,5 +148,8 @@ export default {
       background-color: #fff;
     }
   }
+  .van-divider{
+    margin: 10px 20px;
+  }
 }
 </style>

src/views/home/menu.vue

@@ -6,7 +6,7 @@
       <Scroll ref="Scroll" :pullupDown="false" :pullup="false">
         <van-empty v-if="!menuList.length" description="暂无数据" />
         <card v-else class="menu-list-item" v-for="(v, i) in menuList" :key="i">
-          <p @click="onclick">{{ v.meta.title }}</p>
+          <p>{{ v.meta.title }}</p>
           <div style="border-left: 1px solid #f4f4f4;">
             <van-grid border :column-num="3">
               <van-grid-item

src/views/menu/resumption/list.vue

@@ -2,9 +2,7 @@
   <div class="lvzhi" ref="container">
     <NavBar :go="{ type: 'push', path: '/menu' }"/>
     <div class="lz-container" id="lz-container" @scroll="handleScroll">
-      <van-sticky :container="container">
-        <DatePicker ref="DatePicker" @change="changeDate"></DatePicker>
-      </van-sticky>
+      <DatePicker ref="DatePicker" @change="changeDate"></DatePicker>
       <div class="lz-list">
         <div class="list-item">
           <p>每日履职</p>
@@ -12,86 +10,84 @@
             <van-tab title="待完成">
               <template #title>待完成 {{dayList.unfinished.length}} </template>
               <van-empty description="暂无数据" v-if="!dayList.unfinished.length"/>
-              <van-cell-group  v-else>
-                <van-cell
-                  v-for="v in dayList.unfinished"
-                  :key="v.id"
-                  :title="v.planName"
-                  :label="formatTime(v.planStartTime,v.planEndTime,'HH:mm')"
-                  is-link
-                  :to="{path:path,query:{id:v.id,enable:1,taskDate:date}}"
-                  :value="getDicts(v.status,'resumption_status')"
-                  :value-class="`title-orange`"/>
-              </van-cell-group>
+              <div class="list-container" v-else>
+                  <van-cell
+                    v-for="v in dayList.unfinished"
+                    :key="v.id"
+                    :title="v.planName"
+                    :label="formatTime(v.planStartTime,v.planEndTime,'HH:mm')"
+                    is-link
+                    :to="{path:path,query:{id:v.id,enable:1,taskDate:date}}"
+                    :value="getDicts(v.status,'resumption_status')"
+                    :value-class="`title-orange`"/>
+              </div>
             </van-tab>
             <van-tab title="未完成">
               <template #title>未完成 {{dayList.proceed.length}} </template>
               <van-empty description="暂无数据" v-if="!dayList.proceed.length"/>
-              <van-cell-group v-else>
-                <van-cell
-                  v-for="v in dayList.proceed"
-                  :key="v.id"
-                  :title="v.planName"
-                  :label="formatTime(v.planStartTime,v.planEndTime,'HH:mm')"
-                  :value="getDicts(v.status,'resumption_status')"
-                  :value-class="`title-red`"/>
-              </van-cell-group>
+              <div class="list-container" v-else>
+                  <van-cell
+                    v-for="v in dayList.proceed"
+                    :key="v.id"
+                    :title="v.planName"
+                    :label="formatTime(v.planStartTime,v.planEndTime,'HH:mm')"
+                    :value="getDicts(v.status,'resumption_status')"
+                    :value-class="`title-red`"/>
+              </div>
             </van-tab>
             <van-tab title="已完成">
               <template #title>已完成 {{dayList.finished.length}} </template>
               <van-empty description="暂无数据" v-if="!dayList.finished.length"/>
-              <van-cell-group v-else>
-                <van-cell
-                  v-for="v in dayList.finished"
-                  :key="v.id"
-                  :title="v.planName"
-                  :label="formatTime(v.planStartTime,v.planEndTime,'HH:mm')"
-                  is-link
-                  :to="{path:path,query:{id:v.id,taskDate:date}}"
-                  :value="getDicts(v.status,'resumption_status')"
-                  :value-class="`title-green`"/>
-              </van-cell-group>
+              <div class="list-container" v-else>
+                  <van-cell
+                    v-for="v in dayList.finished"
+                    :key="v.id"
+                    :title="v.planName"
+                    :label="formatTime(v.planStartTime,v.planEndTime,'HH:mm')"
+                    is-link
+                    :to="{path:path,query:{id:v.id,taskDate:date}}"
+                    :value="getDicts(v.status,'resumption_status')"
+                    :value-class="`title-green`"/>
+              </div>
             </van-tab>
           </van-tabs>
         </div>
-
-
         <div class="list-item">
           <p>周期履职</p>
           <van-tabs >
             <van-tab title="待完成">
               <template #title>待完成 {{otherList.unfinished.length}} </template>
               <van-empty description="暂无数据" v-if="!otherList.unfinished.length"/>
-              <van-cell-group v-else>
-                <van-cell
-                  v-for="v in otherList.unfinished"
-                  :key="v.id"
-                  :title="v.planName"
-                  :label="formatTime(v.planStartTime,v.planEndTime,'YYYY-MM-DD')"
-                  is-link
-                  :to="{path:path,query:{id:v.id,enable:1,taskDate:date}}"
-                  :value="getDicts(v.status,'resumption_status')"
-                  :value-class="`title-orange`"/>
-              </van-cell-group>
+              <div class="list-container" v-else>
+                  <van-cell
+                    v-for="v in otherList.unfinished"
+                    :key="v.id"
+                    :title="v.planName"
+                    :label="formatTime(v.planStartTime,v.planEndTime,'YYYY-MM-DD')"
+                    is-link
+                    :to="{path:path,query:{id:v.id,enable:1,taskDate:date}}"
+                    :value="getDicts(v.status,'resumption_status')"
+                    :value-class="`title-orange`"/>
+              </div>
             </van-tab>
             <van-tab title="未完成">
               <template #title>未完成 {{otherList.proceed.length}} </template>
               <van-empty description="暂无数据" v-if="!otherList.proceed.length"/>
-              <van-cell-group v-else>
-                <van-cell
-                  v-for="v in otherList.proceed"
-                  :key="v.id"
-                  :title="v.planName"
-                  :label="formatTime(v.planStartTime,v.planEndTime,'YYYY-MM-DD')"
-                  :value="getDicts(v.status,'resumption_status')"
-                  :value-class="`title-red`"/>
-              </van-cell-group>
+              <div class="list-container" v-else>
+                  <van-cell
+                    v-for="v in otherList.proceed"
+                    :key="v.id"
+                    :title="v.planName"
+                    :label="formatTime(v.planStartTime,v.planEndTime,'YYYY-MM-DD')"
+                    :value="getDicts(v.status,'resumption_status')"
+                    :value-class="`title-red`"/>
+              </div>
             </van-tab>
             <van-tab title="已完成">
               <template #title>已完成 {{otherList.finished.length}} </template>
               <van-empty description="暂无数据" v-if="!otherList.finished.length"/>
-              <van-cell-group v-else>
-                <van-cell
+              <div class="list-container" v-else>
+                  <van-cell
                   v-for="v in otherList.finished"
                   :key="v.id"
                   :title="v.planName"
@@ -100,7 +96,7 @@
                   :to="{path:path,query:{id:v.id,taskDate:date}}"
                   :value="getDicts(v.status,'resumption_status')"
                   :value-class="`title-green`"/>
-              </van-cell-group>
+              </div>
             </van-tab>
           </van-tabs>
         </div>
@@ -224,8 +220,13 @@ export default {
 <style lang="scss">
 .lvzhi{
   .van-empty{
+    padding: 20px;
     background-color: #fff;
   }
+  .van-tabs__wrap{
+    height: 90px;
+    border-bottom: 1px solid #f5f5f5;
+  }
   .van-cell-group{
     background-color: #fff;
   }
@@ -253,12 +254,19 @@ export default {
 .list-item{
   margin: 20px;
   >p{
-    color:#999;
+    color:#333;
     font-size: 30px;
-    height: 60px;
-    line-height: 60px;
+    height: 90px;
+    line-height: 90px;
+    background-color: #fff;
+    padding-left: 20px;
+    border-bottom: 1px solid #f5f5f5;
   }
 }
+.list-container{
+  max-height: 500px;
+  overflow: auto;
+}
 .title-red{
   color: #f16363;
 }

src/views/menu/workTime/index.vue

@@ -34,11 +34,13 @@
       </van-cell-group>
       <van-cell center title="是否复制到全月" v-if="!formData.isDisabled">
         <template #right-icon>
-          <van-button round size="small" type="info" @click="copyMouth">点击复制</van-button>
+          <van-button size="mini" type="info" @click="copyMouth">点击复制</van-button>
         </template>
       </van-cell>
 
-      <van-button type="info" size="large" v-show="!formData.isDisabled" @click="onsubmit">提交</van-button>
+      <div class="button-box">
+        <van-button type="info" size="large" v-show="!formData.isDisabled" @click="onsubmit">提交</van-button>
+      </div>
     </div>
   </div>
 </template>
@@ -199,4 +201,7 @@ export default {
     height: 80px;
     text-align: center;
   }
+  .button-box{
+    margin-top: 30px;
+  }
 </style>