GFRS-2591【前端】新增星路历程页面。提交人--张齐

src/views/ebiz/laurelClub/StarProcess.vue

@@ -1,26 +1,37 @@
 <template>
-  <v-touch
-    class='starProcess-container animate__animated'
-    :class='animateCssIsActiveObj.background'
-    :style="'background: url(' + backgroundImage + ') no-repeat'"
-    id='my-node'
-    ref='starProcessContainer'>
+  <div class='starProcess-container'>
+    <van-swipe @change='onChange' :loop='false' :show-indicators='false' :touchable='true' vertical>
+      <!-- 第一页   -->
+      <van-swipe-item>
+        <div class='first-page-background-img animate__animated animate__fadeIn' v-if='current==0'>
+          <img class='crown-group-img animate__animated animate__zoomIn'
+               src='../../../assets/images/starProcess/crown-group-img.png' alt=''>
+          <img class='company-name-img animate__animated animate__zoomIn'
+               src='../../../assets/images/starProcess/company-name-img.png' alt=''>
 
-  </v-touch>
-  <!--  <div class='starProcess-container animate__animated'-->
-  <!--       :class='[isActive ? animateClassObj.animateIn : ""]'>-->
 
-  <!--  </div>-->
+        </div>
+      </van-swipe-item>
+
+      <van-swipe-item>2</van-swipe-item>
+      <van-swipe-item>3</van-swipe-item>
+      <van-swipe-item>4</van-swipe-item>
+    </van-swipe>
+  </div>
 </template>
 
 <script>
-import backgroundImg1 from '@/assets/images/starProcess/background-img-1.png'
+import { Swipe, SwipeItem } from 'vant'
 
 export default {
   name: 'starProcess',
+  components: {
+    [Swipe.name]: Swipe,
+    [SwipeItem.name]: SwipeItem
+  },
   data() {
     return {
-      backgroundImage: backgroundImg1, // 背景图
+      current: 0,
       // 定义存储各模块动画是否开启的对象
       animateCssIsActiveObj: {
         background: '' // 页面背景图动画效果
@@ -33,7 +44,24 @@ export default {
   mounted() {
     this.animateCssIsActiveObj.background = this.animateCssObj.fadeIn
   },
-  methods: {}
+  methods: {
+    onChange(index) {
+      switch (index) {
+        case 0 :
+          setTimeout(() => {
+            this.current = index
+            this.animateCssIsActiveObj.background = this.animateCssObj.fadeIn
+          }, 500)
+          break
+        case 1:
+          setTimeout(() => {
+            this.current = index
+            this.animateCssIsActiveObj.background = ''
+          }, 500)
+          break
+      }
+    }
+  }
 }
 </script>
 
@@ -41,8 +69,35 @@ export default {
 .starProcess-container {
   width: 100%;
   min-height: 100vh;
-  background-size: 100% 100% !important;
-  background-color: #181935 !important;
+}
+
+.van-swipe {
+  height: 100vh;
+}
+
+.first-page-background-img {
+  width: 100%;
+  min-height: 100vh;
+  background: url('../../../assets/images/starProcess/background-img-1.png') no-repeat;
+  background-size: contain;
+  background-color: #181935;
+  position: fixed;
+
+
+  .crown-group-img {
+    width: 207px;
+    height: 283px;
+    float: right;
+  }
+
+  .company-name-img {
+    width: 284px;
+    height: 20px;
+    position: fixed;
+    top: 238px;
+    left: 43px;
+  }
+
 
 }
 </style>