zs_aucma-mes-ui/src/views/model/live.vue

<template>
  <div class="app-container">
    <div class="headTitle">智造现场直播</div>
    <div class="time" id="time">{{ time }}</div>
    <div class="date" id="date">{{ date }}</div>
    <div class="logo"></div>
    <div class="title" v-for="(i,k) in title"
         :style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'">
      {{ i }}
    </div>
    <div class="videoItem" style="top: 14.8%;left: 3.5%;">
      <div>
        <div class="time1">{{ time1 }}</div>
        <video autoplay="" muted="" loop="loop">
          <source src="@/assets/model/live/v1.mp4" type="video/mp4">
          您的浏览器不支持 video 标签。
        </video>
      </div>
    </div>
    <div class="videoItem" style="top: 14.8%;left:35%">
      <div>
        <div class="time1">{{ time1 }}</div>
        <video autoplay="" muted="" loop="loop">
          <source src="@/assets/model/live/v2.mp4" type="video/mp4">
          您的浏览器不支持 video 标签。
        </video>
      </div>
    </div>
    <div class="videoItem" style="top: 14.8%;left:66.4%">
      <div>
        <div class="time1">{{ time1 }}</div>
        <video autoplay="" muted="" loop="loop">
          <source src="@/assets/model/live/v3.mp4" type="video/mp4">
          您的浏览器不支持 video 标签。
        </video>
      </div>
    </div>
    <div class="videoItem" style="top: 59%;left:3.5%">
      <div>
        <div class="time1">{{ time1 }}</div>
        <video autoplay="" muted="" loop="loop">
          <source src="@/assets/model/live/v4.mp4" type="video/mp4">
          您的浏览器不支持 video 标签。
        </video>
      </div>
    </div>
    <div class="videoItem" style="top: 59%;left:35%">
      <div>
        <div class="time1">{{ time1 }}</div>
        <video autoplay="" muted="" loop="loop">
          <source src="@/assets/model/live/v5.mp4" type="video/mp4">
          您的浏览器不支持 video 标签。
        </video>
      </div>
    </div>
    <div class="videoItem" style="top: 59%;left:66.4%">
      <div>
        <div class="time1">{{ time1 }}</div>
        <video autoplay="" muted="" loop="loop">
          <source src="@/assets/model/live/v6.mp4" type="video/mp4">
          您的浏览器不支持 video 标签。
        </video>
      </div>
    </div>
    <div class="exit" @click="exitFun"></div>
  </div>
</template>

<script>

let getDateIntervalFun = null
export default {
  name: "Liner",
  props: {
    exit: {
      type: Function,
      default: null
    }
  },
  data() {
    return {
      time: '',
      time1: '',
      date: '',
      title: [
        '内胆自动成型',
        '数控缠绕蒸发器',
        '箱壳自动成型',
        '智能物流调度',
        '双进双出直线发泡',
        '机器人搬运应用',
      ],
      titlePosition: [
        {
          top: 11.6,
          left: 5.5
        },
        {
          top: 11.6,
          left: 37
        },
        {
          top: 11.6,
          left: 68.5
        },
        {
          top: 55.8,
          left: 5.5
        },
        {
          top: 55.8,
          left: 37
        },
        {
          top: 55.8,
          left: 68.5
        }
      ],
    }
  },
  created() {
    const getDate = () => {
      let date = new Date()
      let YYYY = date.getFullYear()
      let MM = (date.getMonth() + 1).toString().length === 1 ? ('0' + (date.getMonth() + 1)) : (date.getMonth() + 1)
      let dd = date.getDate().toString().length === 1 ? ('0' + date.getDate()) : date.getDate()
      let HH = date.getHours().toString().length === 1 ? ('0' + date.getHours()) : date.getHours()
      let mm = date.getMinutes().toString().length === 1 ? ('0' + date.getMinutes()) : date.getMinutes()
      let ss = date.getSeconds().toString().length === 1 ? ('0' + date.getSeconds()) : date.getSeconds()
      let week = date.getDay()
      let weekArr = ['日','一','二','三','四','五','六']
      this.date = `${YYYY} - ${MM} - ${dd}`
      this.time = `${HH} : ${mm} : ${ss}`
      this.time1 = `${YYYY} 年 ${MM} 月 ${dd}日 星期${weekArr[week]} ${HH} : ${mm} : ${ss}`
    }
    getDate()
    getDateIntervalFun = setInterval(getDate, 1000)
  },
  mounted() {
  },
  methods: {
    exitFun() {
      this.exit()
    }
  }
}
</script>
<style scoped lang="less">
.app-container {
  background-image: url("~@/assets/model/live/bg.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.logo {
  background-image: url("../../assets/board/logo.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 6vw;
  height: 2.3vw;
  position: absolute;
  top: 1%;
  left: 1%;
}

.exit {
  background-image: url("~@/assets/model/factoryIntroduction/exit.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 1%;
  right: 1%;
  font-weight: bold;
  width: 2vw;
  height: 2vw;
  color: #e7b219;
}

.time, .date {
  position: absolute;
  font-size: 0.8vw;
  color: #fcfcfc;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.time {
  top: 3.2%;
  left: 85.8%;
}

.date {
  top: 3.2%;
  left: 94.1%;
}

.headTitle {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translate(-50%, -100%);
  font-size: 1.5vw;
  color: #d6eaed;
  letter-spacing: 10px;
  font-family: "微软雅黑", serif;
}

.videoItem {
  position: absolute;
  width: 30%;
  height: 35.4%;
  div{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    video {
      width: 100%;
    }

    .time1 {
      position: absolute;
      top: 5%;
      left: 3%;
      font-size: 0.6vw;
      color: #fff;
      transform: translateY(0);
    }
  }
}
.title {
  position: absolute;
  transform: translateY(-50%);
  color: #dddddd;
  font-size: 1vw;
  letter-spacing: 2px;
}
</style>