diff --git a/src/App.vue b/src/App.vue
index 385a6a1..bb89734 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,8 +13,8 @@ import PublicComponent from '@/components/PublicComponent/PublicComponent.vue'
 body,
 html,
 #app {
-  width: 1080px;
-  height: 1920px;
+  width: 100vw;
+  height: 100vh;
   background-color: var(--global-appBackground);
   overflow: hidden;
 }
diff --git a/src/base/Temperature/Temperature.vue b/src/base/Temperature/Temperature.vue
index 1b0e58b..8d7149a 100644
--- a/src/base/Temperature/Temperature.vue
+++ b/src/base/Temperature/Temperature.vue
@@ -21,6 +21,12 @@ const { weather, icon } = useWeather()
   align-items: center;
   z-index: 11;
 }
+@media (min-aspect-ratio: 1/1) {
+  .Temperature-wrapper {
+    top: 32px;
+  }
+}
+
 .weather-icon {
   color: var(--weather-iconColor);
   font-size: 36px;
diff --git a/src/base/Time/Time.vue b/src/base/Time/Time.vue
index 43e5ee3..cb2fa72 100644
--- a/src/base/Time/Time.vue
+++ b/src/base/Time/Time.vue
@@ -50,4 +50,18 @@ const { dateRef, whichWeekRef } = useDay()
   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>
diff --git a/src/components/PublicComponent/SearchBar.vue b/src/components/PublicComponent/SearchBar.vue
index a0793ab..a3a51cc 100644
--- a/src/components/PublicComponent/SearchBar.vue
+++ b/src/components/PublicComponent/SearchBar.vue
@@ -18,14 +18,18 @@ const { theme } = storeToRefs(store)
 </script>
 
 <style lang="scss" scoped>
+@media (max-aspect-ratio: 1/1) {
+  .row {
+    position: fixed;
+    top: 260px;
+    left: 68px;
+    right: 68px;
+    height: 100px;
+    display: flex;
+    z-index: 100;
+  }
+}
 .row {
-  position: fixed;
-  top: 260px;
-  left: 68px;
-  right: 68px;
-  height: 100px;
-  display: flex;
-  z-index: 100;
   .back {
     width: 130px;
     height: 100px;
@@ -65,4 +69,23 @@ const { theme } = storeToRefs(store)
     }
   }
 }
+@media (min-aspect-ratio: 1/1) {
+  .row {
+    .back {
+      position: fixed;
+      left: 68px;
+      top: 161px;
+      z-index: 100;
+    }
+    .bar {
+      position: fixed;
+      width: 698px;
+      top: 38px;
+      left: 0;
+      right: 0;
+      margin: auto;
+      z-index: 100;
+    }
+  }
+}
 </style>
diff --git a/src/components/Search/Search.vue b/src/components/Search/Search.vue
index 5ed9aae..62da433 100644
--- a/src/components/Search/Search.vue
+++ b/src/components/Search/Search.vue
@@ -58,7 +58,6 @@ import { useFacilityNav } from '@/composables/useFacilityNav'
 import { useStatistics } from '@/composables/useStatistics'
 import Dialog from '@/layouts/Dialog.vue'
 import FacilityItem from '@/base/FacilityItem/FacilityItem.vue'
-import Tabs from '@/components/Tabs/Tabs.vue'
 import SearchResultList from '@/components/SearchResultList/SearchResultList.vue'
 
 const KeyboardByLetter = defineAsyncComponent(() => import('@/components/KeyboardByLetter/KeyboardByLetter.vue'))
diff --git a/src/layouts/View.vue b/src/layouts/View.vue
index 74eda5d..f9c8254 100644
--- a/src/layouts/View.vue
+++ b/src/layouts/View.vue
@@ -42,5 +42,16 @@ defineProps({
       height: 515px;
     }
   }
+  @media (min-aspect-ratio: 1/1) {
+    .bgTop {
+      height: 280px;
+      &.long {
+        height: 280px;
+      }
+      &.mid {
+        height: 280px;
+      }
+    }
+  }
 }
 </style>
diff --git a/src/themes/main/billboardLoc.png b/src/themes/main/billboardLoc.png
new file mode 100644
index 0000000..eb3e38c
Binary files /dev/null and b/src/themes/main/billboardLoc.png differ
diff --git a/src/themes/main/style.json b/src/themes/main/style.json
index 54d9f3b..db3b91c 100644
--- a/src/themes/main/style.json
+++ b/src/themes/main/style.json
@@ -81,7 +81,7 @@
   "billboard": {
     "background": "#dee6f6",
     "arrowRadius": "100px",
-    "legendColor": "rgba(255, 255, 255, 0.6)",
+    "legendColor": "rgba(0, 0, 0, 0.6)",
     "titleColor": "#000000",
     "metaColor": "rgba(0, 0, 0, 0.6)"
   },
diff --git a/src/views/Index/Index.vue b/src/views/Index/Index.vue
index c11adf0..ba78403 100644
--- a/src/views/Index/Index.vue
+++ b/src/views/Index/Index.vue
@@ -15,51 +15,50 @@
         </div>
       </div>
       <div class="content">
-        <div class="r1">
-          <div class="guide" @click="goPage({ title: '地图导览', path: '/guide' })">
-            <div class="top">
-              <div class="title">找店</div>
-              <div class="meta">{{ guideDesc }}</div>
-              <img src="./guideImg.svg" />
-            </div>
-            <div class="meta1">当前位置<img :src="theme.images.loc" /></div>
-            <div class="meta2">{{ bf }}</div>
-            <div class="bottom-right">
-              <QRCodeFromText
-                class="qrcode"
-                :size="80"
-                :text="`${config.mobileNav}?s=${currentFloor.floorOrder}_${currentFloor.location}_屏幕的位置`"
-                v-if="currentFloor"
-              ></QRCodeFromText>
-              扫我导航
-            </div>
+        <div class="guide" @click="goPage({ title: '地图导览', path: '/guide' })">
+          <div class="top">
+            <div class="title">找店</div>
+            <div class="meta">{{ guideDesc }}</div>
+            <img src="./guideImg.svg" />
           </div>
-          <div v-if="showFood" class="food" @click="goPage({ title: '推荐美食', path: '/foods' })">
-            <div class="title">
-              <h1>推荐美食</h1>
-              <h2>此时此刻，美食正在等你</h2>
-            </div>
-            <div class="grid">
-              <img class="item" v-for="shop of foodList" :key="shop.id" :src="config.sourceUrl + shop.logoUrl" alt="" />
-            </div>
+          <div class="meta1">当前位置<img :src="theme.images.loc" /></div>
+          <div class="meta2">{{ bf }}</div>
+          <div class="bottom-right">
+            <QRCodeFromText
+              class="qrcode"
+              :size="80"
+              :text="`${config.mobileNav}?s=${currentFloor.floorOrder}_${currentFloor.location}_屏幕的位置`"
+              v-if="currentFloor"
+            ></QRCodeFromText>
+            扫我导航
           </div>
-          <div v-else class="rec" @click="goPage({ title: '品牌列表', path: '/brand' })">
-            <div class="title" :style="{ backgroundImage: `url(${theme.images.recBg})` }">
-              <h1>推荐品牌</h1>
-              <h2>心动之选，拥抱美好生活</h2>
-            </div>
-            <div class="grid">
-              <img class="item" v-for="shop of shopList.slice(0, 16)" :key="shop.id" :src="config.sourceUrl + shop.logoUrl" alt="" />
-            </div>
+        </div>
+        <div v-if="showFood" class="food" @click="goPage({ title: '推荐美食', path: '/foods' })">
+          <div class="title">
+            <h1>推荐美食</h1>
+            <h2>此时此刻，美食正在等你</h2>
+          </div>
+          <div class="grid">
+            <img class="item" v-for="shop of foodList" :key="shop.id" :src="config.sourceUrl + shop.logoUrl" alt="" />
           </div>
         </div>
-        <div class="r2">
+        <div v-else class="rec" @click="goPage({ title: '品牌列表', path: '/brand' })">
+          <div class="title" :style="{ backgroundImage: `url(${theme.images.recBg})` }">
+            <h1>推荐品牌</h1>
+            <h2>心动之选，拥抱美好生活</h2>
+          </div>
+          <div class="grid">
+            <img class="item" v-for="shop of shopList.slice(0, 16)" :key="shop.id" :src="config.sourceUrl + shop.logoUrl" alt="" />
+          </div>
+        </div>
+
+        <div class="menu">
           <div class="item" v-for="tab of sidebarList" :key="tab.title" @click="goPage(tab)">
             <div class="icon"><img :src="theme.images[tab.moduleName]" /></div>
             <div class="title">{{ switchLanguage(tab, 'title') }}</div>
           </div>
         </div>
-        <div class="r3">
+        <div class="acts">
           <EffectFade :list="activityList ?? []">
             <template v-slot="{ item }">
               <div class="banner-wrapper">
@@ -177,177 +176,180 @@ getActivityList(3).then(({ data }) => {
     }
   }
   .content {
+    position: relative;
     width: 100%;
     flex: 1;
-    padding: 40px 68px 0 68px;
-    .r1 {
-      display: flex;
+
+    .guide {
+      position: absolute;
+      width: 339px;
       height: 557px;
-      .guide {
-        position: relative;
-        flex: 0 0 339px;
-        width: 339px;
-        height: 557px;
-        background: var(--index-guideBackground);
-        border: var(--index-guideBorder);
-        border-radius: var(--global-radius, 32px);
-        overflow: hidden;
-        padding: 460px 0 0 40px;
+      left: 68px;
+      top: 40px;
+      background: var(--index-guideBackground);
+      border: var(--index-guideBorder);
+      border-radius: var(--global-radius, 32px);
+      overflow: hidden;
+      padding: 460px 0 0 40px;
 
-        .top {
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 432px;
-          background: var(--index-guideTopBg);
-          border-radius: var(--global-radius, 32px);
-          padding: 40px;
-          z-index: 1;
-          .title {
-            font-style: normal;
-            font-weight: 900;
-            font-size: 56px;
-            line-height: 66px;
-            color: #ffffff;
-          }
-          .meta {
-            margin-top: 8px;
-            font-style: normal;
-            font-weight: 700;
-            font-size: 16px;
-            line-height: 19px;
-            color: rgba(255, 255, 255, 0.8);
-          }
-          img {
-            margin-top: 40px;
-            width: 259px;
-          }
-        }
-        .bottom-right {
-          position: absolute;
-          width: 108px;
-          height: 156px;
-          right: 0;
-          bottom: 0;
-          background: var(--index-guideQrcodeBg);
-          padding-top: 132px;
-          font-weight: 700;
-          font-size: 14px;
-          line-height: 16px;
-          text-align: center;
-          color: var(--index-guideMetaColor);
-          .qrcode {
-            position: absolute;
-            width: 84px;
-            height: 84px;
-            background: #fff;
-            display: flex;
-            right: 12px;
-            bottom: 29px;
-            justify-content: center;
-            align-items: center;
-          }
-        }
-        .meta1 {
-          display: inline-flex;
-          font-weight: 700;
-          font-size: 20px;
-          line-height: 23px;
-          color: var(--index-guideMetaColor);
-          margin-bottom: 6px;
-          img {
-            width: 20px;
-            height: 20px;
-            margin-left: 4px;
-          }
-        }
-        .meta2 {
-          font-weight: 900;
-          font-size: 32px;
-          line-height: 38px;
-          color: var(--index-guideColor);
-        }
-      }
-      .food,
-      .rec {
-        h1 {
+      .top {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 432px;
+        background: var(--index-guideTopBg);
+        border-radius: var(--global-radius, 32px);
+        padding: 40px;
+        z-index: 1;
+        .title {
+          font-style: normal;
           font-weight: 900;
           font-size: 56px;
           line-height: 66px;
           color: #ffffff;
-          margin-bottom: 8px;
         }
-        h2 {
+        .meta {
+          margin-top: 8px;
+          font-style: normal;
           font-weight: 700;
           font-size: 16px;
           line-height: 19px;
           color: rgba(255, 255, 255, 0.8);
         }
-        .grid {
+        img {
           margin-top: 40px;
-          display: grid;
-          grid-template-columns: 1fr 1fr 1fr 1fr;
-          width: 485px;
-          gap: 15px;
-          .item {
-            width: 110px;
-            height: 110px;
-            background: #ffffff;
-            border-radius: var(--global-radius, 12px);
-            padding: 10px;
-            object-fit: contain;
-          }
+          width: 259px;
         }
       }
-      .food {
-        display: flex;
-        flex-direction: column;
-        width: 100%;
-        height: 100%;
-        margin-left: 40px;
-        background: var(--index-foodBg);
-        border-radius: var(--global-radius, 32px);
-        border: var(--index-foodBorder);
-        align-items: center;
-        overflow: hidden;
-        .title {
-          margin-top: 4px;
-          width: 549px;
-          background: center / cover no-repeat url(./foodBg.png);
-          height: 160px;
-          flex: 0 0 160px;
-          box-shadow: 0px 15px 26px rgba(244, 142, 88, 0.32);
-          border-radius: var(--global-radius, 27px);
-          padding: 32px 0 0 40px;
+      .bottom-right {
+        position: absolute;
+        width: 108px;
+        height: 156px;
+        right: 0;
+        bottom: 0;
+        background: var(--index-guideQrcodeBg);
+        padding-top: 132px;
+        font-weight: 700;
+        font-size: 14px;
+        line-height: 16px;
+        text-align: center;
+        color: var(--index-guideMetaColor);
+        .qrcode {
+          position: absolute;
+          width: 84px;
+          height: 84px;
+          background: #fff;
+          display: flex;
+          right: 12px;
+          bottom: 29px;
+          justify-content: center;
+          align-items: center;
         }
       }
-      .rec {
-        display: flex;
-        flex-direction: column;
-        width: 100%;
-        height: 100%;
-        margin-left: 40px;
-        background: var(--index-recBg);
-        border: var(--index-recBorder);
-        border-radius: var(--global-radius, 32px);
-        align-items: center;
-        overflow: hidden;
-        .title {
-          margin-top: 8px;
-          width: 549px;
-          background: center / cover no-repeat;
-          height: 160px;
-          flex: 0 0 160px;
-          box-shadow: 0px 15px 26px rgba(230, 201, 148, 0.3);
-          border-radius: var(--global-radius, 27px);
-          padding: 32px 0 0 40px;
+      .meta1 {
+        display: inline-flex;
+        font-weight: 700;
+        font-size: 20px;
+        line-height: 23px;
+        color: var(--index-guideMetaColor);
+        margin-bottom: 6px;
+        img {
+          width: 20px;
+          height: 20px;
+          margin-left: 4px;
+        }
+      }
+      .meta2 {
+        font-weight: 900;
+        font-size: 32px;
+        line-height: 38px;
+        color: var(--index-guideColor);
+      }
+    }
+    .food,
+    .rec {
+      position: absolute;
+      top: 40px;
+      left: 447px;
+      width: 565px;
+      height: 557px;
+      h1 {
+        font-weight: 900;
+        font-size: 56px;
+        line-height: 66px;
+        color: #ffffff;
+        margin-bottom: 8px;
+      }
+      h2 {
+        font-weight: 700;
+        font-size: 16px;
+        line-height: 19px;
+        color: rgba(255, 255, 255, 0.8);
+      }
+      .grid {
+        margin-top: 40px;
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr 1fr;
+        width: 485px;
+        gap: 15px;
+        .item {
+          width: 110px;
+          height: 110px;
+          background: #ffffff;
+          border-radius: var(--global-radius, 12px);
+          padding: 10px;
+          object-fit: contain;
         }
       }
     }
-    .r2 {
+    .food {
+      display: flex;
+      flex-direction: column;
+      margin-left: 40px;
+      background: var(--index-foodBg);
+      border-radius: var(--global-radius, 32px);
+      border: var(--index-foodBorder);
+      align-items: center;
+      overflow: hidden;
+      .title {
+        margin-top: 4px;
+        width: 549px;
+        background: center / cover no-repeat url(./foodBg.png);
+        height: 160px;
+        flex: 0 0 160px;
+        box-shadow: 0px 15px 26px rgba(244, 142, 88, 0.32);
+        border-radius: var(--global-radius, 27px);
+        padding: 32px 0 0 40px;
+      }
+    }
+    .rec {
+      display: flex;
+      flex-direction: column;
+      margin-left: 40px;
+      background: var(--index-recBg);
+      border: var(--index-recBorder);
+      border-radius: var(--global-radius, 32px);
+      align-items: center;
+      overflow: hidden;
+      .title {
+        margin-top: 8px;
+        width: 549px;
+        background: center / cover no-repeat;
+        height: 160px;
+        flex: 0 0 160px;
+        box-shadow: 0px 15px 26px rgba(230, 201, 148, 0.3);
+        border-radius: var(--global-radius, 27px);
+        padding: 32px 0 0 40px;
+      }
+    }
+
+    .menu {
+      position: absolute;
+      left: 68px;
+      right: 68px;
+      top: 637px;
       display: flex;
-      margin-top: 40px;
       .item:nth-child(5n + 1) {
         .icon {
           background: var(--menu-indexBg1);
@@ -402,8 +404,11 @@ getActivityList(3).then(({ data }) => {
         margin-left: 24px;
       }
     }
-    .r3 {
-      margin-top: 40px;
+    .acts {
+      position: absolute;
+      left: 68px;
+      right: 68px;
+      bottom: 46px;
       width: 944px;
       height: 531px;
       :deep(.swiper) {
@@ -429,13 +434,13 @@ getActivityList(3).then(({ data }) => {
       }
       .banner-wrapper {
         position: relative;
-        width: 944px;
-        height: 531px;
+        width: 100%;
+        height: 100%;
         border-radius: var(--global-radius, 24px);
         overflow: hidden;
         .banner {
-          width: 944px;
-          height: 531px;
+          width: 100%;
+          height: 100%;
           object-fit: cover;
         }
         .name {
@@ -469,4 +474,50 @@ getActivityList(3).then(({ data }) => {
     }
   }
 }
+@media (min-aspect-ratio: 1/1) {
+  .index-container {
+    .header {
+      height: 280px;
+      flex: 0 0 280px;
+      padding: 157px 0 0 0;
+      .hot-search {
+        .title {
+          text-align: center;
+        }
+        .row {
+          display: flex;
+          justify-content: center;
+        }
+      }
+    }
+    .content {
+      .guide {
+        top: 84px;
+        width: 339px;
+        height: 625px;
+        padding: 528px 0 0 40px;
+        .top {
+          height: 500px;
+        }
+      }
+      .rec,
+      .food {
+        height: 625px;
+        top: 84px;
+      }
+      .menu {
+        left: 1068px;
+        right: 68px;
+        top: 84px;
+      }
+      .acts {
+        top: 267px;
+        left: 1068px;
+        right: 68px;
+        width: 784px;
+        height: 442px;
+      }
+    }
+  }
+}
 </style>