git

src/components/Modal/index.vue

@@ -1,5 +1,13 @@
 <template>
-  <modal :name="name" :clickToClose="false" :width="width" :height="height" :shiftX="0" :shiftY="0" :scrollable="false">
+  <modal
+    :name="name"
+    :clickToClose="false"
+    :width="width"
+    :height="height"
+    :shiftX="0"
+    :shiftY="0"
+    :scrollable="false"
+  >
     <slot></slot>
   </modal>
 </template>

src/components/Swiper/index.vue

@@ -3,7 +3,6 @@
     <div class="swiper-wrapper">
       <slot></slot>
     </div>
-    <slot name="pagination"></slot>
   </div>
 </template>
 

src/components/SwiperSlide/index.vue

@@ -5,28 +5,7 @@
 </template>
 
 <script>
-export default {
-  name: 'SwiperSlide'
-}
 </script>
 
 <style>
-.swiper-slide {
-  text-align: center;
-  background: #fff;
-
-  /* Center slide text vertically */
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  -webkit-align-items: center;
-  align-items: center;
-}
 </style>

src/views/components/IndexImage.vue

@@ -1,27 +1,17 @@
 <template>
   <div class="index-image">
-    <img :src="require('@/assets/images/index.png')" class="bg-image" @load="loadBg" />
-    <div class="index-inner-swiper" :style="swiperItemStyle">
-      <swiper v-if="showSwiper" :options="swiperOptions">
+    <!-- <img :src="require('@/assets/images/index.png')" class="bg-image" @load="loadBg" /> -->
+    <div class="index-inner-swiper">
+      <swiper :options="swiperOptions">
         <swiper-slide class="index-inner-slide">
-          <img
-            :src="require('@/assets/images/1home.png')"
-            alt
-            @click="$router.push({ name: 'Apartment' })"
-          />
+          <img :src="require('@/assets/images/1home.png')" />
         </swiper-slide>
+
         <swiper-slide class="index-inner-slide">
-          <img
-            :src="require('@/assets/images/2home.png')"
-            alt
-            @click="$router.push({ name: 'Office' })"
-          />
+          <img :src="require('@/assets/images/2home.png')" />
         </swiper-slide>
       </swiper>
     </div>
-    <div class="index-pos-hander" :style="handerStyle">
-      <img :src="require('@/assets/images/toLeft.png')" alt />
-    </div>
   </div>
 </template>
 
@@ -30,37 +20,11 @@ export default {
   name: 'IndexImage',
   data() {
     return {
-      showSwiper: false,
       swiperOptions: {
         autoplay: {
-          delay: 2500,
-          disableOnInteraction: false
+          delay: 100
         }
-      },
-      swiperItemStyle: {},
-      handerStyle: {}
-    }
-  },
-  methods: {
-    loadBg(e) {
-      const { offsetTop, width, height, naturalWidth, naturalHeight } = e.target
-
-      const widthRatio = width / naturalWidth
-      const heightRatio = height / naturalHeight
-
-      this.swiperItemStyle = {
-        width: `${636 * widthRatio}px`, // 636 是图片原始宽度
-        height: `${637 * heightRatio}px`, // 637 是图片原始高度
-        top: `${offsetTop + 1612 * heightRatio}px`,
-        left: `${352 * widthRatio}px`
       }
-
-      this.handerStyle = {
-        top: `${offsetTop + 1800 * heightRatio}px`,
-        left: `${1020 * widthRatio}px`
-      }
-
-      this.showSwiper = true
     }
   }
 }
@@ -68,25 +32,14 @@ export default {
 
 <style lang="scss" scoped>
 .index-image {
-  position: relative;
-  background-color: #1d429d;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  overflow: hidden;
-
-  .bg-image {
-    width: 100%;
-    pointer-events: none;
-    z-index: 100;
-  }
-
   .index-inner-swiper {
-    position: absolute;
+    background-color: rgb(54, 54, 54);
+    width: 200px;
+    height: 200px;
 
     .index-inner-slide {
       background: transparent;
+      background-color: rgb(54, 54, 54);
     }
 
     img {
@@ -94,18 +47,5 @@ export default {
       height: 100%;
     }
   }
-
-  .index-pos-hander {
-    position: absolute;
-    z-index: 200;
-    width: 64px;
-    height: 56px;
-    animation: slidefade 2s infinite;
-
-    img {
-      width: 100%;
-      height: 100%;
-    }
-  }
 }
 </style>

src/views/components/PureImage.vue

@@ -5,24 +5,24 @@
 </template>
 
 <script>
-export default {
-  name: 'PureImage',
-  props: {
-    bgColor: {
-      type: String,
-      default: '#f0f0f0'
-    },
-    bgImage: String
-  },
-  computed: {
-    custStyle() {
-      return {
-        backgroundColor: this.bgColor,
-        backgroundImage: `url('${this.bgImage}')`
-      }
-    }
-  }
-}
+// export default {
+//   name: 'PureImage',
+//   props: {
+//     bgColor: {
+//       type: String,
+//       default: '#f0f0f0'
+//     },
+//     bgImage: String
+//   },
+//   computed: {
+//     custStyle() {
+//       return {
+//         backgroundColor: this.bgColor,
+//         backgroundImage: `url('${this.bgImage}')`
+//       }
+//     }
+//   }
+// }
 </script>
 
 <style lang="scss" scoped>

src/views/index.vue

@@ -3,17 +3,9 @@
 </template>
 
 <script>
-
-import { share } from '@/utils/wx'
-
-const shareImg = `${location.origin}${location.pathname}wx_share.jpg`
-
 export default {
   components: {
     IndexImage: () => import('./components/IndexImage.vue')
-  },
-  mounted() {
-    share({ title: '华侨城欢乐滨江可售物业', link: window.location.href, imgUrl: shareImg })
   }
 }
 </script>