examples/vue-ts-example
1
0
Fork 0
Code Issues Pull Requests 5 Actions Packages Projects Releases Wiki Activity

PinPuYi.vue
All checks were successful
/ build-and-deploy-to-vercel (push) Successful in 2m53s
Details
/ surge (push) Successful in 2m49s
Details
/ playwright (push) Successful in 1m14s
Details
/ lint-build-and-check (push) Successful in 5m16s
Details

Browse Source
This commit is contained in:
严浩
2025-04-24 19:08:05 +08:00
parent 2d6831fcb0
commit e9c59a3634
1 changed files with 32 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/PinPuYi/PinPuYi.vue
View File

@ -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>