修改大屏样式

src/views/enterpriseLarge/digitalizationScreen/components/header.vue

@@ -23,7 +23,7 @@
               v-for="(item, i) in weatherList"
               :key="i"
               class="weather-item"
-              :style="{ transform: `translateY(-${offsetY}px)`, transition: transition }"
+              :style="{ transform: `translateY(-${offsetY}vw)`, transition: transition }"
             >
               <img :src="`/assets/demo/${item.icon}.png`" alt="" />
               <div>{{ item.weather }}{{ item.tempMin }}°/{{ item.tempMax }}°</div>
@@ -39,7 +39,7 @@
         <!-- 右侧：管理系统图标 + 文字 -->
         <div class="right-section">
           <img src="@/assets/large/setting.png" alt="设置图标" />
-          <span>管理系统</span>
+          <span style="width: 5vw">管理系统</span>
         </div>
         <!-- 分割线 -->
         <div class="divider">
@@ -89,7 +89,7 @@ const emit = defineEmits(['changePage']);
 const safetyDay = ref<number>(0);
 const weatherList = ref<Weather[]>([]);
 const timer = ref<number | null>(0);
-const offsetY = ref<number>(0);
+const offsetY = ref<any>(0);
 const curIndex = ref(0);
 const transition = ref('transform 0.5s ease');
 const pendingPause = ref(false);
@@ -119,7 +119,7 @@ function judgeDayOrNight(sunRise: string, sunSet: string) {
 const setWeatherScroll = () => {
   curIndex.value += 1;
   transition.value = 'transform 0.3s ease';
-  offsetY.value = curIndex.value * 60;
+  offsetY.value = curIndex.value * 2;
 
   if (curIndex.value === weatherList.value.length - 1) {
     setTimeout(() => {
@@ -232,13 +232,13 @@ onUnmounted(() => {
 
 .title > div:first-child {
   /* 第一个子元素的样式 */
-  font-size: 38px;
+  font-size: 2vw;
   letter-spacing: 0.1em;
 }
 
 .title > div:last-child {
   /* 最后一个子元素的样式 */
-  font-size: 14px;
+  font-size: 1vw;
 }
 
 /* 顶部栏容器：Flex 水平布局 + 垂直居中 */
@@ -260,22 +260,25 @@ onUnmounted(() => {
   align-items: center;
 
   .weather-list {
-    height: 60px;
+    height: 2vw;
     overflow: hidden;
 
     .weather-item {
-      height: 60px;
-      line-height: 60px;
+      height: 2vw;
       display: flex;
       align-items: center;
+      justify-content: center;
+      // padding: 10px 0;
+      // box-sizing: border-box;
+      font-size: 0.8vw;
 
       & > div:last-child {
         margin-left: 10px;
       }
 
       img {
-        width: 50px;
-        height: 50px;
+        width: 3vw;
+        height: 3vw;
       }
     }
   }
@@ -305,10 +308,12 @@ onUnmounted(() => {
 
 /* 右侧区域（管理系统）：图标 + 文字水平排列 */
 .right-section {
+  width: 5.5vw;
   display: flex;
   align-items: center;
+  justify-content: center;
   font-family: 'AlimamaShuHeiTi', sans-serif;
-  font-size: 20px;
+  font-size: 1vw;
   cursor: pointer;
 }
 

src/views/largeScreen/components/header.vue

@@ -23,7 +23,7 @@
               v-for="(item, i) in weatherList"
               :key="i"
               class="weather-item"
-              :style="{ transform: `translateY(-${offsetY}px)`, transition: transition }"
+              :style="{ transform: `translateY(-${offsetY}vw)`, transition: transition }"
             >
               <img :src="`/assets/demo/${item.icon}.png`" alt="" />
               <div>{{ item.weather }}{{ item.tempMin }}°/{{ item.tempMax }}°</div>
@@ -79,7 +79,7 @@ const userStore = useUserStoreHook();
 const currentProject = computed(() => userStore.selectedProject);
 
 // 天气轮播相关变量
-const weatherList = ref<WeatherData[]>([]);
+const weatherList = ref<any[]>([]);
 const offsetY = ref<number>(0);
 const curIndex = ref(0);
 const transition = ref('transform 0.5s ease');
@@ -103,7 +103,7 @@ function judgeDayOrNight(sunRise: string, sunSet: string) {
 const setWeatherScroll = () => {
   curIndex.value += 1;
   transition.value = 'transform 0.3s ease';
-  offsetY.value = curIndex.value * 60; // 每个天气项高度60px，需和样式一致
+  offsetY.value = curIndex.value * 2; // 每个天气项高度60px，需和样式一致
 
   // 轮播到最后一项时，无缝衔接回第一项
   if (curIndex.value === weatherList.value.length - 1) {
@@ -160,7 +160,7 @@ const getWeatherData = async () => {
         weatherList.value = res.data;
 
         // 处理每一天的天气（白天/夜晚切换图标和状态）
-        weatherList.value.forEach((item) => {
+        weatherList.value.forEach((item: any) => {
           const isDay = judgeDayOrNight(item.sunRise, item.sunSet);
           item.status = isDay ? item.dayStatus : item.nightStatus;
           item.icon = isDay ? item.dayIcon : item.nightIcon;
@@ -250,13 +250,13 @@ onUnmounted(() => {
 
 .title > div:first-child {
   /* 第一个子元素的样式 */
-  font-size: 38px;
+  font-size: 2vw;
   letter-spacing: 0.1em;
 }
 
 .title > div:last-child {
   /* 最后一个子元素的样式 */
-  font-size: 14px;
+  font-size: 1vw;
 }
 
 /* 顶部栏容器：Flex 水平布局 + 垂直居中 */
@@ -278,22 +278,25 @@ onUnmounted(() => {
   align-items: center;
 
   .weather-list {
-    height: 60px;
+    height: 2vw;
     overflow: hidden;
 
     .weather-item {
-      height: 60px;
-      line-height: 60px;
+      height: 2vw;
       display: flex;
       align-items: center;
+      justify-content: center;
+      // padding: 10px 0;
+      // box-sizing: border-box;
+      font-size: 0.8vw;
 
       & > div:last-child {
         margin-left: 10px;
       }
 
       img {
-        width: 50px;
-        height: 50px;
+        width: 3vw;
+        height: 3vw;
       }
     }
   }
@@ -323,10 +326,12 @@ onUnmounted(() => {
 
 /* 右侧区域（管理系统）：图标 + 文字水平排列 */
 .right-section {
+  width: 5.5vw;
   display: flex;
   align-items: center;
+  justify-content: center;
   font-family: 'AlimamaShuHeiTi', sans-serif;
-  font-size: 20px;
+  font-size: 1vw;
   cursor: pointer;
 }
 

src/views/projectLarge/ProjectScreen/components/header.vue

@@ -23,7 +23,7 @@
               v-for="(item, i) in weatherList"
               :key="i"
               class="weather-item"
-              :style="{ transform: `translateY(-${offsetY}px)`, transition: transition }"
+              :style="{ transform: `translateY(-${offsetY}vw)`, transition: transition }"
             >
               <img :src="`/assets/demo/${item.icon}.png`" alt="" />
               <div>{{ item.weather }}{{ item.tempMin }}°/{{ item.tempMax }}°</div>
@@ -39,7 +39,7 @@
         <!-- 右侧：管理系统图标 + 文字 -->
         <div class="right-section">
           <img src="@/assets/large/setting.png" alt="设置图标" />
-          <span>管理系统</span>
+          <span style="width: 5vw">管理系统</span>
         </div>
         <!-- 分割线 -->
         <div class="divider">
@@ -129,7 +129,7 @@ function judgeDayOrNight(sunRise: string, sunSet: string) {
 const setWeatherScroll = () => {
   curIndex.value += 1;
   transition.value = 'transform 0.3s ease';
-  offsetY.value = curIndex.value * 60;
+  offsetY.value = curIndex.value * 2;
 
   if (curIndex.value === weatherList.value.length - 1) {
     setTimeout(() => {
@@ -242,13 +242,13 @@ onUnmounted(() => {
 
 .title > div:first-child {
   /* 第一个子元素的样式 */
-  font-size: 38px;
+  font-size: 2vw;
   letter-spacing: 0.1em;
 }
 
 .title > div:last-child {
   /* 最后一个子元素的样式 */
-  font-size: 26px;
+  font-size: 1.5vw;
 }
 
 /* 顶部栏容器：Flex 水平布局 + 垂直居中 */
@@ -270,22 +270,23 @@ onUnmounted(() => {
   align-items: center;
 
   .weather-list {
-    height: 60px;
+    height: 2vw;
     overflow: hidden;
 
     .weather-item {
-      height: 60px;
-      line-height: 60px;
+      height: 2vw;
       display: flex;
       align-items: center;
+      justify-content: center;
+      font-size: 0.8vw;
 
       & > div:last-child {
         margin-left: 10px;
       }
 
       img {
-        width: 50px;
-        height: 50px;
+        width: 3vw;
+        height: 3vw;
       }
     }
   }
@@ -315,10 +316,12 @@ onUnmounted(() => {
 
 /* 右侧区域（管理系统）：图标 + 文字水平排列 */
 .right-section {
+  width: 5.5vw;
   display: flex;
   align-items: center;
+  justify-content: center;
   font-family: 'AlimamaShuHeiTi', sans-serif;
-  font-size: 20px;
+  font-size: 1vw;
   cursor: pointer;
 }