EOC-UI/src/views/index.vue

<template>
  <div class="home_container">
    <!-- 头部 -->
    <div class="home_container_header">
      <div class="home_container_header-left">
        <div class="home_container_header-left_time">
          <img class="time_icon" src="../assets/img/risk_info_icon-1.png" alt="" />
          <div class="clock">{{ currentTime }}</div>
        </div>
        <div class="home_container_header-left_tab">
          <div class="button-container">
            <div v-for="(item, index) in buttons" :key="index" class="parallelogram-button" :class="{ highlight: commonStore.activeIndex === index }" @click="setActive(index, item)">
              <div class="text-container" :class="{ 'text-container-highlight': activeIndex === index }">{{ item.title }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="home_container_header-right">
        <div class="duoyun"></div>
        <div class="right-text">26°C——36°C</div>
      </div>

    </div>
    <!-- 两侧 -->
    <div class="home_content_left">
      <LeftPage :activeIndex="activeIndex"></LeftPage>
    </div>
    <div class="home_content_right">
      <RightPage :activeIndex="activeIndex"></RightPage>
    </div>


    <!-- 底部片区图层按钮 -->
    <AreaLayerSwitch></AreaLayerSwitch>
  </div>
</template>
<script setup>
import  AreaLayerSwitch  from '../components/AreaLayerSwitch/index'
import LeftPage from './left/index.vue'
import RightPage from './right/index.vue'
import { storeToRefs } from 'pinia'
import { useUserStore } from '../store/user'
import { useCommonStore } from '../store/common.js'
import { ref, reactive, toRefs, onBeforeMount, onMounted, onUnmounted, watch } from 'vue'
let userStore = useUserStore()
let commonStore = useCommonStore()

console.log(userStore, 'useUserStore')
let { name, age } = storeToRefs(userStore)
const currentTime = ref('')
// 更新当前时间的函数
// 更新当前时间的函数
const updateTime = () => {
  const now = new Date()

  // 格式化为 2025-02-25 10:39:05
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0') // 月份从 0 开始，需加 1
  const day = String(now.getDate()).padStart(2, '0')
  const hours = String(now.getHours()).padStart(2, '0')
  const minutes = String(now.getMinutes()).padStart(2, '0')
  const seconds = String(now.getSeconds()).padStart(2, '0')

  currentTime.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}
// 设置定时器每秒更新一次
let timer
onMounted(() => {
  updateTime() // 初始化时更新时间
  timer = setInterval(updateTime, 1000) // 每秒更新
  activeIndex.value=commonStore.getActiveIndex()
})

// 清理定时器
onUnmounted(() => {
  clearInterval(timer)
})

let buttons = ref([
  { id: 0, title: '报告处置', active: true },
  { id: 1, title: '处置进展', active: false }
])
let activeIndex = ref(0) // 存储当前高亮按钮的索引


function setActive(index, item) {
  // 切换高亮按钮，点击时高亮切换
  activeIndex.value = index
  commonStore.setActiveIndex(index)
}
</script>
<style lang="scss" scoped>
.home_container {
  width: 100vw;
  height: 100vh;
  background: url(../assets/img/1-1综合态势-市级.png) no-repeat;
  background-size: 100% 100%;
  position: relative;
  margin: 0 !important;
  overflow: hidden;
}

// 头部样式
.home_container_header {
  width: 100%;
  height: 165px;
  background: url(../assets/img/大标题.png) no-repeat;
  background-size: 100% 100%;
  position: relative;

  .home_container_header-left {
    position: absolute;
    left: 31px;
    top: 30px;
    display: flex;
    align-items: center;

    .home_container_header-left_time {
      display: flex;
      align-items: center;
      margin-right: 143px;

      .time_icon {
        width: 36px;
        height: 36px;
        margin-right: 12px;
      }

      .clock {
        font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
        font-weight: normal;
        font-size: 20px;
        color: #ffffff;
        line-height: 16px;
        text-shadow: 0px 0px 7px #0091ff, 0px 0px 3px #0091ff;
        text-align: right;
        font-style: normal;
        text-transform: none;
      }
    }

    .home_container_header-left_tab {
      .button-container {
        display: flex;
        justify-content: center;
        align-items: center;
        // gap: 10px;
        /* 按钮之间的间隙 */
      }

      .parallelogram-button {
        width: 210px;
        height: 50px;
        border-radius: 15px;
        background: url(../assets/img/page_tab.png) no-repeat;
        background-size: 100% 100%;
        color: white;
        text-align: center;
        line-height: 50px;
        font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
        font-weight: normal;
        font-size: 24px;
        color: #ffffff;
        line-height: 50px;
        text-shadow: 0px 0px 7px #0091ff, 0px 0px 3px #0091ff;
        text-align: center;
        font-style: normal;
        text-transform: none;
        cursor: pointer;
        transform: skew(10deg);
        /* 使按钮向左倾斜（调整倾斜度） */
        transition: all 0.3s ease;

        /* 动画过渡 */
        .text-container {
          transform: skew(-10deg) !important;
          /* 让文字保持竖直 */
          text-align: center;
          line-height: 50px;
          font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
          font-weight: normal;
          font-size: 24px;
          color: #ffffff;
          text-shadow: 0px 0px 7px #0091ff, 0px 0px 3px #0091ff;
          font-style: normal;
          text-transform: none;
        }

        .text-container-highlight {
          color: #ffffff;
          text-shadow: 0px 0px 7px #0091ff, 0px 0px 3px #0091ff;
        }
      }

      .parallelogram-button.highlight {
        width: 210px;
        height: 50px;
        /* 高亮时按钮颜色 */
        // transform: skew(25deg) scale(1.1);
        /* 高亮时略微放大 */
        border-radius: 15px;
        background: url(../assets/img/page_tab_active.png) no-repeat;
        background-size: 100% 100%;
      }

      .parallelogram-button:hover {
        // background-color: #2980b9;
        // transform: skew(30deg) scale(1.05);
        /* 悬浮时略微放大 */
      }
    }
  }
  .home_container_header-right {
    position: absolute;
    right: 51px;
    top: 35px;
    display: flex;
    align-items: center;
    .duoyun{
      width: 35px;
      height: 35px;
      background-image: url('../assets/img/多云.png');
      background-size: 100% 100%;
    }
    .right-text {
      width: 113px;
      height: 17px;
      font-family: Alibaba PuHuiTi;
      font-weight: normal;
      font-size: 20px;
      color: #ffffff;
      line-height: 16px;
      text-shadow: 0px 0px 7px #0091ff, 0px 0px 3px #0091ff;
      text-align: right;
      font-style: normal;
      text-transform: none;
    }
  }
}

// 左侧样式
.home_content_left {
  position: absolute;
  left: 31px;
  top: 108px;
  width: 1124px;
  height: 945px;
  // background-color: pink;
}

// 右侧
.home_content_right {
  position: absolute;
  right: 31px;
  top: 108px;
  // min-width: 1124px;
  height: 945px;
}
</style>