guangdong_museum/web/src/components/welcome/index.vue

<template>
  <div class="welcome">
      <img class="bg" :src="require(`@/assets/images/project/${isMobile?'mobile.jpg':'pc.jpg'}`)" alt="">
      <span class="btn" >
        <img draggable="false" @click="$emit('close')" :src="require('@/assets/images/project/btn.png')" alt="">
      </span>

      <div class="logo">
        <img class="l" :src="require('@/assets/images/project/l_logo.png')" alt="">
        <img class="r" :src="require('@/assets/images/project/r_logo.png')" alt="">
      </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      loading:true
    }
  },
  methods:{
  },
  mounted(){

     this.$nextTick(()=> {
 
      })
  }
}
</script>

<style lang="less">
.welcome{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  font-size: 0;
  transition: all ease 0.3s;
  .bg{
    width: 100%;
    min-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    
  }
  .we_title{
    background: none;
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 48px;
    color: #FCD67B;
    letter-spacing: 6px;
    font-weight: bold;
    width: 100%;
    text-align: center;
  }
  >video{
    width: 100%;
    height: 100%;
    object-fit: fill;
  }
  .btn{
    position: absolute;
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    font-size: 0;
    color: #FCD67B;
    border-radius: 44px;
    display: inline-block;
    cursor: pointer;
    letter-spacing: 2px;
    max-width: 300px;
    >img{
      width: 100%;
    }
  }
}

.logo{
  .l{
    position: fixed;
    top: 40px;
    left: 40px;
  }

  .r{
    position: fixed;
    top: 38px;
    right: 40px;
  }
}

.loading{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    background: #000;
    >span{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%,-50%);
      color: #fff;
      font-size: 16px;
      display: inline-block;
    }
  }

@media only screen and (max-width: 487px) {
  .welcome{
 
  .bg{
   
  }
  .btn{
    position: absolute;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;
    font-size: 0;
    color: #FCD67B;
    border-radius: 44px;
    display: inline-block;
    cursor: pointer;
    letter-spacing: 2px;
    max-width: 200px;
    width: 50%;
    >img{
      width: 100%;
    }
  }
}
.logo{
  .l{
    position: fixed;
    top: 10px;
    width: 60%;
    left: 50%;
    transform: translateX(-50%);
    display: none;
  }

  .r{
    position: fixed;
    top: unset;
    right: unset;
    bottom: 20px;
    width: 30%;
    left: 50%;
    transform: translateX(-50%);
  }
}

}
</style>