From e9c59a3634037125b89bb0b8b146a5caddc0abae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=A5=E6=B5=A9?= <me@yanhao.ren>
Date: Thu, 24 Apr 2025 19:08:05 +0800
Subject: [PATCH] PinPuYi.vue

---
 src/components/PinPuYi/PinPuYi.vue | 33 +++++++++++++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/src/components/PinPuYi/PinPuYi.vue b/src/components/PinPuYi/PinPuYi.vue
index 016bf5c..7442f43 100644
--- a/src/components/PinPuYi/PinPuYi.vue
+++ b/src/components/PinPuYi/PinPuYi.vue
@@ -1,10 +1,27 @@
+<!-- 频谱仪 -->
 <script setup lang="ts">
 import DeviceImage from './pin-pu-yi-bg.png';
 </script>
 
 <template>
-  <div>
+  <div class="relative">
     <img :src="DeviceImage" alt="频谱仪设备照片" />
+    <div class="absolute top-[115px] left-[768px] ppy-btns h-[415px]">
+      <!-- 左上角. 长的 -->
+      <div class="flex flex-col gap-y-[18px]">
+        <button class="ppy-btn w-[62px]!">Frequency<br />Channel</button>
+        <button class="ppy-btn w-[62px]!">#</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>
 
@@ -15,4 +32,18 @@ img {
   max-width: fit-content;
   max-height: fit-content;
 }
+.ppy-btns {
+  box-shadow: 0 0 0 1px rgba(255, 0, 0, 0.5);
+}
+.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;
+}
 </style>