<template>
  <div class="container">
    <div class="screenHead">
      <div class="headTitle">宿管系统</div>
      <div class="weatherInfo">
        <span class="iconfont httpicon-shijian"></span>
        <div>{{ time }}</div>
        <div class="dataday">{{ data }}</div>
      </div>
    </div>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      time: "",
      data: "",
    };
  },
  components: {
  },
  created() {
    setInterval(() => {
      this.gettime();
    }, 1000);
  },
  methods: {
    gettime() {
      var myDate = new Date();
      var year = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
      var month = myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)
      var date = myDate.getDate(); //获取当前日(1-31)
      var day = myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
      var hours = myDate.getHours(); //获取当前小时数(0-23)
      var minutes = myDate.getMinutes(); //获取当前分钟数(0-59)
      // var Seconds=myDate.getSeconds(); //获取当前秒数(0-59)
      if (minutes < 10) {
        minutes = "0" + minutes;
      }
      if (hours < 10) {
        hours = "0" + hours;
      }
      var daystr = "";
      switch (day) {
        case 0:
          daystr = "星期天";
          break;
        case 1:
          daystr = "星期一";
          break;
        case 2:
          daystr = "星期二";
          break;
        case 3:
          daystr = "星期三";
          break;
        case 4:
          daystr = "星期四";
          break;
        case 5:
          daystr = "星期五";
          break;
        case 6:
          daystr = "星期六";
          break;
      }
      this.time = hours + ":" + minutes;
      this.data = year + "年" + month + "月" + date + "日 " + daystr;
    },
  },
};
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
.container {
  background: radial-gradient(#051838, #05193a);
  width: 100%;
  min-height: 100vh;
}
.container .screenHead {
  width: 100%;
  height: 78px;
  text-align: center;
  position: relative;
  background: url(../assets/img/headPicture.5da35b1b.png) no-repeat 50%;
}
.container .screenHead .headTitle {
  font-size: 32px;
  line-height: 78px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  font-family: '宋体';
  color: #fff;
}
.container .screenHead .weatherInfo {
  position: absolute;
  height: 50px;
  top: 0;
  right: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #fff;
}
.dataday {
  margin-top: 10px;
  margin: 0 10px;
  padding: 0 15px;
  position: relative;
  border-left: 1px solid rgb(137, 202, 242);
}
/* .dataday::before{
  content: ' ';
  background: rgb(137, 202, 242);
  width: 2px;
  padding: 0.2px;
  height: 100%;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
} */
.weatherInfo .iconfont {
  font-size: 20px;
  vertical-align: middle;
  margin-right: 4px;
  margin-top: 2px;
}

</style>
