diff --git a/src/base/Temperature/Temperature.vue b/src/base/Temperature/Temperature.vue
index 14497d1..641d2bc 100644
--- a/src/base/Temperature/Temperature.vue
+++ b/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>
diff --git a/src/base/Time/Time.vue b/src/base/Time/Time.vue
index cb2fa72..abfea89 100644
--- a/src/base/Time/Time.vue
+++ b/src/base/Time/Time.vue
@@ -1,7 +1,11 @@
 <template>
-  <div class="time">{{ currentTime }}</div>
-  <div class="month">{{ formatDay(dateRef) }}</div>
-  <div class="week">{{ whichWeekRef }}</div>
+  <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,54 +18,37 @@ const { dateRef, whichWeekRef } = useDay()
 </script>
 
 <style lang="scss" scoped>
-.time {
-  position: fixed;
-  top: 48px;
-  left: 659px;
-  font-family: 'Montserrat';
-  font-style: normal;
-  font-weight: 700;
-  font-size: 36px;
-  line-height: 44px;
-  color: var(--time-timeColor);
-  z-index: 11;
-}
-.month {
-  position: fixed;
-  top: 54px;
-  left: 783px;
-  font-family: 'Montserrat';
-  font-style: normal;
-  font-weight: 700;
-  font-size: 13px;
-  line-height: 16px;
-  z-index: 11;
-  color: var(--time-monthColor);
-}
-.week {
-  position: fixed;
-  top: 70px;
-  left: 783px;
-  font-family: 'Montserrat';
-  font-style: normal;
-  font-weight: 700;
-  font-size: 13px;
-  line-height: 16px;
-  color: var(--time-weekColor);
-  z-index: 11;
-}
-@media (min-aspect-ratio: 1/1) {
+.time-wrapper {
+  display: flex;
+  margin-right: 42px;
+  align-items: center;
   .time {
-    top: 32px;
-    left: 1499px;
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 36px;
+    line-height: 44px;
+    color: var(--time-timeColor);
+    z-index: 11;
+    margin-right: 16px;
   }
   .month {
-    top: 38px;
-    left: 1623px;
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 13px;
+    line-height: 16px;
+    z-index: 11;
+    color: var(--time-monthColor);
   }
   .week {
-    top: 54px;
-    left: 1623px;
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 13px;
+    line-height: 16px;
+    color: var(--time-weekColor);
+    z-index: 11;
   }
 }
 </style>
diff --git a/src/components/PublicComponent/PublicComponent.vue b/src/components/PublicComponent/PublicComponent.vue
index 66793b9..7aa5a44 100644
--- a/src/components/PublicComponent/PublicComponent.vue
+++ b/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'))