| | |
| | | <template> |
| | | <div class="bole-cell-wrapper"> |
| | | <div class="cell-title-wrapper"> |
| | | <div class="cell-title-wrapper" v-if="showTitle"> |
| | | <slot name="title"> |
| | | <div :class="titleSize === 'normal' ? 'cell-title' : 'cell-title-large'">{{ title }}</div> |
| | | <slot name="title-right"></slot> |
| | |
| | | type Props = { |
| | | title?: string; |
| | | titleSize?: 'large' | 'normal'; |
| | | showTitle?: boolean; |
| | | }; |
| | | |
| | | const props = withDefaults(defineProps<Props>(), { |
| | | titleSize: 'normal', |
| | | showTitle: true, |
| | | }); |
| | | </script> |
| | | |
| | |
| | | |
| | | .bole-cell-wrapper { |
| | | background: #ffffff; |
| | | border-radius: 8px; |
| | | padding: 24px 28px; |
| | | margin-bottom: 24px; |
| | | border-radius: 12px; |
| | | padding: 36px 34px; |
| | | margin-bottom: 20px; |
| | | |
| | | .cell-title-wrapper { |
| | | display: flex; |
| | |
| | | |
| | | .cell-title-large { |
| | | font-weight: 600; |
| | | font-size: 32px; |
| | | font-size: 30px; |
| | | color: boleGetCssVar('text-color', 'primary'); |
| | | line-height: 44px; |
| | | line-height: 42px; |
| | | @include ellipsis; |
| | | } |
| | | } |