.

src/pages/AllPages.vue

@@ -4,25 +4,25 @@
     <div class="index-FourBoxes">
       <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;">
+        <div style=" width: 21vw; position: absolute; left: 13.5vw; top: 36vh;">
           <img style=" width:100%;" src="../assets/fourBoxes-2/浴室-2.png" />
         </div>
       </div>
       <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;">
+        <div style=" width: 21vw;; position: absolute; right: 13.5vw; top: 36vh;">
           <img style=" width:100%;" src="../assets/fourBoxes-2/衣帽间-2.png" />
         </div>
       </div>
       <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;">
+        <div style=" width: 21vw;; position: absolute; left: 13.5vw; top: 77vh;">
           <img style=" width:100%;" src="../assets/fourBoxes-2/客厅-2.png" />
         </div>
       </div>
       <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;">
+        <div style=" width: 21vw;; position: absolute; right: 13.5vw; top: 77vh;">
           <img style=" width:100%;" src="../assets/fourBoxes-2/阳台-2.png" />
         </div>
       </div>
@@ -35,13 +35,6 @@ export default {
   data() {
     return {
       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: {
@@ -84,59 +77,7 @@ export default {
     },
     goPagess(inx) {
       this.currentItem = inx
-
-      // 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() {},
-    goYangtai() {}
+    }
   }
 }
 </script>

src/pages/IndexImage.vue

@@ -18,11 +18,6 @@ export default {
       type: Array
     }
   },
-  // computed: {
-  //   list() {
-  //     return Object.keys(this.typeImage).map(k => this.typeImage[k])
-  //   }
-  // },
   watch: {
     list() {
       this.$nextTick(() => {

src/pages/Test.vue

@@ -92,16 +92,6 @@ export default {
   },
   components: {
     IndexImage: () => import('./IndexImage.vue')
-  },
-  mounted() {
-    this.$nextTick(function () {
-      // 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)
-    })
   }
 }
 </script>

src/pages/signup.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <img class="bgi" src="../../public/images/signup/bgi.jpg" width="100%" />
+    <img class="bgi" src="../../public/images/signup/bgi.jpg" />
     <div class="form">
       <div class="formItem">
         <label>身&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;份</label>
@@ -15,26 +15,25 @@
       </div>
       <div class="formItem name">
         <label>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</label>
-        <input class="userName" type="text" placeholder="请输入姓名" v-model="formData.userName" />
+        <input class="duiqi" type="text" placeholder="请输入姓名" v-model="formData.userName" />
       </div>
       <div class="formItem phonediv">
         <label>手&nbsp;机&nbsp;号</label>
-        <input class="phone" type="text" placeholder="请输入手机号" v-model="formData.phone" />
+        <input class="duiqi" type="text" placeholder="请输入手机号" v-model="formData.phone" />
       </div>
       <div class="formItem intendedProductdiv" @click="showPicker = true">
         <label>意向产品</label>        
         <input
-          class="intendedProduct"
+          class="duiqi"
           type="text"
           placeholder="请选择"
           disabled
           v-model="formData.intendedProduct"
         />
       </div>
-
       <div class="formItem addressdiv" @click="showArea = true">
         <label>所在地区</label>
-        <input class="address" type="text" placeholder="请选择" v-model="address" disabled />
+        <input class="duiqi" type="text" placeholder="请选择" v-model="address" disabled />
       </div>
       <img @click="sumbit" class="submit" src="../../public/images/signup/submit.png" width="45%" />
     </div>
@@ -157,98 +156,52 @@ export default {
   }
 }
 </script>
-<style scoped>
-* {
-  margin: 0;
-  padding: 0;
-}
+<style lang="scss" scoped>
 .bgi {
   z-index: 1;
+  width: 100%;
   position: absolute;
 }
 .form {
-  width: 100%;
   color: #a6b1ab;
   position: absolute;
   margin-top: 18%;
   z-index: 2;
-}
-.formItem {
-  position: absolute;
-  width: 82vw;
-  margin: 6vw;
-  padding: 3vw;
-  text-align: left;
-  border: 1px solid #4f5054;
-  background-color: #212226;
-}
-.checkedImg {
-  width: 16px;
-  top: 2px;
-  right: 8px;
-  position: relative;
-}
-.name {
-  margin-top: 23%;
-}
-.userName {
-  width: 74%;
-  background-color: #212226;
-  outline: none;
-  border: none;
-  color: white;
-  text-align: right;
-  height: 100%;
-  font-size: 16px;
-  color: #a6b1ab;
-  float: right;
-}
-.phonediv {
-  margin-top: 40%;
-}
-.phone {
-  width: 74%;
-  background-color: #212226;
-  outline: none;
-  border: none;
-  color: white;
-  text-align: right;
-  height: 100%;
-  font-size: 16px;
-  color: #a6b1ab;
-  float: right;
-}
-.intendedProductdiv {
-  margin-top: 57%;
-}
-.intendedProduct {
-  width: 73%;
-  background-color: #212226;
-  outline: none;
-  border: none;
-  color: white;
-  text-align: right;
-  height: 100%;
-  font-size: 16px;
-  color: #a6b1ab;
-  float: right;
-}
-.addressdiv {
-  margin-top: 74%;
-}
-.address {
-  width: 72%;
-  background-color: #212226;
-  outline: none;
-  border: none;
-  color: white;
-  text-align: right;
-  height: 100%;
-  font-size: 16px;
-  color: #a6b1ab;
-  float: right;
-}
-.submit {
-  margin: 93% 0 0 27.5vw;
+  .formItem {
+    position: absolute;
+    width: 82vw;
+    margin: 6vw;
+    padding: 3vw;
+    border: 1px solid #4f5054;
+    background-color: #212226;
+    .duiqi {
+      background-color: #212226;
+      border: none;
+      text-align: right;
+      float: right;
+    }
+    .checkedImg {
+      width: 16px;
+      top: 2px;
+      right: 8px;
+      position: relative;
+    }
+  }
+  .name {
+    margin-top: 23%;
+  }
+  .phonediv {
+    margin-top: 40%;
+  }
+  .intendedProductdiv {
+    margin-top: 57%;
+  }
+  .addressdiv {
+    margin-top: 74%;
+  }
+  .submit {
+    margin: 93% 0 0 27.5vw;
+    width: 45%;
+  }
 }
 </style>