header.vue 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. <template>
  2. <view class="u-calendar-header u-border-bottom">
  3. <text
  4. class="u-calendar-header__title"
  5. v-if="showTitle"
  6. >{{ title }}</text>
  7. <text
  8. class="u-calendar-header__subtitle"
  9. v-if="showSubtitle"
  10. >{{ subtitle }}</text>
  11. <view class="u-calendar-header__weekdays">
  12. <text class="u-calendar-header__weekdays__weekday">一</text>
  13. <text class="u-calendar-header__weekdays__weekday">二</text>
  14. <text class="u-calendar-header__weekdays__weekday">三</text>
  15. <text class="u-calendar-header__weekdays__weekday">四</text>
  16. <text class="u-calendar-header__weekdays__weekday">五</text>
  17. <text class="u-calendar-header__weekdays__weekday">六</text>
  18. <text class="u-calendar-header__weekdays__weekday">日</text>
  19. </view>
  20. </view>
  21. </template>
  22. <script>
  23. export default {
  24. name: 'u-calendar-header',
  25. mixins: [uni.$u.mpMixin, uni.$u.mixin],
  26. props: {
  27. // 标题
  28. title: {
  29. type: String,
  30. default: ''
  31. },
  32. // 副标题
  33. subtitle: {
  34. type: String,
  35. default: ''
  36. },
  37. // 是否显示标题
  38. showTitle: {
  39. type: Boolean,
  40. default: true
  41. },
  42. // 是否显示副标题
  43. showSubtitle: {
  44. type: Boolean,
  45. default: true
  46. },
  47. },
  48. data() {
  49. return {
  50. }
  51. },
  52. methods: {
  53. name() {
  54. }
  55. },
  56. }
  57. </script>
  58. <style lang="scss" scoped>
  59. @import "../../libs/css/components.scss";
  60. .u-calendar-header {
  61. padding-bottom: 4px;
  62. &__title {
  63. font-size: 16px;
  64. color: $u-main-color;
  65. text-align: center;
  66. height: 42px;
  67. line-height: 42px;
  68. font-weight: bold;
  69. }
  70. &__subtitle {
  71. font-size: 14px;
  72. color: $u-main-color;
  73. height: 40px;
  74. text-align: center;
  75. line-height: 40px;
  76. font-weight: bold;
  77. }
  78. &__weekdays {
  79. @include flex;
  80. justify-content: space-between;
  81. &__weekday {
  82. font-size: 13px;
  83. color: $u-main-color;
  84. line-height: 30px;
  85. flex: 1;
  86. text-align: center;
  87. }
  88. }
  89. }
  90. </style>