<template> <view class="u-calendar-header u-border-bottom"> <text class="u-calendar-header__title" v-if="showTitle" >{{ title }}</text> <text class="u-calendar-header__subtitle" v-if="showSubtitle" >{{ subtitle }}</text> <view class="u-calendar-header__weekdays"> <text class="u-calendar-header__weekdays__weekday">一</text> <text class="u-calendar-header__weekdays__weekday">二</text> <text class="u-calendar-header__weekdays__weekday">三</text> <text class="u-calendar-header__weekdays__weekday">四</text> <text class="u-calendar-header__weekdays__weekday">五</text> <text class="u-calendar-header__weekdays__weekday">六</text> <text class="u-calendar-header__weekdays__weekday">日</text> </view> </view> </template> <script> export default { name: 'u-calendar-header', mixins: [uni.$u.mpMixin, uni.$u.mixin], props: { // 标题 title: { type: String, default: '' }, // 副标题 subtitle: { type: String, default: '' }, // 是否显示标题 showTitle: { type: Boolean, default: true }, // 是否显示副标题 showSubtitle: { type: Boolean, default: true }, }, data() { return { } }, methods: { name() { } }, } </script> <style lang="scss" scoped> @import "../../libs/css/components.scss"; .u-calendar-header { padding-bottom: 4px; &__title { font-size: 16px; color: $u-main-color; text-align: center; height: 42px; line-height: 42px; font-weight: bold; } &__subtitle { font-size: 14px; color: $u-main-color; height: 40px; text-align: center; line-height: 40px; font-weight: bold; } &__weekdays { @include flex; justify-content: space-between; &__weekday { font-size: 13px; color: $u-main-color; line-height: 30px; flex: 1; text-align: center; } } } </style>