bxztApp/packages/screen/src/views/3DSituationalAwarenessRefactor/components/LeftPanel/index.vue

<template>
  <div class="left-panel-wrapper">
    <div class="left-panel">
      <CollapsiblePanel title="快速感知" subtitle="「灾害分析」">
        <DisasterAnalysis />
      </CollapsiblePanel>

      <CollapsiblePanel title="快速匹配" subtitle="「力量预置」">
        <ForcePreset />
      </CollapsiblePanel>

      <CollapsiblePanel title="快速响应" subtitle="「力量调度」">
        <ForceDispatch />
      </CollapsiblePanel>
    </div>

    <!-- 地理位置独立浮层 -->
    <div class="location-entry">
      <button
        id="location-toggle-btn"
        type="button"
        class="location-toggle"
        :class="{ 'is-open': isLocationOpen }"
        :aria-expanded="isLocationOpen"
        aria-controls="location-panel"
        @click="toggleLocation"
      >
        <img
          src="../../assets/images/LocationPanel/locationIcon.png"
          alt=""
          class="location-icon"
          aria-hidden="true"
        />
        <span class="location-text">地理位置</span>
        <img
          src="../../assets/images/LocationPanel/箭头.png"
          alt=""
          class="arrow-icon"
          aria-hidden="true"
        />
      </button>

      <LocationPanel
        :expanded="isLocationOpen"
        panel-id="location-panel"
        label-id="location-toggle-btn"
      >
        <DisasterAnalysis />
      </LocationPanel>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import CollapsiblePanel from '../shared/CollapsiblePanel.vue'
import DisasterAnalysis from './DisasterAnalysis.vue'
import ForcePreset from './ForcePreset.vue'
import ForceDispatch from './ForceDispatch.vue'
import LocationPanel from './LocationPanel.vue'

const isLocationOpen = ref(true)

const toggleLocation = () => {
  isLocationOpen.value = !isLocationOpen.value
}
</script>

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

.left-panel-wrapper {
  position: relative;
  display: inline-block;
  height: 100%;
}

.left-panel {
  // width: vw(464);
  height: 100%;
  background: url('../../assets/images/SketchPng7ba5c49d9f8f79e6b559d62cfb6b0b0c79616dd8b289f8b62b5cb8adc18c30e7.png') no-repeat;
  background-size: 100% 100%;
  overflow-y: auto;
  overscroll-behavior: contain;

  &::-webkit-scrollbar {
    width: vw(6);
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background: var(--primary-light);
    border-radius: vw(3);

    &:hover {
      background: rgba(28, 161, 255, 0.6);
    }
  }
}

.location-entry {
  position: absolute;
  top: vh(32);
  left: 100%;
  margin-left: vw(12);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: vh(12);
  width: vw(368);
  z-index: 10;
}

.location-toggle {
  display: flex;
  align-items: center;
  gap: vw(8);
  padding: vh(6) vw(12);
  width: vw(133);
  height: vh(29);
  background: url('../../assets/images/LocationPanel/地理位置按钮背景.png') no-repeat center center;
  background-size: 100% 100%;
  border: none;
  border-radius: vw(4);
  cursor: pointer;
  user-select: none;
  transition: opacity 0.3s ease;

  &:hover {
    opacity: 0.9;
  }

  &:active {
    opacity: 0.8;
  }

  &:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
  }

  .location-icon {
    width: vw(19);
    height: vw(17);
    flex-shrink: 0;
  }

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

  .arrow-icon {
    width: vw(10);
    height: vh(10);
    flex-shrink: 0;
    transition: transform 0.3s ease;
  }

  &.is-open .arrow-icon {
    transform: rotate(90deg);
  }
}
</style>