GFRS-2591【前端】新增星路历程页面

src/main.js

@@ -14,6 +14,8 @@ import 'vue-hash-calendar/lib/vue-hash-calendar.css'
 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,
@@ -64,6 +66,8 @@ Vue.use(PullRefresh)
 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

@@ -0,0 +1,48 @@
+<template>
+  <v-touch
+    class='starProcess-container animate__animated'
+    :class='animateCssIsActiveObj.background'
+    :style="'background: url(' + backgroundImage + ') no-repeat'"
+    id='my-node'
+    ref='starProcessContainer'>
+
+  </v-touch>
+  <!--  <div class='starProcess-container animate__animated'-->
+  <!--       :class='[isActive ? animateClassObj.animateIn : ""]'>-->
+
+  <!--  </div>-->
+</template>
+
+<script>
+import backgroundImg1 from '@/assets/images/starProcess/background-img-1.png'
+
+export default {
+  name: 'starProcess',
+  data() {
+    return {
+      backgroundImage: backgroundImg1, // 背景图
+      // 定义存储各模块动画是否开启的对象
+      animateCssIsActiveObj: {
+        background: '' // 页面背景图动画效果
+      },
+      animateCssObj: {
+        fadeIn: 'animate__fadeIn' // 淡入淡出--淡入
+      }
+    }
+  },
+  mounted() {
+    this.animateCssIsActiveObj.background = this.animateCssObj.fadeIn
+  },
+  methods: {}
+}
+</script>
+
+<style lang='scss' scoped>
+.starProcess-container {
+  width: 100%;
+  min-height: 100vh;
+  background-size: 100% 100% !important;
+  background-color: #181935 !important;
+
+}
+</style>