Top.vue

<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2022-09-03 11:38:15
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2022-09-13 10:01:00
 * @FilePath: /danger-manage-web/src/components/indexComponents/Top.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="top-wrapper flex">
    <div class="left flex">
      <div>
        <div class="weather">
          <iframe
            scrolling="no"
            src="https://tianqiapi.com/api.php?style=tz&skin=pitaya&color=339CC9"
            frameborder="0"
            width="450"
            height="30"
            allowtransparency="true"
          ></iframe>
        </div>
      </div>
    </div>
    <div class="middle flex">
      <div></div>
    </div>
    <div class="right flex">
      <div>
        <div class="right-time">
          <div class="time">
            <span> {{ nowDate }}</span>
            <span> {{ nowtime }}</span>
            <span> {{ nowweek }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import topCenter from "@/assets/indexImages/topCenter.png";
export default {
  name: "",
  data() {
    return {
      topCenter,
      nowDate: "",
      nowtime: "",
      nowweek: "",
    };
  },
  created() {
    this.formatDate();
  },
  mounted() {},
  methods: {
    formatDate() {
      let date = new Date();
      let year = date.getFullYear(); // 年
      let month = date.getMonth() + 1; // 月
      let day = date.getDate(); // 日
      let week = date.getDay(); // 星期
      let weekArr = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      let hour = date.getHours(); // 时
      hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
      let minute = date.getMinutes(); // 分
      minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
      let second = date.getSeconds(); // 秒
      second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
      this.nowtime = `${hour}:${minute}:${second}`;
      this.nowweek = `${weekArr[week]}`;
      this.nowDate = `${year}年${month}月${day}日`;
    },
  },
};
</script>
<style lang="scss" scoped>
.top-wrapper {
  position: absolute;
    z-index:1;
  width: 100%;
  height: 9.35%;
  max-height: 101px;
  // background-color: blue;
  top: 0px;
  justify-content: space-between;
  > div {
    flex: 1;
    max-width: 465px;
    align-items: center;
  }
  .middle {
    flex: initial;
    width: 47.7%;
    height: 100%;
    max-width: 917px;
    justify-content: space-around;
    > div {
      position: relative;
      width: 100%;
      height: 100%;
      background: url("~@/assets/indexImages/topCenter.png") no-repeat;
      background-size: 100% 100%;
    }
    // img{
    //   width: 100%;
    //   height: 100%;
    // }
  }
  .left {
    > div {
      width: 100%;
      height: 100%;
      background: url("~@/assets/indexImages/top-l.png") no-repeat;
      background-position: center 30%;
      background-size: 100%;
      overflow: hidden;
      .weather {
        width: 100%;
        margin-top: 4.5%;
        margin-left: 30%;
        iframe {
          width: 100%;
        }
      }
    }
  }
  .right {
    justify-content: right;
    > div {
      width: 100%;
      height: 100%;
      background: url("~@/assets/indexImages/top-r.png") no-repeat;
      background-position: center 30%;
      background-size: 100%;
      .right-time {
        width: 100%;
        margin-top: 4.5%;
        padding-right: 30%;
        color: #339cc9;
        .time {
          height: 20px;
          // width: 100%;
          float: right;
          font-size: 14px;
          > span {
            margin-left: 5px;
          }
        }
      }
    }
  }
}
</style>