108 lines
3.1 KiB
Vue
108 lines
3.1 KiB
Vue
<!-- 频谱仪 -->
|
|
<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>
|