<template>
  <view class="event-block" :style="{background: event.color||'#e3fae6'}">
    <view class="event-time">{{ event.startHour }}:{{ event.startMin || '00' }}</view>
    <view class="event-title">{{ event.title }}</view>
  </view>
</template>
<script setup>
const props = defineProps({
  event: {
    type: Object,
    required: true
  }
});
</script>
<style scoped lang="scss">
.event-block {
  padding: 8rpx 18rpx 8rpx 10rpx;
  border-radius: 8rpx;
  margin: 4rpx 0;
  font-size: 13px;
  min-width: 120rpx;
  color: #3a3a3a;
  display: flex;
  align-items: center;
}
.event-time {
  color: #fa5e5e;
  font-size: 11px;
  margin-right: 7rpx;
}
.event-title {
  font-weight: 500;
}
</style>
