<template>
    <div class="large_title">
        <div class="title">
            <img class="title_icon" src="@/assets/large/title_icon.png" alt=""></img>
            <div class="title_text">{{ title }}</div>
        </div>
        <img class="title_bottom" src="@/assets/large/title_bottom.png" alt="">
    </div>
</template>

<script setup>
import { defineProps } from 'vue';

// 定义组件属性，使组件可配置
const props = defineProps({
    // 标题文本
    title: {
        type: String,
        required: true,
        default: '标题'
    },
})
</script>

<style lang="scss">
.large_title {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .title {
        display: flex;
        margin-bottom: 15px;
    }

    .title_icon {
        width: 10px;
        height: 24px;
        margin-right: 15px;
    }

    .title_text {
        font-size: 24px;
        font-family: Rang_men_zheng_title;
        font-weight: 400;
        color: rgba(226, 235, 241, 1);
    }

    .title_bottom {
        width: 100%;
        height: 5px;
    }
}
</style>