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

src/components/Swiper/index.vue

@@ -3,14 +3,15 @@
     <div class="swiper-wrapper">
       <slot></slot>
     </div>
+    <slot name="pagination"></slot>
   </div>
 </template>
 
 <script>
 import Swiper from 'swiper'
-import SwiperCore, { Autoplay } from 'swiper/core'
+import SwiperCore, { Autoplay, Pagination } from 'swiper/core'
 
-SwiperCore.use([Autoplay])
+SwiperCore.use([Autoplay, Pagination])
 
 export default {
   name: 'Swiper',

src/config/env.production.js

@@ -1,6 +1,6 @@
 // 正式
 module.exports = {
-  title: '华侨城',
+  title: '华侨城欢乐滨江',
   baseUrl: 'https://www.xxx.com/', // 正式项目地址
   baseApi: 'https://www.xxx.com/api', // 正式api请求地址
   APPID: 'xxx',

src/views/components/ProjectSwiper.vue

@@ -1,9 +1,12 @@
 <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>
+  <div style="height: 100%">
+    <swiper :options="options">
+      <swiper-slide v-for="(item, index) in list" :key="item.image" @click.native="$emit('clickItem', index)">
+          <pure-image bg-color="#ededed" :bg-image="item.image"></pure-image>
+      </swiper-slide>
+    </swiper>
+    <div class="project-swiper-pagination"></div>
+  </div>
 </template>
 
 <script>
@@ -14,6 +17,15 @@ export default {
   },
   data() {
     return {
+      options: {
+        autoplay: {
+          delay: 2500,
+          disableOnInteraction: false
+        },
+        pagination: {
+          el: '.project-swiper-pagination'
+        }
+      },
       list: [
         {
           image: require('@/assets/perjectImages/1.png')
@@ -44,3 +56,19 @@ export default {
   }
 }
 </script>
+
+<style lang="scss">
+.project-swiper-pagination {
+  width: 100%;
+  text-align: center;
+
+  .swiper-pagination-bullet {
+    width: .15rem;
+    height: .15rem;
+
+    & + .swiper-pagination-bullet {
+      margin-left: 6px;
+    }
+  }
+}
+</style>

src/views/projectIndex.vue

@@ -3,12 +3,9 @@
   <div class="project-index">
     <img src="@/assets/perjectImages/langbgm.jpg" width="100%" class="bgiclass" @load="handleImageLoad"/>
     <div class="index-project-swiper" :style="swiperStyle" ref="swiperRef">
-      <div class="index-pos-hander" >
-        <img :src="require('@/assets/perjectImages/swiperButton.png')" alt="">
-      </div>
       <project-swiper v-if="swiperShow" @clickItem="handleShow"></project-swiper>
     </div>
-    <img src="@/assets/perjectImages/indexbottom.jpg" width="100%" class="bgiclass" @load="handleImageLoad"/>
+    <img src="@/assets/perjectImages/indexbottom.jpg" width="100%" class="bgiclass" style="margin-top: 15px" @load="handleImageLoad"/>
     <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">
@@ -41,7 +38,7 @@ export default {
       list: [
         {
           image: require('@/assets/perjectImages/1-1.jpg'),
-          backSign: backSignImg
+          backSign: backSignImg2
         },
         {
           image: require('@/assets/perjectImages/2-1.jpg'),
@@ -49,11 +46,11 @@ export default {
         },
         {
           image: require('@/assets/perjectImages/3-1.jpg'),
-          backSign: backSignImg
+          backSign: backSignImg2
         },
         {
           image: require('@/assets/perjectImages/4-1.jpg'),
-          backSign: backSignImg
+          backSign: backSignImg2
         },
         {
           image: require('@/assets/perjectImages/5-1.jpg'),
@@ -61,15 +58,15 @@ export default {
         },
         {
           image: require('@/assets/perjectImages/6-1.jpg'),
-          backSign: backSignImg
+          backSign: backSignImg2
         },
         {
           image: require('@/assets/perjectImages/7-1.jpg'),
-          backSign: backSignImg
+          backSign: backSignImg2
         },
         {
           image: require('@/assets/perjectImages/8-1.jpg'),
-          backSign: backSignImg
+          backSign: backSignImg2
         }
       ]
     }
@@ -109,7 +106,7 @@ export default {
 <style lang="scss" scoped>
 .project-index {
   overflow-x: hidden;
-  background: #f0f0f0;
+  background: #ededed;
   position: relative;
 
   .index-pos-hander {
@@ -146,10 +143,9 @@ export default {
     .back-sign {
       position: absolute;
       z-index: 500;
-      right: 10px;
-      bottom: -24px;
-      width: 96px;
-      height: 88px;
+      top: -10px;
+      width: 76px;
+      height: 68px;
 
       img {
         width: 100%;