fs-uni-template/components/fs-panel/fs-panel.vue

<template>
	<view class="fs-panel">
		<view class="fs-panel-title">
			<view v-if="title">{{ title }}</view>
			<view v-else><slot name="title"></slot></view>
		</view>
		<view class="fs-panel-content" :class="{ 'fs-panel-padding': padding }" :style="{ 'background-color': bgColor }">
			<slot name="content"></slot>
		</view>
	</view>
</template>

<script>
/**
 * 面板组件
 * @description 面板组件
 * @property {String} title 标题
 * @property {Boolean} padding 内容区域是否带padding
 * @property {String} bgColor 内容区域背景色
 */
export default {
	name: 'fs-panel'
}
</script>

<script setup>
const props = defineProps({
	title: String,
	padding: Boolean,
	bgColor: {
		type: String,
		default: '#fff'
	}
})
</script>

<style lang="scss">
.fs-panel-title {
	padding: 20rpx var(--gutter);
	color: var(--title);
	text-align: left;
	background-color: var(--bg-color);
}
.fs-panel-padding {
	padding: var(--gutter);
}
</style>