cocorobo/components/home/back.vue

<script setup>
import { ref,defineProps } from "vue";
const props = defineProps({
    img: {
        default:"./image/back.png",
    },
    content:{
        default:"用科学<br />与技术<br />驱动教育变革",
    },
    content2:{
        default:"Education powered by Science & Technology"
    }
})
</script>
<template>
    <div class="back">
        <img :src="props.img" alt="">
        <div class="back-content">
            <div class="back-content-left">
                <div>
                    <p class="back-content-left-p1" v-html="props.content"></p>
                    <p class="back-content-left-p2" v-html="props.content2"></p>
                </div>
            </div>
        </div>
    </div>
</template>
<style lang="scss">
.back {
    width: 100%;
    position: relative;
    img{
        width: 100%;
    }
    .back-content {
        width: 70%;
        position: absolute;
        top: 50%;
        left: 10%;
        transform: translate(0, -50%);
        h1 {
            font-size: 64px;
        }
        .back-content-left{
            padding: 150px;
            color: rgba(255, 255, 255, 0.9);
            .back-content-left-p1{
                display: inline-block;
                font-size: 64px;
                border-bottom: 1px solid rgba(255, 255, 255, 0.22);
                line-height: 88px;
            }
            .back-content-left-p2{
                margin-top: 10px;
                color: rgb(255, 255, 255,0.55);
                font-size: 20px;
                line-height: 28px;
            }
        }
    }
    
}
</style>