46 lines
759 B
Vue
46 lines
759 B
Vue
<template>
|
|
<view class="surface-card card">
|
|
<view class="head" v-if="title || subtitle || $slots.action">
|
|
<view class="title-group">
|
|
<text v-if="title" class="section-title">{{ title }}</text>
|
|
<text v-if="subtitle" class="section-subtitle">{{ subtitle }}</text>
|
|
</view>
|
|
<slot name="action"></slot>
|
|
</view>
|
|
<slot></slot>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
subtitle: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.card {
|
|
padding: 28rpx;
|
|
}
|
|
|
|
.head {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 16rpx;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.title-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10rpx;
|
|
}
|
|
</style>
|