style: 活动小球浮动延迟

src/jfw/modules/app/src/web/templates/frontRouter/activity/sess/task.html

@@ -37,7 +37,7 @@
                 <div class="mission-list" ref="missions">
                     <div
                         class="mission-list-item floating"
-                        :class="{ complete: item.complete, hide: item.hide, [item.id]: true }"
+                        :class="{ complete: item.complete, hide: item.hide, [item.id]: true, [item.className]: true }"
                         v-for="item in missionsList"
                         :id="'bubble-' + item.id"
                         :style="{ left: item.x + 'rem', top: item.y + 'rem' }"

src/web/staticres/common-module/active/2022.5.20/task.css

@@ -530,6 +530,12 @@
   animation: floating 1.3s ease-in-out 1.3s infinite alternate;
   transition: left,right,top,bottom 1.3s ease;
 }
+.floating.delay-100 {
+  animation-delay: 0.1s;
+}
+.floating.delay-300 {
+  animation-delay: 0.3s;
+}
 
 @keyframes floating {
   from {

src/web/staticres/common-module/active/2022.5.20/task.js

@@ -156,6 +156,7 @@ var task = new Vue({
     missionsList: [
       {
         id: 'subscribe',
+        className: '',
         x: 0.2,
         y: 0.94, // rem
         num: 300,
@@ -166,6 +167,7 @@ var task = new Vue({
       },
       {
         id: 'invite',
+        className: 'delay-100',
         x: 2.84,
         y: 0.06,
         num: 500,
@@ -176,6 +178,7 @@ var task = new Vue({
       },
       {
         id: 'improveInfo',
+        className: 'delay-300',
         x: 4.8,
         y: 0.82,
         num: 200,
@@ -447,7 +450,7 @@ var task = new Vue({
     },
     onClickListItem: function (item) {
       if (item.icon === 'jy-svip') {
-        if (this.isWeiXinBrowser) {
+        if (utils.isWeiXinBrowser) {
           location.href = '/weixin/pay/toMyWxOrder?active=0'
         } else {
           location.href = '/jyapp/front/myOrder/toMyOrder?active=0'

src/web/staticres/frontRouter/pc/activity/css/task.css

@@ -532,6 +532,12 @@
   animation: floating 1.3s ease-in-out 1.3s infinite alternate;
   transition: all 1.3s ease;
 }
+.floating.delay-100 {
+  animation-delay: 0.1s;
+}
+.floating.delay-300 {
+  animation-delay: 0.3s;
+}
 
 @keyframes floating {
   from {

src/web/staticres/frontRouter/pc/activity/js/task.js

@@ -204,6 +204,7 @@ var task = new Vue({
     missionsList: [
       {
         id: 'subscribe',
+        className: '',
         x: 190,
         y: 120,
         num: 300,
@@ -214,6 +215,7 @@ var task = new Vue({
       },
       {
         id: 'invite',
+        className: 'delay-100',
         x: 380,
         y: 0,
         num: 500,
@@ -224,6 +226,7 @@ var task = new Vue({
       },
       {
         id: 'improveInfo',
+        className: 'delay-300',
         x: 900,
         y: 80,
         num: 200,

src/web/templates/frontRouter/pc/activity/sess/task.html

@@ -51,7 +51,7 @@
             <div
                 class="mission-list-item floating"
                 :id="'bubble-' + item.id"
-                :class="{ complete: item.complete, [item.id]: true}"
+                :class="{ complete: item.complete, [item.id]: true, [item.className]: true }"
                 v-for="item in missionsList"
                 v-show="!item.hide"
                 :style="{ left: item.x + 'px', top: item.y + 'px' }"

src/web/templates/frontRouter/wx/activity/sess/task.html

@@ -37,7 +37,7 @@
                 <div class="mission-list" ref="missions">
                     <div
                         class="mission-list-item floating"
-                        :class="{ complete: item.complete, hide: item.hide, [item.id]: true }"
+                        :class="{ complete: item.complete, hide: item.hide, [item.id]: true, [item.className]: true }"
                         v-for="item in missionsList"
                         :id="'bubble-' + item.id"
                         :style="{ left: item.x + 'rem', top: item.y + 'rem' }"