Browse Source

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

Baozhangchao 3 years ago
parent
commit
7db306e405

+ 3
- 2
src/components/Swiper/index.vue View File

3
     <div class="swiper-wrapper">
3
     <div class="swiper-wrapper">
4
       <slot></slot>
4
       <slot></slot>
5
     </div>
5
     </div>
6
+    <slot name="pagination"></slot>
6
   </div>
7
   </div>
7
 </template>
8
 </template>
8
 
9
 
9
 <script>
10
 <script>
10
 import Swiper from 'swiper'
11
 import Swiper from 'swiper'
11
-import SwiperCore, { Autoplay } from 'swiper/core'
12
+import SwiperCore, { Autoplay, Pagination } from 'swiper/core'
12
 
13
 
13
-SwiperCore.use([Autoplay])
14
+SwiperCore.use([Autoplay, Pagination])
14
 
15
 
15
 export default {
16
 export default {
16
   name: 'Swiper',
17
   name: 'Swiper',

+ 1
- 1
src/config/env.production.js View File

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

+ 33
- 5
src/views/components/ProjectSwiper.vue View File

1
 <template>
1
 <template>
2
-  <swiper>
3
-    <swiper-slide v-for="(item, index) in list" :key="item.image" @click.native="$emit('clickItem', index)">
4
-        <pure-image :bg-image="item.image"></pure-image>
5
-    </swiper-slide>
6
-  </swiper>
2
+  <div style="height: 100%">
3
+    <swiper :options="options">
4
+      <swiper-slide v-for="(item, index) in list" :key="item.image" @click.native="$emit('clickItem', index)">
5
+          <pure-image bg-color="#ededed" :bg-image="item.image"></pure-image>
6
+      </swiper-slide>
7
+    </swiper>
8
+    <div class="project-swiper-pagination"></div>
9
+  </div>
7
 </template>
10
 </template>
8
 
11
 
9
 <script>
12
 <script>
14
   },
17
   },
15
   data() {
18
   data() {
16
     return {
19
     return {
20
+      options: {
21
+        autoplay: {
22
+          delay: 2500,
23
+          disableOnInteraction: false
24
+        },
25
+        pagination: {
26
+          el: '.project-swiper-pagination'
27
+        }
28
+      },
17
       list: [
29
       list: [
18
         {
30
         {
19
           image: require('@/assets/perjectImages/1.png')
31
           image: require('@/assets/perjectImages/1.png')
44
   }
56
   }
45
 }
57
 }
46
 </script>
58
 </script>
59
+
60
+<style lang="scss">
61
+.project-swiper-pagination {
62
+  width: 100%;
63
+  text-align: center;
64
+
65
+  .swiper-pagination-bullet {
66
+    width: .15rem;
67
+    height: .15rem;
68
+
69
+    & + .swiper-pagination-bullet {
70
+      margin-left: 6px;
71
+    }
72
+  }
73
+}
74
+</style>

+ 11
- 15
src/views/projectIndex.vue View File

3
   <div class="project-index">
3
   <div class="project-index">
4
     <img src="@/assets/perjectImages/langbgm.jpg" width="100%" class="bgiclass" @load="handleImageLoad"/>
4
     <img src="@/assets/perjectImages/langbgm.jpg" width="100%" class="bgiclass" @load="handleImageLoad"/>
5
     <div class="index-project-swiper" :style="swiperStyle" ref="swiperRef">
5
     <div class="index-project-swiper" :style="swiperStyle" ref="swiperRef">
6
-      <div class="index-pos-hander" >
7
-        <img :src="require('@/assets/perjectImages/swiperButton.png')" alt="">
8
-      </div>
9
       <project-swiper v-if="swiperShow" @clickItem="handleShow"></project-swiper>
6
       <project-swiper v-if="swiperShow" @clickItem="handleShow"></project-swiper>
10
     </div>
7
     </div>
11
-    <img src="@/assets/perjectImages/indexbottom.jpg" width="100%" class="bgiclass" @load="handleImageLoad"/>
8
+    <img src="@/assets/perjectImages/indexbottom.jpg" width="100%" class="bgiclass" style="margin-top: 15px" @load="handleImageLoad"/>
12
     <div v-for="(item, index) in list" :key="item.image">
9
     <div v-for="(item, index) in list" :key="item.image">
13
       <yz-modal :visible="visible[index]" class="project-modal" @touchmove.native="handleMove">
10
       <yz-modal :visible="visible[index]" class="project-modal" @touchmove.native="handleMove">
14
         <div class="modal-inner">
11
         <div class="modal-inner">
41
       list: [
38
       list: [
42
         {
39
         {
43
           image: require('@/assets/perjectImages/1-1.jpg'),
40
           image: require('@/assets/perjectImages/1-1.jpg'),
44
-          backSign: backSignImg
41
+          backSign: backSignImg2
45
         },
42
         },
46
         {
43
         {
47
           image: require('@/assets/perjectImages/2-1.jpg'),
44
           image: require('@/assets/perjectImages/2-1.jpg'),
49
         },
46
         },
50
         {
47
         {
51
           image: require('@/assets/perjectImages/3-1.jpg'),
48
           image: require('@/assets/perjectImages/3-1.jpg'),
52
-          backSign: backSignImg
49
+          backSign: backSignImg2
53
         },
50
         },
54
         {
51
         {
55
           image: require('@/assets/perjectImages/4-1.jpg'),
52
           image: require('@/assets/perjectImages/4-1.jpg'),
56
-          backSign: backSignImg
53
+          backSign: backSignImg2
57
         },
54
         },
58
         {
55
         {
59
           image: require('@/assets/perjectImages/5-1.jpg'),
56
           image: require('@/assets/perjectImages/5-1.jpg'),
61
         },
58
         },
62
         {
59
         {
63
           image: require('@/assets/perjectImages/6-1.jpg'),
60
           image: require('@/assets/perjectImages/6-1.jpg'),
64
-          backSign: backSignImg
61
+          backSign: backSignImg2
65
         },
62
         },
66
         {
63
         {
67
           image: require('@/assets/perjectImages/7-1.jpg'),
64
           image: require('@/assets/perjectImages/7-1.jpg'),
68
-          backSign: backSignImg
65
+          backSign: backSignImg2
69
         },
66
         },
70
         {
67
         {
71
           image: require('@/assets/perjectImages/8-1.jpg'),
68
           image: require('@/assets/perjectImages/8-1.jpg'),
72
-          backSign: backSignImg
69
+          backSign: backSignImg2
73
         }
70
         }
74
       ]
71
       ]
75
     }
72
     }
109
 <style lang="scss" scoped>
106
 <style lang="scss" scoped>
110
 .project-index {
107
 .project-index {
111
   overflow-x: hidden;
108
   overflow-x: hidden;
112
-  background: #f0f0f0;
109
+  background: #ededed;
113
   position: relative;
110
   position: relative;
114
 
111
 
115
   .index-pos-hander {
112
   .index-pos-hander {
146
     .back-sign {
143
     .back-sign {
147
       position: absolute;
144
       position: absolute;
148
       z-index: 500;
145
       z-index: 500;
149
-      right: 10px;
150
-      bottom: -24px;
151
-      width: 96px;
152
-      height: 88px;
146
+      top: -10px;
147
+      width: 76px;
148
+      height: 68px;
153
 
149
 
154
       img {
150
       img {
155
         width: 100%;
151
         width: 100%;