sd/src/components/AF-exhibition/header-view/index.vue

<template>
  <header>
    <el-row class="headerRowBox">
      <el-col>{{ dateDay }}</el-col>
      <el-col class="time">{{ dataTime }}</el-col>
      <el-col class="weather">
        <!-- <img v-if="weatherObj.weather_pic" :src="weatherObj.weather_pic || ''" alt="" /> -->
        <!-- <span v-if="weatherObj.weather">{{ weatherObj.weather }} {{ weatherObj.temperature }}℃</span> -->
        <img src="../../../assets/image/header-AF.png" alt="" />
      </el-col>
      <el-col>多云 23℃</el-col>
    </el-row>
    <el-row class="headerCenterBox">永天科技-智能物联网设备</el-row>
    <el-row class="headerRowBox">
    </el-row>
  </header>
</template>

<script>
export default {
  data() {
    return {
      dateDay: "",
      dataTime: "",
      timeArea: "",
      weatherObj: {},
      dataWeekList: ["一", "二", "三", "四", "五", "六", "七"],
    };
  },
  created() {},
  mounted() {
    this.getData();
    setInterval(() => {
      let day = new Date();
      this.dateDay =
        day.getFullYear() +
        "年" +
        (day.getMonth() + 1 < 10
          ? "0" + (day.getMonth() + 1)
          : "" + (day.getMonth() + 1)) +
        "月" +
        (day.getDate() < 10 ? "0" + day.getDate() : day.getDate()) +
        "日  " +
        " 星期" +
        this.dataWeekList[day.getDay()];
      this.dataTime =
        (day.getHours() < 10 ? "0" + day.getHours() : day.getHours()) +
        ":" +
        (day.getMinutes() < 10 ? "0" + day.getMinutes() : day.getMinutes()) +
        ":" +
        (day.getSeconds() < 10 ? "0" + day.getSeconds() : day.getSeconds());
    }, 1000);
  },
  methods: {
    async getData() {

    },
    async getWeather() {
      let res = await this.$axios.get("/aliWeather");
      if (res.showapi_res_code === 0) {
        this.weatherObj = res.showapi_res_body.now;
      }
    },
  },
  };
</script>

<style lang="scss" scoped>
  header {
    width: 100%;
    padding: 0 20px;
    display: flex;
    background: url("../../../assets/image/header.png");
    background-size: 100% 100%;
    font-size: 14px;
    box-sizing: border-box;
    .headerRowBox {
      width: 34%;
      display: flex;
      padding-top: 12px;
      height: 100%;
      &::before{
        display: none;
      }
      .el-col {
        flex: none;
        width: auto;
        height: auto;
        margin-right: 20px;
        line-height: 30px;
        span{
          font-size: 20px;
          color: #F6D311;
          margin-left: 10px;
        }
      }
      .time {
        margin-left: 10px;
        font-size: 28px;
        width: 90px;
        font-family: "DS", "DS-B", "DS-BB", "DS-BS";
      }
      .weather {
        display: flex;
        img {
          width: 28px;
          height: 28px;
          display: block;
        }
      }
    }
    .headerCenterBox{
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32px;
      font-family: "DS", "DS-B", "DS-BB", "DS-BS";
      font-weight: 700;
      letter-spacing: 1px;
      background-image:-webkit-linear-gradient(top,#fafeff,#59c8ff,); 
      -webkit-background-clip:text; 
      -webkit-text-fill-color:transparent; 
    }
    // .headerRightBox {
    //   width: 34%;
    //   display: flex;
    //   align-items: center;
    //   height: 100%;
    //   .el-col {
    //     flex: none;
    //     width: auto;
    //     height: auto;
    //     margin-right: 30px;
    //   }
    // }
  }
</style>