| | |
| | | class="bedside-auxiliary-screen-card" |
| | | :style="{ |
| | | '--bg-color': props.backgroundColor, |
| | | '--height': props.height + 'px', |
| | | }" |
| | | > |
| | | <div class="card-header"> |
| | | <div class="card-header" :class="props.headerClassName"> |
| | | <img :src="props.icon" class="card-icon" alt="" srcset="" /> |
| | | <span class="card-title">{{ props.title }}</span> |
| | | <span class="card-right-text" v-if="$slots.right"> |
| | | <slot name="right" /> |
| | | </span> |
| | | </div> |
| | | <div class="card-main"> |
| | | <slot /> |
| | |
| | | title: string; // 标题 |
| | | icon: string; |
| | | height?: number; |
| | | headerClassName?: string; // 头部类名 |
| | | } |
| | | const props = defineProps<Props>(); |
| | | </script> |
| | | |
| | | <style lang="less" scoped> |
| | | * { |
| | | box-sizing: border-box; |
| | | } |
| | | .bedside-auxiliary-screen-card { |
| | | display: flex; |
| | | flex-direction: column; |
| | | height: var(--height); |
| | | // height: 100%; |
| | | padding: 3px 4px; |
| | | border-radius: 2px; |
| | | background-color: var(--bg-color, #70a3dd); |
| | | overflow: hidden; |
| | | overflow-y: auto; |
| | | height: 100%; |
| | | |
| | | .card-header { |
| | | position: relative; |
| | | flex: 0 0 6px; |
| | | display: flex; |
| | | align-items: center; |
| | | margin-bottom: 2px; |
| | |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | } |
| | | .card-right-text { |
| | | position: absolute; |
| | | right: 0; |
| | | top: 50%; |
| | | transform: translateY(-50%); |
| | | font-family: PingFangSC, PingFang SC; |
| | | font-weight: 500; |
| | | font-size: 4px; |
| | | color: #333333; |
| | | line-height: 5px; |
| | | text-align: right; |
| | | font-style: normal; |
| | | } |
| | | } |
| | | |
| | | .card-main { |
| | | flex: 1; |
| | | overflow: hidden; |
| | | overflow-y: auto; |
| | | min-height: 0; |
| | | } |
| | | .card-main > * { |
| | | min-height: 0; |
| | | overflow: hidden; |
| | | } |
| | | } |
| | | :deep(.el-scrollbar__view) { |
| | | min-height: 0; |
| | | height: 100%; |
| | | overflow: hidden; |
| | | overflow-y: auto; |
| | | } |
| | | </style> |