PinPuYi

2025-04-28 17:44:11 +08:00
parent 5fe08b0741
commit 6299b6d45f
3 changed files with 150 additions and 122 deletions
--- a/src/components/PinPuYi/CONST.ts
+++ b/src/components/PinPuYi/CONST.ts
@ -0,0 +1,37 @@
+export enum E_选项卡菜单 {
+  频率单位列表 = '频率单位列表',
+  频率菜单列表 = '频率菜单列表',
+}
+
+/* 值是在屏幕上显示的值。 */
+export enum E_选项卡菜单Freq菜单列表的项目 {
+  CenterFreq = 'Center',
+  StartFreq = 'Start',
+  StopFreq = 'Stop',
+  // CFStep = 'CFStep',
+  // FreqOffset = 'FreqOffset',
+  // SingnalTrack = 'SingnalTrack',
+  // ScaleType = 'ScaleType',
+}
+
+export enum E_Freq单位 {
+  GHz = 'GHz',
+  Hz = 'Hz',
+  kHz = 'kHz',
+  MHz = 'MHz',
+}
+
+export enum E_数字键盘按键 {
+  Dot = '.',
+  Num0 = 0,
+  Num1 = 1,
+  Num2 = 2,
+  Num3 = 3,
+  Num4 = 4,
+  Num5 = 5,
+  Num6 = 6,
+  Num7 = 7,
+  Num8 = 8,
+  Num9 = 9,
+  PlusMinus = '+/-',
+}
--- a/src/components/PinPuYi/Helvetica.css
+++ b/src/components/PinPuYi/Helvetica.css
@ -1,5 +1,7 @@
@font-face {
  font-family: 'Helvetica Custom';
+  font-style: normal;
+  font-weight: 400; /* 400 通常代表 'normal' 或 'regular' */
  src: url('fonts/Helvetica-Light-05.eot');
  src:
    url('fonts/Helvetica-Light-05.eot?#iefix') format('embedded-opentype'),
@ -7,7 +9,5 @@
    url('fonts/Helvetica-Light-05.woff') format('woff'),
    url('fonts/Helvetica-Light-05.ttf') format('truetype'),
    url('fonts/Helvetica-Light-05.svg#Helvetica') format('svg');
-  font-weight: 400; /* 400 通常代表 'normal' 或 'regular' */
-  font-style: normal;
  font-display: swap; /* 推荐 */
 }
--- a/src/components/PinPuYi/PinPuYi.vue
+++ b/src/components/PinPuYi/PinPuYi.vue
@ -2,51 +2,14 @@
 <script setup lang="ts">
 import { $enum } from 'ts-enum-util';

+import { E_Freq单位, E_数字键盘按键, E_选项卡菜单, E_选项卡菜单Freq菜单列表的项目 } from './CONST';
 import 设备照片 from './pin-pu-yi-bg.png';

-enum E_选项卡菜单 {
-  频率菜单列表 = '频率菜单列表',
-  频率单位列表 = '频率单位列表',
-}
-
-/* 值是在屏幕上显示的值。 */
-enum E_选项卡菜单Freq菜单列表的项目 {
-  CenterFreq = 'Center',
-  StartFreq = 'Start',
-  StopFreq = 'Stop',
-  // CFStep = 'CFStep',
-  // FreqOffset = 'FreqOffset',
-  // SingnalTrack = 'SingnalTrack',
-  // ScaleType = 'ScaleType',
-}
-
-enum E_Freq单位 {
-  GHz = 'GHz',
-  MHz = 'MHz',
-  kHz = 'kHz',
-  Hz = 'Hz',
-}
-
-enum E_数字键盘按键 {
-  Num7 = 7,
-  Num8 = 8,
-  Num9 = 9,
-  Num4 = 4,
-  Num5 = 5,
-  Num6 = 6,
-  Num1 = 1,
-  Num2 = 2,
-  Num3 = 3,
-  Num0 = 0,
-  Dot = '.',
-  PlusMinus = '+/-',
-}
-
 const state = reactive({
  选项卡当前显示: E_选项卡菜单.频率菜单列表,
  频率状态: {
    输入状态: {
-      选中的频率菜单列表的项目: null as null | E_选项卡菜单Freq菜单列表的项目,
+      选中的频率菜单列表的项目: null as E_选项卡菜单Freq菜单列表的项目 | null,
      输入的值临时输入字符串: null as null | string, // 用于暂存用户输入
    },
    center: {
@ -128,7 +91,10 @@ function 执行点击屏幕右边的按钮(按钮序号: number) {

    // 必须有临时输入值和选中的 Freq 项目才能确认
    if (!tempInputString || !selectedFreqItem) {
-      console.warn('输入未完成或未选择 Freq 项目，无法确认单位。', { tempInputString, selectedFreqItem });
+      console.warn('输入未完成或未选择 Freq 项目，无法确认单位。', {
+        tempInputString,
+        selectedFreqItem,
+      });
      console.groupEnd();
      return;
    }
@ -199,7 +165,7 @@ function 执行点击数字按钮(按钮值: E_数字键盘按键) {
        console.debug('已存在小数点，忽略本次输入');
      } else {
        // 如果当前为空，则为 '0.'，否则追加 '.'
-        state.频率状态.输入状态.输入的值临时输入字符串 = 当前临时输入 ? 当前临时输入 + '.' : '0.';
+        state.频率状态.输入状态.输入的值临时输入字符串 = 当前临时输入 ? `${当前临时输入}.` : '0.';
        console.debug('输入小数点，临时字符串:', state.频率状态.输入状态.输入的值临时输入字符串);
      }
      break;
@ -220,7 +186,7 @@ function 执行点击数字按钮(按钮值: E_数字键盘按键) {
      if (当前临时输入 === '0') {
        state.频率状态.输入状态.输入的值临时输入字符串 = String(按钮值);
      } else if (当前临时输入 === '-0') {
-        state.频率状态.输入状态.输入的值临时输入字符串 = '-' + String(按钮值);
+        state.频率状态.输入状态.输入的值临时输入字符串 = `-${String(按钮值)}`;
      } else {
        state.频率状态.输入状态.输入的值临时输入字符串 = 当前临时输入 + String(按钮值);
      }
@ -234,7 +200,7 @@ function 执行点击数字按钮(按钮值: E_数字键盘按键) {
        state.频率状态.输入状态.输入的值临时输入字符串 = 当前临时输入.slice(1);
      } else if (当前临时输入 && 当前临时输入 !== '0' && 当前临时输入 !== '0.') {
        // 如果是正数且不为0或0.，添加负号
-        state.频率状态.输入状态.输入的值临时输入字符串 = '-' + 当前临时输入;
+        state.频率状态.输入状态.输入的值临时输入字符串 = `-${当前临时输入}`;
      } else if (当前临时输入 === '' || 当前临时输入 === '0' || 当前临时输入 === '0.') {
        // 如果是空或0或0.，变成负号开头
        state.频率状态.输入状态.输入的值临时输入字符串 = '-';
@ -255,24 +221,26 @@ function 执行点击数字按钮(按钮值: E_数字键盘按键) {
  console.groupEnd();
 }

-const img_modules = import.meta.glob<{ default: string }>('./imgs/*.png', { eager: true });
-const 屏幕照片 = ref(img_modules['./imgs/屏幕_0.png'].default);
+const img_modules = import.meta.glob<{ default: string }>('./imgs/*.png', {
+  eager: true,
+});
+const 屏幕照片 = ref(img_modules['./imgs/屏幕_0.png']!.default);
 watch(
  () => state.频率状态.center.value,
  () => {
-    屏幕照片.value = img_modules['./imgs/屏幕_1.png'].default;
+    屏幕照片.value = img_modules['./imgs/屏幕_1.png']!.default;
  },
 );
 watch(
  () => state.频率状态.start.value,
  () => {
-    屏幕照片.value = img_modules['./imgs/屏幕_2.png'].default;
+    屏幕照片.value = img_modules['./imgs/屏幕_2.png']!.default;
  },
 );
 watch(
  () => state.频率状态.stop.value,
  () => {
-    屏幕照片.value = img_modules['./imgs/屏幕_3.png'].default;
+    屏幕照片.value = img_modules['./imgs/屏幕_3.png']!.default;
  },
 );
 watchEffect(() => {
@ -281,35 +249,35 @@ watchEffect(() => {
 </script>

 <template>
-  <pre v-if="$__DEV__" class="fixed top-10 right-10 z-[9999] bg-white text-black p-[10px] text-[12px] overflow-auto">{{
+  <!-- <pre v-if="$__DEV__" class="fixed top-10 right-10 z-[9999] bg-white text-black p-[10px] text-[12px] overflow-auto">{{
    { 选项卡菜单7个: $enum(E_选项卡菜单).getValues(), ...state }
-  }}</pre>
-  <div class="relative wrp">
+  }}</pre> -->
+  <div class="wrp relative">
    <img :src="设备照片" alt="频谱仪设备" />

    <div
+      class="absolute left-[640px] top-[174px] flex w-[55px] flex-col gap-y-[4px] overflow-visible text-black"
      data-box="屏幕右边的按钮"
-      class="flex flex-col overflow-visible gap-y-[4px] w-[55px] absolute top-[174px] left-[640px] text-black"
    >
      <!-- 上下还有一个 ESC / RETURN -->
-      <ul class="flex overflow-visible flex-col justify-around gap-y-[4px] h-[300px]" data-box="屏幕右边按钮列表">
+      <ul class="flex h-[300px] flex-col justify-around gap-y-[4px] overflow-visible" data-box="屏幕右边按钮列表">
        <template v-for="n in 7" :key="`按钮${n}`">
          <li
+            class="lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-visible rounded-[2px] text-[12px]"
            @click="执行点击屏幕右边的按钮(n)"
-            class="overflow-visible flex-1 flex flex-col gap-y-[0px] lh-[1.2] text-[12px] rounded-[2px]"
          >
-            <button class="ppy-btn w-full! h-full!">{{ n }}.</button>
+            <button class="ppy-btn !h-full !w-full">{{ n }}.</button>
          </li>
        </template>
      </ul>
    </div>

-    <div data-box="屏幕" class="absolute top-[140px] left-[195px] w-[430px] h-[350px] bg-black">
-      <img :src="屏幕照片" alt="频谱仪屏幕" class="absolute top-0 left-0 w-[340px]! h-[330px]!" />
+    <div class="absolute left-[195px] top-[140px] h-[350px] w-[430px] bg-black" data-box="屏幕">
+      <img :src="屏幕照片" alt="频谱仪屏幕" class="absolute left-0 top-0 !h-[330px] !w-[340px]" />
      <div
        v-if="state.频率状态.输入状态.选中的频率菜单列表的项目"
+        class="lh-[1.2] absolute left-[40px] top-[140px] flex flex-col gap-y-[0px] bg-gray-500/100 text-white"
        data-box="显示输入的 Freq/Channel 的值"
-        class="flex flex-col gap-y-[0px] text-white bg-gray-500/100 absolute left-[40px] top-[140px] lh-[1.2]"
      >
        <!-- 优先显示临时输入字符串，如果为空，则显示默认或已确认的值 -->
        <div>{{ state.频率状态.输入状态.选中的频率菜单列表的项目 }}</div>
@ -341,94 +309,97 @@ watchEffect(() => {
      </div>

      <div
+        class="absolute bottom-[15px] right-0 top-0 flex w-[80px] flex-col gap-y-[4px] text-black"
        data-box="屏幕右侧的选项卡"
-        class="flex flex-col gap-y-[4px] w-[80px] text-black absolute right-0 top-0 bottom-[15px]"
      >
-        <div class="h-[30px] overflow-hidden menu-item lh-[30px] text-center bg-[#AFAFAF]" data-box="菜单标题">
+        <div class="menu-item lh-[30px] h-[30px] overflow-hidden bg-[#AFAFAF] text-center" data-box="菜单标题">
          {{ 选项卡标题 }}
        </div>

        <ul
          v-if="state.选项卡当前显示 === E_选项卡菜单.频率菜单列表"
-          class="h-[300px] flex flex-col justify-around gap-y-[4px]"
+          class="flex h-[300px] flex-col justify-around gap-y-[4px]"
          data-box="频率菜单列表"
        >
-          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2] overflow-hidden bg-[#AFAFAF]">
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
            <span>Center Freq</span>
-            <span>{{ state.频率状态.center.value }} {{ state.频率状态.center.unit }}</span>
+            {{ state.频率状态.center.value }}
+            {{ state.频率状态.center.unit }}
          </li>
-          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2] overflow-hidden bg-[#AFAFAF]">
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
            <span>Start Freq</span>
-            <span>{{ state.频率状态.start.value }} {{ state.频率状态.start.unit }}</span>
+            {{ state.频率状态.start.value }}
+            {{ state.频率状态.start.unit }}
          </li>
-          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2] overflow-hidden bg-[#AFAFAF]">
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
            <span>Stop Freq</span>
-            <span>{{ state.频率状态.stop.value }} {{ state.频率状态.stop.unit }}</span>
+            {{ state.频率状态.stop.value }}
+            {{ state.频率状态.stop.unit }}
          </li>
-          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2] overflow-hidden bg-[#AFAFAF]">
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
            <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] overflow-hidden bg-[#AFAFAF]">
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
            <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] overflow-hidden bg-[#AFAFAF]">
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
            <span>#Singnal Track</span>
          </li>
-          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2] overflow-hidden bg-[#AFAFAF]">
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
            <span>#Scale Type</span>
          </li>
        </ul>

        <ul
          v-if="state.选项卡当前显示 === E_选项卡菜单.频率单位列表"
-          class="flex-1 flex flex-col justify-around gap-y-[4px]"
+          class="flex flex-1 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] overflow-hidden bg-[#AFAFAF]">
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
            <span>GHz</span>
          </li>
-          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2] overflow-hidden bg-[#AFAFAF]">
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
            <span>MHz</span>
          </li>
-          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2] overflow-hidden bg-[#AFAFAF]">
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
            <span>KHz</span>
          </li>
-          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2] overflow-hidden bg-[#AFAFAF]">
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
            <span>Hz</span>
          </li>
-          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2] overflow-hidden bg-[#AFAFAF]"></li>
-          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2] overflow-hidden bg-[#AFAFAF]"></li>
-          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2] overflow-hidden bg-[#AFAFAF]"></li>
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]"></li>
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]"></li>
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]"></li>
        </ul>
      </div>
    </div>

-    <div class="absolute top-[120px] left-[768px] ppy-btns h-[415px] overflow-visible!" data-box="机器右边按键">
+    <div class="ppy-btns absolute left-[768px] top-[120px] h-[415px] !overflow-visible" data-box="机器右边按键">
      <!-- 左上角. 长的 -->
-      <div class="flex flex-col gap-y-[18px] overflow-visible!">
-        <button class="ppy-btn w-[62px]!">Freq<br />Channel</button>
-        <button class="ppy-btn w-[62px]! opacity-0">#</button>
+      <div class="flex flex-col gap-y-[18px] !overflow-visible">
+        <button class="ppy-btn !w-[62px]">Freq<br />Channel</button>
+        <button class="ppy-btn !w-[62px] opacity-0">#</button>
        <!-- SPAN<br />X Scale -->
-        <button class="ppy-btn w-[62px]! opacity-0">#</button>
-        <button class="ppy-btn w-[62px]! opacity-0">#</button>
-        <button class="ppy-btn w-[62px]! opacity-0">#</button>
+        <button class="ppy-btn !w-[62px] opacity-0">#</button>
+        <button class="ppy-btn !w-[62px] opacity-0">#</button>
+        <button class="ppy-btn !w-[62px] opacity-0">#</button>
      </div>
-      <div class="grid grid-cols-3 gap-[16.5px] mt-[20px] overflow-visible!" data-box="数字键盘区域">
-        <button @click="执行点击数字按钮(E_数字键盘按键.Num7)" class="ppy-btn">7</button>
-        <button @click="执行点击数字按钮(E_数字键盘按键.Num8)" class="ppy-btn">8</button>
-        <button @click="执行点击数字按钮(E_数字键盘按键.Num9)" class="ppy-btn">9</button>
-        <button @click="执行点击数字按钮(E_数字键盘按键.Num4)" class="ppy-btn">4</button>
-        <button @click="执行点击数字按钮(E_数字键盘按键.Num5)" class="ppy-btn">5</button>
-        <button @click="执行点击数字按钮(E_数字键盘按键.Num6)" class="ppy-btn">6</button>
-        <button @click="执行点击数字按钮(E_数字键盘按键.Num1)" class="ppy-btn">1</button>
-        <button @click="执行点击数字按钮(E_数字键盘按键.Num2)" class="ppy-btn">2</button>
-        <button @click="执行点击数字按钮(E_数字键盘按键.Num3)" class="ppy-btn">3</button>
-        <button @click="执行点击数字按钮(E_数字键盘按键.Num0)" class="ppy-btn">0</button>
-        <button @click="执行点击数字按钮(E_数字键盘按键.Dot)" class="ppy-btn">.</button>
-        <button @click="执行点击数字按钮(E_数字键盘按键.PlusMinus)" class="ppy-btn">+/-</button>
+      <div class="mt-[20px] grid grid-cols-3 gap-[16.5px] !overflow-visible" data-box="数字键盘区域">
+        <button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.Num7)">7</button>
+        <button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.Num8)">8</button>
+        <button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.Num9)">9</button>
+        <button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.Num4)">4</button>
+        <button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.Num5)">5</button>
+        <button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.Num6)">6</button>
+        <button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.Num1)">1</button>
+        <button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.Num2)">2</button>
+        <button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.Num3)">3</button>
+        <button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.Num0)">0</button>
+        <button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.Dot)">.</button>
+        <button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.PlusMinus)">+/-</button>
      </div>
    </div>
  </div>
@ -436,62 +407,82 @@ watchEffect(() => {

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

 img[alt='频谱仪设备'] {
  width: calc(2554px * 0.5);
-  height: calc(1626px * 0.5);
  max-width: fit-content;
+  height: calc(1626px * 0.5);
  max-height: fit-content;
 }

 .ppy-btn {
-  height: 30px;
+  display: flex; /* 使用 flex 居中文本 */
+  align-items: center;
+  justify-content: center;
  width: 36px;
-  border: 1px solid green;
+  height: 30px;
+  padding-left: 2px;
  overflow: hidden;
  font-size: 10px;
-  text-align: left;
  line-height: 1.2;
-  padding-left: 2px;
-  border-radius: 4px;
-
+  color: #333; /* 深灰色文字 */
+  text-align: left;
  text-decoration: none;
-  display: flex; /* 使用 flex 居中文本 */
-  justify-content: center;
-  align-items: center;
-  /* width: 100%; */ /* 宽度占满 grid 单元格 */
-  /* height: 100%; */ /* 高度占满 grid 单元格 */
  background-color: #e0e0e0; /* 按钮浅灰色背景 */
-  color: #333333; /* 深灰色文字 */
-  /* font-size: 20px; */ /* 调整字体大小 */
-  /* font-weight: bold; */ /* 字体加粗 */
-  /* border-radius: 4px; */ /* 按钮圆角 */
+  border: 1px solid green;
  border: 1px solid #b0b0b0; /* 添加边框 */
+  border-radius: 4px;
  box-shadow:
-    1px 1px 2px rgba(0, 0, 0, 0.2),
-    /* 轻微外阴影 */ -1px -1px 2px rgba(255, 255, 255, 0.8); /* 轻微外高光 */
+    1px 1px 2px rgb(0 0 0 / 20%),
+    /* 轻微外阴影 */ -1px -1px 2px rgb(255 255 255 / 80%); /* 轻微外高光 */
+
  transition: all 0.1s ease-in-out; /* 平滑过渡效果 */
+
+  /* width: 100%; */
+
+  /* 宽度占满 grid 单元格 */
+
+  /* height: 100%; */
+
+  /* 高度占满 grid 单元格 */
+
+  /* font-size: 20px; */
+
+  /* 调整字体大小 */
+
+  /* font-weight: bold; */
+
+  /* 字体加粗 */
+
+  /* border-radius: 4px; */
+
+  /* 按钮圆角 */
 }
+
 .ppy-btn:active {
  background-color: #d5d5d5;
-  box-shadow:
-    inset 1px 1px 3px rgba(0, 0, 0, 0.3),
-    inset -1px -1px 3px rgba(255, 255, 255, 0.6);
  border-color: #a0a0a0;
+  box-shadow:
+    inset 1px 1px 3px rgb(0 0 0 / 30%),
+    inset -1px -1px 3px rgb(255 255 255 / 60%);
  transform: scale(0.98);
 }

 .menu-item {
  /* @apply bg-gray-200/50 p-[2px]; */
  font-size: 12px;
+
  /* border: 1px solid white; */
 }
+
 [alt='频谱仪设备'] {
  opacity: 1;
  transition: opacity 0.3s;