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>
@@ -49,6 +49,7 @@ const props = defineProps({
   config: Object,
   isRow: Boolean,
   isFood: Boolean,
+  isGuide: Boolean,
   isActive: Boolean
 })
 
@@ -67,7 +68,7 @@ const deactivate = () => store.SET_SHOP(null)
   border-radius: 8px;
   overflow: hidden;
   .logo-wrapper {
-    width: 230px;
+    width: 100%;
     height: 160px;
     padding: 20px 55px;
     background-color: #fff;
@@ -108,9 +109,12 @@ const deactivate = () => store.SET_SHOP(null)
     height: 20px;
     margin-left: 7px;
   }
+  &.isGuide {
+    width: 190px;
+  }
   &.isRow {
     display: flex;
-    width: 460px;
+    width: 388px;
     height: 76px;
     padding-left: 12px;
     align-items: center;
@@ -243,7 +247,7 @@ const deactivate = () => store.SET_SHOP(null)
     position: absolute;
     width: 300px;
     height: 300px;
-    left: 391px;
+    right: 105px;
     bottom: 427px;
     background: rgba(255, 255, 255, 0.8);
     box-shadow: 0px 20px 60px rgba(0, 0, 0, 0.2);

src/components/BrandScroll/BrandScroll.vue

@@ -8,6 +8,7 @@
         <TransitionGroup name="zoom" mode="out-in" tag="div" class="group" :class="{ isRow }">
           <ShopItem
             :config="config"
+            :isGuide="$route.path === '/guide' && !isRow"
             :isRow="isRow"
             :isFood="isFood"
             :shop="el"
@@ -81,15 +82,21 @@ watch([scroll, () => props.shop], () => {
 <style lang="scss" scoped>
 .brand-scroll {
   overflow: hidden;
-  height: 1255px;
+  height: calc(100vh - 280px);
   margin-left: 68px;
 
   &.guide {
-    height: 770px;
-  }
-  &.brand {
-    height: 1512px;
+    margin-left: 54px;
+    .group {
+      grid-template-columns: 1fr 1fr;
+      gap: 24px 8px;
+      &.isRow {
+        grid-template-columns: 1fr;
+        gap: 8px;
+      }
+    }
   }
+
   :deep(.bscroll-vertical-scrollbar) {
     top: 102px !important;
     width: 48px !important;
@@ -159,10 +166,4 @@ watch([scroll, () => props.shop], () => {
   margin-bottom: 40px;
   padding-right: 68px;
 }
-.isRow {
-  &.group {
-    grid-template-columns: 1fr 1fr;
-    gap: 8px 24px;
-  }
-}
 </style>

src/components/Map/Map.vue

@@ -27,18 +27,15 @@ const { shop } = storeToRefs(store)
 
 #mapContainer {
   position: absolute;
-  top: 118px;
+  top: 280px;
   left: 0;
-  height: 642px;
-  width: 1080px;
+  height: 800px;
+  width: 1310px;
   z-index: 10;
   overflow: hidden;
   &.billboard {
     pointer-events: none;
   }
-  &.guide {
-    top: 408px;
-  }
 }
 
 #shopInfo {

src/views/Guide/Guide.vue

@@ -1,8 +1,8 @@
 <template>
   <View>
     <Teleport to="body">
-      <ScrollView scroll-x :list="currentBuildingFloorsList" class="floors-list animate__fast animate__animated animate__fadeIn">
-        <div style="display: inline-block; white-space: nowrap">
+      <ScrollView :list="currentBuildingFloorsList" class="floors-list animate__fast animate__animated animate__fadeIn">
+        <div>
           <div class="floors-item all" @click="showAll = true" :class="{ active: showAll }">全部楼层</div>
           <div
             @click="handleSelectFloor(index)"
@@ -342,11 +342,10 @@ watch(
 }
 .floors-list {
   position: absolute;
-  left: 0;
-  right: 0;
-  width: 100vw;
-  top: 1050px;
-  height: 100px;
+  right: 510px;
+  width: 100px;
+  top: 280px;
+  height: calc(100vh - 280px);
   z-index: 60;
   display: block;
   overflow: hidden;
@@ -356,27 +355,21 @@ watch(
     display: none;
   }
   .floors-item {
-    display: inline-flex;
-    width: 122.5px;
+    width: 100%;
+    display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
-    height: 100px;
+    height: 94.44px;
     font-family: 'Montserrat';
     font-style: normal;
     font-weight: 700;
     font-size: 28px;
     line-height: 96%;
-    /* identical to box height, or 27px */
-
     text-align: center;
-
-    /* W/100% */
-
     color: #ffffff;
     transition: all 0.5s;
     &.all {
-      width: 150px;
       font-weight: 700;
       font-size: 18px;
       line-height: 96%;
@@ -408,15 +401,15 @@ watch(
 }
 .shop-list-wrapper {
   position: absolute;
-  width: 1080px;
-  height: 914px;
-  left: 0px;
-  top: 1150px;
+  width: 510px;
+  height: calc(100vh - 280px);
+  right: 0px;
+  bottom: 0;
   background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
   .switch {
     display: flex;
     position: absolute;
-    top: 35px;
+    top: 24px;
     right: 68px;
     .btn {
       display: flex;
@@ -440,9 +433,9 @@ watch(
     }
   }
   .shop-scroll {
-    height: 914px;
+    height: 100%;
     overflow: hidden;
-    margin-left: 170px;
+    margin-left: 54px;
   }
 }
 
@@ -451,15 +444,14 @@ watch(
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  height: 104px;
-  right: 24px;
-  top: 952px;
+  left: 68px;
+  bottom: 40px;
   z-index: 51;
 
   .hands {
     position: fixed;
-    top: 408px;
-    right: 68px;
+    top: 280px;
+    left: 68px;
     width: 246px;
     height: 80px;
     z-index: 51;