feat: 导览横板样式更新

src/base/ShopItem/ShopItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :id="shop.houseNumber" class="group-item" :class="{ isRow, isFood, isActive }" @click="handleShop">
+  <div :id="shop.houseNumber" class="group-item" :class="{ isRow, isFood, isGuide, isActive }" @click="handleShop">
     <div class="logo-wrapper" :class="{ hasFood: isFood && shop.foodMaterialList.length }">
       <img loading="lazy" :src="config.sourceUrl + shop.logoUrl" alt="" class="shop-logo" />
     </div>
@@ -55,6 +55,7 @@ const props = defineProps({
   config: Object,
   isRow: Boolean,
   isFood: Boolean,
+  isGuide: Boolean,
   isActive: Boolean
 })
 
@@ -73,7 +74,7 @@ const deactivate = () => store.SET_SHOP(null)
   border-radius: var(--global-radius, 8px);
   overflow: hidden;
   .logo-wrapper {
-    width: 230px;
+    width: 100%;
     height: 160px;
     padding: 20px 55px;
     background-color: #fff;
@@ -287,4 +288,30 @@ const deactivate = () => store.SET_SHOP(null)
     }
   }
 }
+@media (min-aspect-ratio: 1/1) {
+  .group-item {
+    &.isGuide {
+      width: 190px;
+      &.isActive {
+        position: relative;
+      }
+    }
+    &.isRow {
+      width: 388px;
+      left: auto;
+      right: 105px;
+      &.isActive {
+        left: auto;
+        position: static;
+      }
+    }
+  }
+  .qrcode-modal {
+    .content {
+      left: auto;
+      right: 112px;
+      bottom: 280px;
+    }
+  }
+}
 </style>

src/components/BrandScroll/BrandScroll.vue

@@ -8,6 +8,7 @@
         <TransitionGroup name="zoom" mode="out-in" tag="div" :class="{ group: true, isRow }">
           <ShopItem
             :config="config"
+            :isGuide="$route.path === '/guide' && !isRow"
             :isRow="isRow"
             :isFood="isFood"
             :shop="el"
@@ -166,6 +167,24 @@ watch([scroll, () => props.shop], () => {
   }
 }
 @media (min-aspect-ratio: 1/1) {
+  .brand-scroll {
+    height: calc(100vh - 280px);
+    &.brand {
+      height: calc(100vh - 280px);
+    }
+    &.guide {
+      height: calc(100vh - 280px);
+      margin-left: 54px;
+      .group {
+        grid-template-columns: 1fr 1fr;
+        gap: 24px 8px;
+        &.isRow {
+          grid-template-columns: 1fr;
+          gap: 8px;
+        }
+      }
+    }
+  }
   .group {
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
     gap: 32px 29px;

src/components/Map/Map.vue

@@ -93,4 +93,14 @@ const { shop } = storeToRefs(store)
   align-items: center;
   user-select: none;
 }
+@media (min-aspect-ratio: 1/1) {
+  #mapContainer {
+    top: 280px;
+    height: 800px;
+    width: 1310px;
+    &.guide {
+      top: 280px;
+    }
+  }
+}
 </style>

src/views/Guide/Guide.vue

@@ -1,7 +1,7 @@
 <template>
   <View>
     <Teleport to="body">
-      <ScrollView scroll-x :list="currentBuildingFloorsList" class="floors-list animate__fast animate__animated animate__fadeIn">
+      <ScrollView v-if="!isH" scroll-x :list="currentBuildingFloorsList" class="floors-list animate__fast animate__animated animate__fadeIn">
         <div style="display: inline-block; white-space: nowrap">
           <div class="floors-item all" @click="showAll = true" :class="{ active: showAll }">全部楼层</div>
           <div
@@ -15,7 +15,7 @@
           </div>
         </div>
       </ScrollView>
-      <div class="allFloors" animate__fast animate__animated animate__fadeInUp v-if="showAll">
+      <div class="allFloors" animate__fast animate__animated animate__fadeInUp v-if="!isH && showAll">
         <ScrollView>
           <div>
             <div class="row" :class="{ current: currentFloor.floorCode === item.floorCode }" v-for="item of currentBuildingFloorsList" :key="item.floorCode">
@@ -34,7 +34,34 @@
         </ScrollView>
       </div>
     </Teleport>
-
+    <Teleport to="body">
+      <ScrollView v-if="isH" :list="currentBuildingFloorsList" class="floors-list-h animate__fast animate__animated animate__fadeIn" :class="{ all: showAll }">
+        <div>
+          <div class="floor-wrapper">
+            <div class="all-item" v-if="showAll"></div>
+            <div class="floors-item all" @click="showAll = true" :class="{ active: showAll }">全部楼层</div>
+          </div>
+          <div class="floor-wrapper" v-for="(item, index) of currentBuildingFloorsList" :key="item.floorCode">
+            <div class="all-item" :class="{ current: currentFloor.floorCode === item.floorCode }" v-if="showAll">
+              <div class="facs">
+                <div class="fac" v-for="fac of facMap[item.floorOrder]" :key="fac.type">
+                  <img :src="fac.imgUrl" alt="" />
+                  {{ fac.title }}
+                </div>
+              </div>
+              <div class="format">{{ formatMap[item.floor] }}</div>
+            </div>
+            <div
+              @click="handleSelectFloor(index)"
+              :class="{ active: !showAll && floorIdx === index, current: currentFloor.floorCode === item.floorCode }"
+              class="floors-item"
+            >
+              {{ item.floor }}
+            </div>
+          </div>
+        </div>
+      </ScrollView>
+    </Teleport>
     <Teleport to="body">
       <div class="control-area">
         <div class="map-control-wrapper animate__fast animate__animated animate__fadeInUp">
@@ -69,6 +96,9 @@ import { hideMapDialog, setShopActive, setShopInactive } from '@/composables/use
 import { getBrandListByFormat, getBrandListByFloor } from '@/http/brand/api'
 import BrandScroll from '@/components/BrandScroll/BrandScroll.vue'
 import ScrollView from '@/base/ScrollView/ScrollView.vue'
+import { useMediaQuery } from '@vueuse/core'
+
+const isH = useMediaQuery('(min-aspect-ratio: 1/1)')
 
 const shopList = ref([])
 const showAll = ref(false)
@@ -402,6 +432,120 @@ watch(
     }
   }
 }
+.floors-list-h {
+  position: absolute;
+  right: 510px;
+  width: 100px;
+  top: 280px;
+  height: calc(100vh - 280px);
+  z-index: 60;
+  display: block;
+  overflow: hidden;
+  background: linear-gradient(113.71deg, #435acd 0%, #749cf3 100%);
+  &.all {
+    width: calc(100vw - 510px);
+    background: right / 100px 100vh no-repeat linear-gradient(113.71deg, #435acd 0%, #749cf3 100%),
+      left / calc(100vw - 510px - 100px) 100vh no-repeat linear-gradient(113.71deg, #dee6f6 0%, #dee6f6 100%);
+  }
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  .floor-wrapper {
+    width: 100%;
+    display: flex;
+  }
+  .all-item {
+    flex: 1;
+    display: flex;
+    padding: 0 68px;
+    &.current {
+      background: #fff;
+    }
+
+    border-bottom: 1px solid #fff;
+    .format {
+      flex: 1;
+      font-weight: 700;
+      font-size: 20px;
+      line-height: 23px;
+      display: flex;
+      align-items: center;
+      color: rgba(0, 0, 0, 0.8);
+      justify-content: flex-end;
+      text-align: right;
+    }
+    .facs {
+      flex: 0;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+
+      .fac {
+        display: flex;
+        flex-direction: column;
+        img {
+          width: 36px;
+          height: 36px;
+          margin-bottom: 8px;
+        }
+        font-weight: 700;
+        font-size: 12px;
+        line-height: 14px;
+        text-align: center;
+        color: rgba(0, 0, 0, 0.6);
+        align-items: center;
+      }
+      .fac + .fac {
+        margin-left: 16px;
+      }
+    }
+  }
+  .floors-item {
+    flex: 0 0 100px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    height: 94.44px;
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 28px;
+    line-height: 96%;
+    text-align: center;
+    color: #ffffff;
+    transition: all 0.5s;
+    &.all {
+      font-weight: 700;
+      font-size: 18px;
+      line-height: 96%;
+      vertical-align: bottom;
+    }
+    &.current {
+      background: rgba(0, 0, 0, 0.1);
+      &::after {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 20px;
+        display: flex;
+        content: '您在本层';
+        background: linear-gradient(99.5deg, #f0b92b 0%, #f9d556 100%);
+        font-weight: 700;
+        font-size: 12px;
+        color: rgba(0, 0, 0, 0.8);
+        align-items: center;
+        justify-content: center;
+      }
+    }
+    &.active {
+      background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, #ffffff 100%);
+      color: rgba(0, 0, 0, 0.8);
+    }
+  }
+}
 .shop-list-wrapper {
   position: absolute;
   width: 1080px;
@@ -473,4 +617,33 @@ watch(
   text-align: center;
   color: rgba(0, 0, 0, 0.6);
 }
+@media (min-aspect-ratio: 1/1) {
+  .shop-list-wrapper {
+    width: 510px;
+    height: calc(100vh - 280px);
+    right: 0px;
+    bottom: 0;
+    left: auto;
+    top: auto;
+    .switch {
+      top: 24px;
+    }
+    .shop-scroll {
+      height: 100%;
+      margin-left: 54px;
+    }
+  }
+  .control-area {
+    left: 68px;
+    bottom: 40px;
+    right: auto;
+    top: auto;
+    height: auto;
+    .hands {
+      top: 280px;
+      left: 68px;
+      right: auto;
+    }
+  }
+}
 </style>