piush

index.html

@@ -14,6 +14,7 @@
     body {
       margin: 0;
       padding: 0;
+      background-color: black;
     }
   </style>
   <div id="app"></div>

src/components/Swiper/index.vue

@@ -3,7 +3,6 @@
     <div class="swiper-wrapper">
       <slot></slot>
     </div>
-    <slot name="pagination"></slot>
   </div>
 </template>
 
@@ -29,7 +28,6 @@ export default {
   mounted() {
     this.$nextTick(() => {
       this.swiper = new Swiper(this.$el, this.options)
-      this.$emit('inited', this.swiper)
     })
   }
 }

src/components/SwiperSlide/index.vue

@@ -5,28 +5,7 @@
 </template>
 
 <script>
-export default {
-  name: 'SwiperSlide'
-}
 </script>
 
 <style>
-.swiper-slide {
-  text-align: center;
-  background: #fff;
-
-  /* Center slide text vertically */
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  -webkit-align-items: center;
-  align-items: center;
-}
 </style>

src/main.js

@@ -2,6 +2,9 @@
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
 import App from './App'
+import 'regenerator-runtime/runtime'
+import 'swiper/swiper-bundle.css'
+
 import router from './router'
 import Swiper from './components/Swiper'
 import SwiperSlide from './components/SwiperSlide'

src/pages/AllPages.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="index-box">
-    <img src="../../build/fourBoxes-image//1.jpg" class="bg-image" />
+    <img src="../../build/fourBoxes-image/1.jpg" class="bg-image" />
     <div class="index-FourBoxes">
       <div class="index-FourBoxes-yushi test" @click="goYuShi">
         <img src="../../build/fourBoxes-image/浴室.png" class="Four-image" />
@@ -48,12 +48,11 @@ export default {
   // justify-content: center;
   .bg-image {
     width: 100%;
-    height: 100%;
     position: absolute;
   }
   .index-FourBoxes {
     position: relative;
-    top: 15vh;
+    top: 16vh;
     // border: 1px solid #fff;
     width: 98%;
     height: 84%;

src/pages/IndexImage.vue

@@ -1,20 +1,24 @@
 <template>
   <div class="index-image">
-    <img src="../assets/index/1.jpg" class="bg-image" @load="loadBg" />
-    <div class="index-inner-swiper" :style="swiperItemStyle">
-      <swiper v-if="showSwiper" :options="swiperOptions">
+    <!-- <img :src="require('@/assets/images/index.png')" class="bg-image" @load="loadBg" /> -->
+    <div class="index-inner-swiper">
+      <swiper :options="swiperOptions">
         <swiper-slide class="index-inner-slide">
-          <img alt />
+          <img src="../../build/yushi-image/2.png" />
+        </swiper-slide>
+
+        <swiper-slide class="index-inner-slide">
+          <img src="../../build/yushi-image/3.png" />
+        </swiper-slide>
+
+        <swiper-slide class="index-inner-slide">
+          <img src="../../build/yushi-image/4.png" />
         </swiper-slide>
         <swiper-slide class="index-inner-slide">
-          <img alt />
+          <img src="../../build/yushi-image/4.png" />
         </swiper-slide>
       </swiper>
     </div>
-    <div class="index-pos-hander" :style="handerStyle">
-      <img alt />
-      <div>111</div>
-    </div>
   </div>
 </template>
 
@@ -23,37 +27,11 @@ export default {
   name: 'IndexImage',
   data() {
     return {
-      showSwiper: false,
       swiperOptions: {
         autoplay: {
-          delay: 2500,
-          disableOnInteraction: false
+          delay: 100
         }
-      },
-      swiperItemStyle: {},
-      handerStyle: {}
-    }
-  },
-  methods: {
-    loadBg(e) {
-      const { offsetTop, width, height, naturalWidth, naturalHeight } = e.target
-
-      const widthRatio = width / naturalWidth
-      const heightRatio = height / naturalHeight
-
-      this.swiperItemStyle = {
-        width: `${636 * widthRatio}px`, // 636 是图片原始宽度
-        height: `${637 * heightRatio}px`, // 637 是图片原始高度
-        top: `${offsetTop + 1612 * heightRatio}px`,
-        left: `${352 * widthRatio}px`
-      }
-
-      this.handerStyle = {
-        top: `${offsetTop + 1800 * heightRatio}px`,
-        left: `${1020 * widthRatio}px`
       }
-
-      this.showSwiper = true
     }
   }
 }
@@ -61,39 +39,12 @@ export default {
 
 <style lang="scss" scoped>
 .index-image {
-  position: relative;
-  // background-color: #1d429d;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  overflow: hidden;
-
-  .bg-image {
-    width: 100%;
-    pointer-events: none;
-    z-index: 100;
-  }
-
   .index-inner-swiper {
-    position: absolute;
-
+    width: 100vw;
     .index-inner-slide {
-      background: transparent;
-    }
-
-    img {
-      width: 100%;
-      height: 100%;
+      position: relative;
+      left: -11vw;
     }
-  }
-
-  .index-pos-hander {
-    position: absolute;
-    z-index: 200;
-    width: 64px;
-    height: 56px;
-    animation: slidefade 2s infinite;
 
     img {
       width: 100%;

src/pages/Test.vue

@@ -1,10 +1,75 @@
 <template>
-  <h1>222222</h1>
+  <div class="index-box">
+    <img src="../../build/yushi-image/1.jpg" 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>
+
+      <!-- swiper -->
+      <div class="body-swiper-middle">
+        <index-image></index-image>
+      </div>
+      <!-- swiper -->
+
+      <!-- 右滑动 -->
+      <div class="body-swiper-right">
+        <img style="width:70%;position: relative; right: -1vw;" src="../assets/buttonImage/3右滑.png" />
+      </div>
+      <div class="button-img">
+        <img style="width:100%;" src="../assets/buttonImage/1即刻尊享.png" />
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-export default {}
+export default {
+  components: {
+    IndexImage: () => import('./IndexImage.vue')
+  }
+}
 </script>
 
-<style>
+<style lang="scss" scoped>
+.index-box {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  // justify-content: center;
+  .bg-image {
+    width: 100%;
+    position: absolute;
+  }
+  .body-swiper {
+    display: none;
+    position: relative;
+    width: 100%;
+    top: 49vh;
+    height: 45vh;
+    display: flex;
+    &-left,
+    &-right {
+      display: flex;
+      align-items: center;
+      margin: 0 auto;
+      height: 40vh;
+      z-index: 2;
+    }
+    &-middle {
+      width: 84%;
+      overflow: hidden;
+    }
+    .button-img {
+      width: 40%;
+      position: absolute;
+      bottom: -5vh;
+      left: 29vw;
+    }
+  }
+}
 </style>

src/pages/index.vue

@@ -1,7 +1,6 @@
 <template>
   <div>
     <div class="index-image">
-      <!-- <index-image></index-image> -->
       <img src="../assets/index/1.jpg" class="bg-image" />
       <div class="bth-div" @click="$router.push({ name: 'AllPages' })">
         <img src="../assets/index/点击开启.png" class="bth-image" />
@@ -12,9 +11,6 @@
 
 <script>
 export default {
-  components: {
-    IndexImage: () => import('./IndexImage.vue')
-  },
   methods: {
     goPages() {}
   }
@@ -23,6 +19,8 @@ export default {
 
 <style lang="scss" scoped>
 .index-image {
+  background-color: black;
+
   // background-color: #1d429d;
   width: 100vw;
   height: 100vh;