feat: 优化时间显示样式

src/base/Temperature/Temperature.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="Temperature-wrapper">
+    <Time />
     <div class="temperature">{{ weather.temperatureLow }}~{{ weather.temperatureHigh }}°</div>
     <i class="iconfont weather-icon" :class="icon.icon"></i>
   </div>
@@ -7,6 +8,7 @@
 
 <script setup>
 import { useWeather } from '@/composables/useWeather'
+import Time from '../Time/Time.vue'
 
 const { weather, icon } = useWeather()
 </script>

src/base/Time/Time.vue

@@ -1,7 +1,11 @@
 <template>
+  <div class="time-wrapper">
     <div class="time">{{ currentTime }}</div>
+    <div>
       <div class="month">{{ formatDay(dateRef) }}</div>
       <div class="week">{{ whichWeekRef }}</div>
+    </div>
+  </div>
 </template>
 
 <script setup>
@@ -14,10 +18,11 @@ const { dateRef, whichWeekRef } = useDay()
 </script>
 
 <style lang="scss" scoped>
-.time {
-  position: fixed;
-  top: 48px;
-  left: 659px;
+.time-wrapper {
+  display: flex;
+  margin-right: 42px;
+  align-items: center;
+  .time {
     font-family: 'Montserrat';
     font-style: normal;
     font-weight: 700;
@@ -25,11 +30,9 @@ const { dateRef, whichWeekRef } = useDay()
     line-height: 44px;
     color: var(--time-timeColor);
     z-index: 11;
-}
-.month {
-  position: fixed;
-  top: 54px;
-  left: 783px;
+    margin-right: 16px;
+  }
+  .month {
     font-family: 'Montserrat';
     font-style: normal;
     font-weight: 700;
@@ -37,11 +40,8 @@ const { dateRef, whichWeekRef } = useDay()
     line-height: 16px;
     z-index: 11;
     color: var(--time-monthColor);
-}
-.week {
-  position: fixed;
-  top: 70px;
-  left: 783px;
+  }
+  .week {
     font-family: 'Montserrat';
     font-style: normal;
     font-weight: 700;
@@ -49,19 +49,6 @@ const { dateRef, whichWeekRef } = useDay()
     line-height: 16px;
     color: var(--time-weekColor);
     z-index: 11;
-}
-@media (min-aspect-ratio: 1/1) {
-  .time {
-    top: 32px;
-    left: 1499px;
-  }
-  .month {
-    top: 38px;
-    left: 1623px;
-  }
-  .week {
-    top: 54px;
-    left: 1623px;
   }
 }
 </style>

src/components/PublicComponent/PublicComponent.vue

@@ -10,7 +10,7 @@
     <Search v-if="showSearch" />
   </Transition>
   <Temperature />
-  <Time></Time>
+
   <SearchBar v-if="path !== '/billboard'" />
   <img v-if="config.projectLogo && config.projectLogo.length" :src="'./static/offline' + config.projectLogo[0]" class="mall-logo" alt="" srcset="" />
   <Tabs />
@@ -28,7 +28,6 @@ import Map from '@/components/Map/Map.vue'
 const AutoBackNotification = defineAsyncComponent(() => import('@/base/AutoBackNotification/AutoBackNotification.vue'))
 const Search = defineAsyncComponent(() => import('@/components/Search/Search.vue'))
 const Temperature = defineAsyncComponent(() => import('@/base/Temperature/Temperature.vue'))
-const Time = defineAsyncComponent(() => import('@/base/Time/Time.vue'))
 const SearchBar = defineAsyncComponent(() => import('./SearchBar.vue'))
 const Tabs = defineAsyncComponent(() => import('./Tabs.vue'))