feats

src/views/apartment.vue

   position: relative;
 
   .apartment-modal {
-    position: absolute;
-    width: 100vw;
-    height: 100vh;
-    bottom: 0;
-    left: 0;
+    // position: absolute;
+    // width: 100vw;
+    // height: 100vh;
+    // bottom: 0;
+    // left: 0;
   }
 
   .apartment-navi {

src/views/components/ProjectSwiper.vue

+<template>
+  <swiper>
+    <swiper-slide v-for="(item, index) in list" :key="item.image" @click.native="$emit('clickItem', index)">
+        <pure-image :bg-image="item.image"></pure-image>
+    </swiper-slide>
+  </swiper>
+</template>
+
+<script>
+export default {
+  name: 'ProjectSwiper',
+  components: {
+    PureImage: () => import('./PureImage.vue')
+  },
+  data() {
+    return {
+      list: [
+        {
+          image: require('@/assets/perjectImages/1.png')
+        },
+        {
+          image: require('@/assets/perjectImages/2.png')
+        },
+        {
+          image: require('@/assets/perjectImages/3.png')
+        },
+        {
+          image: require('@/assets/perjectImages/4.png')
+        },
+        {
+          image: require('@/assets/perjectImages/5.png')
+        },
+        {
+          image: require('@/assets/perjectImages/6.png')
+        },
+        {
+          image: require('@/assets/perjectImages/7.png')
+        },
+        {
+          image: require('@/assets/perjectImages/8.png')
+        }
+      ]
+    }
+  }
+}
+</script>

src/views/projectIndex.vue

 <!-- home -->
 <template>
-  <div class="apartment">
+  <div class="project-index">
     <img src="@/assets/perjectImages/langbgm.jpg" width="100%" class="bgiclass" @load="handleImageLoad"/>
     <div class="index-pos-hander" :style="handleStyle">
         <img :src="require('@/assets/perjectImages/swiperButton.png')" alt="">
       </div>
-    <swiper>
-      <swiper-slide v-for="item in houseList" :key="item.image">
-        <pure-image :bg-color="item.color" :bg-image="item.image"></pure-image>
-      </swiper-slide>
-    </swiper>
+    <div class="index-project-swiper" :style="swiperStyle" ref="swiperRef">
+      <project-swiper v-if="swiperShow" @clickItem="handleShow"></project-swiper>
+    </div>
+    <div v-for="(item, index) in list" :key="item.image">
+      <yz-modal :visible="visible[index]" class="project-modal" @touchmove.native="handleMove">
+        <div class="modal-inner">
+          <pure-image :bg-image="item.image"></pure-image>
+          <div class="back-sign" @click="cancelShow(index)">
+            <img :src="item.backSign" alt="">
+          </div>
+        </div>
+      </yz-modal>
+    </div>
   </div>
 </template>
 
 <script>
 
+const backSignImg = require('@/assets/perjectImages/backButton.png')
+const backSignImg2 = require('@/assets/perjectImages/backButton-2.png')
+
 export default {
+  components: {
+    PureImage: () => import('./components/PureImage.vue'),
+    ProjectSwiper: () => import('./components/ProjectSwiper.vue')
+  },
   data() {
     return {
       handleStyle: {},
-      houseList: [
+      swiperStyle: {},
+      swiperShow: false,
+      visible: Array(8).fill(false),
+      list: [
         {
-          image: require('@/assets/images/apartment/7-1.jpg'),
-          color: '#f0f0f0'
+          image: require('@/assets/perjectImages/1-1.jpg'),
+          backSign: backSignImg
         },
         {
-          image: require('@/assets/images/apartment/7-2.jpg'),
-          color: '#f0f0f0'
+          image: require('@/assets/perjectImages/2-1.jpg'),
+          backSign: backSignImg2
         },
         {
-          image: require('@/assets/images/apartment/7-3.jpg'),
-          color: '#f0f0f0'
+          image: require('@/assets/perjectImages/3-1.jpg'),
+          backSign: backSignImg
         },
         {
-          image: require('@/assets/images/apartment/7-4.jpg'),
-          color: '#f0f0f0'
+          image: require('@/assets/perjectImages/4-1.jpg'),
+          backSign: backSignImg
         },
         {
-          image: require('@/assets/images/apartment/7-5.jpg'),
-          color: '#f0f0f0'
+          image: require('@/assets/perjectImages/5-1.jpg'),
+          backSign: backSignImg2
         },
         {
-          image: require('@/assets/images/apartment/7-6.jpg'),
-          color: '#f0f0f0'
+          image: require('@/assets/perjectImages/6-1.jpg'),
+          backSign: backSignImg
         },
         {
-          image: require('@/assets/images/apartment/7-7.jpg'),
-          color: '#f0f0f0'
+          image: require('@/assets/perjectImages/7-1.jpg'),
+          backSign: backSignImg
         },
         {
-          image: require('@/assets/images/apartment/7-8.jpg'),
-          color: '#f0f0f0'
+          image: require('@/assets/perjectImages/8-1.jpg'),
+          backSign: backSignImg
         }
       ]
     }
   },
+  mounted() {
+    this.$nextTick(() => {
+      const { offsetWidth } = this.$refs.swiperRef
+      this.swiperStyle = {
+        height: `${offsetWidth * 0.6667}px`
+      }
+      this.swiperShow = true
+    })
+  },
   methods: {
-    handleImageLoad(e) {
-      const { height } = e.target
+    handleImageLoad() {
+      const { scrollHeight } = this.$el
 
       this.handleStyle = {
-        top: `${height - 400}px`
+        top: `${scrollHeight - 400}px`
       }
+    },
+    handleShow(index) {
+      this.$set(this.visible, index, true)
+    },
+    cancelShow(index) {
+      this.$set(this.visible, index, false)
+    },
+    handleMove(e) {
+      console.log(e)
+      e.preventDefault()
+      e.stopPropagation()
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.apartment {
-  height: 100%;
+.project-index {
+  background: #f0f0f0;
   position: relative;
+
   .index-pos-hander {
     position: absolute;
     z-index: 200;
       height: 100%;
     }
   }
+
+  .index-project-swiper {
+    position: relative;
+    box-sizing: border-box;
+    margin: 0 15px;
+    width: calc(100vw - 30px);
+  }
+
+  .project-modal {
+    overscroll-behavior: contain
+  }
+
+  .modal-inner {
+    position: relative;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+
+    .back-sign {
+      position: absolute;
+      z-index: 500;
+      right: 10px;
+      bottom: -24px;
+      width: 96px;
+      height: 88px;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
 }
 </style>