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

src/views/ebiz/laurelClub/StarProcess.vue

@@ -1,29 +1,90 @@
 <template>
   <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=''>
-          <img class='company-introduce-img animate__animated animate__zoomIn'
-               src='../../../assets/images/starProcess/company-introduce-img.png' alt=''>
-          <img class='company-slogan-img animate__animated animate__zoomIn'
-               src='../../../assets/images/starProcess/company-slogan-img.png' alt=''>
+          <img class='crown-group-img animate__animated animate__zoomIn animate__slow'
+               :src='globalImgObj.crownGroupImg' alt=''>
+          <img class='company-name-img animate__animated animate__zoomIn' :src='firstPageImgObj.companyNameImg' alt=''>
+          <img class='company-introduce-img animate__animated animate__zoomIn animate__slow'
+               :src='firstPageImgObj.companyIntroduceImg' alt=''>
+          <img class='company-slogan-img animate__animated animate__zoomIn animate__slower'
+               :src='firstPageImgObj.companySloganImg'
+               alt=''>
+          <img class='down-arrow-img animate__animated animate__shakeY animate__slower animate__infinite'
+               :src='globalImgObj.downArrowImg'
+               alt=''>
         </div>
       </van-swipe-item>
+      <!--  第二页   -->
+      <van-swipe-item>
+        <div class='second-page-background-img animate__animated animate__fadeIn' v-if='current==1'>
 
-      <van-swipe-item>2</van-swipe-item>
-      <van-swipe-item>3</van-swipe-item>
-      <van-swipe-item>4</van-swipe-item>
+        </div>
+      </van-swipe-item>
+      <!--  第三页   -->
+      <van-swipe-item>
+        <div class='third-page-background-img animate__animated animate__fadeIn' v-if='current==2'>
+          <img class='crown-group-img animate__animated animate__zoomIn'
+               :src='globalImgObj.crownGroupImg' alt=''>
+          <img class='together-img animate__animated animate__zoomIn'
+               :src='thirdPageImgObj.togetherImg' alt=''>
+          <h1 class='userName animate__animated animate__zoomIn animate__slow'>刘小宇</h1>
+          <img class='star-path-img animate__animated animate__zoomIn animate__slower'
+               :src='thirdPageImgObj.starPathImg' alt=''>
+          <img class='fireworks-left-img animate__animated animate__zoomIn animate__slower'
+               :src='thirdPageImgObj.fireworksLeftImg' alt=''>
+          <img class='fireworks-right-top-img animate__animated animate__zoomIn animate__slower'
+               :src='thirdPageImgObj.fireworksRightTopImg' alt=''>
+          <img class='fireworks-right-down-img animate__animated animate__zoomIn animate__slower'
+               :src='thirdPageImgObj.fireworksRightDownImg' alt=''>
+          <img class='runner-reticular-img animate__animated animate__fadeInLeft animate__slower'
+               :src='thirdPageImgObj.runnerReticularImg' alt=''>
+          <img class='down-arrow-img animate__animated animate__shakeY animate__slower animate__infinite'
+               :src='globalImgObj.downArrowImg'
+               alt=''>
+        </div>
+      </van-swipe-item>
+      <!--  第四页   -->
+      <van-swipe-item>
+        <div class='second-page-background-img animate__animated animate__fadeIn' v-if='current==3'>
+
+        </div>
+      </van-swipe-item>
+      <!--  第五页   -->
+      <van-swipe-item>
+        <div class='fifth-page-background-img animate__animated animate__fadeIn' v-if='current==4'>
+          <img class='crown-group-img animate__animated animate__zoomIn'
+               :src='globalImgObj.crownGroupImg' alt=''>
+          <div>
+
+          </div>
+          <img class='down-arrow-img animate__animated animate__shakeY animate__slower animate__infinite'
+               :src='globalImgObj.downArrowImg'
+               alt=''>
+        </div>
+      </van-swipe-item>
     </van-swipe>
   </div>
 </template>
 
 <script>
 import { Swipe, SwipeItem } from 'vant'
+// 公共的图片路径
+import crownGroupImg from '@/assets/images/starProcess/crown-group-img.png' // 皇冠组合图片路径
+import downArrowImg from '@/assets/images/starProcess/down-arrow-img.png' // 最下方箭头图片路径
+// 第一页中使用到的图片路径
+import companyNameImg from '@/assets/images/starProcess/company-name-img.png'
+import companyIntroduceImg from '@/assets/images/starProcess/company-introduce-img.png'
+import companySloganImg from '@/assets/images/starProcess/company-slogan-img.png'
+// 第三页中使用到的图片路径
+import togetherImg from '@/assets/images/starProcess/together-img.png'
+import starPathImg from '@/assets/images/starProcess/star-path-img.png'
+import fireworksLeftImg from '@/assets/images/starProcess/fireworks-left-img.png'
+import fireworksRightTopImg from '@/assets/images/starProcess/fireworks-right-top-img.png'
+import fireworksRightDownImg from '@/assets/images/starProcess/fireworks-right-down-img.png'
+import runnerReticularImg from '@/assets/images/starProcess/runner-reticular-img.png'
 
 export default {
   name: 'starProcess',
@@ -34,34 +95,30 @@ export default {
   data() {
     return {
       current: 0,
-      // 定义存储各模块动画是否开启的对象
-      animateCssIsActiveObj: {
-        background: '' // 页面背景图动画效果
-      },
-      animateCssObj: {
-        fadeIn: 'animate__fadeIn' // 淡入淡出--淡入
+      globalImgObj: { crownGroupImg, downArrowImg },
+      firstPageImgObj: { companyNameImg, companyIntroduceImg, companySloganImg },
+      thirdPageImgObj: {
+        togetherImg,
+        starPathImg,
+        fireworksLeftImg,
+        fireworksRightTopImg,
+        fireworksRightDownImg,
+        runnerReticularImg
       }
     }
   },
   mounted() {
-    this.animateCssIsActiveObj.background = this.animateCssObj.fadeIn
+
   },
   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
-      }
+      setTimeout(() => {
+        this.current = index
+      }, 500)
+    },
+    beforeEnter: function(el) {
+      el.style.opacity = 0
+      el.style.transformOrigin = 'left'
     }
   }
 }
@@ -85,7 +142,6 @@ export default {
   background-color: #181935;
   position: fixed;
 
-
   .crown-group-img {
     width: 207px;
     height: 283px;
@@ -100,14 +156,11 @@ export default {
     left: 43px;
   }
 
-  .company-introduce-img{
+  .company-introduce-img {
     width: 293px;
     height: 142px;
     display: block;
     margin: 0 auto;
-    //position: fixed;
-    //top: 238px;
-    //left: 40px;
   }
 
   .company-slogan-img {
@@ -118,6 +171,116 @@ export default {
     margin-top: 15px;
   }
 
+  .down-arrow-img {
+    width: 24px;
+    height: 24px;
+    position: fixed;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
 
+.third-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;
+  }
+
+  .together-img {
+    width: 239px;
+    height: 37px;
+    display: block;
+    margin: 0 auto;
+    padding-top: 23px;
+  }
+
+  .userName {
+    font-size: 40px;
+    font-family: STXingkai;
+    text-align: center;
+    font-weight: normal;
+    margin-top: 23px;
+    background: -webkit-linear-gradient(180deg, #FFE396 0%, #FFBC26 57%, #D08220 100%);
+    -webkit-background-clip: text;
+    color: transparent;
+  }
+
+  .star-path-img {
+    width: 160px;
+    height: 37px;
+    display: block;
+    margin: 0 auto;
+    margin-top: 23px;
+  }
+
+  .fireworks-left-img {
+    width: 140px;
+    height: 87px;
+    margin-top: -50px;
+  }
+
+  .fireworks-right-top-img {
+    width: 100px;
+    height: 100px;
+    float: right;
+    margin-top: -100px;
+  }
+
+  .fireworks-right-down-img {
+    width: 60px;
+    height: 60px;
+    position: fixed;
+    right: 40px;
+    top: 500px;
+    --animate-duration: 2s;
+  }
+
+  .runner-reticular-img {
+    width: 100%;
+    height: 101px;
+    margin-top: -20px;
+  }
+
+  .down-arrow-img {
+    width: 24px;
+    height: 24px;
+    position: fixed;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+
+.fifth-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;
+  }
+
+  .down-arrow-img {
+    width: 24px;
+    height: 24px;
+    position: fixed;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
 }
 </style>