zhongde-website/components/products/xcx.vue

<template>
    <section class="XcxPage-container">
        <div class="banner-img">
            <img src="http://res.training.luojigou.vip/Fqx9b6jma5oLcmANKrFUAlhyiV9e?imageView2/0/q/50|imageslim" alt="">
            <section class="label">
                小程序课堂
            </section>
        </div>
        <slot></slot>
    </section>
</template>

<script>
export default {
  name: 'XcxPage'
}
</script>
<style scoped lang="scss">
.XcxPage-container {
    .banner-img {
        position: relative;
        img {
            height: 881px;
        }
        .label {
            font-family:PingFangSC-Semibold,PingFang SC;
            font-weight:600;
            color: #ffffff;
            font-size: 80px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }
}
</style>