<template>
	<div class="custom-title">
		<div class="color-block block1"></div>
		<div class="color-block block2"></div>
		<div class="title-text">{{ title }}</div>
		<div class="color-line"></div>
	</div>
</template>

<script setup>
defineProps({
	title: {
		type: String,
		default: "最新动态"
	}
});
</script>

<style scoped lang="scss">
.custom-title {
	display: flex;
	align-items: center;
	width: 100%;
	margin-bottom: 20px;
	padding: 10px 15px;
}

.color-block {
	background-color: rgba(174, 214, 255, 1);
	height: 30px;
	flex-shrink: 0;
}

.block1 {
	width: 24px;
}

.block2 {
	width: 8px;
	margin-left: 10px;
}

.title-text {
	color: rgba(10, 18, 30, 1);
	font-size: 32px;
	font-family: $base-font-family;
	font-weight: bold;
	margin-left: 20px;
	white-space: nowrap;
}

.color-line {
	background-color: rgba(174, 214, 255, 1);
	height: 2px;
	flex-grow: 1;
	margin-left: 20px;
}
</style>
