117 lines
3.1 KiB
Vue
117 lines
3.1 KiB
Vue
|
<template>
|
||
|
|
<!-- <ScaleBox :width="width" :height="height" bgc="transparent" :delay="50" v-if="!isFull">
|
||
|
|
<div class="orderBgc">
|
||
|
|
<Map3D class="mapStyle"></Map3D>
|
||
|
|
<Map2D class="mapStyle"></Map2D>
|
||
|
|
<headerScreen class="topHeader"></headerScreen>
|
||
|
|
<div class="bottomContent">
|
||
|
|
<leftScreen class="leftScreen"></leftScreen>
|
||
|
|
<centerScreen class="centerScreen"></centerScreen>
|
||
|
|
<rightScreen class="rightScreen"></rightScreen>
|
||
|
|
</div>
|
||
|
|
<div class="borderBottom"></div>
|
||
|
|
</div>
|
||
|
|
</ScaleBox> -->
|
||
|
|
<div class="all-content">
|
||
|
|
<div class="orderBgc" ref="dataScreenRef">
|
||
|
|
<Map3D class="mapStyle"></Map3D>
|
||
|
|
<!-- <Map2D class="mapStyle"></Map2D> -->
|
||
|
|
<headerScreen class="topHeader"></headerScreen>
|
||
|
|
<!-- <div class="bottomContent">
|
||
|
|
<leftScreen class="leftScreen"></leftScreen>
|
||
|
|
<centerScreen class="centerScreen"></centerScreen>
|
||
|
|
<rightScreen class="rightScreen"></rightScreen>
|
||
|
|
</div> -->
|
||
|
|
|
||
|
|
<leftScreen class="leftScreen"></leftScreen>
|
||
|
|
<centerScreen class="centerScreen"></centerScreen>
|
||
|
|
<rightScreen class="rightScreen"></rightScreen>
|
||
|
|
<div class="borderBottom"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { ref, onMounted, onBeforeMount } from "vue";
|
||
|
|
import headerScreen from "./components/header.vue";
|
||
|
|
import centerScreen from "./components/center.vue";
|
||
|
|
import leftScreen from "./components/left.vue";
|
||
|
|
import rightScreen from "./components/right.vue";
|
||
|
|
import Map3D from "./components/map3D.vue";
|
||
|
|
import Map2D from "./components/map2D.vue";
|
||
|
|
import ScaleBox from "vue3-scale-box";
|
||
|
|
const dataScreenRef = ref<HTMLElement | null>(null);
|
||
|
|
const width = ref(0);
|
||
|
|
const height = ref(0);
|
||
|
|
const isFull = ref(true);
|
||
|
|
// 根据浏览器大小推断缩放比例
|
||
|
|
const getScale = (width = 1920, height = 923) => {
|
||
|
|
let ww = window.innerWidth / width;
|
||
|
|
let wh = window.innerHeight / height;
|
||
|
|
return ww < wh ? ww : wh;
|
||
|
|
};
|
||
|
|
// 设置响应式
|
||
|
|
const resize = () => {
|
||
|
|
if (dataScreenRef.value) {
|
||
|
|
dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
onMounted(() => {
|
||
|
|
if (dataScreenRef.value) {
|
||
|
|
dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
|
||
|
|
dataScreenRef.value.style.width = `1920px`;
|
||
|
|
dataScreenRef.value.style.height = `923px`;
|
||
|
|
}
|
||
|
|
window.addEventListener("resize", resize);
|
||
|
|
});
|
||
|
|
onBeforeMount(() => {
|
||
|
|
window.removeEventListener("resize", resize);
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.all-content {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
.orderBgc {
|
||
|
|
position: fixed;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
transform-origin: left top;
|
||
|
|
.mapStyle {
|
||
|
|
position: absolute;
|
||
|
|
}
|
||
|
|
.topHeader {
|
||
|
|
width: 100%;
|
||
|
|
height: 10%;
|
||
|
|
|
||
|
|
// background: linear-gradient(to right, rgb(17 20 25 / 60%), rgb(17 20 25 / 20%), rgb(17 20 25 / 60%));
|
||
|
|
}
|
||
|
|
.bottomContent {
|
||
|
|
display: flex;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
position: relative;
|
||
|
|
.leftScreen {
|
||
|
|
height: 90%;
|
||
|
|
}
|
||
|
|
.centerScreen {
|
||
|
|
height: 100px;
|
||
|
|
}
|
||
|
|
.rightScreen {
|
||
|
|
height: 90%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.borderBottom {
|
||
|
|
position: fixed;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 6%;
|
||
|
|
background: url("@/assets/images/screenImg/bottomBorder.png") no-repeat center bottom;
|
||
|
|
background-size: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|