<script setup lang="ts">
const props = withDefaults(
    defineProps<{
        // 标题
        title: number | string;
    }>(),
    {
        title: "",
    }
);
</script>

<template>
    <div class="item_wrap">
        <div class="item_title" v-if="title !== ''">
            <q-svg width="35" height="35" name="titleIcon" />
            <span class="title-inner"> &nbsp;{{ title }} </span>
        </div>
        <div class="title-hr" v-if="title !== ''"></div>

        <div :class="title !== '' ? 'item_title_content' : 'item_title_content_def'">
            <slot></slot>
        </div>
    </div>

</template>

<style scoped lang="scss">
$item-title-height: 38px;
$item_title_content-height: calc(100% - 38px);

.item_wrap {
    padding: 10px;
}

.item_title {
    height: $item-title-height;
    line-height: $item-title-height;
    width: 100%;
    display: flex;
    align-items: center;
    
    .title-inner {
        font-family: YouSheBiaoTiHei;
        font-size: 26px;
        color: #F7F9FE;
        text-shadow: 2px 3px 0px rgba(28, 28, 26, 0.27);
        margin-bottom: 5px;
    }

}

.title-hr {
    width: 100%;
    height: 2px;
    background: repeating-linear-gradient(90deg, #2C3E50 2%, #68C6DE 10%, #2C3E50 40%, #11181f 80%, #11181f 100%);
    margin-bottom: 10px;
}

:deep(.dv-border-box-content) {
    box-sizing: border-box;
    padding: 6px 16px 0px;
}

.item_title_content {
    height: $item_title_content-height;
}

.item_title_content_def {
    width: 100%;
    height: 100%;
}
</style>
