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