fengjie-datascreen/src/components/Header/index.vue

<template>
  <div class="header">
    <ul class="nav-left">
      <li
        class="nav-left-item"
        :style="{
          backgroundImage: `url(${current == index && !isSkip ? title2Select : title2})`
        }"
        v-for="(item, index) in navLeft"
        :key="index"
        @click="handleNav(item, index)"
      >
        {{ item.name }}
      </li>
    </ul>
    <div class="title">
      <span>{{ name }}</span>
    </div>
    <ul class="nav-right">
      <li
        class="nav-right-item"
        @click="handleNav(item, index)"
        v-for="(item, index) in navRight"
        :key="index"
      >
        {{ item.name }}
      </li>
    </ul>
    <div class="weather">
      <span>{{ weatherData?.temperature }}-{{ weatherData?.skycon }}</span>
      <span class="line">|</span>
      <span>风速：{{ weatherData?.windSpeed }}</span>
      <span class="line">|</span>
      <span>空气质量：{{ weatherData?.airQuality }}</span>
      <span class="ml-20">{{ currentDate }}</span>
    </div>
    <div v-if="isBack" class="back" @click="handleBack">
      <img class="icon" src="@/assets/images/back.png" alt="" /> 返回
    </div>
  </div>
</template>

<script setup>
  import { useRouter } from 'vue-router'
  import title2 from '@/assets/images/title-2.png'
  import title2Select from '@/assets/images/title-2-select.png'

  import { getWeatherApi } from '@/api/home'

  let props = defineProps({
    title: {
      type: String,
      default: ''
    },
    navLeft: {
      type: Array,
      default: () => []
    },
    navRight: {
      type: Array,
      default: () => []
    },
    current: {
      type: Number,
      default: 0
    },
    isSkip: {
      type: Boolean,
      default: false
    },
    isBack: {
      type: Boolean,
      default: false
    }
  })
  const emit = defineEmits(['change'])
  const router = useRouter()
  let currentDate = ref('')
  let weatherData = ref({})

  const name = computed(() => {
    if (!props.isSkip && props.navLeft.length > 0) {
      return props.navLeft[props.current].name
    }
    return props.title
  })

  const fillZero = (value) => {
    return value < 10 ? `0${value}` : value
  }
  const getCurrentDate = () => {
    var time = new Date()
    var year = time.getFullYear()
    var month = time.getMonth() + 1
    var day = time.getDate()
    var second = time.getSeconds()
    var hour = time.getHours()
    var minute = time.getMinutes()
    var second = time.getSeconds()
    currentDate.value = `${year}-${fillZero(month)}-${fillZero(day)} ${hour}:${fillZero(
      minute
    )}:${fillZero(second)}`
  }
  const handleBack = () => {
    router.go(-1)
  }
  const handleNav = (item, index) => {
    if (props.isSkip) {
      router.push(item.path)
    } else {
      emit('on-change', index)
    }
  }
  const getWeather = async () => {
    let res = await getWeatherApi()
    weatherData.value = res.data
    console.log(res, '====')
  }
  onMounted(() => {
    getWeather()
    getCurrentDate()
    setInterval(() => {
      getCurrentDate()
    }, 1000)
  })
</script>

<style scoped lang="scss">
  .header {
    position: absolute;
    left: vw(326);
    .weather {
      position: absolute;
      right: 0;
      top: vh(10);
      font-weight: 400;
      font-size: vw(18);
      color: #ffffff;
      .line {
        margin: 0 vw(10);
      }
    }
    .back {
      position: absolute;
      right: 0;
      top: vh(50);
      width: vw(130);
      height: vh(36);
      font-weight: 600;
      font-size: vw(20);
      color: #ffffff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: vw(60);
      border: 1px solid rgba(0, 114, 220, 0.3);
      background: linear-gradient(270deg, rgba(8, 41, 86, 0.16) 0%, #0b61b4 100%);
      .icon {
        margin-right: vw(10);
        width: vw(24);
        height: auto;
      }
    }
    .title {
      width: vw(3133);
      height: vh(120);
      line-height: vh(90);
      text-align: center;
      letter-spacing: vw(10);
      box-sizing: border-box;
      background-image: url('@/assets/images/title.png');
      background-size: 100% 100%;
      & > span {
        font-size: vw(48);
        font-weight: 800;
        color: transparent;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        background-image: linear-gradient(to bottom, #ffffff 0%, #87c9ff 100%);
      }
    }
    .nav-left {
      position: absolute;
      right: vw(2100);
      top: vh(34);
      display: flex;
      &-item {
        cursor: pointer;
        margin-left: vh(-16);
        width: vw(210);
        height: vh(56);
        line-height: vh(46);
        font-weight: 600;
        font-size: vw(28);
        text-align: center;
        color: rgba(208, 236, 255, 0.9);
        background-size: 100% 100%;
      }
    }
    .nav-right {
      position: absolute;
      left: vw(2110);
      top: vh(34);
      display: flex;
      &-item {
        cursor: pointer;
        margin-right: vh(-16);
        width: vw(210);
        height: vh(56);
        line-height: vh(46);
        font-weight: 600;
        font-size: vw(28);
        text-align: center;
        color: rgba(208, 236, 255, 0.9);
        background-image: url('@/assets/images/title-3.png');
        background-size: 100% 100%;
      }
    }
  }
</style>