59 lines
1.1 KiB
Vue
59 lines
1.1 KiB
Vue
<template>
|
|
<view class="schedule-timeline">
|
|
<view
|
|
v-for="hour in hours"
|
|
:key="hour"
|
|
class="timeline-row"
|
|
>
|
|
<view class="time-label">{{ hour }}:00</view>
|
|
<view class="schedule-cell">
|
|
<ScheduleBlock
|
|
v-for="item in getEventsByHour(hour)"
|
|
:key="item.id"
|
|
:event="item"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import ScheduleBlock from './ScheduleBlock.vue';
|
|
const props = defineProps({
|
|
hours: {
|
|
type: Array,
|
|
default: () => Array.from({length: 24}, (_,i) => i) // 8~19点
|
|
},
|
|
events: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
});
|
|
// 按小时过滤日程
|
|
function getEventsByHour(hour) {
|
|
return props.events.filter(e => e.startHour === hour);
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.schedule-timeline {
|
|
padding: 0 12rpx 60px;
|
|
}
|
|
.timeline-row {
|
|
display: flex;
|
|
border-bottom: 1px dashed #e3e3e3;
|
|
align-items: center;
|
|
height: 30px;
|
|
}
|
|
.time-label {
|
|
width: 44px;
|
|
color: #bbb;
|
|
font-size: 13px;
|
|
}
|
|
.schedule-cell {
|
|
flex: 1;
|
|
position: relative;
|
|
min-height: 28px;
|
|
}
|
|
</style>
|