<template>
  <div class="container_box">
    <div class="top_con">
      <div class="left_con">
        <div class="left_txt">
          <div class="time_text">{{ time }}</div>
          <div class="bittom_left">
            <div class="week_txt">
              <span>{{ date }}</span
              ><span style="margin-left: 0.1rem">{{ week }}</span>
            </div>
            <div class="uodate_time">数据更新时间:<span class="time_txt">2023/01/17</span></div>
          </div>
        </div>
      </div>
      <div class="center_con">
        <div class="con_title">莒县物流服务中心</div>
      </div>
      <div class="right_con">
        <div class="right_txt">
          <div class="left">
            <img src="~@/assets/img/pos.png" alt="" />
            <div class="pos_text">日照市莒县</div>
          </div>
          <div class="bottom_right">
            <img src="~@/assets/img/weather.png" alt="" />
            <div>
              <span>{{ temp }}℃</span>
              <span>{{ weather }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="left_box">
      <div class="left_top">
        <div class="top_title">
          <div class="left_tit">
            <span class="txt_name">收件量</span>
            <span class="name">RECEIVING</span>
          </div>
          <div class="right_tit">
            <div class="title_txt">收</div>
            <div class="title_txt">发</div>
            <div class="title_txt">到</div>
            <div class="title_txt">派</div>
            <div class="title_txt">签</div>
          </div>
        </div>
      </div>
      <div class="left_bottom"></div>
    </div>
  </div>
</template>

<script>
import { queryWeath } from "@/api/base";
export default {
  data() {
    return {
      day: "",
      time: "",
      date: "",
      week: "",
      temp: "",
      weather: "",
    };
  },
  created() {
    this.getTime();
  },
  mounted() {
    queryWeath().then((res) => {
      this.temp = res.result.now.temp;
      this.weather = res.result.now.text;
    });
  },
  methods: {
    fn(str) {
      let num = null;
      str >= 10 ? (num = str) : (num = "0" + str);
      return num;
    },
    getWeek(e) {
      let arr = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
      this.week = arr[e];
    },
    getTime() {
      //获取当前时间
      this.timer = setInterval(() => {
        var date = new Date();
        var year = date.getFullYear(); //当前年份
        var month = date.getMonth(); //当前月份
        var data = date.getDate(); //天
        var hours = date.getHours(); //小时
        var minute = date.getMinutes(); //分
        var second = date.getSeconds(); //秒
        this.day = date.getDay(); //获取当前星期几
        this.getWeek(this.day);
        this.time = this.fn(hours) + ":" + this.fn(minute) + ":" + this.fn(second);
        this.date = year + "/" + (month + 1) + "/" + data;
      }, 1000);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/assets/font/font.css";
.container_box {
  width: 100%;
  height: 100%;
  position: absolute;
  background: url(~@/assets/img/background.jpg);
  background-size: 100% 100%;
  position: relative;
  z-index: 9;

  .top_con {
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;

    .left_con {
      width: 20%;
      display: flex;
      justify-content: space-between;
      height: 100%;
      align-items: center;

      .left_txt {
        display: flex;
        width: 100%;
        flex-direction: column;
        height: 55%;
        justify-content: space-between;

        .time_text {
          display: flex;
          margin-left: 0.38rem;
          font-size: 0.34rem;
          font-family: "04B";
          color: #ffffff;
          box-shadow: -4px 5px 10px 0px rgb(64 49 49 / 56%);
        }

        .bittom_left {
          display: flex;
          justify-content: space-between;

          .week_txt {
            font-size: 0.14rem;
            letter-spacing: 0px;
            color: #ffffff;
            margin-left: 0.38rem;
          }

          .uodate_time {
            font-family: "FZSK";
            font-size: 0.14rem;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #ffffff;
            box-shadow: -1px 2px 3px 0px rgb(64 49 49 / 60%);
            opacity: 0.8;
            color: #fff;
            .time_txt {
              font-size: 0.16rem;
              font-family: "04B";
            }
          }
        }
      }
    }

    .center_con {
      width: 60%;
      height: 80%;
      text-align: center;

      .con_title {
        font-family: "FZSK";
        font-size: 0.44rem;
        font-weight: normal;
        font-style: italic;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #ffffff;
        // box-shadow: -0.04rem 0.05rem 0.1rem 0px
        //   rgba(64, 49, 49, 0.56);
      }
    }

    .right_con {
      width: 17%;
      height: 100%;
      display: flex;
      align-items: center;
      margin-left: 3%;

      .right_txt {
        width: 100%;
        height: 53%;
        display: flex;
        justify-content: space-between;

        .left {
          display: flex;
          align-items: flex-end;
          img {
            width: 0.13rem;
            height: 0.16rem;
            margin-right: 0.1rem;
          }

          .pos_text {
            font-family: "FZSK";
            font-size: 0.16rem;
            color: #ddecff;
          }
        }

        .bottom_right {
          display: flex;
          align-items: center;
          margin-right: 0.38rem;
          img {
            width: 0.8rem;
            height: 0.8rem;
          }
          div {
            height: 100%;
            font-family: "FZSK";
            font-size: 0.16rem;
            color: #ffffff;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
          }
        }
      }
      div {
        font-size: 0.16rem;
        color: #fff;
      }
    }
  }

  .left_box {
    width: 24%;
    height: 80%;
    position: absolute;
    top: 14%;
    left: 3%;

    .left_top {
      width: 100%;
      height: 55%;

      .top_title {
        width: 100%;
        height: 10%;
        background: url(~@/assets/img/tit_bag.png);
        background-size: 100% 100%;
        display: flex;

        .left_tit {
          width: 50%;
          height: 100%;
          font-size: 0.1rem;
          color: #fff;
          display: flex;
          align-items: center;

          .txt_name {
            margin: 0 0.1rem 0 0.6rem;
            font-family: "FZSK";
            font-size: 0.22rem;
            letter-spacing: 0px;
            color: #ffffff;
          }

          .name {
            font-family: "FZSK";
            color: #ffffff;
            box-shadow: -4px 5px 10px 0px rgba(39, 8, 8, 0.81);
            opacity: 0.6;
            margin-bottom: 0.1rem;
          }
        }

        .right_tit {
          display: flex;
          align-items: center;
          margin-right: 0.18rem;
          position: relative;

          .title_txt {
            width: 0.4rem;
            height: 0.3rem;
            margin: 0 0.03rem;
            display: flex;
            align-items: center;
            justify-content: center;

            &::after {
              content: "";
              width: 0.4rem;
              height: 0.3rem;
              position: absolute;
              border: solid 1px #127cff;
              top: 50%;
              transform: skew(-10deg) translateY(-50%);
            }
          }

          div {
            font-size: 0.18rem;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>
