<template>  <div class="dateClock">    <div class="todayClass">      <p class="datep">{{dateToday}}</p>      <span style="float:right;font-size:16px">{{$t(weekDay)}}</span>    </div>    <div class="clock">      <div :class="timeLab==='AM'?'labelTip amstyle':'labelTip pmstyle'">        <span>{{timeLab}}</span>      </div>      <div :class="timeLab==='AM'?'flip amcolor':'flip pmcolor'">        <span class="rightline"></span>        <span class="leftline"></span>        <div class="digital front"             :data-number="nextTimes[0]"></div>        <div class="digital back"             :data-number="nowTimes[0]"></div>      </div>      <div :class="timeLab==='AM'?'flip amcolor':'flip pmcolor'">        <span class="rightline"></span>        <span class="leftline"></span>        <div class="digital front"             :data-number="nextTimes[1]"></div>        <div class="digital back"             :data-number="nowTimes[1]"></div>      </div>      <em :class="timeLab==='AM'?'divider amcolor':'divider pmcolor'"> <i class="iconfont icon-dian"></i></em>      <div :class="timeLab==='AM'?'flip amcolor':'flip pmcolor'">        <span class="rightline"></span>        <span class="leftline"></span>        <div class="digital front"             :data-number="nextTimes[2]"></div>        <div class="digital back"             :data-number="nowTimes[2]"></div>      </div>      <div :class="timeLab==='AM'?'flip amcolor':'flip pmcolor'">        <span class="rightline"></span>        <span class="leftline"></span>        <div class="digital front"             :data-number="nextTimes[3]"></div>        <div class="digital back"             :data-number="nowTimes[3]"></div>      </div>      <em :class="timeLab==='AM'?'divider amcolor':'divider pmcolor'"> <i class="iconfont icon-dian"></i></em>      <div :class="timeLab==='AM'?'flip amcolor':'flip pmcolor'">        <span class="rightline"></span>        <span class="leftline"></span>        <div class="digital front"             :data-number="nextTimes[4]"></div>        <div class="digital back"             :data-number="nowTimes[4]"></div>      </div>      <div :class="timeLab==='AM'?'flip amcolor':'flip pmcolor'">        <span class="rightline"></span>        <span class="leftline"></span>        <div class="digital front"             :data-number="nextTimes[5]"></div>        <div class="digital back"             :data-number="nowTimes[5]"></div>      </div>    </div>  </div></template><script>import {  defineAsyncComponent,  defineComponent,  getCurrentInstance,  onMounted,  reactive,  toRefs,} from "vue";import DateUtil from "@/utils/dateUtil";export default {  setup() {    const { proxy } = getCurrentInstance();    const data = reactive({      nowTimes: [],      nextTimes: [],      timer: {},      timeLab: 'AM',      dateToday: '',      weekDay: '',      timeKey: 0    });    onMounted(() => {      initDate();      data.timer = setInterval(() => {        updateTime();      }, 1000)    });    const initDate = async () => {      let now = new Date();      data.dateToday = proxy.$moment(now).format('MMM D, YYYY')      let nowWeek = now.getDay()      data.weekDay = DateUtil.returnWeek()[nowWeek]      data.nowTimes = getTimeFromDate(new Date(now.getTime() - 1000));      data.nextTimes = getTimeFromDate(now)    }    const updateTime = () => {      let now = new Date();      data.timeKey = now      let nowTimes = getTimeFromDate(new Date(now.getTime() - 1000));      let nextTimes = getTimeFromDate(now);      data.nowTimes = nowTimes      // console.log('nowTimes', nowTimes)      for (let i = 0; i < 6; i++) {        if (nowTimes[i] !== nextTimes[i]) {          //  setSpin(i, nowTimes[i], nextTimes[i]);          setSpin(i, nowTimes, nextTimes);        }      }    }    // 执行翻页操作    const setSpin = (index, nowTime, nextTime) => {      let nodes = document.querySelectorAll(".flip");      if (nodes.length) {        nodes[index].classList.add('running');        //   data.nowTimes.splice(index, 1, nowTime);        data.nowTimes = nowTime        setTimeout(() => {          nodes[index].classList.remove('running');          //  data.nowTimes.splice(index, 1, nextTime);          //  data.nextTimes.splice(index, 1, nextTime);          data.nowTimes = nextTime          data.nextTimes = nextTime        }, 800)      } else {        clearInterval(data.timer);        data.timer = null      }    }    // 获取时间显示参数    const getTimeFromDate = (date) => {      let numTime = [];      let timeStr = proxy.$moment(date).format("hh:mm:ss A")      // let timeStr = proxy.$moment(date).format("hh:mm A")      data.timeLab = timeStr.split(' ')[1]      let time1 = timeStr.split(' ')[0].split(':').join("")      for (let i = 0; i < time1.length; i++) {        numTime.push(parseInt(time1[i]));      }      return numTime    }    //销毁    return {      ...toRefs(data),      initDate,      updateTime,      setSpin,      getTimeFromDate,    };  }}</script><style lang="scss" scoped>.dateClock {   display: flex;   .todayClass {      padding-right: 5px;      .datep {         font-size: 30px;         padding-top: 5px;      }   }   .clock {      display: flex;   }}.clock .divider {   font-size: 40px;   line-height: 47px;   .iconfont {      margin-right: 0;   }}.clock .flip {   position: relative;   width: 44px;   height: 60px;   margin: 2px;   font-size: 40px;   line-height: 60px;   text-align: center;   background: #ffffff;   border: 1px solid #b8b8b8;   border-radius: 4px;   .leftline {      position: absolute;      left: 0;      top: 26px;      width: 0;      height: 8px;      border: 1px solid #b8b8b8;      z-index: 5;   }   .rightline {      position: absolute;      right: 0;      top: 26px;      width: 0;      height: 8px;      border: 1px solid #b8b8b8;      z-index: 5;   }}.amcolor {   color: #ff43a1;}.pmcolor {   color: #1890ff;}.labelTip {   width: 44px;   height: 60px;   margin: 2px;   line-height: 60px;   text-align: center;   border-radius: 4px;   font-size: 16px;   font-weight: bold;   color: #fff;}.amstyle {   background-color: #ff43a1;}.pmstyle {   background-color: #1890ff;}.clock .flip .digital::before,.clock .flip .digital::after {   position: absolute;   content: attr(data-number);   left: 0;   right: 0;   background: #fff;   overflow: hidden;   -webkit-perspective: 160px;   perspective: 160px;}.clock .flip .digital::before {   top: 0;   bottom: 50%;   border-bottom: 1px solid #fff;   border-radius: 4px 4px 0 0;}.clock .flip .digital::after {   top: 50%;   bottom: 0;   line-height: 0;   border-radius: 0 0 4px 4px;   background: linear-gradient(180deg, #ffffff, #ffffff 68%, #e2e2e2);}.clock .flip .back::before,.clock .flip .front::after {   z-index: 1;}.clock .flip .back::after {   z-index: 2;}.clock .flip .front::before {   z-index: 3;}.clock .flip .back::after {   -webkit-transform-origin: center top;   transform-origin: center top;   -webkit-transform: rotateX(0.5turn);   transform: rotateX(0.5turn);}.clock .flip.running .front::before {   -webkit-transform-origin: center bottom;   transform-origin: center bottom;   -webkit-animation: frontFlipDown 1s ease-in-out;   animation: frontFlipDown 1s ease-in-out;   -webkit-backface-visibility: hidden;   backface-visibility: hidden;}.clock .flip.running .back::after {   -webkit-animation: backFlipDown 1s ease-in-out;   animation: backFlipDown 1s ease-in-out;}@-webkit-keyframes frontFlipDown {   to {      -webkit-transform: rotateX(0.5turn);      transform: rotateX(0.5turn);   }}@keyframes frontFlipDown {   to {      -webkit-transform: rotateX(0.5turn);      transform: rotateX(0.5turn);   }}@-webkit-keyframes backFlipDown {   to {      -webkit-transform: rotateX(0);      transform: rotateX(0);   }}@keyframes backFlipDown {   to {      -webkit-transform: rotateX(0);      transform: rotateX(0);   }}</style>