safePower/src/view/masterStation/equipment/components/detail/index.vue

<template>
  <div class="device-detail-page">
    <!-- <div class="detail-header">
      <el-button icon="ArrowLeft" circle @click="handleBack" />
      <span class="detail-title">设备信息</span>
    </div> -->
    <div class="tabs-box">
      <el-button icon="ArrowLeft" circle @click="handleBack" />
      <span class="title">设备信息（{{ device?.gatewayMac }}）</span>
      <el-radio-group v-model="activeMenu" size="large" fill="var(--tech-primary)">
        <el-radio-button label="设备详情" value="info" />
        <el-radio-button label="线路列表" value="line" />
        <el-radio-button label="运行趋势" value="trend" />
        <el-radio-button label="参数配置" value="config" />
      </el-radio-group>
    </div>

    <DeviceInfo v-if="activeMenu === 'info'" :device="device" />
    <DeviceLine v-if="activeMenu === 'line'" :device="device" />
    <DeviceTrend v-if="activeMenu === 'trend'" :device="device" />
    <DeviceConfig v-if="activeMenu === 'config'" :device="device" />
  </div>
</template>

<script setup>
  import { ref, onMounted } from 'vue'
  import DeviceInfo from './components/info/index.vue'
  import DeviceLine from './components/line/index.vue'
  import DeviceTrend from './components/trend/index.vue'
  import DeviceConfig from './components/config/index.vue'

  defineProps({
    device: {
      type: Object,
      default: () => null
    }
  })

  const activeMenu = ref('info')
  const emit = defineEmits(['back'])

  const handleBack = () => {
    activeMenu.value = ''
    emit('back')
  }
</script>

<style lang="scss" scoped>
  .device-detail-page {
    // padding: 20px;
    .tabs-box {
      position: relative;
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 18px 20px;
      margin: 8px 0 14px;
      overflow: hidden;
      color: var(--tech-text);
      border: 1px solid rgba(0, 212, 255, 0.28);
      border-radius: 18px;
      background:
        linear-gradient(90deg, rgba(8, 27, 54, 0.9), rgba(4, 15, 32, 0.76)),
        radial-gradient(circle at 20% 20%, rgba(0, 212, 255, 0.16), transparent 36%);
      box-shadow:
        var(--tech-shadow),
        inset 0 0 26px rgba(0, 212, 255, 0.08);

      &::before {
        position: absolute;
        top: 0;
        left: -36%;
        width: 36%;
        height: 100%;
        content: '';
        pointer-events: none;
        background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.18), transparent);
        animation: equipmentCardGlint 6s ease-in-out infinite;
      }

      > * {
        position: relative;
        z-index: 1;
      }

      > .title {
        flex: 1;
        margin: 0 15px 0 0;
        font-size: 24px;
        font-weight: 800;
        color: var(--tech-text-strong);
        letter-spacing: 0.06em;
        text-shadow: 0 0 18px rgba(0, 212, 255, 0.38);
      }

      :deep(.el-button.is-circle) {
        color: #67e8f9;
        border-color: rgba(0, 212, 255, 0.36);
        background: rgba(15, 23, 42, 0.72);
        box-shadow: 0 0 18px rgba(0, 212, 255, 0.14);
      }

      :deep(.el-radio-button__inner) {
        color: var(--tech-text-muted);
        border-color: rgba(0, 212, 255, 0.22);
        background: rgba(2, 8, 23, 0.42);
      }

      :deep(.el-radio-button__inner:hover) {
        color: var(--tech-text-strong);
        background: rgba(0, 212, 255, 0.12);
      }

      :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
        color: #031424;
        border-color: rgba(103, 232, 249, 0.74);
        background: linear-gradient(135deg, #67e8f9, var(--tech-primary));
        box-shadow: 0 0 18px rgba(0, 212, 255, 0.28);
      }
    }
  }

  .detail-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
  }

  .detail-menu {
    margin-bottom: 20px;
    // border-radius: 8px;
    // background-color: var(--el-bg-color-overlay, #ffffff);
    // border: 1px solid var(--el-border-color, #e4e7ed);
  }
</style>