<template>
	<div class="wrapper">
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="title">{{ titleText }}</div>
		<div class="box3"></div>
	</div>
</template>

<script setup>
import { ref, onMounted } from "vue";

const props = defineProps(["titleText"]);
</script>

<style lang="scss" scoped>
.wrapper {
	display: flex;
	width: 1600px;
	height: 42px;
	align-items: center;
	.box1 {
		width: 24px;
		height: 30px;
		background: rgba(174, 214, 255, 1);
		margin-top: 6px;
	}
	.box2 {
		width: 8px;
		height: 30px;
		margin-left: 8px;
		margin-top: 6px;
		background: rgba(174, 214, 255, 1);
	}
	.title {
		margin-left: 20px;
		height: 42px;
		color: rgba(10, 18, 30, 1);
		font-family: Microsoft YaHei;
		font-size: 32px;
		font-weight: 700;
		line-height: 42px;
	}
	.box3 {
		flex: 1;
		height: 1px;
		margin-left: 20px;
		background: rgba(174, 214, 255, 1);
	}
}
</style>