| | |
|---|
| | | <img :src="props.icon" class="card-icon" alt="" srcset="" /> |
|---|
| | | <span class="card-title">{{ props.title }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="card-main"></div> |
|---|
| | | <div class="card-main"> |
|---|
| | | <slot /> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | |
|---|
| | | </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); |
|---|
| | | |
|---|
| | | .card-header { |
|---|
| | | flex: 0 0 6px; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | margin-bottom: 2px; |
|---|
| | |
|---|
| | | |
|---|
| | | .card-main { |
|---|
| | | flex: 1; |
|---|
| | | overflow: hidden; |
|---|
| | | overflow-y: auto; |
|---|
| | | min-height: 0; |
|---|
| | | } |
|---|
| | | .card-main > * { |
|---|
| | | min-height: 0; |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
