调整显示样式

src/system/IOT/controlPanel/model/06/modules/controlPanel.vue

@@ -393,6 +393,7 @@ import {useRouter} from 'vue-router'
 
 let router = useRouter()
 let detailData = inject('detail')
+console.log(detailData,'detailData');
 let params = ref(detailData.value.params)
 let form = ref(detailData.value.paramvalues)
 let cmdForm = ref(detailData.value.paramcmdvalues)

src/system/IOT/controlPanel/modules/dataBlock.vue

@@ -17,7 +17,7 @@
         class="content"
         v-if="!Object.keys($slots).filter((item) => item != 'handle').length"
       >
-        <div class="item" v-for="(item, index) in data">
+        <div class="item" v-for="item in data" :key="item.title">
           <span class="item-title" v-if="item.title">{{ item.title }}</span>
           <div class="value">
             <span :style="[{ fontSize: item.fontSize }]">{{ item.value }}</span>
@@ -34,9 +34,36 @@
 </template>
 
 <script setup>
-import { ref, defineProps, defineEmits } from "vue";
+import { ref, defineProps, defineEmits, onMounted } from "vue";
+
 let emit = defineEmits([]);
 let props = defineProps(["title", "data", "top", "left"]);
+
+// 动态调整根字体大小
+onMounted(() => {
+  const setRootFontSize = () => {
+    const baseSize = 18; // 增大基础字体大小
+    const screenWidth = document.documentElement.clientWidth;
+
+    // 根据屏幕宽度调整缩放比例
+    let scale;
+    if (screenWidth <= 1280) {
+      scale = screenWidth / 1280; // 以1280px为基准
+    } else if (screenWidth > 1280 && screenWidth <= 1920) {
+      scale = screenWidth / 1920; // 以1920px为基准
+    } else if (screenWidth > 1920 && screenWidth <= 2560) {
+      scale = screenWidth / 2560; // 以2560px为基准
+    } else {
+      scale = screenWidth / 3840; // 以3840px为基准
+    }
+
+    document.documentElement.style.fontSize =
+      baseSize * Math.min(scale, 1.5) + "px"; // 限制最大缩放
+  };
+
+  setRootFontSize();
+  window.addEventListener("resize", setRootFontSize);
+});
 </script>
 
 <style scoped>
@@ -45,32 +72,32 @@ let props = defineProps(["title", "data", "top", "left"]);
 }
 .data-block {
   background: rgba(0, 0, 0, 0.25);
-  width: 9.524vw;
+  width: 9.524rem; /* 使用 rem 替代 vw */
   color: #ffffff;
 }
 
 .header {
 }
 .header .title {
-  background: linear-gradient(-60deg, transparent 1.488vw, rgba(255, 164, 6));
-  padding: 0.119vw 0.476vw 0.119vw 0.476vw;
-  margin-bottom: 0.179vw;
+  background: linear-gradient(-60deg, transparent 1.488rem, rgba(255, 164, 6));
+  padding: 0.119rem 0.476rem;
+  margin-bottom: 0.179rem;
   position: relative;
-  font-size: 0.595vw;
+  font-size: 0.595rem;
 }
 .content {
-  padding: 0 0.298vw 0.298vw 0.298vw;
+  padding: 0 0.298rem 0.298rem 0.298rem;
 }
 .content .item {
 }
 .content .item .item-title {
-  font-size: 0.595vw;
+  font-size: 0.595rem;
 }
 .content .item .value {
   display: flex;
   justify-content: space-between;
-  border-bottom: 0.060vw solid rgba(255, 255, 255, 0.1);
-  font-size: 0.952vw;
+  border-bottom: 0.06rem solid rgba(255, 255, 255, 0.1);
+  font-size: 0.952rem;
 }
 .content .item:last-child {
   border: none;