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

src/main.js

@@ -15,7 +15,6 @@ import md5 from 'js-md5'
 import cryptoJs from 'crypto-js'
 import cacheUtils from '@/assets/js/utils/cacheUtils'
 import animated from 'animate.css'
-import VueTouch from 'vue-touch'
 
 import {
   Cell,
@@ -67,7 +66,6 @@ Vue.use(List)
 Vue.use(VanImage)
 Vue.use(Sticky)
 Vue.use(animated)
-Vue.use(VueTouch, {name: 'v-touch'})
 
 Vue.prototype.$assetsUrl = config.assetsUrl
 Vue.prototype.$assetsUpUrl = config.assetsUpUrl

src/views/ebiz/laurelClub/StarProcess.vue

@@ -57,9 +57,34 @@
         <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 class='content-div'>
-
+            <div class='global-style'>
+              <img class='GG-level-img animate__animated animate__zoomIn'
+                   :src='fifthPageImgObj.GGLevelImg' alt=''>
+              <span class='animate__animated animate__fadeInLeft animate__slow'>桂冠级别已达<strong>5</strong>冠</span>
+            </div>
+            <div class='global-style'>
+              <img class='SG-level-img animate__animated animate__zoomIn animate__slow'
+                   :src='fifthPageImgObj.SGLevelImg' alt=''>
+              <span class='animate__animated animate__fadeInLeft animate__slow'>双冠级别已达<strong>5</strong>冠</span>
+            </div>
+            <div class='global-style'>
+              <img class='service-number-img animate__animated animate__zoomIn animate__slower'
+                   :src='fifthPageImgObj.serviceNumberImg' alt=''>
+              <span class='animate__animated animate__fadeInLeft animate__slow'>当前服务客户数量已达<strong>5</strong>人/位</span>
+            </div>
+            <div class='global-style'>
+              <img class='cumulative-number-img animate__animated animate__zoomIn'
+                   :src='fifthPageImgObj.cumulativeNumberImg' alt=''>
+              <span class='animate__animated animate__fadeInLeft animate__slow'>累计为<strong>5</strong>位客户送去保障</span>
+            </div>
+            <div class='global-style'>
+              <img class='security-fund-img animate__animated animate__zoomIn'
+                   :src='fifthPageImgObj.securityFundImg' alt=''>
+              <span class='animate__animated animate__fadeInLeft animate__slow'>客户保障金额达<strong>5</strong>万元</span>
+            </div>
           </div>
+
           <img class='down-arrow-img animate__animated animate__shakeY animate__slower animate__infinite'
                :src='globalImgObj.downArrowImg'
                alt=''>
@@ -85,6 +110,12 @@ 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'
+// 第五页中使用到的图片路径
+import GGLevelImg from '@/assets/images/starProcess/GG-level-img.png'
+import SGLevelImg from '@/assets/images/starProcess/SG-level-img.png'
+import serviceNumberImg from '@/assets/images/starProcess/service-number-img.png'
+import cumulativeNumberImg from '@/assets/images/starProcess/cumulative-number-img.png'
+import securityFundImg from '@/assets/images/starProcess/security-fund-img.png'
 
 export default {
   name: 'starProcess',
@@ -104,7 +135,8 @@ export default {
         fireworksRightTopImg,
         fireworksRightDownImg,
         runnerReticularImg
-      }
+      },
+      fifthPageImgObj: { GGLevelImg, SGLevelImg, serviceNumberImg, cumulativeNumberImg, securityFundImg }
     }
   },
   mounted() {
@@ -271,7 +303,68 @@ export default {
   .crown-group-img {
     width: 207px;
     height: 283px;
-    float: right;
+    //float: right;
+    position: relative;
+    left: 45%;
+  }
+
+  .content-div {
+
+
+    .global-style {
+      height: 35px;
+      display: flex;
+      align-items: center;
+      margin-left: 35px;
+
+      .GG-level-img {
+        width: 35px;
+        height: 35px;
+      }
+
+      .SG-level-img {
+        width: 35px;
+        height: 35px;
+      }
+
+      .service-number-img {
+        width: 35px;
+        height: 35px;
+      }
+
+      .cumulative-number-img {
+        width: 35px;
+        height: 35px;
+        --animate-duration: 4s;
+      }
+
+      .security-fund-img {
+        width: 35px;
+        height: 35px;
+        --animate-duration: 5s;
+      }
+
+      span {
+        font-size: 15px;
+        color: #ffffff;
+        margin-left: 13px;
+        letter-spacing: 1px;
+        font-weight: lighter;
+        display: block;
+
+        strong {
+          padding-left: 10px;
+          padding-right: 10px;
+          color: #FFCB6B;
+          font-size: 25px;
+          font-weight: lighter;
+        }
+      }
+    }
+
+    .global-style + .global-style {
+      margin-top: 25px;
+    }
   }
 
   .down-arrow-img {