SikongJueluo/FPGA_WebLab
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: remake most of forntend

Browse Source
This commit is contained in:
alivender
2025-04-26 19:59:35 +08:00
parent 4e741f9ef8
commit bc4f44ecaa
41 changed files with 84095 additions and 672 deletions
Download Patch File Download Diff File Expand all files Collapse all files

220
src/components/equipments/MotherBoard.vue Normal file
View File

@@ -0,0 +1,220 @@
<template> <div class="motherboard-container" :style="{ width: width + 'px', height: height + 'px', position: 'relative' }"> <!-- 主板 SVG -->
<img
src="../equipments/svg/motherboard.svg"
:width="width"
:height="height"
alt="主板"
class="svg-image"
draggable="false"
/>
<!-- 嵌入各种组件 --> <!-- HDMI -->
<div class="component-wrapper hdmi-wrapper" :style="{
position: 'absolute',
top: `${140 * props.size}px`,
left: `${-48 * props.size}px`,
zIndex: 10
}">
<HDMI :size="1.5*props.size" />
</div>
<!-- HDMI -->
<div class="component-wrapper hdmi-wrapper" :style="{
position: 'absolute',
top: `${260 * props.size}px`,
left: `${-48 * props.size}px`,
zIndex: 10
}">
<HDMI :size="1.5*props.size" />
</div> <!-- ETH -->
<div class="component-wrapper eth-wrapper" :style="{
position: 'absolute',
top: `${365 * props.size}px`,
left: `${-10 * props.size}px`,
zIndex: 10
}">
<ETH :size="1.5*props.size" />
</div>
<!-- DDR -->
<div class="component-wrapper ddr-wrapper" :style="{
position: 'absolute',
top: `${224 * props.size}px`,
right: `${250 * props.size}px`,
zIndex: 10
}">
<DDR :size="1.2*props.size" />
</div>
<!-- SD -->
<div class="component-wrapper sd-wrapper" :style="{
position: 'absolute',
bottom: `${130 * props.size}px`,
right: `${172 * props.size}px`,
zIndex: 10
}">
<SD :size="1.2*props.size" />
</div>
<!-- SFP -->
<div class="component-wrapper sfp-wrapper" :style="{
position: 'absolute',
bottom: `${210 * props.size}px`,
right: `${-46 * props.size}px`,
zIndex: 10
}">
<SFP :size="1.84*props.size" />
</div>
<!-- SFP -->
<div class="component-wrapper sfp-wrapper" :style="{
position: 'absolute',
bottom: `${290 * props.size}px`,
right: `${-46 * props.size}px`,
zIndex: 10
}">
<SFP :size="1.84*props.size" />
</div>
<!-- SMA -->
<div class="component-wrapper sma-wrapper" :style="{
position: 'absolute',
top: `${110 * props.size}px`,
right: `${204 * props.size}px`,
zIndex: 10
}">
<SMA :size="0.75*props.size" />
</div>
<!-- SMA -->
<div class="component-wrapper sma-wrapper" :style="{
position: 'absolute',
top: `${170 * props.size}px`,
right: `${204 * props.size}px`,
zIndex: 10
}">
<SMA :size="0.75*props.size" />
</div>
<!-- SMA -->
<div class="component-wrapper sma-wrapper" :style="{
position: 'absolute',
top: `${250 * props.size}px`,
right: `${204 * props.size}px`,
zIndex: 10
}">
<SMA :size="0.75*props.size" />
</div>
<!-- SMA -->
<div class="component-wrapper sma-wrapper" :style="{
position: 'absolute',
top: `${310 * props.size}px`,
right: `${204 * props.size}px`,
zIndex: 10
}">
<SMA :size="0.75*props.size" />
</div>
<!-- BUTTON -->
<div class="component-wrapper button-wrapper" :style="{
position: 'absolute',
bottom: `${140 * props.size}px`,
right: `${430 * props.size}px`,
zIndex: 10
}">
<MechanicalButton :size="0.175*props.size" />
</div>
<div class="component-wrapper button-wrapper" :style="{
position: 'absolute',
bottom: `${140 * props.size}px`,
right: `${397 * props.size}px`,
zIndex: 10
}">
<MechanicalButton :size="0.175*props.size" />
</div>
<div class="component-wrapper button-wrapper" :style="{
position: 'absolute',
bottom: `${140 * props.size}px`,
right: `${364 * props.size}px`,
zIndex: 10
}">
<MechanicalButton :size="0.175*props.size" />
</div>
<div class="component-wrapper button-wrapper" :style="{
position: 'absolute',
bottom: `${140 * props.size}px`,
right: `${331 * props.size}px`,
zIndex: 10
}">
<MechanicalButton :size="0.175*props.size" />
</div>
<div class="component-wrapper button-wrapper" :style="{
position: 'absolute',
bottom: `${140 * props.size}px`,
right: `${298 * props.size}px`,
zIndex: 10
}">
<MechanicalButton :size="0.175*props.size" />
</div>
<div class="component-wrapper button-wrapper" :style="{
position: 'absolute',
bottom: `${140 * props.size}px`,
right: `${265 * props.size}px`,
zIndex: 10
}">
<MechanicalButton :size="0.175*props.size" />
</div>
</div>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import HDMI from './HDMI.vue';
import DDR from './DDR.vue';
import ETH from './ETH.vue';
import SD from './SD.vue';
import SFP from './SFP.vue';
import SMA from './SMA.vue';
import MechanicalButton from './MechanicalButton.vue';
interface Props {
size?: number;
}
const props = withDefaults(defineProps<Props>(), {
size: 1
});
// 计算实际宽高
const width = computed(() => 800 * props.size);
const height = computed(() => 600 * props.size);
// 向外暴露方法
defineExpose({
getInfo: () => ({
size: props.size
})
});
</script>
<style scoped>
.motherboard-container {
display: block;
position: relative;
user-select: none;
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */
}
.svg-image {
width: 100%;
height: 100%;
object-fit: contain;
pointer-events: none; /* 禁止鼠标交互 */
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.component-wrapper {
display: flex;
justify-content: center;
align-items: center;
}
</style>