<template>
|
<div class="scale-container">
|
<div class="architecture-scaling-container"
|
:style="{ transform: `scale(${scaleRatio})` }">
|
<div class="architecture-container">
|
<div class="header">
|
<span class="title-bar"></span>
|
<h1 class="title-text">系统架构图</h1>
|
</div>
|
<div class="image-wrapper">
|
<img :src="architectureImg"
|
alt="系统架构图"
|
class="architecture-img" />
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, onMounted, onBeforeUnmount, nextTick } from "vue";
|
import architectureImg from "@/assets/images/xitongjiagou.svg";
|
|
// 缩放比例
|
const scaleRatio = ref(1);
|
// 设计尺寸（基准尺寸）
|
const designWidth = 1920;
|
const designHeight = 980;
|
|
// 计算缩放比例
|
const calculateScale = () => {
|
const container = document.querySelector(".scale-container");
|
if (!container) return;
|
|
// 获取容器的实际尺寸
|
const containerWidth = container.clientWidth;
|
|
if (containerWidth === 0) {
|
// 如果还没渲染出来，延迟一下再计算
|
setTimeout(calculateScale, 100);
|
return;
|
}
|
|
// 计算宽度缩放比例，使其始终占满宽度
|
const scaleX = containerWidth / designWidth;
|
scaleRatio.value = scaleX;
|
};
|
|
// 窗口大小变化处理
|
const handleResize = () => {
|
calculateScale();
|
};
|
|
// 生命周期
|
onMounted(() => {
|
// 计算初始缩放比例
|
nextTick(() => {
|
calculateScale();
|
});
|
|
// 监听窗口大小变化
|
window.addEventListener("resize", handleResize);
|
});
|
|
onBeforeUnmount(() => {
|
window.removeEventListener("resize", handleResize);
|
});
|
</script>
|
|
<style scoped lang="scss">
|
.scale-container {
|
position: relative;
|
width: 100%;
|
height: calc(100vh - 84px);
|
background-color: #f5f7fa;
|
overflow: hidden;
|
}
|
|
.architecture-scaling-container {
|
position: relative;
|
width: 1920px;
|
height: 980px;
|
transform-origin: left top;
|
background-color: #f5f7fa;
|
transition: transform 0.3s;
|
}
|
|
.architecture-container {
|
padding: 20px;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
|
.header {
|
display: flex;
|
align-items: center;
|
margin-bottom: 20px;
|
padding: 10px 20px;
|
background: #fff;
|
border-radius: 8px;
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
|
.title-bar {
|
width: 4px;
|
height: 20px;
|
background-color: #409eff;
|
margin-right: 12px;
|
border-radius: 2px;
|
}
|
|
.title-text {
|
margin: 0;
|
font-size: 20px;
|
font-weight: 600;
|
color: #303133;
|
}
|
}
|
|
.image-wrapper {
|
flex: 1;
|
background: #fff;
|
border-radius: 8px;
|
padding: 20px 40px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
overflow: hidden;
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
|
.architecture-img {
|
max-width: 100%;
|
max-height: 100%;
|
object-fit: contain;
|
}
|
}
|
}
|
</style>
|
