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

<template>
  <div class="welcome" v-if="isShow">
    <video
      class="myVideo"
      src="../../assets/img/strat.mp4"
      autoplay
      muted
    ></video>
    <div class="SeLanguage" :class="{active:languagShow}">
      <div class="box">
        <div class="top">
          <p>请选择语言</p>
          <p>Please select the language</p>
        </div>
        <div class="card">
          <div class="one" @click="skip('1171')">
            <div class="card_ic aaa"></div>
            <p>中文</p>
          </div>
          <div class="tow" @click="skip('1171_1')">
            <div class="card_ic bbb"></div>
            <p>English</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
      languagShow: false,
    };
  },
  methods: {
    skip(val) {
      window.location.href =
        window.location.origin + window.location.pathname + "#/?m=" + val;
      location.reload(true);
    },
  },
  mounted() {
    if (window.location.hash === "#/") this.isShow = true;
    // 监听视频播放完毕
    this.$nextTick(() => {
      setTimeout(() => {
        let dom = document.querySelector(".myVideo");
        dom.addEventListener("ended", () => {
          this.languagShow=true
        }, false);
      }, 100);
    });
  },
};
</script>

<style lang="less">
.welcome {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  video {
    min-width: 100vw;
    min-height: 100vh;
  }
  .SeLanguage {
    opacity: 0;
    transition: all 1.5s;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    .box {
      padding-top: 110px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background: url("../../assets/img/bg.png");
      background-size: 100% 100%;
      width: 994px;
      height: 685px;
      .top {
        p {
          font-weight: 700;
          text-align: center;
          font-size: 40px;
          color: #165491;
          &:nth-of-type(2) {
            margin-top: 5px;
            font-weight: 400;
            font-size: 20px;
          }
        }
      }
      .card {
        perspective: 1000px;
        transform-style: preserve-3d;
        display: flex;
        justify-content: space-between;
        width: 615px;
        height: 366px;
        margin: 40px auto 0;
        & > div {
          transition: all 0.5s;
          cursor: pointer;
          border-radius: 8px;
          width: 264px;
          height: 100%;
          background-color: #fff;
          padding: 0 10px;
          .card_ic {
            height: 270px;
            border-bottom: 1px solid #165491;
            & > img {
              width: 107px;
              height: 97px;
            }
          }
          & > p {
            text-align: center;
            height: 96px;
            line-height: 96px;
            color: #165491;
            font-size: 24px;
          }
          .aaa {
            background: url("../../assets/img/cn2.png") no-repeat center
              center/107px 97px;
          }
          .bbb {
            background: url("../../assets/img/en2.png") no-repeat center
              center/107px 97px;
          }
          &:hover {
            transform: translateZ(50px);
            background-image: linear-gradient(#6ba5de, #165491);
            .card_ic {
              border-bottom: 1px solid #fff;
            }
            & > p {
              color: #fff;
            }
            .aaa {
              background: url("../../assets/img/cn2Ac.png") no-repeat center
                center/107px 97px;
            }
            .bbb {
              background: url("../../assets/img/en2Ac.png") no-repeat center
                center/107px 97px;
            }
          }
        }
      }
    }
  }
  .active{
    opacity: 1;
  }
}

@media only screen and (max-width: 800px) {
  .welcome{
    .SeLanguage{
      .box{
        padding-top: 70px;
        width: 90vw;
        height: 534px;
        background: url('../../assets/imgM/bgL.png');
        background-size: 100% 100%;
        .top{
          &>p{
            font-size:24px;
            &:nth-of-type(2){
              font-size: 14px;
            }
          }
        }
        .card{
          margin-top: 20px;
          width: 239px;
          display: block;
          &>div{
            margin-bottom: 20px;
            width: 239px;
            height:162px;
            .card_ic{
              height: 119px;
            }
            .aaa {
              background: url("../../assets/img/cn2.png") no-repeat center
                center/59px 54px;
            }
            .bbb {
              background: url("../../assets/img/en2.png") no-repeat center
                center/59px 54px;
            }
            &>p{
              height: 43px;
              line-height: 43px;
              font-size: 14px;
            }
          }
        }
      }
    }
  }
}
</style>