大屏适缩放

<template>

   <div class="screen-adapter">

      <div class="big-screen-page">

         <div class="header-box">

            <div class="meteorology-box">

               晴天

            </div>

            <div class="title-box">

               XXXX电力交易智能辅助决策系统

            </div>

            <div class="time-box">

               <span>{{ currentDate }}</span>

               <span class="mx-3">{{ weekMap[currentWeek] }}</span>

               <span> {{ currentTime }}</span>

            </div>

         </div>

         <div class="content-box">

            <div class="left-box">

               <div />

               <div />

               <div />

            </div>

            <div class="map-box">

               中

            </div>

            <div class="right-box">

               右

            </div>

         </div>

      </div>

   </div>

</template>

<script setup>

import dayjs from 'dayjs';

import { ref, onMounted, onUnmounted, computed } from 'vue';

// 时间相关

const currentTime = ref(dayjs().format('HH:mm:ss'));

const currentDate = ref(dayjs().format('YYYY-MM-DD'));

const currentWeek = ref(dayjs().day());

// 星期映射

const weekMap = computed(() => ({

   0: '星期天',

   1: '星期一',

   2: '星期二',

   3: '星期三',

   4: '星期四',

   5: '星期五',

   6: '星期六',

}));

// 更新时间

const updateCurrentTime = () => {

   currentTime.value = dayjs().format('HH:mm:ss');

   currentDate.value = dayjs().format('YYYY-MM-DD');

   currentWeek.value = dayjs().day();

};

// 定时器

let intervalId;

onMounted(() => {

   updateCurrentTime();

   intervalId = setInterval(updateCurrentTime, 1000);

   // 自适应缩放（兼容非标准大屏）

   adaptScreen();

   window.addEventListener('resize', adaptScreen);

});

onUnmounted(() => {

   clearInterval(intervalId);

   window.removeEventListener('resize', adaptScreen);

});

// 核心：动态计算缩放比例

const adaptScreen = () => {

   const adapter = document.querySelector('.screen-adapter');

   const content = document.querySelector('.big-screen-page');

   if(!adapter || !content) return;

   // 开发基准尺寸

   const baseWidth = 1920;

   const baseHeight = 1080;

   // 屏幕实际尺寸

   const screenWidth = window.innerWidth;

   const screenHeight = window.innerHeight;

   // 计算缩放比例（宽高取最小值，避免溢出）

   const scale = Math.min(screenWidth / baseWidth, screenHeight / baseHeight);

   // 应用缩放+居中

   content.style.transform = `scale(${scale})`;

   content.style.transformOrigin = 'top left';

   // 居中偏移

   adapter.style.paddingLeft = `${(screenWidth - baseWidth * scale) / 2}px`;

   adapter.style.paddingTop = `${(screenHeight - baseHeight * scale) / 2}px`;

};

</script>

<style lang="scss" scoped>

// 外层适配容器：占满屏幕，负责居中

.screen-adapter {

   width: 100vw;

   height: 100vh;

   overflow: hidden;

   position: relative;

}

// 核心内容容器：固定1920*1080开发尺寸

.big-screen-page {

   width: 1920px;

   height: 1080px;

   background: url('../../assets/boxBg.png') no-repeat center;

   background-size: cover;

   position: relative;

   .header-box {

      display: flex;

      height: 102px;

      padding: 0 20px;

      &>div {

         height: 100%;

         display: flex;

         align-items: center;

         justify-content: center;

      }

      .meteorology-box {

         color: #fff;

         width: 25%;

         font-size: 22px;

         align-items: flex-end;

         padding: 0 0 22px;

      }

      .title-box {

         width: 50%;

         font-size: 45px;

         font-weight: bold;

         letter-spacing: 6px;

         font-family: YouSheBiaoTiHei;

         color: #fff;

      }

      .time-box {

         color: #fff;

         width: 25%;

         font-size: 16px;

         align-items: flex-end;

         justify-content: flex-end;

         padding: 0 50px 22px 0;

         transform: skewX(345deg);

      }

   }

   // 内容区域

   .content-box {

      width: 100%;

      height: calc(100% - 102px);

      padding: 10px 34px 34px;

      display: flex;

      &>div {

         height: 100%;

         // border: 1px solid #fff;

      }

      .left-box {

         width: 25%;

      }

      .map-box {

         width: 50%;

      }

      .right-box {

         width: 25%;

      }

   }

}

@media (max-width: 1920px) {

   .big-screen-page {

      background-size: cover;

   }

}

@media (min-width: 3840px) and (min-height: 2160px) {

   .screen-adapter {

      padding: 0 !important;

   }

   .big-screen-page {

      transform: scale(2) !important;

      transform-origin: top left !important;

   }

}

</style>