.

src/components/Swiper/index.vue

@@ -29,6 +29,11 @@ export default {
     this.$nextTick(() => {
       this.swiper = new Swiper(this.$el, this.options)
     })
+  },
+  methods: {
+    update() {
+      this.swiper.update()
+    }
   }
 }
 </script>

src/pages/AllPages.vue

@@ -2,26 +2,26 @@
   <div class="index-box">
     <img src="../../public/fourBoxes-image/1.jpg" class="bg-image" />
     <div class="index-FourBoxes">
-      <div class="index-FourBoxes-yushi test" @click="goPagess('yushi')">
-        <img src="../../public/fourBoxes-image/浴室.png" :style="styleImage" class="Four-image" />
+      <div class="index-FourBoxes-yushi test" :class="{ active: currentItem === 0 }" @click="goPagess(0)">
+        <img src="../../public/fourBoxes-image/浴室.png" class="Four-image" @transitionend="handleTransitionEnd('yushi')" />
         <div style=" width: 80px; position: absolute; left: 13vw; top: 36vh;">
           <img style=" width:100%;" src="../assets/fourBoxes-2/浴室-2.png" />
         </div>
       </div>
-      <div class="index-FourBoxes-yimao test" @click="goPagess('yimao')">
-        <img src="../../public/fourBoxes-image/衣帽间.png" :style="styleImage" class="Four-image" />
+      <div class="index-FourBoxes-yimao test" :class="{ active: currentItem === 1 }" @click="goPagess(1)">
+        <img src="../../public/fourBoxes-image/衣帽间.png" class="Four-image" @transitionend="handleTransitionEnd('yimao')" />
         <div style=" width: 80px;; position: absolute; left: 62vw; top: 36vh;">
           <img style=" width:100%;" src="../assets/fourBoxes-2/衣帽间-2.png" />
         </div>
       </div>
-      <div class="index-FourBoxes-keting test" @click="goPagess('keting')">
-        <img src="../../public/fourBoxes-image/客厅.png" :style="styleImage" class="Four-image" />
+      <div class="index-FourBoxes-keting test" :class="{ active: currentItem === 2 }" @click="goPagess(2)">
+        <img src="../../public/fourBoxes-image/客厅.png" @transitionend="handleTransitionEnd('keting')" class="Four-image" />
         <div style=" width: 80px;; position: absolute; left: 13vw; top: 77vh;">
           <img style=" width:100%;" src="../assets/fourBoxes-2/客厅-2.png" />
         </div>
       </div>
-      <div class="index-FourBoxes-yangtai test" @click="goPagess('yangtai')">
-        <img src="../../public/fourBoxes-image/阳台.png" :style="styleImage" class="Four-image" />
+      <div class="index-FourBoxes-yangtai test" :class="{ active: currentItem === 3 }" @click="goPagess(3)">
+        <img src="../../public/fourBoxes-image/阳台.png" @transitionend="handleTransitionEnd('yangtai')" class="Four-image" />
         <div style=" width: 80px;; position: absolute; left: 62vw; top: 77vh;">
           <img style=" width:100%;" src="../assets/fourBoxes-2/阳台-2.png" />
         </div>
@@ -34,7 +34,14 @@
 export default {
   data() {
     return {
-      styleImage: 'opacity: 0.3;',
+      currentItem: -1,
+      currentType: '',
+      styleImage: [
+        'opacity: 0.3;',
+        'opacity: 0.3;',
+        'opacity: 0.3;',
+        'opacity: 0.3;',
+        ],
       typeYushi: {
         bgImage: require('../../public/yushi-image/1.jpg'),
         swiper: {
@@ -72,45 +79,60 @@ export default {
     }
   },
   methods: {
-    goPagess(e, res) {
-      this.styleImage = ''
-
-      switch (e) {
-        case 'yushi':
-          var arr = JSON.stringify(this.typeYushi)
-          this.$router.push({
-            name: 'Test',
-            params: { types: encodeURIComponent(arr) }
-          })
+    handleTransitionEnd(types) {
+      this.$router.push({ name: 'Test', params: { types }})
+    },
+    goPagess(inx) {
+      this.currentItem = inx
 
-          break
-        case 'keting':
-          console.log('keting')
-          var arr = JSON.stringify(this.typeKeting)
-          this.$router.push({
-            name: 'Test',
-            params: { types: encodeURIComponent(arr) }
-          })
-          break
-        case 'yimao':
-          console.log('yimao')
-          var arr = JSON.stringify(this.typeYimao)
-          this.$router.push({
-            name: 'Test',
-            params: { types: encodeURIComponent(arr) }
-          })
-          break
-        case 'yangtai':
-          console.log('yangtai')
-          var arr = JSON.stringify(this.typeYangtai)
-          this.$router.push({
-            name: 'Test',
-            params: { types: encodeURIComponent(arr) }
-          })
-          break
-        default:
-          return
-      }
+      // switch (e) {
+      //   case 'yushi':
+      //     var arr = JSON.stringify(this.typeYushi)
+      //     this.styleImage[0] = 'opacity:1'
+      //     setTimeout(()=>{
+      //       this.$router.push({
+      //           name: 'Test',
+      //           params: { types: encodeURIComponent(arr) }
+      //       })
+      //       // this.styleImage[0] = 'opacity: 0.3;'
+      //     },1000)
+      //     break
+      //   case 'keting':
+      //     var arr = JSON.stringify(this.typeKeting)
+      //     this.styleImage[1] = ''
+      //     setTimeout(()=>{
+      //       this.$router.push({
+      //         name: 'Test',
+      //         params: { types: encodeURIComponent(arr) }
+      //       })
+      //       // this.styleImage[1] = 'opacity: 0.3;'
+      //     },1000)
+      //     break
+      //   case 'yimao':
+      //     var arr = JSON.stringify(this.typeYimao)          
+      //     this.styleImage[2] = ''
+      //     setTimeout(()=>{
+      //       this.$router.push({
+      //         name: 'Test',
+      //         params: { types: encodeURIComponent(arr) }
+      //       })
+      //       // this.styleImage[2] = 'opacity: 0.3;'
+      //     },1000)
+      //     break
+      //   case 'yangtai':
+      //     var arr = JSON.stringify(this.typeYangtai)
+      //     this.styleImage[3] = ''
+      //     setTimeout(()=>{
+      //       this.$router.push({
+      //         name: 'Test',
+      //         params: { types: encodeURIComponent(arr) }
+      //       })
+      //       // this.styleImage[3] = 'opacity: 0.3;'
+      //     },1000)
+      //     break
+      //   default:
+      //     return
+      // }
     },
     goYimao() {},
     goKeting() {},
@@ -140,6 +162,17 @@ export default {
     align-items: center;
     justify-content: center;
     .test {
+
+      & > img {
+        opacity: .6;
+        transition: opacity .2s ease;
+      }
+
+      &.active > img {
+        opacity: 1;
+      }
+
+
       float: left;
       width: 48%;
       height: 49%;

src/pages/IndexImage.vue

@@ -1,20 +1,9 @@
 <template>
   <div class="index-image">
     <div class="index-inner-swiper">
-      <swiper :options="swiperOptions">
-        <swiper-slide class="index-inner-slide">
-          <img :src="typeImage.swiper1" />
-        </swiper-slide>
-
-        <swiper-slide class="index-inner-slide">
-          <img :src="typeImage.swiper2" />
-        </swiper-slide>
-
-        <swiper-slide class="index-inner-slide">
-          <img :src="typeImage.swiper3" />
-        </swiper-slide>
-        <swiper-slide class="index-inner-slide" v-if="typeImage.swiper4">
-          <img :src="typeImage.swiper4" />
+      <swiper :options="swiperOptions" ref="swiperRef">
+        <swiper-slide class="index-inner-slide" v-for="item in list" :key="item">
+          <img :src="item" />
         </swiper-slide>
       </swiper>
     </div>
@@ -25,9 +14,20 @@
 export default {
   name: 'IndexImage',
   props: {
-    typeImage: {
-      type: Object,
-      default: () => ({})
+    list: {
+      type: Array
+    }
+  },
+  // computed: {
+  //   list() {
+  //     return Object.keys(this.typeImage).map(k => this.typeImage[k])
+  //   }
+  // },
+  watch: {
+    list() {
+      this.$nextTick(() => {
+        this.$refs.swiperRef.update()
+      })
     }
   },
   data() {

src/pages/Test.vue

@@ -1,24 +1,26 @@
 <template>
   <div class="index-box">
-    <img :src="songList.bgImage" class="bg-image" />
+    <img :src="bgImage" class="bg-image" />
     <!-- 透明返回按钮 -->
     <div style=" position: absolute;width: 55px;height: 52px;" @click="$router.go(-1)"></div>
     <!-- 透明返回按钮 -->
     <div class="body-swiper">
-      <!-- 左滑动 -->
-      <div class="body-swiper-left">
-        <img style="width:70%;position: relative; right: -1vw;" src="../assets/buttonImage/2左滑.png" />
-      </div>
+      <div class="slider-wrapper">
+        <!-- 左滑动 -->
+        <div class="body-swiper-left">
+          <img style="width:70%;position: relative; right: -1vw;" src="../assets/buttonImage/2左滑.png" />
+        </div>
 
-      <!-- swiper -->
-      <div class="body-swiper-middle">
-        <index-image :typeImage="swiperList"></index-image>
-      </div>
-      <!-- swiper -->
+        <!-- swiper -->
+        <div class="body-swiper-middle">
+          <index-image :list="list"></index-image>
+        </div>
+        <!-- swiper -->
 
-      <!-- 右滑动 -->
-      <div class="body-swiper-right">
-        <img style="width:70%;position: relative; right: -1vw;" src="../assets/buttonImage/3右滑.png" />
+        <!-- 右滑动 -->
+        <div class="body-swiper-right">
+          <img style="width:70%;position: relative; right: -1vw;" src="../assets/buttonImage/3右滑.png" />
+        </div>
       </div>
       <div class="button-img" @click="() => this.$router.push('/signup')">
         <img style="width:100%;" src="../assets/buttonImage/1即刻尊享.png" />
@@ -30,16 +32,62 @@
 
 <script>
 export default {
+  props: {
+    typePages: {
+      type: Object,
+      default: () => ({})
+    }
+  },
   data() {
     return {
+      images: {
+        yushi: {
+          bgImage: require('../../public/yushi-image/1.jpg'),
+          list: [
+            require('../../public/yushi-image/2.png'),
+            require('../../public/yushi-image/3.png'),
+            require('../../public/yushi-image/4.png')
+          ]
+        },
+        yimao: {
+          bgImage: require('../../public/yimao-image/1.jpg'),
+          list: [
+            require('../../public/yimao-image/2.png'),
+            require('../../public/yimao-image/3.png'),
+            require('../../public/yimao-image/4.png')
+          ]
+        },
+        keting: {
+          bgImage: require('../../public/keting-image/1.jpg'),
+          list: [
+            require('../../public/keting-image/2.png'),
+            require('../../public/keting-image/3.png'),
+            require('../../public/keting-image/4.png'),
+            require('../../public/keting-image/5.png')
+          ]
+        },
+        yangtai: {
+          bgImage: require('../../public/yangtai-image/1.jpg'),
+          list: [
+            require('../../public/yangtai-image/2.png'),
+            require('../../public/yangtai-image/3.png'),
+            require('../../public/yangtai-image/4.png'),
+            require('../../public/yangtai-image/5.png')
+          ]
+        }
+      },
       songList: {},
-      swiperList: {}
+      swiperList: []
     }
   },
-  props: {
-    typePages: {
-      type: Object,
-      default: () => ({})
+  computed: {
+    bgImage() {
+      if (!this.$route.params.types) return ''
+      return this.images[this.$route.params.types].bgImage
+    },
+    list() {
+      if (!this.$route.params.types) return []
+      return this.images[this.$route.params.types].list
     }
   },
   components: {
@@ -47,10 +95,12 @@ export default {
   },
   mounted() {
     this.$nextTick(function () {
-      console.log(this.$route.params.types)
-      var list = decodeURIComponent(this.$route.params.types)
-      this.songList = JSON.parse(list)
-      this.swiperList = this.songList.swiper
+      // console.log(this.$route.params.types)
+      // console.log(this.images[this.$route.params.types])
+      // var list = decodeURIComponent(this.images[this.$route.params.types])
+      // this.songList = this.images[this.$route.params.types]
+      // this.swiperList = this.images[this.$route.params.types].list
+      // console.log(this.swiperList)
     })
   }
 }
@@ -71,23 +121,40 @@ export default {
     width: 100vw;
     top: 47.5vh;
     display: flex;
+
+    .slider-wrapper {
+      width: 100%;
+      position: relative;
+    }
+
+    &-left {
+      left: 1vw;
+    }
+
+    &-right {
+      right: 1vw;
+    }
+
     &-left,
     &-right {
+      position: absolute;
       display: flex;
       align-items: center;
       margin: 0 auto;
-      height: 33vh;
-      z-index: 2;
+      z-index: 10;
+      top: -2vh;
+      height: 100%;
+      width: 6vw;
     }
     &-middle {
-      width: 84vw;
+      width: 100%;
     }
   }
   .button-img {
     position: absolute;
     width: 45vw;
     left: 27.5vw;
-    top: 37vh;
+    top: 39vh;
   }
 }
 </style>

src/pages/signup.vue

@@ -4,7 +4,7 @@
     <div class="form">
       <div class="formItem">
         <label>身&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;份</label>
-        <div style="float: right;margin-right: 3vw;" @click="handleDesigner">
+        <div style="float: right;" @click="handleDesigner">
           <img class="checkedImg" :src="ischecked ? Unchecked : checked" />
           <label for="dewey">设计师</label>
         </div>
@@ -21,10 +21,6 @@
         <label>手&nbsp;机&nbsp;号</label>
         <input class="phone" type="text" placeholder="请输入手机号" v-model="formData.phone" />
       </div>
-      <div class="formItem phonediv">
-        <label>手&nbsp;机&nbsp;号</label>
-        <input class="phone" type="text" placeholder="请输入手机号" v-model="formData.phone" />
-      </div>
       <div class="formItem intendedProductdiv" @click="showPicker = true">
         <label>意向产品</label>        
         <input
@@ -145,11 +141,6 @@ export default {
             areaName: item.name
           }
         })
-        // const obj = JSON.stringify(arrNew)
-        console.log(
-          '🚀 ~ file: signup.vue ~ line 148 ~ sumbit ~ obj',
-          this.formData
-        )
         setRegister({
           areaCode: arrNew[2].areaCode,
           areaName: arrNew[2].areaName,
@@ -194,6 +185,7 @@ export default {
 .checkedImg {
   width: 16px;
   top: 2px;
+  right: 8px;
   position: relative;
 }
 .name {
@@ -209,6 +201,7 @@ export default {
   height: 100%;
   font-size: 16px;
   color: #a6b1ab;
+  float: right;
 }
 .phonediv {
   margin-top: 40%;
@@ -223,6 +216,7 @@ export default {
   height: 100%;
   font-size: 16px;
   color: #a6b1ab;
+  float: right;
 }
 .intendedProductdiv {
   margin-top: 57%;
@@ -237,6 +231,7 @@ export default {
   height: 100%;
   font-size: 16px;
   color: #a6b1ab;
+  float: right;
 }
 .addressdiv {
   margin-top: 74%;
@@ -251,6 +246,7 @@ export default {
   height: 100%;
   font-size: 16px;
   color: #a6b1ab;
+  float: right;
 }
 .submit {
   margin: 93% 0 0 27.5vw;