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