diff --git a/src/views/enterpriseLarge/digitalizationScreen/components/header.vue b/src/views/enterpriseLarge/digitalizationScreen/components/header.vue
index 56c3916..fe3f97e 100644
--- a/src/views/enterpriseLarge/digitalizationScreen/components/header.vue
+++ b/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 }"
>
{{ item.weather }}{{ item.tempMin }}°/{{ item.tempMax }}°
@@ -39,7 +39,7 @@

-
管理系统
+
管理系统
@@ -89,7 +89,7 @@ const emit = defineEmits(['changePage']);
const safetyDay = ref
(0);
const weatherList = ref([]);
const timer = ref(0);
-const offsetY = ref(0);
+const offsetY = ref(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;
}
diff --git a/src/views/largeScreen/components/header.vue b/src/views/largeScreen/components/header.vue
index 02848cf..fc782ac 100644
--- a/src/views/largeScreen/components/header.vue
+++ b/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 }"
>
{{ item.weather }}{{ item.tempMin }}°/{{ item.tempMax }}°
@@ -79,7 +79,7 @@ const userStore = useUserStoreHook();
const currentProject = computed(() => userStore.selectedProject);
// 天气轮播相关变量
-const weatherList = ref([]);
+const weatherList = ref([]);
const offsetY = ref(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;
}
diff --git a/src/views/projectLarge/ProjectScreen/components/header.vue b/src/views/projectLarge/ProjectScreen/components/header.vue
index a1e3eb2..b891b0d 100644
--- a/src/views/projectLarge/ProjectScreen/components/header.vue
+++ b/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 }"
>
{{ item.weather }}{{ item.tempMin }}°/{{ item.tempMax }}°
@@ -39,7 +39,7 @@

-
管理系统
+
管理系统
@@ -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;
}