<!-- 频谱仪 -->
<script setup lang="ts">
import DeviceImage from './pin-pu-yi-bg.png';
</script>

<template>
  <div class="relative wrp">
    <img :src="DeviceImage" alt="频谱仪设备照片" />

    <div data-box="屏幕" class="absolute top-[140px] left-[170px] w-[460px] h-[350px] bg-black/50">
      <div class="flex flex-col gap-y-[4px] w-[80px] text-black bg-gray-200/50 absolute right-0 top-0 bottom-[15px]">
        <div class="h-[30px] overflow-hidden menu-item" data-box="菜单标题">Freq/Channel</div>
        <ul class="flex-1 flex flex-col justify-around gap-y-[4px]" data-box="FreqChannel菜单列表">
          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2]">
            <span>Center Freq</span>
            <span>1.50 Ghz</span>
          </li>
          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2]">
            <span>Start Freq</span>
            <span>0.000000 hz</span>
          </li>
          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2]">
            <span>Stop Freq</span>
            <span>3.0000 MHz</span>
          </li>
          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2]">
            <span>CF Step</span>
            <span>0.0000 hz</span>
            <span>X</span>
          </li>
          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2]">
            <span>Freq Offset</span>
            <span>0.0000 Hz</span>
          </li>
          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2]">
            <span>Singnal Track</span>
          </li>
          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2]">
            <span>Scale Type</span>
          </li>
        </ul>
      </div>
    </div>

    <div class="absolute top-[120px] left-[768px] ppy-btns h-[415px]" data-box="按键">
      <!-- 左上角. 长的 -->
      <div class="flex flex-col gap-y-[18px]">
        <button class="ppy-btn w-[62px]!">Freq<br />Channel</button>
        <button class="ppy-btn w-[62px]!">SPAN<br />X Scale</button>
        <button class="ppy-btn w-[62px]!">#</button>
        <button class="ppy-btn w-[62px]!">#</button>
        <button class="ppy-btn w-[62px]!">#</button>
      </div>
      <div class="flex flex-col gap-y-[16.5px] mt-[20px]">
        <button class="ppy-btn">7</button>
        <button class="ppy-btn">4</button>
        <button class="ppy-btn">1</button>
        <button class="ppy-btn">0</button>
      </div>
    </div>
  </div>
</template>

<style scoped>
@import url('./Helvetica.css');
.wrp {
  font-family: 'Helvetica Custom';
}
.wrp * {
  overflow: hidden;
}

img {
  width: calc(2554px * 0.5);
  height: calc(1626px * 0.5);
  max-width: fit-content;
  max-height: fit-content;
}

.ppy-btn {
  height: 30px;
  width: 36px;
  border: 1px solid green;
  overflow: hidden;
  font-size: 10px;
  text-align: left;
  line-height: 1.2;
  padding-left: 2px;
  border-radius: 4px;
}

.menu-item {
  font-size: 12px;
  border: 1px solid white;
}
[alt='频谱仪设备照片'] {
  opacity: 1;
  transition: opacity 0.3s;
}

/* li,
.ppy-btns,
[data-box='屏幕'],
[data-box='菜单标题'] {
  box-shadow: 0 0 0 1px rgba(255, 0, 0, 0.5);
} */
</style>
