Merge branch 'master' of http://git.ycjcjy.com/H5/huaqiaocheng-h5 into master

src/views/office.vue

@@ -1,3 +1,139 @@
+<!-- home -->
 <template>
-  <div></div>
+  <div class="apartment">
+    <pure-image :bg-image="require('@/assets/images/apartment/1.jpg')"></pure-image>
+    <apartment-navi class="apartment-navi" @goto="handleGoto" />
+    <div v-for="(item, index) in list" :key="item.image">
+      <modal v-if="visible[index]" class="apartment-modal">
+        <pure-image :bg-image="item.image"></pure-image>
+        <div class="back-sign" @click="cancelShow(index)">
+          <img :src="require('@/assets/images/apartment/backSign.png')" alt />
+        </div>
+      </modal>
+    </div>
+    <modal v-if="visible[5]" class="apartment-modal">
+      <swiper-image :list="houseList"></swiper-image>
+      <div class="back-sign" @click="cancelShow(5)">
+        <img :src="require('@/assets/images/apartment/backSign.png')" alt />
+      </div>
+    </modal>
+  </div>
 </template>
+
+<script>
+export default {
+  components: {
+    PureImage: () => import('./components/PureImage.vue'),
+    SwiperImage: () => import('./components/SwiperImage.vue'),
+    ApartmentNavi: () => import('./components/ApartmentNavi.vue')
+  },
+  data() {
+    return {
+      visible: Array(6).fill(false),
+      list: [
+        {
+          image: require('@/assets/images/apartment/2-2.jpg'),
+          color: '#f0f0f0'
+        },
+        {
+          image: require('@/assets/images/apartment/3-1.jpg'),
+          color: '#f0f0f0'
+        },
+        {
+          image: require('@/assets/images/apartment/4-1.jpg'),
+          color: '#f0f0f0'
+        },
+        {
+          image: require('@/assets/images/apartment/6-1.jpg'),
+          color: '#f0f0f0'
+        },
+        {
+          image: require('@/assets/images/apartment/5-1.jpg'),
+          color: '#f0f0f0'
+        }
+      ],
+      houseList: [
+        {
+          image: require('@/assets/images/apartment/7-1.jpg'),
+          color: '#f0f0f0'
+        },
+        {
+          image: require('@/assets/images/apartment/7-2.jpg'),
+          color: '#f0f0f0'
+        },
+        {
+          image: require('@/assets/images/apartment/7-3.jpg'),
+          color: '#f0f0f0'
+        },
+        {
+          image: require('@/assets/images/apartment/7-4.jpg'),
+          color: '#f0f0f0'
+        },
+        {
+          image: require('@/assets/images/apartment/7-5.jpg'),
+          color: '#f0f0f0'
+        },
+        {
+          image: require('@/assets/images/apartment/7-6.jpg'),
+          color: '#f0f0f0'
+        },
+        {
+          image: require('@/assets/images/apartment/7-7.jpg'),
+          color: '#f0f0f0'
+        },
+        {
+          image: require('@/assets/images/apartment/7-8.jpg'),
+          color: '#f0f0f0'
+        }
+      ]
+    }
+  },
+
+  methods: {
+    handleGoto(inx) {
+      // inx 是从1开始的
+      this.$set(this.visible, inx - 1, true)
+    },
+    cancelShow(inx) {
+      this.$set(this.visible, inx, false)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.apartment {
+  height: 100%;
+  position: relative;
+
+  .apartment-modal {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    bottom: 0;
+    left: 0;
+  }
+
+  .apartment-navi {
+    position: absolute;
+    width: 100%;
+    height: 40%;
+    bottom: 0;
+    left: 0;
+  }
+
+  .back-sign {
+    position: absolute;
+    z-index: 500;
+    right: 10px;
+    bottom: 20px;
+    width: 96px;
+    height: 78px;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>