feats

src/router/router.config.js

@@ -29,6 +29,12 @@ export const constantRouterMap = [
         name: 'Office',
         component: () => import('@/views/office'),
         meta: { title: '办公', keepAlive: false }
+      },
+      {
+        path: '/project',
+        name: 'Project',
+        component: () => import('@/views/projectIndex'),
+        meta: { title: '办公', keepAlive: false }
       }
     ]
   }

src/views/components/IndexImage.vue

@@ -50,7 +50,7 @@ export default {
 
       this.handerStyle = {
         top: `${offsetTop + 1800 * heightRatio}px`,
-        left: `${988 * widthRatio}px`
+        left: `${1020 * widthRatio}px`
       }
 
       this.showSwiper = true

src/views/projectIndex.vue

@@ -0,0 +1,88 @@
+<!-- home -->
+<template>
+  <div class="apartment">
+    <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>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+      handleStyle: {},
+      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: {
+    handleImageLoad(e) {
+      const { height } = e.target
+
+      this.handleStyle = {
+        top: `${height - 400}px`
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.apartment {
+  height: 100%;
+  position: relative;
+  .index-pos-hander {
+    position: absolute;
+    z-index: 200;
+    width: 81px;
+    height: 56px;
+    animation: slidefade 2s infinite;
+    right:0;
+    bottom: 0;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>