PinPuYi.vue

src/components/PinPuYi/PinPuYi.vue

@@ -4,13 +4,49 @@ import DeviceImage from './pin-pu-yi-bg.png';
 </script>
 
 <template>
-  <div class="relative">
+  <div class="relative wrp">
     <img :src="DeviceImage" alt="频谱仪设备照片" />
-    <div class="absolute top-[115px] left-[768px] ppy-btns h-[415px]">
+
+    <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]!">Frequency<br />Channel</button>
+        <button class="ppy-btn w-[62px]!">Freq<br />Channel</button>
-        <button class="ppy-btn w-[62px]!">#</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>
@@ -27,18 +63,21 @@ import DeviceImage from './pin-pu-yi-bg.png';
 
 <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-btns {
-  box-shadow: 0 0 0 1px rgba(255, 0, 0, 0.5);
-}
-.ppy-btn {
-  font-family: 'Helvetica Custom';
 
+.ppy-btn {
   height: 30px;
   width: 36px;
   border: 1px solid green;
@@ -49,4 +88,20 @@ img {
   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>

src/pages/Page/PinPuYi.page.vue

@@ -6,7 +6,7 @@ definePage({ meta: { title: '频谱仪', hidden: !$__DEV__ } });
 </script>
 
 <template>
-  <template v-if="$__DEV__">
+  <template v-if="true">
     <PinPuYi />
   </template>
   <template v-else> 🤡 </template>