imag

src/views/office.vue

@@ -11,6 +11,18 @@
         </div>
       </yz-modal>
     </div>
+    <yz-modal :visible="visible[2]" class="apartment-modal">
+      <swiper-image :list="featureList"></swiper-image>
+      <div class="back-sign" @click="cancelShow(2)">
+        <img :src="backSignImg" alt />
+      </div>
+    </yz-modal>
+    <yz-modal :visible="visible[3]" class="apartment-modal">
+      <swiper-image :list="houseList"></swiper-image>
+      <div class="back-sign" @click="cancelShow(3)">
+        <img :src="backSignImg" alt />
+      </div>
+    </yz-modal>
     <div class="back-sign index-back" @click="handleGotoIndex(index)">
       <img :src="backSignImg" alt />
     </div>
@@ -23,7 +35,7 @@ const backSignImg2 = require('@/assets/images/apartment/backSign-2.png')
 export default {
   components: {
     PureImage: () => import('./components/PureImage.vue'),
-    // SwiperImage: () => import('./components/SwiperImage.vue'),
+    SwiperImage: () => import('./components/SwiperImage.vue'),
     // ApartmentNavi: () => import('./components/ApartmentNavi.vue'),
     OfficeImage: () => import('./components/OfficeImage.vue')
   },
@@ -31,7 +43,7 @@ export default {
     return {
       backSignImg,
       backSignImg2,
-      visible: Array(6).fill(false),
+      visible: Array(5).fill(false),
       list: [
         {
           image: require('@/assets/office/2-1.png'),
@@ -49,47 +61,51 @@ export default {
           backSign: backSignImg
         },
         {
-          image: require('@/assets/office/6-1.png'),
+          image: require('@/assets/office/5-1.png'),
+
           color: '#f0f0f0',
           backSign: backSignImg
         },
         {
-          image: require('@/assets/office/5-1.png'),
+          image: require('@/assets/office/6-1.png'),
+
           color: '#f0f0f0',
           backSign: backSignImg
         }
       ],
       houseList: [
         {
-          image: require('@/assets/images/apartment/7-1.jpg'),
+          image: require('@/assets/office/5-1.png'),
           color: '#f0f0f0'
         },
         {
-          image: require('@/assets/images/apartment/7-2.jpg'),
+          image: require('@/assets/office/5-2.png'),
           color: '#f0f0f0'
         },
         {
-          image: require('@/assets/images/apartment/7-3.jpg'),
+          image: require('@/assets/office/5-3.png'),
           color: '#f0f0f0'
         },
         {
-          image: require('@/assets/images/apartment/7-4.jpg'),
+          image: require('@/assets/office/5-4.png'),
           color: '#f0f0f0'
         },
         {
-          image: require('@/assets/images/apartment/7-5.jpg'),
+          image: require('@/assets/office/5-5.png'),
           color: '#f0f0f0'
-        },
+        }
+      ],
+      featureList: [
         {
-          image: require('@/assets/images/apartment/7-6.jpg'),
+          image: require('@/assets/office/4-1.png'),
           color: '#f0f0f0'
         },
         {
-          image: require('@/assets/images/apartment/7-7.jpg'),
+          image: require('@/assets/office/4-2.png'),
           color: '#f0f0f0'
         },
         {
-          image: require('@/assets/images/apartment/7-8.jpg'),
+          image: require('@/assets/office/4-3.png'),
           color: '#f0f0f0'
         }
       ]