feat: 大屏适配

674e82f2 · 汪雄 · 8cf145ba · 674e82f2 · 674e82f2 · 674e82f2
--- a/index.html
+++ b/index.html
@@ -8,50 +8,72 @@
 -->
 <!doctype html>
 <html lang="en">
+  <head>
-<head>
+    <meta charset="UTF-8" />
-  <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link
-  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
+      rel="stylesheet"
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      href="https://unpkg.com/element-plus/dist/index.css"
-  <title>UE大屏项目</title>
+    />
-  <script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    "object" != typeof ue || "object" != typeof ue.interface ? ("object" != typeof ue && (ue = {}), ue.interface = {},
+    <title>UE大屏项目</title>
-      ue.interface.broadcast = function (e, t) {
+    <script>
-        if ("string" == typeof e) {
+      ("object" != typeof ue || "object" != typeof ue.interface
-          var o = [e, ""];
+        ? ("object" != typeof ue && (ue = {}),
-          void 0 !== t && (o[1] = t);
+          (ue.interface = {}),
-          var n = encodeURIComponent(JSON.stringify(o));
+          (ue.interface.broadcast = function (e, t) {
-          "object" == typeof history && "function" == typeof history.pushState ? (history.pushState({},
+            if ("string" == typeof e) {
-            "", "#" + n), history.pushState({},
+              var o = [e, ""];
-              "", "#" + encodeURIComponent("[]"))) : (document.location.hash = n, document.location.hash = encodeURIComponent("[]"))
+              void 0 !== t && (o[1] = t);
-        }
+              var n = encodeURIComponent(JSON.stringify(o));
-      }) : function (e) {
+              "object" == typeof history &&
-        ue.interface = {},
+              "function" == typeof history.pushState
-          ue.interface.broadcast = function (t, o) {
+                ? (history.pushState({}, "", "#" + n),
-            "string" == typeof t && (void 0 !== o ? e.broadcast(t, JSON.stringify(o)) : e.broadcast(t, ""))
+                  history.pushState({}, "", "#" + encodeURIComponent("[]")))
-          }
+                : ((document.location.hash = n),
-      }(ue.interface),
+                  (document.location.hash = encodeURIComponent("[]")));
-      (window.ue5 = ue.interface.broadcast);
+            }
+          }))
+        : (function (e) {
-  </script>
+            ((ue.interface = {}),
-  <!-- <script>
+              (ue.interface.broadcast = function (t, o) {
+                "string" == typeof t &&
+                  (void 0 !== o
+                    ? e.broadcast(t, JSON.stringify(o))
+                    : e.broadcast(t, ""));
+              }));
+          })(ue.interface),
+        (window.ue5 = ue.interface.broadcast));
+    </script>
+    <!-- <script>
    ue.interface.receiveLoginInfo = function (data) {
    window.receiveLoginInfo(data);
    };
 </script> -->
-</head>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+  <style>
+    body,
+    #app {
+      /* background-color: transparent !important; */
+    }
+  </style>
+  <script>
+    function setRem() {
+      const baseSize = 16; // 基准
+      const designWidth = 1920; // 设计稿宽度（你项目很可能是1920大屏）
-<body>
+      const scale = document.documentElement.clientWidth / designWidth;
-  <div id="app"></div>
+      document.documentElement.style.fontSize = baseSize * scale + "px";
-  <script type="module" src="/src/main.js"></script>
+      document.documentElement.style.setProperty("--scale", scale);
-</body>
+      window._myscale = scale
-<style>
+    }
-  body,
-  #app {
-    background-color: transparent !important;
-  }
-</style>
-</html>
+    setRem();
\ No newline at end of file
+    window.addEventListener("resize", setRem);
+  </script>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
        "jsencrypt": "3.3.2",
        "nprogress": "0.2.0",
        "pinia": "2.1.7",
+        "postcss-pxtorem": "^6.1.0",
        "qs": "^6.13.1",
        "vue": "^3.5.13",
        "vue-element-plus-x": "^1.3.98",
@@ -7261,6 +7262,14 @@
        "postcss": ">4 <9"
      }
    },
+    "node_modules/postcss-pxtorem": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmmirror.com/postcss-pxtorem/-/postcss-pxtorem-6.1.0.tgz",
+      "integrity": "sha512-ROODSNci9ADal3zUcPHOF/K83TiCgNSPXQFSbwyPHNV8ioHIE4SaC+FPOufd8jsr5jV2uIz29v1Uqy1c4ov42g==",
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
    "node_modules/posthtml": {
      "version": "0.9.2",
      "resolved": "https://registry.npmmirror.com/posthtml/-/posthtml-0.9.2.tgz",

--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
    "jsencrypt": "3.3.2",
    "nprogress": "0.2.0",
    "pinia": "2.1.7",
+    "postcss-pxtorem": "^6.1.0",
    "qs": "^6.13.1",
    "vue": "^3.5.13",
    "vue-element-plus-x": "^1.3.98",

--- a/src/pages/lefts/index.vue
+++ b/src/pages/lefts/index.vue
--- a/src/utils/rem.js
+++ b/src/utils/rem.js
+//pxtorem
+// export function px2rem2px(val, base = 16) {
+//   if (typeof val === 'number') return (val / base) * window._myscale
+// //    + 'rem'
+//   if (typeof val === 'string' && val.includes('px')) {
+//     return parseFloat(val) / base * window._myscale
+//   }
+//   return val
+// }
+export function pxScale(val) {
+  let log = val;
+  if (typeof val === "number") {
+    log = val * window._myscale;
+  }
+  if (typeof val === "string" && val.includes("px")) {
+    log = parseFloat(val) * window._myscale;
+  }
+  console.log("log 数据", log);
+  return log;
+}