<template>
	<div class="pi-section">
		<div class="title"><el-text size="large">{{title}}</el-text></div>
		<el-alert v-if="tip" class="tip" show-icon type="info" :title="tip" :closable="false"></el-alert>
		<slot></slot>
	</div>
</template>

<script setup>
const prop = defineProps({
	title: { type: String, required: true },
	tip: { type: String}
})
</script>

<style scoped>
.pi-section {margin-bottom: 20px;}
.pi-section .title {color: #333;font-weight: 700;font-size: 18px;position: relative;padding-left: 12px;margin-bottom: 20px;}
.pi-section .title:before { content: ""; width: 4px; height: 80%; background-color: var(--el-color-primary); position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.pi-section .tip {margin-bottom: 20px;}
</style>
