提交动画

src/components/mobile/getIntegral.vue

@@ -3,7 +3,7 @@
         <div class="v-modal transparentBg" tabindex="0" style="z-index: 2001;">
         </div>
         <div class="integralDiv" tabindex="0">
-            <div class="integral animate__animated animate__bounceIn" id="integral">
+            <div class="integral animate__animated animate__bounceIn" id="integral" :class="isFirstGuess?'firstIntegral':''">
                 <span>+{{integral}}</span>
             </div>
         </div>
@@ -27,6 +27,10 @@
             integral:{
                 type:Number,
                 default:100
+            },
+            isFirstGuess:{
+                type:Boolean,
+                default:false
             }
         },
         methods:{
@@ -78,6 +82,13 @@
             font-weight: bold;
         }
     }
+    .firstIntegral{
+        background-image: url("../../assets/img/mobile/firstEnterGuess.png");
+        width: 5.6rem;
+        height: 5.6rem;
+        font-size: .6rem;
+        color: #FFF8A0;
+    }
     .transparentBg{
         background: unset;
     }

src/views/mobile/guess/detail.vue

@@ -135,7 +135,7 @@
             </div>
         </div>
         <applyLoginCmpt v-if="isLogin" @isShowLoginDialogFunc="isShowLoginDialogFunc" :registerType="loginType" :visible="isLogin"></applyLoginCmpt>
-        <itegralCmpt :visible="getIntegralVisible" v-if="getIntegralVisible" :integral="integral" @handleHideIntegral="handleHideIntegral"></itegralCmpt>
+        <itegralCmpt :isFirstGuess="isFirstGuess" :visible="getIntegralVisible" v-if="getIntegralVisible" :integral="integral" @handleHideIntegral="handleHideIntegral"></itegralCmpt>
     </div>
 </template>
 
@@ -182,7 +182,7 @@
                 integral:100,
                 giftIntefralInfo:null,
                 loginType:104,
-
+                isFirstGuess:false
             }
         },
         methods: {
@@ -229,6 +229,7 @@
                         this.giftIntefralInfo = res.result;
                         if(res.result.firstBrowsing){
                             this.userGuideVisible = true;
+                            this.isFirstGuess = true;
                         }else{
                             if(res.result.userIntegralValue<100){
                                 this.handleGift(res.result.firstBrowsing);

src/views/mobile/guess/list.vue

@@ -96,7 +96,7 @@
             </div>
         </div>
         <applyLoginCmpt v-if="isLogin" @isShowLoginDialogFunc="isShowLoginDialogFunc" :registerType="loginType" :visible="isLogin"></applyLoginCmpt>
-        <itegralCmpt :visible="getIntegralVisible" v-if="getIntegralVisible" :integral="integral" @handleHideIntegral="handleHideIntegral"></itegralCmpt>
+        <itegralCmpt :isFirstGuess="isFirstGuess" :visible="getIntegralVisible" v-if="getIntegralVisible" :integral="integral" @handleHideIntegral="handleHideIntegral"></itegralCmpt>
     </div>
 </template>
 
@@ -145,6 +145,7 @@
                 currentOptions:null,
                 giftIntefralInfo:null,
                 getIntegralVisible:false,
+                isFirstGuess:false,
                 integral:100,
                 hasData:false,
                 noData:false,
@@ -222,6 +223,7 @@
                         this.giftIntefralInfo = res.result;
                         if(res.result.firstBrowsing){
                             this.userGuideVisible = true;
+                            this.isFirstGuess = true;
                         }else{
                             if(res.result.userIntegralValue<100){
                                 this.handleGift(res.result.firstBrowsing);