feat: 首页横板

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;
 }

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;

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>

src/components/PublicComponent/SearchBar.vue

@@ -18,6 +18,7 @@ const { theme } = storeToRefs(store)
 </script>
 
 <style lang="scss" scoped>
+@media (max-aspect-ratio: 1/1) {
   .row {
     position: fixed;
     top: 260px;
@@ -26,6 +27,9 @@ const { theme } = storeToRefs(store)
     height: 100px;
     display: flex;
     z-index: 100;
+  }
+}
+.row {
   .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>

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'))

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>

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)"
   },

src/views/Index/Index.vue

@@ -15,7 +15,6 @@
         </div>
       </div>
       <div class="content">
-        <div class="r1">
         <div class="guide" @click="goPage({ title: '地图导览', path: '/guide' })">
           <div class="top">
             <div class="title">找店</div>
@@ -52,14 +51,14 @@
             <img class="item" v-for="shop of shopList.slice(0, 16)" :key="shop.id" :src="config.sourceUrl + shop.logoUrl" alt="" />
           </div>
         </div>
-        </div>
-        <div class="r2">
+
+        <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,17 +176,16 @@ getActivityList(3).then(({ data }) => {
     }
   }
   .content {
+    position: relative;
     width: 100%;
     flex: 1;
-    padding: 40px 68px 0 68px;
-    .r1 {
-      display: flex;
-      height: 557px;
+
     .guide {
-        position: relative;
-        flex: 0 0 339px;
+      position: absolute;
       width: 339px;
       height: 557px;
+      left: 68px;
+      top: 40px;
       background: var(--index-guideBackground);
       border: var(--index-guideBorder);
       border-radius: var(--global-radius, 32px);
@@ -271,6 +269,11 @@ getActivityList(3).then(({ data }) => {
     }
     .food,
     .rec {
+      position: absolute;
+      top: 40px;
+      left: 447px;
+      width: 565px;
+      height: 557px;
       h1 {
         font-weight: 900;
         font-size: 56px;
@@ -303,8 +306,6 @@ getActivityList(3).then(({ data }) => {
     .food {
       display: flex;
       flex-direction: column;
-        width: 100%;
-        height: 100%;
       margin-left: 40px;
       background: var(--index-foodBg);
       border-radius: var(--global-radius, 32px);
@@ -325,8 +326,6 @@ getActivityList(3).then(({ data }) => {
     .rec {
       display: flex;
       flex-direction: column;
-        width: 100%;
-        height: 100%;
       margin-left: 40px;
       background: var(--index-recBg);
       border: var(--index-recBorder);
@@ -344,10 +343,13 @@ getActivityList(3).then(({ data }) => {
         padding: 32px 0 0 40px;
       }
     }
-    }
-    .r2 {
+
+    .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>