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