taicang-visitor/src/components/layout/index.vue

<template>
    <div class="layout">
        <div class="layout-top animate__animated animate__fadeInUp">
            <div class="layout-top-left" :style="{marginLeft:props.data.logoLeft}">
                <img src="@/assets/images/logo.png" />
                <span>共进科技大厦</span>
            </div>
            <!-- <div class="layout-top-right" @click="returnPage" v-if="props.data.returnState">
                <img src="@/assets/images/return.png" />
                <span class="layout-top-right-text">返回</span>
            </div> -->
        </div>
        <div class="layout-bg">
            <img src="@/assets/images/bg.png" />
        </div>
    </div>
    <div class="reture">
        <div class="right" @click="returnPage" v-if="props.data.returnState">
            <img src="@/assets/images/return.png" />
            <span class="right-text">返回</span>
        </div>
    </div>
</template>
<script setup>
import { ref } from "vue";
const props = defineProps({
    data:{
        type: Object,
        required: true
    }
});
function returnPage() {
    window.history.go(-1);
}
</script>

<style lang="scss">
.layout {
    width:100%;
    height:100%;
    &-top{
        width:100%;
        position: absolute;
        top:3.2%;
        left:0;
        z-index: 1;
        &-left{
            width:50%;
            float: left;
            img{
                width:16%;
                vertical-align: middle;
            }
            span{
                vertical-align: middle;
                font-size: 4.4rem;
                font-weight: 700;
                margin-left:0.4%;
                color:#fff;
                letter-spacing: 2px;
            }
        }
        &-right{
            width:20%;
            float: right;
            margin-right:1.6%;
            text-align: right;
            cursor: pointer;
            img{
                width:9%;
                vertical-align: middle;
            }
            span{
                vertical-align: middle;
                font-size: 2.5rem;
                margin:0 0 0 2.5%;
                letter-spacing: 2px;
                color:#fff;
            }

        }
    }
    &-bg{
        width:100%;
        height:100%;
        img{
            position: fixed;
            z-index: -1;
            width: 100%;
            height:100%;
        }
    }
}
.reture{
    position: absolute;
    bottom:6%;
    width:20%;
    left:-13%;
    text-align: right;
    cursor: pointer;
    img{
        width:9%;
        vertical-align: middle;
    }
    span{
        vertical-align: middle;
        font-size: 2.5rem;
        margin:0 0 0 2.5%;
        letter-spacing: 2px;
        color:#fff;
    }

}

</style>