From aa9a6d414c98470785cef898dba924f16babae71 Mon Sep 17 00:00:00 2001
From: jiannibang <jiannibang@gmail.com>
Date: Fri, 23 Dec 2022 10:02:33 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=A8=AA=E6=9D=BF=E5=AF=BC=E8=A7=88?=
 =?UTF-8?q?=E6=89=80=E6=9C=89=E6=A5=BC=E5=B1=82=E9=9D=A2=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Guide/Guide.vue | 194 +++++++++++++++-----------------------
 1 file changed, 74 insertions(+), 120 deletions(-)

diff --git a/src/views/Guide/Guide.vue b/src/views/Guide/Guide.vue
index 494900c..0d75cb3 100644
--- a/src/views/Guide/Guide.vue
+++ b/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="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 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>
-      </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="facs">
-                  <div class="fac" v-for="fac of facMap[item.floorOrder]" :key="fac.type">
-                    <img :src="fac.imgUrl" alt="" />
-                    {{ fac.title }}
-                  </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>
+        </div>
+      </ScrollView>
     </Teleport>
 
     <Teleport to="body">
@@ -245,116 +239,76 @@ watch(
 </script>
 
 <style lang="scss" scoped>
-.allFloors {
+.floors-list {
   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;
+  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 {
-      .left {
-        position: relative;
-        color: rgba(0, 0, 0, 0.8);
-        background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, #ffffff 100%);
-        &::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;
-        }
-      }
-      .right {
-        background: #fff;
-      }
+      background: #fff;
     }
-    .left {
-      flex: 0 0 150px;
-      font-family: 'Montserrat';
-      font-style: normal;
-      font-weight: 700;
-      font-size: 28px;
-      line-height: 96%;
 
+    border-bottom: 1px solid #fff;
+    .format {
+      flex: 1;
+      font-weight: 700;
+      font-size: 20px;
+      line-height: 23px;
       display: flex;
       align-items: center;
-      text-align: center;
-      justify-content: center;
-
-      /* W/100% */
-
-      color: #ffffff;
+      color: rgba(0, 0, 0, 0.8);
+      justify-content: flex-end;
+      text-align: right;
     }
-    .right {
-      flex: 1;
+    .facs {
+      flex: 0;
       display: flex;
-      padding: 0 68px;
-      border-bottom: 1px solid #fff;
-      .format {
-        flex: 1;
-        font-weight: 700;
-        font-size: 20px;
-        line-height: 23px;
+      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;
-        color: rgba(0, 0, 0, 0.8);
       }
-      .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;
-        }
+      .fac + .fac {
+        margin-left: 16px;
       }
     }
   }
-}
-.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;