4.0/src/renderer/components/myHeaderAll/index.vue

<template>
  <div class="header_top">
    <!-- <svg-icon icon-class="Head" :class-name="['headItem']"></svg-icon> -->
    <img v-if="!headImage" class="header_img" alt="" />
    <img v-else-if="headImage === 'default'" class="header_img" :src="require('@/assets/images/shijingjun/' + skinInfo + '/head.png')" alt="" />
    <img v-else class="header_img" :src="headImage" alt="" />
    <div class="dateTime">
      <span>{{ date.ymd }}</span>
      <span>{{ $t("headerTitles.week")[date.week] }}</span>
      <span>{{ batteryInfo }}</span>
      <div @click="openWeather">
        <svg-icon style="width: 20px;height: 20px;cursor: pointer;"  icon-class="weather" ></svg-icon>
      </div>
    </div>
    <setTool ref="setTool"></setTool>
    <systemPopup ref="systemPopup" v-if="showSystem"></systemPopup>
    <weather ref="weather"></weather>
    <!-- <headButton class="headButton"></headButton> -->
  </div>
</template>

<script>
// 右侧按钮弹框
import setTool from "./setTool/setTool.vue";
// 系统设置弹框
import systemPopup from "./systemPopup/systemPopup.vue";
// btn
// import headButton from "./headButton/buttonMenu.vue";
import weather from "./weather/index.vue";

export default {
  name: "index",
  components: {
    setTool,
    systemPopup,
    weather
    // headButton
  },

  data() {
    return {
      xxx: "pause",
      date: {
        ymd: "2023/11/20",
        week: "1",
      },
      flag: false,
      showSystem: false, //设置框
      head: null,
      skinInfo: JSON.parse(localStorage.getItem("systemSetting")).skinInfo,
      appVersion: localStorage.getItem("appVersion"),
      batteryInfo: "",
      headImage: ''
    };
  },
  beforeMount() {
    // this.$sendElectronChanel("getHead");
    // this.$recvElectronChanel("headRes", (e, res) => {
    //
    //   this.head = res;
    // });
    let header = localStorage.getItem("header")
    if (header) {
      this.head = JSON.parse(header)
    }
  },
  mounted() {
    // this.setTime()
    this.setTime();
    // console.log("dsfdsad", process.env.Head)
    setInterval(() => {
      this.setTime();
    }, 1000);
    const that = this;
    window.addEventListener("setItemEvent", (e) => {
      if (e.key == "systemSetting") {
        let obj = JSON.parse(e.newValue);
        that.skinInfo = obj.skinInfo;
        if(this.head) {
          switch (that.skinInfo) {
          case 'yingguangse':
            that.headImage = that.head.header1
            break;
          case 'gonganlan':
            that.headImage = that.head.header2
            break;
          case 'hong':
            that.headImage = that.head.header3
            break;
          }
        }
        else {
          that.headImage = 'default'
        }
      }
    });
    this.$recvChanel("header", () => {
      let header = localStorage.getItem("header")
      that.head = JSON.parse(header)
      if (that.head) {
        switch (that.skinInfo) {
          case 'yingguangse':
            that.headImage = that.head.header1
            break;
          case 'gonganlan':
            that.headImage = that.head.header2
            break;
          case 'hong':
            that.headImage = that.head.header3
            break;
        }
      }
      else {
        that.headImage = 'default'
      }
      
    })
    this.$recvChanel("batteryInfo", (data) => {
      if (data.isShow) {
        this.batteryInfo = data.title;
      } else {
        this.batteryInfo = "";
      }
    });
  },
  methods: {
    openWeather(){
      this.$changeComponentShow(".my_weather", true);
    },
    setTime() {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let hours = date.getHours();
      if (hours < 10) {
        hours = "0" + hours;
      }
      let minutes = date.getMinutes();
      if (minutes < 10) {
        minutes = "0" + minutes;
      }
      let seconds = date.getSeconds();
      if (seconds < 10) {
        seconds = "0" + seconds;
      }
      this.date.ymd =
        year +
        "/" +
        month +
        "/" +
        day +
        "  " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds;
      this.date.week = date.getDay();
    },
  },
};
</script>

<style scoped lang="scss">
.header_top {
  width: 100%;
  //height: 120px;
  height: 6.25vw;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 19;
  .header_img {
    width:100%;
    height: 100%;
  }
  .header_img:not([src]){
    opacity:0;
  }

  .dateTime {
    position: absolute;
    left: 20px;
    //top: 15px;
    top: 0.35vw;
    height: 36px;
    //border: 1px solid red;
    //width: 200px;
    color: var(--svg-headColor3);
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;

    >span {
      margin: 0 5px;
    }

    &>span:first-child {
      letter-spacing: 1px;
    }
  }

  .headButton {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translate(-50%, 0);
  }
}
</style>