| New file | 
 |  |  | 
 |  |  | <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> |