<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">
* {
    margin: 0;
    padding: 0;
}

.com-title {
    width: 1600px;
    height: 42px;
    display: flex;
    align-items: center;

    .cl1 {
        width: 24px;
        height: 30px;
        background-color: rgba(174, 214, 255, 1);
        margin-right: 8px;
    }

    .cl2 {
        width: 8px;
        height: 30px;
        background-color: rgba(174, 214, 255, 1);
        margin-right: 8px;
    }

    .title {

        height: 42px;
        text-align: center;
        font-size: 32px;
        font-weight: 700;
        font-family: 'Microsoft YaHei';
        line-height: 42px;
        margin-right: 8px;
        width: fit-content;
        /* 核心：强制不换行 */
        white-space: nowrap;
    }

    .cl3 {
        width: 100%;
        height: 1px;
        background-color: rgba(174, 214, 255, 1);
        box-sizing: border-box;
    }
}
</style>
