一张图调试样式

src/utils/utilsDramAdmin.js

@@ -20,10 +20,18 @@ export function useIndex(appRef,W,H) {
         const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5));
         if (appRef) {
             if (currentRate > baseProportion) {
+
                 // 表示更宽
-                // scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5);
-                scale.width=1 //宽度还是1的比例不改变
+                if (window.innerWidth == 1920) {
+                    scale.width=1
+                } else if (window.innerWidth == 2560) {
+                    scale.width =1.333
+                } else {
+                    scale.width =((window.innerHeight * baseProportion) / baseWidth).toFixed(5);
+               }
+                
                 scale.height = (window.innerHeight / baseHeight).toFixed(5);
+                // scale.width = 1;
                 appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
             } else {
                 // 表示更高

src/views/dashboard/OnePic/index.vue

@@ -23,7 +23,7 @@
           "
           >{{ time }}
         </span>
-        <span class="fullbtn ml-4 w-15 h-7 leading-6 cursor-pointer" @click="FullScreen">{{ !full_Screen ? '全屏' : '退出' }}</span>
+        <!-- <span class="fullbtn ml-4 w-15 h-7 leading-6 cursor-pointer" @click="FullScreen">{{ !full_Screen ? '全屏' : '退出' }}</span> -->
       </div>
     </div>
     <div class="flex w-full">
@@ -31,7 +31,7 @@
         <Region @changes="change" />
         <Industry class="mt-5" v-if="show" :curnt="curnt" />
         <!-- <Soil class="mt-10" />
-          <Water class="mt-10" /> -->
+            <Water class="mt-10" /> -->
       </div>
       <div class="w-3/7">
         <Map />
@@ -172,7 +172,7 @@
     transform-origin: 0 0;
     position: absolute;
     left: 50%;
-    top: 50%;
+    top: 49%;
     // transition: 0.3s;
     background: url('@/assets/images/onePic/zhezhao_bg@2x.png') no-repeat;
     background-size: 100% 100%;

src/views/dashboard/OnePic/index1.vue

+<template>
+  <div class="onepic text-#fff" ref="appRef">
+    <div class="h-22 text-center titleBg grid grid-cols-3">
+      <div class="text-[#00C9D8] grid grid-cols-3">
+        <span></span>
+        <div>
+          <img :src="filterWeather(dataWwather?.text)" />
+          <span class="mx-2">{{ dataWwather?.text }}</span>
+          <span>{{ dataWwather?.temp }}℃</span>
+        </div>
+        <span></span>
+      </div>
+      <div class="text-3xl mt-5"> 广东省建设用地污染地块信息系统</div>
+      <div class="grid grid-cols-4 mt-5">
+        <span></span>
+        <span class="text-[#00C9D8] text-base">{{ date }} 星期{{ week }}</span>
+        <span
+          class="text-[#D8F0FF] text-2xl xf"
+          style="
+            text-shadow:
+              0px 0px 10px #00c9d8,
+              0px 0px 4px #00c9d8;
+          "
+          >{{ time }}
+        </span>
+        <span class="fullbtn ml-4 w-15 h-7 leading-6 cursor-pointer" @click="FullScreen">{{ !full_Screen ? '全屏' : '退出' }}</span>
+      </div>
+    </div>
+    <div class="flex w-full">
+      <div class="w-2/7">
+        <Region @changes="change" />
+        <Industry class="mt-5" v-if="show" :curnt="curnt" />
+        <!-- <Soil class="mt-10" />
+            <Water class="mt-10" /> -->
+      </div>
+      <div class="w-3/7">
+        <Map />
+        <Soil class="mt-2" />
+      </div>
+      <div class="w-2/7 ml-3">
+        <DkNum />
+        <Fxgkxf class="mt-5" />
+        <FxpgNum class="mt-5" />
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+  import { ref, onMounted } from 'vue';
+  import { useIndex } from '@/utils/utilsDramAdmin';
+  import { getAction } from '@/api/mange';
+  import dayjs from 'dayjs';
+  import Region from './components/region.vue';
+  import Industry from './components/industry.vue';
+
+  // import Water from './components/water.vue';
+  // 右侧
+  import DkNum from './components/DkNum.vue';
+  import FxpgNum from './components/FxpgNum.vue';
+  import Fxgkxf from './components/Fxgkxf.vue';
+  //中间
+  import Map from './components/map/index.vue';
+  import Soil from './components/soil.vue';
+  import img1 from '@/assets/images/onePic/qing.png';
+  import img2 from '@/assets/images/onePic/yin.png';
+  import img3 from '@/assets/images/onePic/lei.png';
+  import img4 from '@/assets/images/onePic/xue.png';
+  import img5 from '@/assets/images/onePic/yu.png';
+  import img6 from '@/assets/images/onePic/yun.png';
+  import img7 from '@/assets/images/onePic/wu.png';
+  import img8 from '@/assets/images/onePic/shachen.png';
+  import img9 from '@/assets/images/onePic/qing.png';
+
+  const appRef = ref<any>();
+  const date = ref('2014.01.18');
+  const week = ref('星期四');
+  const time = ref('10:49:59');
+  const dataWwather = ref({ text: '', temp: '' });
+  const full_Screen = ref(false);
+  const curnt = ref(0);
+  const show = ref(true);
+  function getTime() {
+    date.value = dayjs().format('YYYY-MM-DD');
+    week.value = dayjs().format('dd');
+    time.value = dayjs().format('HH:mm:ss');
+  }
+  setInterval(() => {
+    getTime();
+  }, 1000);
+
+  function filterWeather(val) {
+    if (val == '晴') {
+      return img1;
+    } else if (val == '阴') {
+      return img2;
+    } else if (/雷/.test(val)) {
+      return img3;
+    } else if (/雪/.test(val)) {
+      return img4;
+    } else if (/雨/.test(val)) {
+      return img5;
+    } else if (/云/.test(val)) {
+      return img6;
+    } else if (/雾/.test(val)) {
+      return img7;
+    } else if (/沙/.test(val)) {
+      return img8;
+    } else {
+      return img9;
+    }
+  }
+
+  function getTianQi() {
+    getAction('https://devapi.qweather.com/v7/weather/now', {
+      location: '101280101', // 郑州市id
+      key: '0a4535e4dffe4a6190e6432dde78899d',
+    }).then((res: any) => {
+      console.log(res, 'res');
+      dataWwather.value = res.data.now;
+    });
+  }
+
+  getTianQi();
+  const setScale = () => {
+    const { calcRate, windowDraw } = useIndex(appRef.value, 1920, 1080);
+    calcRate();
+    windowDraw();
+  };
+  // 测试的自适应高度
+
+  onMounted(() => {
+    setScale();
+  });
+
+  function FullScreen() {
+    const element = appRef.value;
+    if (document.fullscreenElement) {
+      full_Screen.value = false;
+
+      document.exitFullscreen(); // 如果已经处于全屏状态，则退出全屏模式
+    } else {
+      full_Screen.value = true;
+      if (element?.requestFullscreen) {
+        element.requestFullscreen();
+      } else if (element?.mozRequestFullScreen) {
+        /* Firefox */
+        element.mozRequestFullScreen();
+      } else if (element?.webkitRequestFullscreen) {
+        /* Chrome、Safari 和 Opera */
+        element?.webkitRequestFullscreen();
+      } else if (element?.msRequestFullscreen) {
+        /* IE/Edge */
+        element?.msRequestFullscreen();
+      }
+    }
+  }
+
+  function change(v) {
+    curnt.value = v;
+    show.value = false;
+    setTimeout(() => {
+      show.value = true;
+    }, 100);
+  }
+</script>
+<style lang="less" scoped>
+  .onepic {
+    overflow: hidden;
+    width: 1920px;
+    height: 1019px;
+    transform: scale(var(--scale)) translate(-50%, -50%);
+    transform-origin: 0 0;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    // transition: 0.3s;
+    background: url('@/assets/images/onePic/zhezhao_bg@2x.png') no-repeat;
+    background-size: 100% 100%;
+    background-position: center;
+    background-color: #020711;
+
+    .titleBg {
+      background: url('@/assets/images/onePic/titleBg.png') no-repeat;
+      background-size: 100% 100%;
+      background-position: center;
+    }
+    .fullbtn {
+      background: linear-gradient(180deg, rgba(15, 74, 159, 0) 0%, #00c9d8 100%);
+      border-radius: 0px 0px 0px 0px;
+      border: 1px solid rgba(30, 123, 214, 0.8);
+      font-size: 12px !important;
+    }
+  }
+
+  @font-face {
+    font-family: 'zcool-gdh-Medium';
+    src: url('/@/assets/font/zcoo.TTF');
+  }
+  .xf {
+    font-family: 'zcool-gdh-Medium';
+  }
+  //
+</style>