效果图

组件源码

<template>
  <div class="header-container">
    <div class="header-container-left">
      <div class="tab-bar">
        <div 
          v-for="item in tabList" 
          :key="item.id"
          :class="['tab-bar-item', item.active ? 'active' : '']"
          @click="handleTableClick(item)"
        >
          {{ item.label }}
        </div>
      </div>
    </div>
    <div class="header-container-center">大屏Header</div>
    <div class="header-container-right">
      <div class="weather-container">
        <div class="weather-item">
          <div class="weather-item-value">{{ weatherData.temp }}°C</div>
          <div class="weather-item-name weather-status">{{ weatherData.text }}</div>
        </div>
        <div class="weather-item">
          <div class="weather-item-value">{{ weatherData.humidity }}%</div>
          <div class="weather-item-name weather-status2">湿度</div>
        </div>
        <div class="weather-item">
          <div class="weather-item-value">{{ AQIData.category }}</div>
          <div class="weather-item-name weather-status2">空气质量</div>
        </div>
        <div class="weather-item">
          <div class="weather-item-value">{{ AQIData.aqi }}</div>
          <div class="weather-item-name weather-status2">AQI</div>
        </div>
      </div>
      <div class="week-container weather-item">
        <div class="weather-item-value">{{ currentTime.date }}</div>
        <div class="weather-item-name weather-status3">{{ currentTime.week }}</div>
      </div>
      <div class="time-container">
        {{ currentTime.time }}
      </div>
      <el-dropdown trigger="click">
        <div class="operate">
          <div class="user"></div>
          <el-icon class="el-icon--right"><arrow-down /></el-icon>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>操作1</el-dropdown-item>
            <el-dropdown-item>操作2</el-dropdown-item>
            <el-dropdown-item>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup>
import { ArrowDown } from '@element-plus/icons-vue'
import { ref, reactive, onMounted, onUnmounted, watch } from 'vue'
import moment from 'moment'
import axios from 'axios'
const timer = ref()
const tabList = ref([
  { id: 1, label: '页面一', active: true },
  { id: 2, label: '页面二', active: false },
  { id: 3, label: '页面三', active: false },
  { id: 4, label: '页面四', active: false }
])
const currentTime = reactive({
  date: '',
  week: '',
  time: ''
})
const locationCode = '101020100'
const weatherKey = '046be674a89a4aa4b98a91528d71682d'
const weatherURL = 'https://devapi.qweather.com/v7'
const weatherData = reactive({
  temp: '',
  text: '',
  humidity: ''
})
const AQIData = reactive({
  category: '',
  aqi: ''
})
// tab切换
const handleTableClick = (val) => {
  tabList.value.forEach((e) => {
    e.active = false
  })
  val.active = true
}
// 获取时间
const getCurrentTime = () => {
  if(timer.value) clearTimeout(timer.value)
  currentTime.date = moment().format('YYYY-MM-DD')
  currentTime.time = moment().format('HH:mm:ss')
  currentTime.week = getWeek(moment().day())
  timer.value = setTimeout(() => {
    getCurrentTime()
  }, 1000);
}
// 获取星期几
const getWeek = (val) => {
  switch (val) {
    case 1:
      return '星期一'
    case 2:
      return '星期二'
    case 3:
      return '星期三'
    case 4:
      return '星期四'
    case 5:
      return '星期五'
    case 6:
      return '星期六'
    case 0:
      return '星期日'
  }
}
// 获取天气
const getWeather = async () => {
  const { data } = await axios.get(`${weatherURL}/weather/now?location=${locationCode}&key=${weatherKey}`)
  weatherData.temp = data.now.temp
  weatherData.text = data.now.text
  weatherData.humidity = data.now.humidity
}
// 获取空气质量
const getAQI = async () => {
  const { data } = await axios.get(`${weatherURL}/air/now?location=${locationCode}&key=${weatherKey}`)
  AQIData.category = data.now.category
  AQIData.aqi = data.now.aqi
}
onMounted(() => {
  getCurrentTime()
  getWeather()
  getAQI()
})
onUnmounted(() => {
  clearTimeout(timer.value)
})
</script>

<style scoped lang="less">
.header-container {
  width: 1920px;
  height: 70px;
  display: flex;
  position: relative;
  z-index: 10;
  background: #091F3F;
  .header-container-left {
    width: 500px;
    height: 100%;
    .tab-bar {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      padding-left: 5px;
      box-sizing: border-box;
      .tab-bar-item {
        width: 152px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        margin-left: 27px;
        font-size: 14px;
        font-family: AlibabaPuHuiTi-Medium, AlibabaPuHuiTi;
        font-weight: 500;
        color: #CFEDFF;
        box-sizing: border-box;
        cursor: pointer;
        opacity: .5;
        background: #0F5A82;
      }
      .active {
        opacity: 1;
      }
    }
  }
  .header-container-center {
    flex: 1;
    height: 67%;
    text-align: center;
    font-size: 32px;
    font-weight: bold;
    color: #fff;
  }
  .header-container-right {
    width: 600px;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .weather-container {
      display: flex;
      align-items: center;
      .svg-icon {
        margin-right: 6px;
      }
    }
    .week-container {
      margin-left: 59px;
    }
    .time-container {
      font-size: 29px;
      font-family: DINPro-Medium, DINPro;
      font-weight: 500;
      color: #DFEDFB;
      line-height: 37px;
      margin-right: 40px;
    }
    .weather-item {
      margin-right: 15px;
      .weather-item-value {
        font-size: 13px;
        font-family: DINPro-Bold, DINPro;
        font-weight: bold;
        color: rgba(223, 237, 251, .75);
        line-height: 16px;
      }
      .weather-item-name {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(223, 237, 251, .3);
        line-height: 12px;
        margin-top: 3px;
      }
      .weather-status {
        width: 48px;
        word-break: break-all;
        transform: translateX(-5px) scale(75%);
      }
      .weather-status2 {
        transform: translateX(-3px) scale(75%);
      }
      .weather-status3 {
        transform: translateX(-5px) scale(83%);
      }
    }
    .operate {
      display: flex;
      align-items: center;
      cursor: pointer;
      .user {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background-color: #ccc;
      }
    }
  }
}
</style>