1

src/components/PanoList.vue

@@ -30,7 +30,7 @@
       >
         <div class="tab-wrap">
           <button
-            v-for="(catalogLevel1, index) in catalogTopology"
+            v-for="(catalogLevel1, index) in dipaiSceneGroupList"
             :key="catalogLevel1.id"
             :class="{active: index === secondLineActiveIdx}"
             @click="onClickSecondLineBtn(index)"
@@ -50,6 +50,22 @@
         </button>
       </div>
     </menu>
+    <div class="scene-list-wrap">
+      <div class="scene-list">
+        <div
+          v-for="(scene) in sceneList"
+          :key="scene.id"
+          class="scene"
+        >
+          <img
+            :src="scene.icon"
+            alt=""
+            draggable="false"
+          >
+          <div>{{ scene.sceneTitle }}</div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -76,7 +92,14 @@ export default {
       'catalogTopology',
     ]),
     dipaiSceneGroupList() {
-      return []
+      return this.catalogTopology.slice(1, this.catalogTopology.length)
+    },
+    sceneList() {
+      if (this.firstLineActiveIdx === 0) {
+        return this.catalogTopology[0].children[0].children
+      } else {
+        return this.catalogTopology[this.secondLineActiveIdx + 1].children[0].children
+      }
     }
   },
   methods: {
@@ -85,6 +108,7 @@ export default {
     },
     onClickSecondLineBtn(index) {
       this.secondLineActiveIdx = index
+      this.isSecondLineExpanded = false
     },
     onClickClose: globalUtils.throttle(function() {
       this.$router.go(-1)
@@ -105,7 +129,10 @@ export default {
   width: 100%;
   height: 100%;
   background: #FAF5EB;
+  display: flex;
+  flex-direction: column;
   > menu {
+    flex: 0 0 auto;
     position: relative;
     .first-line {
       height: 7.08rem;
@@ -215,6 +242,46 @@ export default {
       }
     }
   }
-}
+  .scene-list-wrap {
+    flex: 1 0 1px;
+    display: flex;
+    justify-content: center;
+    overflow: auto;
 
+    &::-webkit-scrollbar-track { background: transparent; }
+    .scene-list {
+      width: calc(2 * 20.83rem + 1.88rem);
+      display: flex;
+      align-content: flex-start;
+      gap: 2.5rem 1.88rem;
+      flex-wrap: wrap;
+      padding-top: 2.5rem;
+      padding-bottom: 2.5rem;
+      .scene {
+        flex: 0 0 auto;
+        width: 20.83rem;
+        height: 17.5rem;
+        background: #FFFFFF;
+        box-shadow: 0rem 0rem 0.33rem 0rem rgba(0,0,0,0.15);
+        border-radius: 0.42rem 0.42rem 0.42rem 0.42rem;
+        overflow: hidden;
+        > img {
+          width: 100%;
+          height: 13.33rem;
+          object-fit: cover;
+        }
+        > div {
+          height: 4.17rem;
+          font-size: 1.67rem;
+          color: #666666;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          padding: 0 1em;
+          text-align: center;
+        }
+      }
+    }
+  }
+}
 </style>