<template>
	<div class="com-title">
		<div class="cl1"></div>
        <div class="cl2"></div>
        <div class="title">{{ title }}</div>
        <div class="cl3"></div>
	</div>
</template>

<script setup>
import { ref } from "vue";
// 传入的title数据
const props = defineProps({
	title: {
		type: String,
		default: ""
	}
});

</script>

<style scoped lang="scss">
.com-title {
	width: 100%;
	height: 42px;
    display: flex;
    align-items: center;
    margin-bottom: 36px;
    .cl1 {
        width: 24px;
        height: 30px;
        background-color: rgba(174, 214, 255, 1);
        margin-right: 8px;
        flex-shrink: 0;
    }
    .cl2 {
        width: 8px;
        height: 30px;
        background-color: rgba(174, 214, 255, 1);
        margin-right: 8px;
        flex-shrink: 0;
    }
    .title {
        height: 42px;
        white-space: nowrap;
        font-size: 32px;
        font-weight: 700;
        font-family: 'Microsoft YaHei';
        line-height: 42px;
        margin-right: 16px;
        flex-shrink: 0;
    }
    .cl3 {
        flex: 1;
        height: 1px;
        background-color: rgba(174, 214, 255, 1);
        box-sizing: border-box;
    }
}

</style>
