<!--
 * @Author: lb
 * @Date: 2022-05-18 16:00:00
 * @LastEditors: lb
 * @LastEditTime: 2022-05-18 16:00:00
 * @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, 22px) (md, 18px) (sm, 16px);
$mgr: 6px;
@each $size, $height in $pxls {
	.#{$size}-title {
		padding: 8px 0;
		font-size: $height;
		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;
			background-color: #409EFF;
		}
	}
}

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