<!--
 * @Author: zwq
 * @Date: 2023-08-01 15:27:31
 * @LastEditors: zwq
 * @LastEditTime: 2023-08-01 16:25:54
 * @Description:
-->
<template>
	<div :class="[className, { 'p-0': noPadding }]">
		<slot />
	</div>
</template>

<script>
export default {
	props: {
		size: {
			// 取值范围:  xl lg md sm
			type: String,
			default: 'de',
			validator: function (val) {
				return ['xl', 'lg', 'de', 'md', 'sm'].indexOf(val) !== -1;
			},
		},
		noPadding: {
			type: Boolean,
			default: false,
		},
	},
	computed: {
		className: function () {
			return `${this.size}-title`;
		},
	},
};
</script>

<style lang="scss" scoped>
$pxls: (xl, 28px) (lg, 24px) (de, 20px) (md, 18px) (sm, 16px);
$mgr: 8px;
@each $size, $height in $pxls {
	.#{$size}-title {
		font-size: 18px;
		line-height: $height;
		color: #000;
		font-weight: 500;
		font-family: '微软雅黑', 'Microsoft YaHei', Arial, Helvetica, sans-serif;

		&::before {
			content: '';
			display: inline-block;
			vertical-align: top;
			width: 4px;
			height: $height + 2px;
			border-radius: 1px;
			margin-right: $mgr;
			background-color: #0b58ff;
		}
	}
}

.p-0 {
	padding: 0;
}
</style>