dd

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/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-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">
@@ -109,7 +106,7 @@ export default {
 <style lang="scss" scoped>
 .project-index {
   overflow-x: hidden;
-  background: #f0f0f0;
+  background: #ededed;
   position: relative;
 
   .index-pos-hander {