From 8336e5e1ca15f065889c8f8e72f524f54514f7f7 Mon Sep 17 00:00:00 2001
From: wxs <211789910@qq.com>
Date: Wed, 4 Feb 2026 10:42:58 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=85=BC=E5=AE=B9=E6=80=A7?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/Skyeye-sys-ui/src/utils/flexible.js  | 250 ++++++++++--------
 .../home/components/twin-situation/index.scss |  10 +-
 frontend/Skyeye-sys-ui/vue.config.js          |  24 +-
 3 files changed, 153 insertions(+), 131 deletions(-)

diff --git a/frontend/Skyeye-sys-ui/src/utils/flexible.js b/frontend/Skyeye-sys-ui/src/utils/flexible.js
index 05d08ab..a37c986 100644
--- a/frontend/Skyeye-sys-ui/src/utils/flexible.js
+++ b/frontend/Skyeye-sys-ui/src/utils/flexible.js
@@ -1,120 +1,148 @@
+; (function (win, lib) {
+  var doc = win.document
+  var docEl = doc.documentElement
+  var metaEl = doc.querySelector('meta[name="viewport"]')
+  var flexibleEl = doc.querySelector('meta[name="flexible"]')
+  var dpr = 0
+  var scale = 0
+  var tid
+  var flexible = lib.flexible || (lib.flexible = {})
 
-;(function(win, lib) {
-    var doc = win.document;
-    var docEl = doc.documentElement;
-    var metaEl = doc.querySelector('meta[name="viewport"]');
-    var flexibleEl = doc.querySelector('meta[name="flexible"]');
-    var dpr = 0;
-    var scale = 0;
-    var tid;
-    var flexible = lib.flexible || (lib.flexible = {});
-
-    if (metaEl) {
-        console.warn('将根据已有的meta标签来设置缩放比例');
-        var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
-        if (match) {
-            scale = parseFloat(match[1]);
-            dpr = parseInt(1 / scale);
-        }
-    } else if (flexibleEl) {
-        var content = flexibleEl.getAttribute('content');
-        if (content) {
-            var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
-            var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
-            if (initialDpr) {
-                dpr = parseFloat(initialDpr[1]);
-                scale = parseFloat((1 / dpr).toFixed(2));
-            }
-            if (maximumDpr) {
-                dpr = parseFloat(maximumDpr[1]);
-                scale = parseFloat((1 / dpr).toFixed(2));
-            }
-        }
+  if (metaEl) {
+    console.warn('将根据已有的meta标签来设置缩放比例')
+    var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/)
+    if (match) {
+      scale = parseFloat(match[1])
+      dpr = parseInt(1 / scale)
     }
-
-    if (!dpr && !scale) {
-        var isAndroid = win.navigator.appVersion.match(/android/gi);
-        var isIPhone = win.navigator.appVersion.match(/iphone/gi);
-        var devicePixelRatio = win.devicePixelRatio;
-        if (isIPhone) {
-            // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
-            if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
-                dpr = 3;
-            } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
-                dpr = 2;
-            } else {
-                dpr = 1;
-            }
-        } else {
-            // 其他设备下，仍旧使用1倍的方案
-            dpr = 1;
-        }
-        scale = 1 / dpr;
+  } else if (flexibleEl) {
+    var content = flexibleEl.getAttribute('content')
+    if (content) {
+      var initialDpr = content.match(/initial\-dpr=([\d\.]+)/)
+      var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/)
+      if (initialDpr) {
+        dpr = parseFloat(initialDpr[1])
+        scale = parseFloat((1 / dpr).toFixed(2))
+      }
+      if (maximumDpr) {
+        dpr = parseFloat(maximumDpr[1])
+        scale = parseFloat((1 / dpr).toFixed(2))
+      }
     }
+  }
 
-    docEl.setAttribute('data-dpr', dpr);
-    if (!metaEl) {
-        metaEl = doc.createElement('meta');
-        metaEl.setAttribute('name', 'viewport');
-        metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
-        if (docEl.firstElementChild) {
-            docEl.firstElementChild.appendChild(metaEl);
-        } else {
-            var wrap = doc.createElement('div');
-            wrap.appendChild(metaEl);
-            doc.write(wrap.innerHTML);
-        }
-    }
-
-    function refreshRem(){
-        var width = docEl.getBoundingClientRect().width;
-        if (width / dpr < 1980) {
-            width = 1980 * dpr;
-        } else if (width / dpr > 5760) {
-            width = 5760 * dpr;
-        }
-        var rem = width / 10;
-        docEl.style.fontSize = rem + 'px';
-        flexible.rem = win.rem = rem;
-    }
-
-    win.addEventListener('resize', function() {
-        clearTimeout(tid);
-        tid = setTimeout(refreshRem, 300);
-    }, false);
-    win.addEventListener('pageshow', function(e) {
-        if (e.persisted) {
-            clearTimeout(tid);
-            tid = setTimeout(refreshRem, 300);
-        }
-    }, false);
-
-    if (doc.readyState === 'complete') {
-        doc.body.style.fontSize = 12 * dpr + 'px';
+  if (!dpr && !scale) {
+    var isAndroid = win.navigator.appVersion.match(/android/gi)
+    var isIPhone = win.navigator.appVersion.match(/iphone/gi)
+    var devicePixelRatio = win.devicePixelRatio
+    if (isIPhone) {
+      // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
+      if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
+        dpr = 3
+      } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
+        dpr = 2
+      } else {
+        dpr = 1
+      }
     } else {
-        doc.addEventListener('DOMContentLoaded', function(e) {
-            doc.body.style.fontSize = 12 * dpr + 'px';
-        }, false);
+      // 其他设备下，仍旧使用1倍的方案
+      dpr = 1
     }
+    scale = 1 / dpr
+  }
 
-
-    refreshRem();
-
-    flexible.dpr = win.dpr = dpr;
-    flexible.refreshRem = refreshRem;
-    flexible.rem2px = function(d) {
-        var val = parseFloat(d) * this.rem;
-        if (typeof d === 'string' && d.match(/rem$/)) {
-            val += 'px';
-        }
-        return val;
-    }
-    flexible.px2rem = function(d) {
-        var val = parseFloat(d) / this.rem;
-        if (typeof d === 'string' && d.match(/px$/)) {
-            val += 'rem';
-        }
-        return val;
+  docEl.setAttribute('data-dpr', dpr)
+  if (!metaEl) {
+    metaEl = doc.createElement('meta')
+    metaEl.setAttribute('name', 'viewport')
+    metaEl.setAttribute(
+      'content',
+      'initial-scale=' +
+      scale +
+      ', maximum-scale=' +
+      scale +
+      ', minimum-scale=' +
+      scale +
+      ', user-scalable=no'
+    )
+    if (docEl.firstElementChild) {
+      docEl.firstElementChild.appendChild(metaEl)
+    } else {
+      var wrap = doc.createElement('div')
+      wrap.appendChild(metaEl)
+      doc.write(wrap.innerHTML)
     }
+  }
 
-})(window, window['lib'] || (window['lib'] = {}));
+  function refreshRem() {
+    var width = docEl.getBoundingClientRect().width
+    if (width / dpr <= 1366) {
+      width = 1366 * dpr
+    } else if (width / dpr <= 1440) {
+      width = 1440 * dpr
+    } else if (width / dpr <= 1600) {
+      width = 1600 * dpr
+    } else if (width / dpr <= 1680) {
+      width = 1680 * dpr
+    } else if (width / dpr <= 1768) {
+      width = 1768 * dpr
+    } else if (width / dpr <= 1980) {
+      width = 1980 * dpr
+    } else if (width / dpr > 5760) {
+      width = 5760 * dpr
+    }
+    var rem = width / 10
+    docEl.style.fontSize = rem + 'px'
+    flexible.rem = win.rem = rem
+  }
+
+  win.addEventListener(
+    'resize',
+    function () {
+      clearTimeout(tid)
+      tid = setTimeout(refreshRem, 300)
+    },
+    false
+  )
+  win.addEventListener(
+    'pageshow',
+    function (e) {
+      if (e.persisted) {
+        clearTimeout(tid)
+        tid = setTimeout(refreshRem, 300)
+      }
+    },
+    false
+  )
+
+  if (doc.readyState === 'complete') {
+    doc.body.style.fontSize = 12 * dpr + 'px'
+  } else {
+    doc.addEventListener(
+      'DOMContentLoaded',
+      function (e) {
+        doc.body.style.fontSize = 12 * dpr + 'px'
+      },
+      false
+    )
+  }
+
+  refreshRem()
+
+  flexible.dpr = win.dpr = dpr
+  flexible.refreshRem = refreshRem
+  flexible.rem2px = function (d) {
+    var val = parseFloat(d) * this.rem
+    if (typeof d === 'string' && d.match(/rem$/)) {
+      val += 'px'
+    }
+    return val
+  }
+  flexible.px2rem = function (d) {
+    var val = parseFloat(d) / this.rem
+    if (typeof d === 'string' && d.match(/px$/)) {
+      val += 'rem'
+    }
+    return val
+  }
+})(window, window['lib'] || (window['lib'] = {}))
diff --git a/frontend/Skyeye-sys-ui/src/views/home/components/twin-situation/index.scss b/frontend/Skyeye-sys-ui/src/views/home/components/twin-situation/index.scss
index d2a5f8b..b11844f 100644
--- a/frontend/Skyeye-sys-ui/src/views/home/components/twin-situation/index.scss
+++ b/frontend/Skyeye-sys-ui/src/views/home/components/twin-situation/index.scss
@@ -292,7 +292,7 @@
     position: fixed;
     top: 60px;
     right: 10px;
-    height: calc(100vh - 270px);
+    height: calc(100vh - 220px);
   }
 
   .detail-info {
@@ -1036,13 +1036,7 @@
 
   .detail-uav {
     width: 410px;
-    // position: fixed;
-    top: 60px;
-    //bottom: 5px;
-    right: 10px;
-    //right: 510px;
-    height: calc(100vh - 270px);
-    //height: calc(100vh - 620px);
+    height: calc(100vh - 220px);
     transition: 0.2s ease-in-out;
     z-index: 2;
 
diff --git a/frontend/Skyeye-sys-ui/vue.config.js b/frontend/Skyeye-sys-ui/vue.config.js
index a9596bf..3dcc112 100644
--- a/frontend/Skyeye-sys-ui/vue.config.js
+++ b/frontend/Skyeye-sys-ui/vue.config.js
@@ -147,18 +147,18 @@ module.exports = {
   css: {
     loaderOptions: {
       postcss: {
-        // plugins: [
-        //   require('postcss-pxtorem')({
-        //     rootValue: 192, // 正常适配
-        //     // rootValue: 280, // 3840 * 2160
-        //     propList: ['*'], // 可以从px更改为rem的属性
-        //     selectorBlackList: [
-        //       // 匹配不被转换为rem的选择器
-        //       'super-cesium-timeline-icon16'
-        //       // 'card-position'
-        //     ]
-        //   })
-        // ]
+        plugins: [
+          require('postcss-pxtorem')({
+            rootValue: 192, // 正常适配
+            // rootValue: 280, // 3840 * 2160
+            propList: ['*'], // 可以从px更改为rem的属性
+            selectorBlackList: [
+              // 匹配不被转换为rem的选择器
+              'super-cesium-timeline-icon16'
+              // 'card-position'
+            ]
+          })
+        ]
       }
     }
   }