qiaobi/src/views/home/index.vue

<template>
  <div class="home" :style="`background-image:url(${require('@/assets/image/login_background.jpg')})`">
    <div class="logo">
        <el-image :src="require('@/assets/image/logo3.png')" class="img" fit="contain"></el-image>
    </div>
    <div class="content">
        <div v-for="(component,index) in components" :key="index" style="width:33%">
            <components :is="component.component"></components>
        </div>
    </div>
    <div class="copyright">
      copyright©灵智信息服务（深圳）有限公司
    </div>
  </div>
</template>

<script>
import videoDemo from './components/videoDemo/videoDemo.vue';
import softwareSupport from './components/softwareSupport/softwareSupport.vue';
import downLoad from './components/downLoad/downLoad.vue'
export default {
  components: {
    videoDemo,
    softwareSupport,
    downLoad
  },
  props: {},
  data() {
    return {
        components:[
            {
                component:'videoDemo'
            },
            {
                component:'downLoad'
            },
            {
                component:'softwareSupport'
            },
        ]
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>
<style lang="scss" scoped>
.home{
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-position: center;
  position: relative;
}
.home::after{
  content:'';
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  background: var(--color);
  opacity: 0.5;
}
.logo{
    position: absolute;
    top: 0;
    left: 0;
    height: 120px;
    width: fit-content;
    z-index: 9999;
    .img{
        width: 100%;
        height: 100%;
    }
}
.content{
    // height: 400px;
    min-height: 300px;
    height:fit-content;
    z-index: 9999;
    position: absolute;
    inset: 0;
    margin: auto;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    padding: 0 10px;
}
.copyright{
  position: absolute;
  right: 0;
  left: 0;
  bottom: 35px;
  margin: auto;
  text-align: center;
  color: white;
  z-index: 9999;
}
</style>