<!--
 描述: 酷屏首页模板
 作者: anni
 日期: 2024-10-30
-->

<template>
  <div class="home-container">
  	<div class="wrap" ref="editor">
      <div class="sn-content">
        <!-- <div class="top"></div> -->
        <header>
          <div class="sn-title" @click="goHome">{{ date }} <span style="color:#ff9829">智能冲裁</span> 工作情况</div>
        </header>

        <ProductList />
      </div>
    </div>
    
  </div>
</template>

<script>
import { screenSize } from '@/assets/js/utils'
import ProductList from './ProductList.vue';

export default {
  name: 'Home',
  components: {
    ProductList
  },
  data() {
  	return {
  		nowTime: '',
      week: '',
      date: '',
      imgSrc: '',
      weatcherData: {},
  	}
  },
  computed: {
  	
  },
  created() {
  },
  mounted() {
    screenSize(this.$refs.editor);

    this.nowTimes();
  },
  methods: {
    goHome() {
      if (process.env.NODE_ENV === 'production') {
        this.$router.push({ path: '/admin/index' });
      } else {
        this.$router.push({ path: '/' });
      }
    },
    timeFormate(timeStamp) { //显示当前时间
      let newDate = new Date(timeStamp);
      let year = newDate.getFullYear();
      let month = newDate.getMonth() + 1 < 10 ? '0' + (newDate.getMonth() + 1) : newDate.getMonth() + 1;
      let date = newDate.getDate() < 10 ? '0' + newDate.getDate() : newDate.getDate();
      let hh = newDate.getHours() < 10 ? '0' + newDate.getHours() : newDate.getHours();
      let mm = newDate.getMinutes() < 10 ? '0' + newDate.getMinutes() : newDate.getMinutes();
      let ss = newDate.getSeconds() < 10 ? '0' + newDate.getSeconds() : newDate.getSeconds();
      let week = newDate.getDay();
      let weeks = ['日', '一', '二', '三', '四', '五', '六'];
      let getWeek = '星期' + weeks[week];
      this.week = getWeek;
      this.date = year + '年' + month + '月' + date + '日';
      this.nowTime = hh + ':' + mm + ':' + ss;
    },
    nowTimes() {
      this.timeFormate(new Date());
      setInterval(this.nowTimes, 1000);
      this.clear();
    },
    clear() {
      clearInterval(this.nowTimes)
      this.nowTimes = null;
    }
  }
}
</script>
<style lang="scss" scoped>
.home-container {
	height: 100vh !important;
  width: 100% !important;
  z-index: 10001 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  .wrap {
    transform-origin: 0px 0px 0px 0px;
    transform: none !important;
    background: url(../../assets/images/bj.jpg) no-repeat;
    background-size: contain;
    background-position: 50% 0;
    background-color: rgb(0, 0, 0);
    min-width: auto;
    width: 1920px;
    min-height: auto;
    height: 1080px;
    overflow: hidden;

    .sn-title {
      z-index: 99999;
      cursor: pointer;
      position: absolute;
      height: 50px;
      font-size: 50px;
      color: #7becff;
      line-height: 50px;
      padding: 0 0 0 30px;
      left: 70px;
      top: 30px;
      &:before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -7px;
        width: 40px;
        height: 40px;
        background: url(../../assets/images/sn-title.png) no-repeat 0% 0%;
      }
    }
    .top {
      position: absolute;
      left: 0; 
      top: 0; 
      width: 100%; 
      height: 80px; 
      background-color: transparent; 
      background: url(../../assets/images/top_nav.png) no-repeat; 
      background-position: 65% 0;
      border: none; 
      overflow: hidden;

      h1 {
        font-size: 30px;
        color: azure;
        text-align: center;
        line-height: 70px;
      }
    }

    header {
      // position: relative;
      // height: 80px;
      // background: url(../../assets/images/brand/head_bg.png) no-repeat top center;
      // background-size: 100% 100%;
      h2 {
        color: #a2e5ff;
        font-size: 30px;
        text-align: center;
        line-height: 70px;
        letter-spacing: 4px;
      }
      .weather {
        position: absolute;
        left: 10px;
        top: 10px;
        font-size: 14px;
        color: rgba(126, 240, 255, .7);
        img {
          width: 20px;
        }
        span {
          display: inline-block;
        }
        .tem {
          margin: 0 10px 0 .2rem;
        }
      }
      .showTime {
        position: absolute;
        right: 70px;
        top: 30px;
        color: rgba(145, 233, 255, 0.801);
        display: flex;
        .time {
          font-size: 24px;
          margin-right: 20px;
        }
        .date {
          span {
            display: block;
            &:nth-child(1) {
              font-size: 16px;
              text-align: right;
            }
            &:nth-child(2) {
              font-size: 18px;
            }
          }
        }
      }
    }
  }
}	
</style>
