日历样式

src/views/ebiz/attendance/Calendar.vue

@@ -660,6 +660,7 @@ export default {
 .calendar_body {
   position: relative;
   width: 100%;
+  margin-top: 50px;
   background: #F7F7F7;
 }
 
@@ -667,7 +668,7 @@ export default {
   position: absolute;
   width: 100%;
   left: 0;
-  top: 5px;
+  top: 12px;
   display: flex;
   align-items: center;
   color: #898989;
@@ -728,7 +729,7 @@ export default {
 }
 
 .calendar_first_today {
-  // color: #E9332E;
+  color: #E9332E;
 }
 
 .calendar_first_today span {
@@ -752,7 +753,7 @@ export default {
   width: 40px;
   height: 40px;
   border-radius: 50%;
-  background: #00BFFF;
+  background: #E9332E;
   color: white;
 }
 .calendar_day_nochecked {

src/views/ebiz/attendance/DatetimePicker.vue

@@ -7,28 +7,21 @@
     @click="close"
   >
     <div class="calendar_content" :style="{ height: `${calendarContentHeight}px` }" @click.stop>
-      <!-- <div class="calendar_title" ref="calendarTitle">
+      <div class="calendar_title" ref="calendarTitle">
-        <div class="calendar_title_date">
+        <div class="calendar_title_date flex">
-          <span v-if="pickerType !== 'time'" class="calendar_title_date_year" :class="{ calendar_title_date_active: isShowCalendar }" @click="showCalendar">
+         
-            {{ formatDate(`${checkedDate.year}/${this.checkedDate.month + 1}/${this.checkedDate.day}`, 'YY年MM月DD日') }}
+          <img src="@/assets/images/u1203.png" alt class="h40 w40 ml15" />
-          </span>
+          <div class="ml10 fs14 mt12">{{name}}</div>
-          <span v-if="pickerType !== 'time'" class="calendar_title_date_year" :class="{ calendar_title_date_active: isShowCalendar }" @click="showCalendar">
-            {{ lunar(checkedDate.year, this.checkedDate.month, this.checkedDate.day) }}
-          </span>
-          <span v-if="pickerType !== 'date'" class="calendar_title_date_time" :class="{ calendar_title_date_active: !isShowCalendar }" @click="showTime">
-            {{
-              formatDate(
-                `${checkedDate.year}/${this.checkedDate.month + 1}/${this.checkedDate.day} ${fillNumber(checkedDate.hours)}:${fillNumber(checkedDate.minutes)}`,
-                'hh:mm'
-              )
-            }}</span
-          >
         </div>
-        <div class="flex">
+        <div class="flex mr20">
-          <div v-if="showTodayButton" class="calendar_confirm fs17 text-center" :class="{ today_disable: disabledDate(new Date()) }" @click="today">今</div>
+           <span v-if="pickerType !== 'time'" class="calendar_title_date_year fs13" :class="{ calendar_title_date_active: isShowCalendar }" @click="showCalendar">
-          <div class="calendar_confirm fs17 text-center" @click="confirm">+</div>
+            {{ formatDate(`${checkedDate.year}/${this.checkedDate.month + 1}/${this.checkedDate.day}`, 'YY-MM-DD') }}
+          </span>
+          <span class="fs13 ml10 span_week">星期{{ String(new Date(formatDate(`${checkedDate.year}/${this.checkedDate.month + 1}/${this.checkedDate.day}`, 'YY-MM-DD')).getDay()).replace("0","日").replace("1","一").replace("2","二").replace("3","三").replace("4","四").replace("5","五").replace("6","六")}}</span>
+          <!-- <div v-if="showTodayButton" class="calendar_confirm fs17 text-center" :class="{ today_disable: disabledDate(new Date()) }" @click="today">今</div>
+          <div class="calendar_confirm fs17 text-center" @click="confirm">+</div> -->
         </div>
-      </div> -->
+      </div>
       <calendar
         ref="calendar"
         v-if="pickerType !== 'time'"
@@ -100,6 +93,11 @@ export default {
       default: () => {
         return false
       }
+    },
+    //name
+    name:{
+      type:String,
+      default:'name'
     }
   },
   components: {
@@ -122,7 +120,6 @@ export default {
       firstTimes: true // 第一次触发
     }
   },
-  // inject: ['reload'],
   created() {
     window.onresize = () => {
       console.log('重置页面')
@@ -168,7 +165,7 @@ export default {
         this.isShowCalendar = val
 
         this.$nextTick(() => {
-          // this.calendarTitleHeight = this.$refs.calendarTitle.offsetHeight
+          this.calendarTitleHeight = this.$refs.calendarTitle.offsetHeight
         })
       },
       immediate: true
@@ -328,13 +325,10 @@ export default {
 
 .calendar_title_date {
   color: #898989;
-  padding: 15px 8px;
+  padding: 8px 3px;
 }
 
-.calendar_title_date_active {
+
-  color: #4c4c4c;
-  font-weight: bold;
-}
 
 .calendar_title_date_time {
   margin-left: 10px;
@@ -354,4 +348,7 @@ export default {
 .today_disable {
   color: #c0c4cc;
 }
+.span_week{
+  margin-top:-2px;
+}
 </style>

src/views/ebiz/attendance/Monthly.vue

@@ -1,13 +1,13 @@
 <template>
   <div>
-    <div class="bg-white absolute header">
+    <!-- <div class="bg-white absolute header">
       <div class="flex h70 align-items-c border-gb">
         <img src="@/assets/images/u1203.png" alt class="h40 w40 ml15" />
         <span class="ml10 fs14">{{name}}</span>
         <div class="absolute right20 flex fs13">{{time}} 星期{{week}}</div>
         <div class="CalendarDiv"></div>
       </div>
-    </div>
+    </div> -->
     <div class="calendar">
        <DatetimePicker
         ref="datetimepicker"
@@ -28,6 +28,7 @@
         @confirm="dateConfirm"
         @change="dateChange"
         :disabledWeekView='disabledWeekView'
+        :name="name"
       ></DatetimePicker>
     </div>
     <div class="footer" v-if="flagGo!=='4'">
@@ -274,11 +275,6 @@ export default {
 .calendar {
   /* z-index: -1; */
   width: 100%;
-  height:340px;
-  padding-top:70px !important;
-}
-.calendar_title[data-v-f3b38220] {
-  display: none;
 }
 .lin{
     width: 1px;
@@ -298,13 +294,6 @@ export default {
   background:	#00BFFF;
   color:white
 }
-.hashCalendar[data-v-f3b38220]{
-  height:340px !important;
-  z-index: 10 !important;
-}
-.calendar_title{
-  display:none !important;
-}
 .footer-bg{
   background:#F7F7F7;
 }