12 changed files with 493 additions and 19 deletions
@ -0,0 +1,175 @@ |
|||||
|
<template> |
||||
|
<div |
||||
|
class="calendar-item-container" |
||||
|
:class="[ |
||||
|
{ |
||||
|
'is-current': col.isCurrent, |
||||
|
'is-holidays': col.isHolidays, |
||||
|
'is-week': col.isWeek, |
||||
|
'is-selected': col.date === props.time, |
||||
|
'is-current-month': isCurrentMonth(col.date), |
||||
|
}, |
||||
|
]" |
||||
|
@click="changeTargetDate(col)" |
||||
|
> |
||||
|
<div class="dayStyle"> |
||||
|
<span >{{ col.title }}</span> |
||||
|
<div v-if="col.isHolidays">休</div> |
||||
|
<span >{{ col.lunarsChina }}</span> |
||||
|
</div> |
||||
|
{{col.date}} |
||||
|
|
||||
|
{{props.time}} |
||||
|
|
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" setup> |
||||
|
import { PropType } from 'vue'; |
||||
|
import DateClass from '@/api/calendar/DateClass'; |
||||
|
import { dateBase } from '@/api/calendar/Calendar'; |
||||
|
const props = defineProps({ |
||||
|
col: { |
||||
|
type: Object as PropType<dateBase>, |
||||
|
default: () => { |
||||
|
return {}; |
||||
|
}, |
||||
|
}, |
||||
|
time: { |
||||
|
type: String, |
||||
|
default: '', |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
function isCurrentMonth(time: string) { |
||||
|
const months = time.split('-')[1]; |
||||
|
return DateClass.getCurrent()[1] === Number(months); |
||||
|
} |
||||
|
|
||||
|
const emit = defineEmits(['changeTargetDate']); |
||||
|
function changeTargetDate(time: dateBase) { |
||||
|
emit('changeTargetDate', time); |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="less"> |
||||
|
.calendar-item-container { |
||||
|
|
||||
|
|
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
flex-direction: column; |
||||
|
box-sizing: border-box; |
||||
|
border-radius: 6px; |
||||
|
border: 2px solid #ffffff; |
||||
|
.dayStyle{ |
||||
|
display: flex; |
||||
|
// align-items: top; |
||||
|
justify-content: space-between; |
||||
|
font-size: 12px; |
||||
|
padding: 0 5px; |
||||
|
color: #999999; |
||||
|
} |
||||
|
.calendar-title { |
||||
|
font-size: 1.2rem; |
||||
|
color: #999999; |
||||
|
} |
||||
|
.calendar-lunar { |
||||
|
margin-top: 6px; |
||||
|
|
||||
|
font-size: 0.85rem; |
||||
|
color: #bcbcbc; |
||||
|
} |
||||
|
transition: all 0.2s; |
||||
|
} |
||||
|
.calendar-item-container:hover { |
||||
|
cursor: pointer; |
||||
|
border: 2px solid #409eff; |
||||
|
} |
||||
|
.is-holidays { |
||||
|
.holidays-text { |
||||
|
position: absolute; |
||||
|
top: 6px; |
||||
|
left: 14px; |
||||
|
font-size: 0.85rem; |
||||
|
color: #ffa2a2; |
||||
|
} |
||||
|
.calendar-title { |
||||
|
color: #ffa2a2; |
||||
|
} |
||||
|
.dayStyle{ |
||||
|
color: #ffa2a2; |
||||
|
} |
||||
|
background-color: #feeeef; |
||||
|
} |
||||
|
.is-selected { |
||||
|
border: 2px solid #409eff; |
||||
|
} |
||||
|
.is-holidays.is-selected { |
||||
|
border: 2px solid #ffa2a2; |
||||
|
} |
||||
|
.is-selected.is-current-month { |
||||
|
border: 2px solid #409eff; |
||||
|
} |
||||
|
.is-holidays.is-selected.is-current-month { |
||||
|
border: 2px solid #f62b2b; |
||||
|
} |
||||
|
.is-week { |
||||
|
.calendar-title { |
||||
|
color: #ffa2a2; |
||||
|
} |
||||
|
.dayStyle{ |
||||
|
color: #ffa2a2; |
||||
|
} |
||||
|
} |
||||
|
.calendar-item-container.is-current { |
||||
|
.calendar-title { |
||||
|
color: #333333; |
||||
|
} |
||||
|
.dayStyle{ |
||||
|
color: #333333; |
||||
|
} |
||||
|
.calendar-lunar { |
||||
|
color: #666666; |
||||
|
} |
||||
|
} |
||||
|
.calendar-item-container.is-current.is-holidays { |
||||
|
.holidays-text { |
||||
|
position: absolute; |
||||
|
top: 6px; |
||||
|
left: 14px; |
||||
|
font-size: 0.85rem; |
||||
|
color: #f62b2b; |
||||
|
} |
||||
|
background-color: #fbe3e4; |
||||
|
} |
||||
|
.calendar-item-container.is-current.is-holidays, |
||||
|
.calendar-item-container.is-current.is-week { |
||||
|
.calendar-title { |
||||
|
color: #f62b2b; |
||||
|
} |
||||
|
.dayStyle{ |
||||
|
color: #f62b2b; |
||||
|
} |
||||
|
} |
||||
|
.calendar-item-container.is-current.is-holidays { |
||||
|
.holidays-text { |
||||
|
position: absolute; |
||||
|
top: 6px; |
||||
|
left: 14px; |
||||
|
font-size: 0.85rem; |
||||
|
color: #fb4949; |
||||
|
} |
||||
|
.calendar-title { |
||||
|
color: #fb6e6e; |
||||
|
} |
||||
|
.dayStyle{ |
||||
|
color: #fb6e6e; |
||||
|
} |
||||
|
background-color: #ffe4e7; |
||||
|
} |
||||
|
.calendar-item-container.is-holidays:hover { |
||||
|
border: 2px solid #f62b2b; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,24 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-07-13 09:34:47 |
||||
|
@ 备注: 日日历 |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
const props = defineProps({ |
||||
|
bodyHight:Number, |
||||
|
}); |
||||
|
|
||||
|
//画板高度 |
||||
|
const drawingBoardHeight = computed(()=>{ |
||||
|
return props.bodyHight + 50 |
||||
|
}) |
||||
|
</script> |
||||
|
<template> |
||||
|
<div class="monthCalendarBox" :style="'height:calc(100vh - '+ drawingBoardHeight +'px)'"></div> |
||||
|
</template> |
||||
|
<style lang='scss' scoped> |
||||
|
.monthCalendarBox{ |
||||
|
width: 100%; |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,122 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-07-13 09:34:05 |
||||
|
@ 备注: 月日历 |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
import Calendar from '@/api/calendar/Calendar'; |
||||
|
import DateClass from '@/api/calendar/DateClass'; |
||||
|
|
||||
|
import { clockFactory } from '@/api/calendar/utils'; |
||||
|
|
||||
|
import CalendarItem from './calendarItem.vue'; |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
bodyHight:Number, |
||||
|
taDay:{ |
||||
|
type:Array, |
||||
|
default() { |
||||
|
return [2024,7,13]; |
||||
|
}, |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
const selectedTime = ref(props.taDay[0] + "-" + clockFactory(props.taDay[1]) + "-" + clockFactory(props.taDay[2])) |
||||
|
const emit = defineEmits(['getDate']); |
||||
|
function changeDate(time: dateBase) { |
||||
|
selectedTime.value = time.date; |
||||
|
emit('getDate', time); |
||||
|
} |
||||
|
//画板高度 |
||||
|
const drawingBoardHeight = computed(()=>{ |
||||
|
return props.bodyHight + 50 |
||||
|
}) |
||||
|
//周期 |
||||
|
const THeader = Calendar.title(); |
||||
|
//日期 |
||||
|
const TBody = computed(() => |
||||
|
Calendar.table(props.taDay) |
||||
|
); |
||||
|
</script> |
||||
|
<template> |
||||
|
{{props.taDay}} |
||||
|
<div class="monthCalendarBox" :style="'height:calc(100vh - '+ drawingBoardHeight +'px)'"> |
||||
|
<ul class="t-calendar-header"> |
||||
|
<li v-for="(item, index) in THeader" :key="index"> |
||||
|
{{ item }} |
||||
|
</li> |
||||
|
</ul> |
||||
|
<div class="t-calendar-day"> |
||||
|
<template v-if="TBody.length"> |
||||
|
<div |
||||
|
class="t-calendar-row" |
||||
|
v-for="(item, index) in TBody" |
||||
|
:key="index" |
||||
|
> |
||||
|
<div |
||||
|
class="t-calendar-col" |
||||
|
v-for="(col, colIdx) in item" |
||||
|
:key="colIdx" |
||||
|
> |
||||
|
<CalendarItem |
||||
|
:col="col" |
||||
|
:time="selectedTime" |
||||
|
@changeTargetDate="changeDate" |
||||
|
></CalendarItem> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<template v-else> |
||||
|
<div class="no-date">抱歉,暂无数据</div> |
||||
|
</template> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<style lang='scss' scoped> |
||||
|
.monthCalendarBox{ |
||||
|
width: 100%; |
||||
|
margin-top: 10px; |
||||
|
.t-calendar-header { |
||||
|
display: flex; |
||||
|
width: 100%; |
||||
|
height: 42px; |
||||
|
padding: 0; |
||||
|
box-sizing: border-box; |
||||
|
li { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
flex: 1; |
||||
|
font-size: 0.95rem; |
||||
|
} |
||||
|
} |
||||
|
.t-calendar-day { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
width: 100%; |
||||
|
height: calc(100% - 42px); |
||||
|
.t-calendar-row { |
||||
|
width: 100%; |
||||
|
height: 60px; |
||||
|
display: flex; |
||||
|
flex: 1; |
||||
|
border-bottom: 1px solid #ebeef5; |
||||
|
.t-calendar-col{ |
||||
|
box-sizing: border-box; |
||||
|
flex: 1; |
||||
|
border-left: 1px solid #ebeef5; |
||||
|
padding: 2px; |
||||
|
font-size: 16px; |
||||
|
transition: all 0.2s; |
||||
|
} |
||||
|
.t-calendar-col:last-child { |
||||
|
border-right: 1px solid #ebeef5; |
||||
|
} |
||||
|
} |
||||
|
.t-calendar-row:first-child { |
||||
|
border-top: 1px solid #ebeef5; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,24 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-07-13 09:34:24 |
||||
|
@ 备注: 周 |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
const props = defineProps({ |
||||
|
bodyHight:Number, |
||||
|
}); |
||||
|
|
||||
|
//画板高度 |
||||
|
const drawingBoardHeight = computed(()=>{ |
||||
|
return props.bodyHight + 50 |
||||
|
}) |
||||
|
</script> |
||||
|
<template> |
||||
|
<div class="monthCalendarBox" :style="'height:calc(100vh - '+ drawingBoardHeight +'px)'"></div> |
||||
|
</template> |
||||
|
<style lang='scss' scoped> |
||||
|
.monthCalendarBox{ |
||||
|
width: 100%; |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue