<template>
    <div class="page-title" :style="{ paddingTop: top + 'px', paddingBottom: bottom + 'px' }">
        <div class="text1">
            <span><slot></slot></span>
        </div>
        <div class="text2"><slot name="sub"></slot></div>
    </div>
</template>

<script setup>
import { defineProps } from 'vue'
const props = defineProps({
    top: {
        type: Number,
        default: 100
    },
    bottom: {
        type: Number,
        default: 70
    }
})
</script>

<style lang="less" scoped>
.page-title {
    .f-col();
    align-items: center;
    flex-direction: column-reverse;

    .text1 {
        font-size: 34px;
        font-weight: bold;
        color: #000000;
        line-height: 34px;
        position: relative;
        span {
            position: relative;
            z-index: 1;
        }

        &::after {
            content: '';
            width: 141px;
            height: 6px;
            background: #00e40b;
            position: absolute;
            bottom: 0;
            left: 50%;
            margin-left: -70px;
            z-index: 0;
        }
    }

    .text2 {
        font-size: 46px;
        font-family: Fontquan;
        font-weight: 400;
        color: #000000;
        line-height: 32px;
        opacity: 0.09;
        text-transform: uppercase;
    }
}
</style>
