Wulaer/src/components/TopNav.vue

<!-- 顶部导航栏：系统标题 + 六个导航按钮（综合首页/水情测报/工程安全/闸门控制/视频监控/生命周期） -->
<template>
  <div class="top-nav">
    <!-- 左侧日期时间 -->
    <div class="datetime-display">
      <div class="date">{{ currentDate }}</div>
      <div class="time">{{ currentTime }}</div>
    </div>

    <div class="system-title">{{ title }}</div>

    <!-- 右侧工作台按钮 -->
    <div class="switch-btn" @click="$emit('navigate', '工作台')">
      <span class="switch-text">工作台</span>
    </div>

    <div
      class="sub-title left-1"
      :class="{ active: activeButton === '综合首页' }"
      @click="$emit('navigate', '综合首页')"
    >
      综合首页
    </div>
    <div
      class="sub-title left-2"
      :class="{ active: activeButton === '水情测报' }"
      @click="$emit('navigate', '水情测报')"
    >
      水情测报
    </div>
    <div
      class="sub-title left-3"
      :class="{ active: activeButton === '工程安全' }"
      @click="$emit('navigate', '工程安全')"
    >
      工程安全
    </div>
    <div
      class="sub-title right-1"
      :class="{ active: activeButton === '闸门控制' }"
      @click="$emit('navigate', '闸门控制')"
    >
      闸门控制
    </div>
    <div
      class="sub-title right-2"
      :class="{ active: activeButton === '视频监控' }"
      @click="$emit('navigate', '视频监控')"
    >
      视频监控
    </div>
    <div
      class="sub-title right-3"
      :class="{ active: activeButton === '生命周期' }"
      @click="$emit('navigate', '生命周期')"
    >
      生命周期
    </div>
  </div>
</template>

<script>
export default {
  name: 'TopNav',
  props: {
    activeButton: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: '乌拉海沟水库综合应用管理系统'
    }
  },
  emits: ['navigate', 'toggle-mode'],
  data() {
    return {
      currentDate: '',
      currentTime: '',
      isFrontend: true,
      timer: null
    }
  },
  mounted() {
    this.updateDateTime()
    this.timer = setInterval(this.updateDateTime, 1000)
  },
  beforeUnmount() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
  methods: {
    updateDateTime() {
      const now = new Date()
      const year = now.getFullYear()
      const month = String(now.getMonth() + 1).padStart(2, '0')
      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')
      
      this.currentDate = `${year}-${month}-${day}`
      this.currentTime = `${hours}:${minutes}:${seconds}`
    },
    toggleMode() {
      this.isFrontend = !this.isFrontend
      this.$emit('toggle-mode', this.isFrontend)
    }
  }
}
</script>

<style scoped>
.datetime-display {
  position: absolute;
  top: 30px;
  left: 30px;
  color: #e0fcff;
  font-size: 16px;
  line-height: 1.2;
  z-index: 6;
  text-shadow: 0 0 5px rgba(0, 212, 255, 0.8);
}

.datetime-display .time {
  font-size: 20px;
  font-weight: bold;
  line-height: 1.2;
}

.switch-btn {
  position: absolute;
  top: 37px;
  right: 30px;
  cursor: pointer;
  z-index: 6;
  transition: all 0.3s ease;
}

.switch-btn:hover {
  transform: scale(1.05);
}

.switch-text {
  color: #e0fcff;
  font-size: 16px;
  font-weight: bold;
  text-shadow: 0 0 5px rgba(0, 212, 255, 0.8);
  letter-spacing: 2px;
}

.system-title {
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 44px;
  font-weight: 900;
  background: linear-gradient(to top, #00d5ff 0%, #ffffff 50%);
  -webkit-background-clip: text;
  background-clip: text;
  color: #ffffff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  z-index: 6;
  pointer-events: none;
}

.sub-title {
  position: absolute;
  top: 30px;
  width: 130px;
  height: 54px;
  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: 8px;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  color: #e0fcff;
  text-shadow: 0 0 5px rgba(0, 212, 255, 0.8);
  z-index: 6;
  cursor: pointer;
  transition: transform 0.3s ease;
}

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

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

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

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

.sub-title.left-3 {
  left: 460px;
}

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

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

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

@media (max-width: 768px) {
  .system-title {
    font-size: 24px;
  }

  .sub-title {
    width: 110px;
    height: 46px;
    font-size: 12px;
  }

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

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

  .sub-title.left-3 {
    left: 320px;
  }

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

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

  .sub-title.right-3 {
    right: 80px;
  }
}
</style>