|
|
@@ -0,0 +1,84 @@
|
|
|
+<template>
|
|
|
+ <div class="command-center-container" ref="commandCenterContainer" :style="rootStyle">
|
|
|
+ <!-- <div class="large-screen-layout" :style="scaleStyle">
|
|
|
+ <header class="command-center__header"> </header>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+ import { ref, computed, onMounted, onUnmounted, CSSProperties } from 'vue';
|
|
|
+
|
|
|
+ const commandCenterContainer = ref<HTMLDivElement | null>(null);
|
|
|
+
|
|
|
+ const containerWidth = ref(0);
|
|
|
+ const containerHeight = ref(0);
|
|
|
+
|
|
|
+ // 基准尺寸
|
|
|
+ const BASE_WIDTH = 1920;
|
|
|
+ const BASE_HEIGHT = 1080;
|
|
|
+
|
|
|
+ // 更新容器尺寸
|
|
|
+ const updateSize = () => {
|
|
|
+ if (!commandCenterContainer.value) return;
|
|
|
+ containerWidth.value = commandCenterContainer.value.clientWidth;
|
|
|
+ containerHeight.value = commandCenterContainer.value.clientHeight;
|
|
|
+ };
|
|
|
+
|
|
|
+ // 计算缩放比例
|
|
|
+ const scale = computed(() => {
|
|
|
+ return Math.min(containerWidth.value / BASE_WIDTH, containerHeight.value / BASE_HEIGHT);
|
|
|
+ });
|
|
|
+
|
|
|
+ // 根元素样式,包含CSS变量
|
|
|
+ const rootStyle = computed((): CSSProperties => {
|
|
|
+ return {
|
|
|
+ '--base-width': `${BASE_WIDTH}px`,
|
|
|
+ '--base-height': `${BASE_HEIGHT}px`,
|
|
|
+ };
|
|
|
+ });
|
|
|
+
|
|
|
+ const scaleStyle = computed((): CSSProperties => {
|
|
|
+ return {
|
|
|
+ position: 'absolute',
|
|
|
+ left: '50%',
|
|
|
+ top: '50%',
|
|
|
+ transform: `translate(-50%, -50%) scale(${scale.value})`,
|
|
|
+ };
|
|
|
+ });
|
|
|
+
|
|
|
+ onMounted(() => {
|
|
|
+ updateSize();
|
|
|
+ window.addEventListener('resize', updateSize);
|
|
|
+ });
|
|
|
+
|
|
|
+ onUnmounted(() => {
|
|
|
+ window.removeEventListener('resize', updateSize);
|
|
|
+ });
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ $base-width: var(--base-width);
|
|
|
+ $base-height: var(--base-height);
|
|
|
+
|
|
|
+ .command-center-container {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ background-color: #d8e3f4;
|
|
|
+ z-index: 9999;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .large-screen-layout {
|
|
|
+ width: $base-width;
|
|
|
+ height: $base-height;
|
|
|
+ background: url('@/assets/images/exception/stay-tune.png') no-repeat center center;
|
|
|
+ }
|
|
|
+ .command-center__header {
|
|
|
+ width: 100%;
|
|
|
+ height: 49px;
|
|
|
+ background: url('assets/images/home/nav-bg@1X.png') no-repeat center center / cover;
|
|
|
+ }
|
|
|
+</style>
|