sagaclound-sagacare-sk/src/views/home/index.vue

<template>
  <div class="main" v-if="showFalg">
    <video id="video1" muted autoplay>
      <!-- <source src="/sk/skImage/媒体1.mp4" type="video/mp4" /> -->
      <source src="/sk/skImage/720p.mp4" type="video/mp4" />
      您的浏览器不支持 HTML5 video 标签。
    </video>
    <div id="skSlogan" class="skSlogan">
      <!-- 长城部分 -->
      <!-- <img id="ani83" class="ani83" src="/sk/skImage/蓝天2.jpg" alt=""> -->
      <img id="ani84" class="ani84" src="/sk/skImage/云朵02.png" alt="" />

      <img id="ani82" class="ani82" src="/sk/skImage/长城2.png" alt="" />
      <img id="ani8" class="ani8" src="/sk/skImage/长城1.png" alt="" />

      <img id="ani9" class="ani9" src="/sk/skImage/蝴蝶2.gif" alt="" />
      <!-- 长城左上 -->
      <!-- <img id="ani1" class="ani1" src="/sk/skImage/ani1-2.jpg" alt=""> -->
      <img id="ani1" class="ani1" src="/sk/skImage/蝴蝶3.png" alt="" />
      <img id="ani13" class="ani13" src="/sk/skImage/云朵-左上.png" alt="" />

      <img id="ani12" class="ani12" src="/sk/skImage/cc1-.png" alt="" />

      <!-- 文字slogan -->
      <div id="slogan" class="slogan">
        <img id="slogan11" class="slogan11" src="/sk/skImage/word/幸.png" alt="" />
        <img id="slogan12" class="slogan12" src="/sk/skImage/word/福.png" alt="" />

        <img id="slogan21" class="slogan21" src="/sk/skImage/word/S.png" alt="" />
        <img id="slogan22" class="slogan22" src="/sk/skImage/word/U.png" alt="" />
        <img id="slogan23" class="slogan23" src="/sk/skImage/word/P.png" alt="" />
        <img id="slogan24" class="slogan24" src="/sk/skImage/word/e.png" alt="" />
        <img id="slogan25" class="slogan25" src="/sk/skImage/word/X.png" alt="" />

        <img id="slogan31" class="slogan31" src="/sk/skImage/word/P2.png" alt="" />
        <img id="slogan32" class="slogan32" src="/sk/skImage/word/a.png" alt="" />
        <img id="slogan33" class="slogan33" src="/sk/skImage/word/e2.png" alt="" />
        <img id="slogan34" class="slogan34" src="/sk/skImage/word/-.png" alt="" />
        <img id="slogan35" class="slogan35" src="/sk/skImage/word/g.png" alt="" />
        <img id="slogan36" class="slogan36" src="/sk/skImage/word/i.png" alt="" />
      </div>

      <img id="ani4" class="ani4" src="/sk/skImage/ani4.jpg" alt="" />
      <!-- 时间部分 -->
      <!-- <img id="ani2" class="ani2" src="/sk/skImage/time22.jpg" alt="" />
       -->
      <div id="ani2" class="ani2">
        <div class="time-top">
          <span>北京时间</span>
          <span>首尔时间</span>
        </div>
        <div class="time-box">
          <span>{{ nowTime }}</span>
          <span></span>
          <span>{{ sTime }}</span>
        </div>
        <div class="time-line"></div>
        <div class="time-bottom">
          <img src="/sk/skImage/time-icon.svg" alt="" />
          <span>{{ nowDate }}</span>
          <div class="time-right">
            <span>{{ week }}</span>
          </div>
        </div>
      </div>
    </div>
    <div id="aniThree" class="aniThree">
      <div id="aniThree5" class="aniThree5"><img src="/sk/skImage/word/SK 1.png" alt=""></div>
      <div id="aniThree6" class="aniThree6"><img src="/sk/skImage/word/text4.png" alt=""></div>
    </div>
    <!-- 
    <div id="aniThree" class="aniThree">
      <div id="logoLeft" class="logoLeft">
        <img src="/sk/skImage/EXPOlogo.jpg" alt="" />
      </div>
      <div id="logoRight" class="logoRight">
        <img src="/sk/skImage/skLogo.jpg" alt="" />
      </div>
      <div class="line" id="line"></div>
      <div class="text" id="text">
        <img src="/sk/skImage/text.jpg" alt="" />
      </div>
    </div> -->
  </div>
</template>

<script>
import { useRouter, useRoute } from "vue-router";
import { formatEnergyDate, getWeek } from "@/utils";
import $ from "jquery";
import { nextTick } from "vue";
import {
  defineComponent,
  reactive,
  toRefs,
  onMounted,
  onBeforeUnmount,
} from "vue";
export default defineComponent({
  components: {},
  setup(props) {
    const formatEnergyDate = function (type = 1) {
      //三目运算符
      let dates = null;
      if (type == 2) {
        dates = new Date(new Date().setHours(new Date().getHours() + 1));
      } else {
        dates = new Date();
      }
      //月份下标是0-11
      const months =
        dates.getMonth() + 1 < 10
          ? "0" + (dates.getMonth() + 1)
          : dates.getMonth() + 1;
      //具体的天数
      const day =
        dates.getDate() < 10 ? "0" + dates.getDate() : dates.getDate();
      const year = dates.getFullYear();
      const hours =
        dates.getHours() < 10 ? "0" + dates.getHours() : dates.getHours();
      // //分钟
      const minutes =
        dates.getMinutes() < 10 ? "0" + dates.getMinutes() : dates.getMinutes();
      const seconds =
        dates.getSeconds() < 10 ? "0" + dates.getSeconds() : dates.getSeconds();
      //返回数据格式
      return [
        year + "年" + months + "月" + day + "日",
        months + "月" + day + "日",
        hours + ":" + minutes,
      ];
    };
    const getWeek = function () {
      let week = new Date().getDay();
      let str = "";
      if (week == 0) {
        str = "星期日";
      } else if (week == 1) {
        str = "星期一";
      } else if (week == 2) {
        str = "星期二";
      } else if (week == 3) {
        str = "星期三";
      } else if (week == 4) {
        str = "星期四";
      } else if (week == 5) {
        str = "星期五";
      } else if (week == 6) {
        str = "星期六";
      }
      return str;
    };
    const router = useRouter();
    const route = useRoute();
    const proxyData = reactive({
      nowTime: formatEnergyDate()[2],
      sTime: formatEnergyDate(2)[2],
      nowDate: formatEnergyDate()[0],
      intevell: null,
      type: "",
      showFalg: false,
      week: getWeek(),
      // 设置现在时间
      setNowDate() {
        proxyData.intevell = setInterval(() => {
          let timeArr = formatEnergyDate();
          proxyData.nowTime = timeArr[2];
          proxyData.nowDate = timeArr[0];
          let timeArr1 = formatEnergyDate(2);
          proxyData.sTime = timeArr1[2];
          proxyData.week = getWeek();
        }, 1000);
      },
      init() {
        let myVid = document.getElementById("video1");
        let aniThree = document.getElementById("aniThree");
        let aniThree5 = document.getElementById("aniThree5");
        let aniThree6 = document.getElementById("aniThree6");
        let logoLeft = document.getElementById("logoLeft");
        let logoRight = document.getElementById("logoRight");
        let line = document.getElementById("line");
        let text = document.getElementById("text");
        let skSlogan = document.getElementById("skSlogan");
        let ani1 = document.getElementById("ani1");
        let ani12 = document.getElementById("ani12");
        let ani13 = document.getElementById("ani13");

        let ani2 = document.getElementById("ani2");
        let ani3 = document.getElementById("ani3");
        let ani4 = document.getElementById("ani4");
        let ani5 = document.getElementById("ani5");
        let ani6 = document.getElementById("ani6");
        let ani7 = document.getElementById("ani7");

        let ani8 = document.getElementById("ani8");
        let ani82 = document.getElementById("ani82");
        let ani83 = document.getElementById("ani83");
        let ani84 = document.getElementById("ani84");
        let ani85 = document.getElementById("ani85");
        let ani86 = document.getElementById("ani86");
        let ani87 = document.getElementById("ani87");
        let ani88 = document.getElementById("ani88");
        let ani89 = document.getElementById("ani89");

        let ani9 = document.getElementById("ani9");
        let ani10 = document.getElementById("ani10");
        let slogan = document.getElementById("slogan");

        myVid.autoplay = true;
        myVid.controls = false;

        // 视频播放完成
        $(myVid).bind("ended", function () {
          $(myVid).fadeOut();

          // 第2部分
          $(skSlogan).show();
          $(ani1).addClass("ani1Active");
          $(ani12).addClass("ani12Active");
          $(ani13).addClass("ani13Active");

          $(ani2).addClass("ani2Active");
          $(ani3).addClass("ani3Active");
          $(ani4).addClass("ani4Active");
          $(ani5).addClass("ani5Active");
          $(ani6).addClass("ani6Active");
          $(ani7).addClass("ani7Active");

          $(ani8).addClass("ani8Active");
          $(ani82).addClass("ani82Active");
          $(ani83).addClass("ani83Active");
          $(ani84).addClass("ani84Active");
          $(ani85).addClass("ani85Active");
          $(ani86).addClass("ani86Active");
          $(ani87).addClass("ani87Active");
          $(ani88).addClass("ani88Active");
          $(ani89).addClass("ani89Active");

          $(ani9).addClass("ani9Active");
          $(ani10).addClass("ani10Active");
          $(slogan).addClass("sloganActive");

          proxyData.updateStyle();
          // 第3部分轮播

          /**
           * 删除第三部分的时候用此代码
           */
          // let time2 = setTimeout(() => {
          //   clearTimeout(time2);
          //   router.push({
          //     path: "/weather",
          //     query: { type: proxyData.type },
          //   });
          //   // 30000
          // }, 30000);

          /**
           * 需要第三个画面的时候
           */
          let timer = setTimeout(function () {
            $(skSlogan).fadeOut();
            $(aniThree).show();
            $(aniThree).addClass("aniThreeActive");
            $(aniThree5).addClass("aniThreeActive5");
            $(aniThree6).addClass("aniThreeActive6");
            // $(logoLeft).addClass("logoLeftAni");
            // $(logoRight).addClass("logoRightAni");
            // $(line).addClass("lineAni");
            // $(text).addClass("lineAni");
            clearTimeout(timer);
            let time2 = setTimeout(() => {
              clearTimeout(time2);
              router.push({
                path: "/weather",
                query: { type: proxyData.type },
              });
            }, 30000);
          }, 30000);
        });
      },
      // 动态修改样式
      updateStyle() {
        let ani1 = document.getElementById("ani1");
        let ani2 = document.getElementById("ani2");
        if (ani1 && ani2) {
          ani2.style.top = ani1.offsetHeight - ani1.offsetHeight * 0.08 + "px";
        }
        // let line = document.getElementById("line");
        // let text = document.getElementById("text");
        // line.style.height = logoLeft.offsetHeight + "px";
        // text.style.top = logoLeft.offsetHeight + logoLeft.offsetTop + 20 + "px";
      },
      // 窗口变化的时候调整适配
      winChange() {
        window.addEventListener(
          "resize",
          function () {
            proxyData.updateStyle();
          },
          false
        );
      },
    });
    onBeforeUnmount(() => { });
    onMounted(() => {
      let type = route.query.type;
      proxyData.type = type;
      proxyData.showFalg = true;
      nextTick(() => {
        proxyData.init();
        setTimeout(() => {
          proxyData.updateStyle();
        }, 200);
        proxyData.winChange();
      });
    });
    return {
      ...toRefs(proxyData),
    };
  },
});
</script>

<style lang="scss" scoped>
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  overflow: hidden;
}

#video1 {
  width: 100vw;
  height: 100vh;
  position: absolute;
}

/* 第3部分动画 */
.aniThree {
  display: none;
  width: 100vw;
  height: 100vh;
  position: absolute;
}

.aniThreeActive {
  display: block;
}
.aniThree5 {
  opacity: 0;
  padding-left: 100px;
  margin-top: 330px;
  margin-bottom: 60px;
}
.aniThreeActive5 {
  animation: aniThreeActive5 1.5s ease-in-out 0.1s forwards;
}
@keyframes aniThreeActive5 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.aniThree6 {
  opacity: 0;
}
.aniThreeActive6 {
  animation: aniThreeActive6 1.5s ease-in-out 0.9s forwards;
}
@keyframes aniThreeActive6 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.logoLeft {
  top: 20vh;
  position: absolute;
  opacity: 0;
}

.logoLeft img {
  //  width: 500px;
  //  height: 450px;
  // height: 41vh;
  // width: 26vw;
  height: 400px;
}

.logoLeftAni {
  opacity: 1;
  animation: logoLeftAni 0.6s ease-in-out forwards;
}

.logoRight {
  top: 20vh;
  position: absolute;
  opacity: 0;
}

.logoRight img {
  // height: 41vh;
  // width: 26vw;
  height: 400px;
}

.logoRightAni {
  opacity: 1;
  animation: logoRightAni 0.6s ease-in-out forwards;
}

@keyframes logoLeftAni {
  0% {
    opacity: 0;
    transform: translate(44.7vw, 0px);
  }

  100% {
    opacity: 1;
    transform: translate(24vw, 0px);
  }
}

@keyframes logoRightAni {
  0% {
    opacity: 0;
    transform: translate(44.7vw, 0px);
  }

  100% {
    opacity: 1;
    transform: translate(52vw, 0px);
  }
}

.line {
  opacity: 0;
  position: absolute;
  top: 20vh;
  left: 52vw;
  height: 41vh;
  width: 4px;
  background-color: #ccc;
}

.lineAni {
  animation: lineShow 1s forwards;
}

@keyframes lineShow {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.text {
  opacity: 0;
  position: absolute;
  // height: 18.5vh;
  width: 36.4vw;
  // top: 75vh;
  left: 50%;
  transform: translateX(-50%);
}

.text img {
  width: 100%;
  // height: 100%;
  // height: 18.5vh;
  // width: 36.4vw;
}

.lineAni {
  animation: lineShow 1s forwards;
}

/* 第2部分动画 */
.skSlogan {
  /* display: none; */
  width: 100%;
  height: 100%;
  position: absolute;
}

.skSloganActive {
  display: block;
}

/* 长城左上 */
.ani1 {
  width: 43%;
  // height: 69.4vh;
  opacity: 0;
  top: 0;
  position: absolute;
}

.ani1Active {
  animation: ani1Active 1s ease-in-out 4.7s forwards;
}

@keyframes ani1Active {
  0% {
    opacity: 0;
    /* transform:translate(-700px,-200px) ; */
  }

  100% {
    opacity: 1;
    /* transform:translate(0px,0px) ; */
  }
}

.ani12 {
  width: 43%;
  opacity: 0;
  top: 0;
  position: absolute;
}

.ani12Active {
  animation: ani12Active 1s ease-in-out 4.7s forwards;
}

@keyframes ani12Active {
  0% {
    opacity: 0;
    /* transform:translate(-700px,-200px) ; */
  }

  100% {
    opacity: 1;
    /* transform:translate(0px,0px) ; */
  }
}

.ani13 {
  opacity: 0;
  width: 29.9%;
  top: 9.25%;
  left: 11.45%;
  position: absolute;
}

.ani13Active {
  animation: ani13Active 5s infinite ease-in-out 4.7s forwards;
}

@keyframes ani13Active {
  0% {
    opacity: 0;
    transform: translate(0px, 0px);
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(-5.2vw, 0px);
  }
}

.ani3 {
  opacity: 0;
  top: 16.6vh;
  left: 50.7vw;
  position: absolute;
}

.ani3Active {
  animation: ani3Active 1s ease-in-out 4.8s forwards;
}

@keyframes ani3Active {
  0% {
    opacity: 0;
    // transform: translate(100px, 0px);
    transform: translate(5.2vw, 0px);
  }

  100% {
    opacity: 1;
    transform: translate(0px, 0px);
  }
}

.ani2 {
  opacity: 0;
  font-size: 0;
  left: 10.4vw;
  position: absolute;
  .time-top {
    // display: flex;
    // justify-content: space-between;
    span {
      display: inline-block;
      font-size: 34px;
      color: #7e7e82;
      &:nth-child(1) {
        padding-left: 10px;
        margin-right: 8.2vw;
      }
    }
  }
  .time-line {
    margin: 0 auto;
    margin-top: 0.7vh;
    margin-bottom: 0.7vh;
    // width: 440px;
    width: 95%;
    height: 1px;
    background: #cacaca;
  }
  .time-bottom {
    display: inline-block;
    vertical-align: middle;
    font-size: 34px;
    padding-left: 10px;
    color: #7e7e82;
    img {
      display: inline-block;
      vertical-align: middle;
      width: 34px;
      height: 34px;
    }
    span {
      display: inline-block;
      vertical-align: middle;
      font-size: 34px;
      padding-left: 15px;
    }
    .time-right {
      display: inline-block;
      margin-top: -2px;
      vertical-align: middle;
      font-size: 34px;
      padding-left: 20px;
    }
  }
  .time-box {
    padding-top: 0.1vh;
    font-size: 70px;
    font-family: "HarmonyOS Sans TC";
    color: #01b59a;
    span {
      display: inline-block;
      vertical-align: middle;
      &:nth-child(2) {
        margin-left: 52px;
        margin-right: 52px;
        height: 45px;
        border-left: 1px solid #cacaca;
      }
    }
  }
}

.ani2Active {
  animation: ani2Active 1s ease-in-out 4.8s forwards;
}

@keyframes ani2Active {
  0% {
    opacity: 0;
    transform: translate(-20px, 0px);
  }

  100% {
    opacity: 1;
    transform: translate(0px, 0px);
  }
}

.ani4 {
  width: 138px;
  opacity: 0;
  // top: 95px;
  top: 8vh;
  right: 120px;
  position: absolute;
}

.ani4Active {
  animation: ani4Active 1s ease-in-out 4.8s forwards;
}

@keyframes ani4Active {
  0% {
    opacity: 0;
    transform: translate(50px, 0px);
  }

  100% {
    opacity: 1;
    transform: translate(0px, 0px);
  }
}

.ani6 {
  opacity: 0;
  top: 500px;
  left: -100px;
  position: absolute;
}

.ani6Active {
  animation: ani6Active 1.4s ease-in-out forwards;
}

@keyframes ani6Active {
  0% {
    opacity: 1;
    transform: translate(-100px, 500px), scale(1.5);

    /* top: 800px;
        left: -500px; */
  }

  10% {
    opacity: 1;
    transform: translate(300px, -460px), scale(2);
    /* top: 100px;
        left: 400px; */
  }

  70% {
    opacity: 1;
    transform: translate(300px, -460px) scale(2);
    /* top: 100px;
        left: 400px; */
  }

  100% {
    opacity: 1;
    transform: translate(-260px, -720px) scale(1);
    /* top: -223px;
        left: -360px; */
  }
}

.ani7 {
  opacity: 0;
  top: 87px;
  left: 159px;
  position: absolute;
}

.ani7Active {
  animation: ani7Active 1s ease-in-out 1.1s forwards;
}

@keyframes ani7Active {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* 长城-完整 */
.ani8 {
  position: absolute;
  opacity: 0;
  // width: 1920px;
  width: 100%;
  top: 0px;
}

.ani8Active {
  animation: ani8Active 5s ease-in-out forwards;
}

@keyframes ani8Active {
  0% {
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  80% {
    transform: translate(0px, 0px);

    opacity: 1;
  }

  100% {
    transform: translate(-635px, -225px) scale(0.72);
    opacity: 1;
  }
}

.ani82 {
  top: 0px;
  position: absolute;
  opacity: 0;
  // width: 1920px;
  width: 100%;
}

.ani82Active {
  animation: ani82Active 5s ease-in-out forwards;
}

@keyframes ani82Active {
  0% {
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  80% {
    transform: translate(0px, 0px);

    opacity: 1;
  }

  90% {
    transform: translate(0px, 0px);

    opacity: 0;
  }

  100% {
    transform: translate(-500px, -200px) scale(0.75);
    opacity: 0;
  }
}

/* 蓝天 */
.ani83 {
  top: 0px;
  left: 0px;
  position: absolute;
  opacity: 0;
  width: 1920px;
}

.ani83Active {
  animation: ani82Active 5s ease-in-out forwards;
}

/* 云0 */
.ani84 {
  // top: 76px;
  width: 79%;
  top: 7vh;
  left: 0;
  position: absolute;
  opacity: 0;
}

.ani84Active {
  animation: ani84Active 4.8s ease-in-out forwards;
}

@keyframes ani84Active {
  0% {
    opacity: 1;
    transform: translate(15.6vw, 0px);
  }

  90% {
    transform: translate(10.4vw, 0px);
    opacity: 1;
  }

  100% {
    transform: translate(10.4vw, 0px);
    opacity: 0;
  }
}

/* 左上云 */
.ani85 {
  top: 9.2vh;
  left: 26vw;
  position: absolute;
  opacity: 0;
  transform: scale(1);
}

.ani85Active {
  animation: ani85Active 4.6s infinite ease-in-out 5s forwards;
}

@keyframes ani85Active {
  0% {
    opacity: 1;
    transform: translate(0px, 0px) scale(1);
  }

  100% {
    transform: translate(26vw, 0px) scale(1);
    opacity: 1;
  }
}

/* 蝴蝶飞舞 */
.ani9 {
  position: absolute;
  opacity: 0;
  width: 62.5%;
  /* left:0px;
      top: 0px; */
  transform: translate(0, 0) rotate(30deg);
}

.ani9Active {
  animation: ani9Active 5s ease-in-out forwards;
}

@keyframes ani9Active {
  0% {
    opacity: 0;
    /* left:-500px;
        top: 0px; */
    transform: translate(-26vw, 27.7vh) rotate(60deg) scale(1.5);
  }

  40% {
    opacity: 1;
    /* left:-500px;
        top: 0px; */
    // transform: translate(700px, 100px) rotate(60deg) scale(0.15);
    transform: translate(36.4vw, 9.25vh) rotate(60deg) scale(0.15);
  }

  60% {
    opacity: 1;
    /* left:-500px;
        top: 0px; */
    // transform: translate(700px, -100px) rotate(-50deg) scale(0.15);
    transform: translate(36.4vw, -9.25vh) rotate(-50deg) scale(0.15);
  }

  80% {
    opacity: 1;
    // transform: translate(500px, -200px) rotate(-60deg) scale(0.1);
    transform: translate(26vw, -18.5vh) rotate(-60deg) scale(0.1);
  }

  100% {
    opacity: 0;
    // transform: translate(0px, -200px) rotate(-60deg) scale(0.1);
    transform: translate(0px, -18.5vh) rotate(-60deg) scale(0.1);
  }
}

.ani10 {
  width: 100vw;
  opacity: 0;
  position: absolute;
}

.ani10Active {
  animation: ani10Active 0.5s ease-in-out 6s forwards;
}

@keyframes ani10Active {
  0% {
    // top: 700px;
    top: 64.8vh;
    left: 0px;
    opacity: 1;
  }

  100% {
    top: 0px;
    left: 0px;
    opacity: 1;
  }
}
</style>