<template>
|
<section class="app-panel home-panel">
|
<header v-if="title || $slots.extra" class="home-panel__head">
|
<div class="home-panel__title-wrap">
|
<h3 class="home-panel__title">{{ title }}</h3>
|
<span v-if="subtitle" class="home-panel__subtitle">{{ subtitle }}</span>
|
</div>
|
<div class="home-panel__extra">
|
<slot name="extra"></slot>
|
</div>
|
</header>
|
<div v-loading="loading" class="home-panel__body" :style="bodyStyle">
|
<slot></slot>
|
</div>
|
</section>
|
</template>
|
|
<script setup>
|
defineProps({
|
title: { type: String, default: '' },
|
subtitle: { type: String, default: '' },
|
loading: { type: Boolean, default: false },
|
bodyStyle: { type: [String, Object], default: '' }
|
})
|
</script>
|
|
<style scoped>
|
.home-panel {
|
display: flex;
|
flex-direction: column;
|
min-width: 0;
|
}
|
|
.home-panel__head {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
flex-wrap: wrap;
|
gap: 10px;
|
padding: 14px 16px 0;
|
}
|
|
.home-panel__title-wrap {
|
display: flex;
|
align-items: baseline;
|
gap: 8px;
|
min-width: 0;
|
}
|
|
.home-panel__title {
|
position: relative;
|
margin: 0;
|
padding-left: 10px;
|
font-size: 15px;
|
font-weight: 600;
|
color: var(--app-text);
|
}
|
|
.home-panel__title::before {
|
content: '';
|
position: absolute;
|
left: 0;
|
top: 50%;
|
transform: translateY(-50%);
|
width: 3px;
|
height: 14px;
|
border-radius: 2px;
|
background: var(--app-primary);
|
}
|
|
.home-panel__subtitle {
|
font-size: 12px;
|
color: var(--app-text-tertiary);
|
}
|
|
.home-panel__extra {
|
display: flex;
|
align-items: center;
|
gap: 8px;
|
}
|
|
.home-panel__body {
|
flex: 1;
|
min-height: 0;
|
padding: 14px 16px 16px;
|
}
|
</style>
|
