HeiLin/src/views/HomeView.vue

<template>
  <div class="dashboard">
    <div class="background-image"></div>
    <div class="bottom-bg" v-if="!showMap"></div>
    <div class="top-title" :class="{ 'title-alt': activeTab === '水文四预' || activeTab === '水资源调配' }"></div>
    <div class="system-title">数字孪生黑林小流域</div>
    
    <!-- 全局地图 -->
    <div class="map-container" v-if="showMap">
      <CesiumMap @toggleMap="toggleMap" />
    </div>
    
    <!-- 渐变装饰层（四周暗角） -->
    <GradientOverlay />
    
    <div 
      class="sub-title left-1" 
      :class="{ active: activeTab === '流域总览' }"
      @click="selectTab('流域总览')"
    >
      流域总览
    </div>
    <div 
      class="sub-title left-2" 
      :class="{ active: activeTab === '水文四预' }"
      @click="selectTab('水文四预')"
    >
      水文四预
    </div>
    <div 
      class="sub-title right-1" 
      :class="{ active: activeTab === '水资源调配' }"
      @click="selectTab('水资源调配')"
    >
      水资源调配
    </div>
    <div 
      class="sub-title right-2" 
      :class="{ active: activeTab === '孪生水文站' }"
      @click="selectTab('孪生水文站')"
    >
      孪生水文站
    </div>
    <div 
      class="sub-title right-3" 
      :class="{ active: activeTab === '水文化宣传' }"
      @click="selectTab('水文化宣传')"
    >
      水文化宣传
    </div>
    
    <!-- 流域总览视图 -->
    <OverviewView v-if="activeTab === '流域总览'" @selectTab="selectTab" />
    
    <!-- 水文四预视图 -->
    <HydrologyForecastView 
      v-if="activeTab === '水文四预'" 
      :activeSecondaryTab="activeSecondaryTab"
      @selectSecondaryTab="selectSecondaryTab"
    />
    
    <!-- 水资源调配视图 -->
    <WaterResourceAllocationView 
      v-if="activeTab === '水资源调配'" 
      :activeSecondaryTab="activeSecondaryTab"
      @selectSecondaryTab="selectSecondaryTab"
    />
  </div>
</template>

<script>
import OverviewView from './OverviewView.vue'
import HydrologyForecastView from './HydrologyForecastView.vue'
import WaterResourceAllocationView from './WaterResourceAllocationView.vue'
import CesiumMap from '../components/CesiumMap.vue'
import GradientOverlay from '../components/gradient-overlay.vue'

export default {
  name: 'HomeView',
  components: {
    OverviewView,
    HydrologyForecastView,
    WaterResourceAllocationView,
    CesiumMap,
    GradientOverlay
  },
  data() {
    return {
      activeTab: '流域总览',
      activeSecondaryTab: '水文预报',
      showMap: true // 控制显示Cesium地图还是图片底图
    }
  },
  methods: {
    selectTab(tab) {
      this.activeTab = tab
      if (tab === '水文四预') {
        this.activeSecondaryTab = '水文预报'
      } else if (tab === '水资源调配') {
        this.activeSecondaryTab = '调配基础数据'
      }
    },
    selectSecondaryTab(tab) {
      this.activeSecondaryTab = tab
    },
    toggleMap(show) {
      this.showMap = show
    }
  }
}
</script>

<style scoped>
.dashboard {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/src/assets/images/背景.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 3;
}

.bottom-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/src/assets/images/Heilin/WPS图片(1).jpeg');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 3;
}

.top-title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/src/assets/images/顶部大标题.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 4;
}

.top-title.title-alt {
  background-image: url('/src/assets/images/顶部大标题1.png');
}

.system-title {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 36px;
  font-weight: bold;
  background: linear-gradient(to bottom, #ffffff 50%, #00d5ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 1px rgba(2, 217, 255, 0.205);
  z-index: 4;
  pointer-events: none;
}

/* 地图容器样式 */
.map-container {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: auto;
}



.sub-title {
  position: absolute;
  top: 30px;
  width: 151px;
  height: 63px;
  background-image: url('/src/assets/images/顶部小标题.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-start;
  padding-top: 10px;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
  color: #e0fcff;
  text-shadow: 0 0 5px rgba(0, 212, 255, 0.8);
  z-index: 4;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.sub-title:hover {
  transform: scale(1.05);
}

.sub-title.left-1 {
  left: 300px;
}

.sub-title.left-2 {
  left: 450px;
}

.sub-title.right-1 {
  right: 450px;
}

.sub-title.right-2 {
  right: 300px;
}

.sub-title.right-3 {
  right: 150px;
}

.bottom-sub-title {
  position: absolute;
  bottom: 46px;
  width: 159px;
  height: 31px;
  background-image: url('/src/assets/images/未选中底部标题.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  cursor: pointer;
  transition: all 0.3s ease;
}

.bottom-sub-title:hover,
.bottom-sub-title.active {
  background-image: url('/src/assets/images/选中底部标题.png');
}

.bottom-sub-title.bottom-left {
  left: 50%;
  transform: translateX(-169px);
}

.bottom-sub-title.bottom-right {
  right: 50%;
  transform: translateX(169px);
}

.bottom-text {
  font-size: 14px;
  font-weight: bold;
  background: linear-gradient(to bottom, #e2e8ff, #7bbef6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 5px rgba(0, 212, 255, 0.3);
}

.bottom-sub-title.active .bottom-text {
  background: linear-gradient(to bottom, #e2e8ff, #62f6fb);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 二级标题样式 */
.secondary-title-container {
  position: absolute;
  bottom: 46px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 20px;
  z-index: 4;
}

.secondary-title {
  width: 159px;
  height: 31px;
  background-image: url('/src/assets/images/未选中底部标题.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.secondary-title span {
  background: linear-gradient(to bottom, #e2e8ff, #7bbef6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 5px rgba(0, 212, 255, 0.3);
}

.secondary-title:hover,
.secondary-title.active {
  background-image: url('/src/assets/images/选中底部标题.png');
}

.secondary-title:hover span,
.secondary-title.active span {
  background: linear-gradient(to bottom, #e2e8ff, #62f6fb);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 一级标题选中样式 */
.sub-title.active {
  transform: scale(1.05);
}


</style>