bxztApp/packages/screen/src/views/3DSituationalAwarenessRefactor/components/PageHeader.vue

<template>
  <header class="page-header">
    <div class="page-header__left">
      <button class="back-btn" @click="handleBack">
        <img src="../assets/images/SketchPng3a205ec23aa65a39b8abed01ae08c00dba25b71010ec59dcd8187309a39a9c9d.png" alt="back" class="back-icon" />
        <span class="back-text">返回驾驶舱</span>
      </button>

    </div>

    <div class="page-header__center">
      <div class="logo-section">
        <img src="../assets/images/3ad857a9ed044c12b0e3b4345af6be59_mergeImage.png" alt="logo" class="logo-image" />
      </div>
      <h1 class="page-title">渝路畅行-应急抢险保通</h1>
    </div>

    <!-- <div class="page-header__right">
      <button class="scene-btn">
        <img src="../assets/images/SketchPng08621fb3b35614299e29352b8d67ad9c2c7dccf7b9c17d042492671e3bbe19f8.png" alt="scene" class="scene-icon" />
        <span class="scene-text">灾后现场实景</span>
      </button>

      <img src="../assets/images/SketchPng0c172674e37bf751242a160c7adba8ee18f6f445e351e0cdb28dce03f8ee833e.png" alt="settings" class="settings-icon" />
    </div> -->
  </header>
</template>

<script setup>
const emit = defineEmits(['back'])

const handleBack = () => {
  emit('back')
  // 实际实现：路由跳转回驾驶舱
}
</script>

<style scoped lang="scss">
@use '@/styles/mixins.scss' as *;
@use '../assets/styles/common.scss' as *;

.page-header {
  position: relative;
  width: 100%;
  height: vh(111);
  background: url('../assets/images/一级标题栏bg.png') no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 vw(21);
  z-index: 100;

  &__left {
    display: flex;
    align-items: center;
    gap: vw(20);

    .back-btn {
      display: flex;
      align-items: center;
      gap: vw(10);
      padding: vh(10) vw(24);
      margin-top: 50px;
      background: url('../assets/images/返回按钮.png') 0 -1px no-repeat;
      background-size: 100% 100%;
      border: none;
      cursor: pointer;
      transition: opacity 0.3s;

      &:hover {
        opacity: 0.8;
      }

      .back-icon {
        width: vw(8);
        height: vh(14);
      }

      .back-text {
        color: var(--text-white);
        font-size: fs(14);
        font-family: SourceHanSansCN-Regular, sans-serif;
        white-space: nowrap;
      }
    }

    .logo-section {
      .logo-image {
        width: vw(42);
        height: vh(42);
        border-radius: 50%;
      }
    }
  }

  &__center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;

    .logo-section {
      .logo-image {
        width: vw(42);
        height: vw(42);
        border-radius: 50%;
      }
    }
    .page-title {
      background-image: linear-gradient(
        180deg,
        rgba(183, 202, 228, 1) 0%,
        rgba(255, 255, 255, 1) 14.69%,
        rgba(179, 204, 226, 1) 36.59%,
        rgba(187, 209, 225, 1) 61.35%,
        rgba(113, 137, 158, 1) 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-size: fs(36);
      letter-spacing: vw(1.8);
      // font-family: FZLTTHJW--GB1-0, sans-serif;
      white-space: nowrap;
      margin: 0;
    }
  }

  &__right {
    display: flex;
    align-items: center;
    gap: vw(20);

    .scene-btn {
      display: flex;
      align-items: center;
      gap: vw(6);
      padding: vw(5);
      background: rgba(20, 53, 118, 1);
      border: 1px solid var(--border-color);
      border-radius: vw(8);
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        background: rgba(20, 53, 118, 0.8);
        border-color: var(--primary-color);
      }

      .scene-icon {
        width: vw(32);
        height: vw(32);
      }

      .scene-text {
        color: var(--text-white);
        font-size: fs(15);
        font-family: SourceHanSansCN-Medium, sans-serif;
        font-weight: 500;
        white-space: nowrap;
      }
    }

    .settings-icon {
      width: vw(28);
      height: vh(28);
      cursor: pointer;
      transition: transform 0.3s;

      &:hover {
        transform: rotate(45deg);
      }
    }
  }
}
</style>