hz/ebiz-h5
1
0
Fork 0
mirror of http://112.124.100.131/GFRS/ebiz-h5.git synced 2025-12-09 06:26:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

日历样式

Browse Source
This commit is contained in:
huichao
2020-07-27 16:38:45 +08:00
parent ba3c497b2b
commit e7f75c5df3
3 changed files with 31 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/views/ebiz/attendance/Calendar.vue
View File

@@ -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 {

51
src/views/ebiz/attendance/DatetimePicker.vue
View File

@@ -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_date">
<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日') }}
</span>
<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 class="calendar_title" ref="calendarTitle">
<div class="calendar_title_date flex">
<img src="@/assets/images/u1203.png" alt class="h40 w40 ml15" />
<div class="ml10 fs14 mt12">{{name}}</div>
</div>
<div class="flex">
<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 class="flex mr20">
<span v-if="pickerType !== 'time'" class="calendar_title_date_year fs13" :class="{ calendar_title_date_active: isShowCalendar }" @click="showCalendar">
{{ 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>

17
src/views/ebiz/attendance/Monthly.vue
View File

@@ -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;
}