efats

package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "animate.css": "^4.1.1",
     "core-js": "^3.6.4",
+    "dialog-polyfill": "^0.5.6",
     "lib-flexible": "^0.3.2",
     "lodash": "^4.17.15",
     "regenerator-runtime": "^0.13.5",

src/assets/css/mixin.scss

@@ -34,3 +34,18 @@
   flex-wrap: $fw;
   -webkit-flex-wrap: $fw;
 }
+
+@keyframes slidefade {
+  0% {
+    opacity: 0;
+    transform: translateX(0);
+  }
+  70% {
+    opacity: 1;
+    transform: translateX(-30%);
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(-30%);
+  }
+}

src/components/Modal/index.vue

@@ -0,0 +1,41 @@
+<template>
+  <dialog>
+    <slot></slot>
+  </dialog>
+</template>
+
+<script>
+import dialogPolyfill from 'dialog-polyfill'
+
+export default {
+  name: 'Modal',
+  // props: {
+  //   visible: Boolean
+  // },
+  // watch: {
+  //   visible(val) {
+  //     if (this.$el) {
+  //       if (val) {
+  //         this.$el.showModal()
+  //       } else {
+  //         this.$el.close()
+  //       }
+  //     }
+  //   }
+  // },
+  mounted() {
+    this.$nextTick(() => {
+      dialogPolyfill.registerDialog(this.$el)
+      this.$el.showModal()
+    })
+  }
+}
+</script>
+
+<style lang="scss">
+dialog {
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+</style>

src/components/Swiper/index.vue

@@ -25,6 +25,7 @@ export default {
   mounted() {
     this.$nextTick(() => {
       this.swiper = new Swiper(this.$el, this.options)
+      this.$emit('inited', this.swiper)
     })
   }
 }

src/main.js

@@ -4,6 +4,7 @@ import 'core-js/stable'
 import 'regenerator-runtime/runtime'
 
 import Vue from 'vue'
+import Modal from '@/components/Modal'
 import Swiper from '@/components/Swiper'
 import SwiperSlide from '@/components/SwiperSlide'
 import App from './App.vue'
@@ -24,6 +25,7 @@ import 'lib-flexible/flexible.js'
 import './filters'
 Vue.config.productionTip = false
 
+Vue.component('modal', Modal)
 Vue.component('swiper', Swiper)
 Vue.component('swiper-slide', SwiperSlide)
 

src/views/apartment.vue

@@ -1,25 +1,37 @@
 <!-- home -->
 <template>
-  <swiper>
-    <swiper-slide v-for="item in list" :key="item.image">
-      <pure-image :bg-color="item.color" :bg-image="item.image"></pure-image>
-    </swiper-slide>
-  </swiper>
+  <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')
+    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/1.jpg'),
-          color: '#f0f0f0'
-        },
         {
           image: require('@/assets/images/apartment/2-2.jpg'),
           color: '#f0f0f0'
@@ -33,13 +45,15 @@ export default {
           color: '#f0f0f0'
         },
         {
-          image: require('@/assets/images/apartment/5-1.jpg'),
+          image: require('@/assets/images/apartment/6-1.jpg'),
           color: '#f0f0f0'
         },
         {
-          image: require('@/assets/images/apartment/6-1.jpg'),
+          image: require('@/assets/images/apartment/5-1.jpg'),
           color: '#f0f0f0'
-        },
+        }
+      ],
+      houseList: [
         {
           image: require('@/assets/images/apartment/7-1.jpg'),
           color: '#f0f0f0'
@@ -76,9 +90,51 @@ export default {
     }
   },
 
-  methods: {}
+  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>

src/views/components/ApartmentNavi.vue

@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <div class="flex-box">
+      <div class="flex-box-item">
+        <img :src="require('@/assets/images/apartment/1-2.png')" style="height: 64px; display: block; margin: 0 auto" alt="">
+      </div>
+    </div>
+    <div class="flex-box" style="margin-top: 10px">
+      <div class="flex-box-item">
+        <img :src="require('@/assets/images/apartment/2-1.png')" style="height: 78px" alt="" @click="handleClick(1)">
+      </div>
+      <div class="flex-box-item">
+        <img :src="require('@/assets/images/apartment/3.png')" style="height: 78px" alt="" @click="handleClick(2)">
+      </div>
+      <div class="flex-box-item">
+        <img :src="require('@/assets/images/apartment/4.png')" style="height: 78px" alt="" @click="handleClick(3)">
+      </div>
+    </div>
+    <div class="flex-box" style="margin-top: 20px">
+      <div class="flex-box-item">
+        <img :src="require('@/assets/images/apartment/5.png')" style="height: 78px" alt="" @click="handleClick(4)">
+      </div>
+      <div class="flex-box-item">
+        <img :src="require('@/assets/images/apartment/6.png')" style="height: 78px" alt="" @click="handleClick(5)">
+      </div>
+      <div class="flex-box-item">
+        <img :src="require('@/assets/images/apartment/7.png')" style="height: 78px" alt="" @click="handleClick(6)">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ApartmentNavi',
+  methods: {
+    handleClick(inx) {
+      this.$emit('goto', inx)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.flex-box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 0 20px;
+
+  &-item {
+    flex: 1;
+  }
+}
+</style>

src/views/components/IndexImage.vue

@@ -1,18 +1,18 @@
 <template>
   <div class="index-image">
-    <img :src="image" class="bg-image" @load="loadBg" />
+    <img :src="require('@/assets/images/index.png')" class="bg-image" @load="loadBg" />
     <div class="index-inner-swiper" :style="swiperItemStyle">
       <swiper v-if="showSwiper">
         <swiper-slide class="index-inner-slide">
-          <img :src="btn1" alt="" @click="$router.push({ name: 'Apartment' })">
+          <img :src="require('@/assets/images/按钮-1.png')" alt="" @click="$router.push({ name: 'Apartment' })">
         </swiper-slide>
         <swiper-slide class="index-inner-slide">
-          <img :src="btn2" alt="" @click="$router.push({ name: 'Office' })">
+          <img :src="require('@/assets/images/按钮-2.png')" alt="" @click="$router.push({ name: 'Office' })">
         </swiper-slide>
       </swiper>
     </div>
     <div class="index-pos-hander" :style="handerStyle">
-      <img :src="hander" alt="">
+      <img :src="require('@/assets/images/toLeft.png')" alt="">
     </div>
   </div>
 </template>
@@ -23,10 +23,6 @@ export default {
   name: 'IndexImage',
   data() {
     return {
-      image: require('@/assets/images/index.png'),
-      btn1: require('@/assets/images/按钮-1.png'),
-      btn2: require('@/assets/images/按钮-2.png'),
-      hander: require('@/assets/images/toLeft.png'),
       showSwiper: false,
       swiperItemStyle: {},
       handerStyle: {}
@@ -90,27 +86,12 @@ export default {
     z-index: 200;
     width: 64px;
     height: 56px;
-    animation: leftfade 2s infinite;
+    animation: slidefade 2s infinite;
 
     img {
       width: 100%;
       height: 100%;
     }
   }
-
-  @keyframes leftfade {
-    0% {
-      opacity: 0;
-      transform: translateX(0);
-    }
-    70% {
-      opacity: 1;
-      transform: translateX(-30%);
-    }
-    100% {
-      opacity: 0;
-      transform: translateX(-30%);
-    }
-  }
 }
 </style>

src/views/components/PureImage.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="pure-image" :style="custStyle">
-    <p></p>
+  <div class="pure-image" :style="custStyle" @click="$emit('click')">
+    <div />
   </div>
 </template>
 

src/views/components/SwiperImage.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="swiper-image">
+    <swiper v-if="list.length > 0">
+      <swiper-slide v-for="item in list" :key="item.image">
+        <pure-image :bg-color="item.color" :bg-image="item.image"></pure-image>
+      </swiper-slide>
+    </swiper>
+    <div class="slide-sign">
+      <img :src="require('@/assets/images/apartment/slideSign.png')" alt="">
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SwiperImage',
+  components: {
+    PureImage: () => import('./PureImage.vue')
+  },
+  props: {
+    list: {
+      type: Array,
+      default: () => []
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.swiper-image {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .slide-sign {
+    position: absolute;
+    z-index: 100;
+    right: 20px;
+    top: 50%;
+    width: 64px;
+    height: 56px;
+    animation: slidefade 2s infinite;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>