feat: 横板导览所有楼层面板

src/views/Guide/Guide.vue

@@ -1,38 +1,32 @@
 <template>
   <View>
     <Teleport to="body">
-      <ScrollView :list="currentBuildingFloorsList" class="floors-list animate__fast animate__animated animate__fadeIn">
+      <ScrollView :list="currentBuildingFloorsList" class="floors-list 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
-            @click="handleSelectFloor(index)"
-            :class="{ active: !showAll && floorIdx === index, current: currentFloor.floorCode === item.floorCode }"
-            class="floors-item"
-            v-for="(item, index) of currentBuildingFloorsList"
-            :key="item.floorCode"
-          >
-            {{ item.floor }}
           </div>
-        </div>
-      </ScrollView>
-      <div class="allFloors" animate__fast animate__animated animate__fadeInUp v-if="showAll">
-        <ScrollView>
-          <div>
-            <div class="row" :class="{ current: currentFloor.floorCode === item.floorCode }" v-for="item of currentBuildingFloorsList" :key="item.floorCode">
-              <div class="left">{{ item.floor }}</div>
-              <div class="right">
-                <div class="format">{{ formatMap[item.floor] }}</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>
-        </ScrollView>
         </div>
+      </ScrollView>
     </Teleport>
 
     <Teleport to="body">
@@ -245,63 +239,36 @@ watch(
 </script>
 
 <style lang="scss" scoped>
-.allFloors {
-  position: absolute;
-  top: 408px;
-  left: 0;
-  right: 0;
-  height: 642px;
-  background: left / 150px 100% no-repeat linear-gradient(180deg, #6c7ca6 0%, #879aca 100%), #dee6f6;
-  z-index: 100;
-  .row {
-    height: 76px;
-    display: flex;
-    &.current {
-      .left {
-        position: relative;
-        color: rgba(0, 0, 0, 0.8);
-        background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, #ffffff 100%);
-        &::after {
+.floors-list {
   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;
-        }
-      }
-      .right {
-        background: #fff;
+  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;
   }
-    .left {
-      flex: 0 0 150px;
-      font-family: 'Montserrat';
-      font-style: normal;
-      font-weight: 700;
-      font-size: 28px;
-      line-height: 96%;
-
+  .floor-wrapper {
+    width: 100%;
     display: flex;
-      align-items: center;
-      text-align: center;
-      justify-content: center;
-
-      /* W/100% */
-
-      color: #ffffff;
   }
-    .right {
+  .all-item {
     flex: 1;
     display: flex;
     padding: 0 68px;
+    &.current {
+      background: #fff;
+    }
+
     border-bottom: 1px solid #fff;
     .format {
       flex: 1;
@@ -311,6 +278,8 @@ watch(
       display: flex;
       align-items: center;
       color: rgba(0, 0, 0, 0.8);
+      justify-content: flex-end;
+      text-align: right;
     }
     .facs {
       flex: 0;
@@ -338,23 +307,8 @@ watch(
       }
     }
   }
-  }
-}
-.floors-list {
-  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%);
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
   .floors-item {
+    flex: 0 0 100px;
     width: 100%;
     display: flex;
     align-items: center;