busroute/src/pages/views/home/index.vue

<script setup lang="ts">
import { markRaw, ref } from 'vue'
import WeatherService from '@/services/weather.service'
import homePage from './components/HomePage.vue'
import cehicleOperation from './components/CehicleOperation.vue'
import lineAnalysis from './components/LineAnalysis.vue'
import maintenanceDynamics from './components/MaintenanceDynamics.vue'
import facilityManagement from './components/FacilityManagement.vue'
import stationManagement from './components/StationManagement.vue'
import passengerFlow from './components/PassengerFlow.vue'

const weatherService = new WeatherService()
const menus = [
  { name: '主页', component: markRaw(homePage) },
  { name: '线路运营', component: markRaw(cehicleOperation) },
  { name: '客流分析', component: markRaw(passengerFlow) },
  { name: '维保动态', component: markRaw(maintenanceDynamics) },
  { name: '设施管理', component: markRaw(facilityManagement) },
  { name: '场站管理', component: markRaw(stationManagement) },
  { name: '线路分析', component: markRaw(lineAnalysis) }
]
const active = ref(0)
const currentComponent = ref(menus[active.value].component)
const weather = ref()

function changMenu(_id: number) {
  active.value = _id
  currentComponent.value = menus[_id].component
}

weatherService.getWeather().then((res) => { weather.value = res })
</script>
<template>
  <div class="home">
    <div class="home-top">
      <!-- <img src="../../../assets/img/6.svg"> -->
      <div class="home-top-user">
        <div>安全运营<span>100</span>天</div>
        <div v-if="weather">
          <img :src="weather.icon">
          {{ weather.weather }}
          <span>{{ weather.temperature }}℃</span>
        </div>
        <div>
          <img src="../../../assets/img/10.svg">
          你的名称
        </div>
      </div>
    </div>
    <div class="home-content">
      <div class="home-content-top">
        <div class="home-content-top-menus">
          <template
            v-for="(item, index) in menus"
            :key="index"
          >
            <div
              :class="{ active: index === active }"
              @click="changMenu(index)"
            >
              {{ item.name }}
            </div>
          </template>
        </div>
      </div>
      <div class="home-content-left" />
      <div class="home-content-right" />
      <component :is="currentComponent" />
    </div>
    <div class="home-bottom">
      xxxx
      <!-- 雅安市公共交通集团有限公司 -->
    </div>
  </div>
</template>
<style lang="scss" scoped>
.home {
  height: 1456px;
  width: 4784px;
  background: #030E25;

  &-top {
    height: 160px;
    background: url(../../../assets//img/2.svg) no-repeat top center;
    background-size: cover;
    text-align: center;
    position: relative;

    &>img {
      width: 900px;
      height: 130px;
    }

    &-user {
      position: absolute;
      display: flex;
      align-items: center;
      right: 30px;
      top: 30px;

      &>div {
        margin: 0 25px;
        font-size: 24px;

        &:first-child {
          font-weight: 400;
          color: #80FFFF;

          span {
            color: white;
            font-weight: 700;
            font-size: 50px;
            margin: 0 5px;
          }
        }

        &:last-child {
          color: white;
          display: flex;
          align-items: center;
          margin-right: 0;

          img {
            border-radius: 50%;
            width: 80px;
            height: 80px;
            overflow: hidden;
            margin-right: 15px;
          }
        }

        &:nth-child(2) {
          display: flex;
          align-items: flex-end;
          color: white;

          img {
            width: 56px;
            height: 56px;
            margin-right: 10px;
          }

          span {
            color: #80FFFF;
            margin-left: 10px;
          }
        }
      }
    }
  }

  &-content {
    height: calc(1456px - 160px - 72px);
    position: relative;

    &-top {
      position: absolute;
      left: 50%;
      top: -30px;
      transform: translate(-50%, 0);
      height: 185px;
      width: calc(100% - 1370px - 1370px);
      background: url(../../../assets//img/5.svg) no-repeat center;
      background-size: cover;
      z-index: 2;

      &-menus {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        padding: 0 410px;

        &>div {
          text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.698);
          font-family: Arial Normal;
          font-size: 24px;
          text-align: center;
          letter-spacing: 0px;
          color: #D7D7D7;
          cursor: pointer;
          height: 111px;
          width: 175px;
          line-height: 111px;
        }

        .active {
          color: white;
          background: url(../../../assets/img/7.svg) no-repeat center;
          background-size: cover;
        }
      }

    }

    &-left,
    &-right {
      position: absolute;
      height: 110%;
      width: 40px;
      top: -117px;
    }

    &-left {
      left: 7px;
      background: url(../../../assets/img/8.svg) no-repeat left top;
      background-size: cover;
    }

    &-right {
      right: 7px;
      background: url(../../../assets/img/9.svg) no-repeat left top;
      background-size: cover;
    }
  }

  &-bottom {
    height: 72px;
    background: url(../../../assets/img/3.svg) no-repeat center;
    background-size: cover;
    text-align: center;
    line-height: 72px;
    color: white;
    font-size: 20px;
    letter-spacing: 20px;
    text-shadow: 1px 1px 5px rgba(0, 255, 255, 0.6);
  }
}
</style>