动画

package.json

@@ -10,6 +10,7 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
+    "animate.css": "^4.1.0",
     "axios": "^0.19.0",
     "babel-plugin-component": "^1.1.1",
     "babel-polyfill": "^6.26.0",

public/css/phone.scss

@@ -3062,4 +3062,115 @@ i, em {
       height: 200px;
     }
   }
+
+  //动画从小到大 获得积分
+  @-webkit-keyframes getIntegralSmallToBig {
+    0% {
+      width: 0;
+      height: 0;
+    }
+    100% {
+      width: 3.3rem;
+      height: 2.8rem;
+    }
+  }
+
+  @-moz-keyframes getIntegralSmallToBig {
+    0% {
+      width: 0;
+      height: 0;
+    }
+    100% {
+      width: 3.3rem;
+      height: 2.8rem;
+    }
+  }
+
+  @-ms-keyframes getIntegralSmallToBig {
+    0% {
+      width: 0;
+      height: 0;
+    }
+    100% {
+      width: 3.3rem;
+      height: 2.8rem;
+    }
+  }
+
+  @-o-keyframes getIntegralSmallToBig {
+    0% {
+      width: 0;
+      height: 0;
+    }
+    100% {
+      width: 3.3rem;
+      height: 2.8rem;
+    }
+  }
+
+  @keyframes getIntegralSmallToBig {
+    0% {
+      width: 0;
+      height: 0;
+    }
+    100% {
+      width: 3.3rem;
+      height: 2.8rem;
+    }
+  }
+
+  //动画从有到无 获得积分
+  @-webkit-keyframes getIntegralInToOut {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+
+  @-moz-keyframes getIntegralInToOut {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+
+  @-ms-keyframes getIntegralInToOut {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+
+  @-o-keyframes getIntegralInToOut {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+
+  @keyframes getIntegralInToOut {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+
+  .getIntegralDialog{
+    .el-dialog--center .el-dialog__footer{
+      padding-top: 20px !important;
+    }
+    .getIntegralIcon{
+
+    }
+  }
 }
\ No newline at end of file

src/components/mobile/getIntegral.vue

+<template>
+    <div>
+        <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">
+                <span>+{{integral}}</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import $ from 'jquery';//非必要
+    export default {
+        name: "getIntegral",
+        data(){
+            return{
+                fadeIn:false
+            }
+        },
+        props:{
+            visible: {
+                type: Boolean,
+                default: false
+            },
+            integral:{
+                type:Number,
+                default:100
+            }
+        },
+        methods:{
+
+
+        },
+
+        mounted(){
+            if(this.visible){
+                var that = this;
+                setTimeout(function(){
+                    $("#integral").addClass("animate__animated animate__fadeOut")
+                    that.$emit("handleHideIntegral");
+                },1000)
+            }
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    .integralDiv{
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: fixed;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        background: unset;
+        z-index: 2013;
+    }
+    .integral{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 3.3rem;
+        height: 2.8rem;
+        background-image: url("../../assets/img/mobile/getIntegral.png");
+        background-repeat: no-repeat;
+        background-size: contain;
+        font-size: .5rem;
+        color: #fff;
+        >span{
+            padding-top: .5rem;
+            padding-left: .1rem;
+            font-weight: bold;
+        }
+    }
+    .transparentBg{
+        background: unset;
+    }
+</style>
\ No newline at end of file

src/main.js

@@ -6,6 +6,8 @@ import store from './store'
 import "../public/css/common.scss"
 import VueCropper from 'vue-cropper'
 import vuePreview from 'vue-preview'
+import animated from 'animate.css'
+Vue.use(animated)
 // import scroll from 'vue-seamless-scroll'
 // Vue.use(scroll)
 // Vue.use(vuePreview);

src/views/mobile/guess/api.js

@@ -34,5 +34,10 @@ export default {
     //赠送积分
     giveIntegralAxios(params){
         return api.fetchLogin("/base/guess/giveEmpRandomIntegral?isFristGift="+params);
+    },
+
+    //竞猜排行
+    guessRankAxios(params){
+        return api.fetchLogin("/base/guess/selectGuessLeaderboardList?"+Qs.stringify(params));
     }
 }
\ No newline at end of file

src/views/mobile/guess/list.vue

@@ -106,7 +106,7 @@
             </el-dialog>
         </div>
         <applyLoginCmpt v-if="isLogin" @isShowLoginDialogFunc="isShowLoginDialogFunc" :registerType="loginType" :visible="isLogin"></applyLoginCmpt>
-
+        <itegralCmpt :visible="getIntegralVisible" v-if="getIntegralVisible" @handleHideIntegral="handleHideIntegral"></itegralCmpt>
     </div>
 </template>
 
@@ -116,12 +116,14 @@
     import { Toast } from 'mint-ui';
     import bettingCmpt from './bettingCmpt';
     import applyLoginCmpt from '../../../components/mobile/applyLogin';
+    import itegralCmpt from '../../../components/mobile/getIntegral';
     export default {
         name: "success",
         components: {
             breadTop,
             bettingCmpt,
-            applyLoginCmpt
+            applyLoginCmpt,
+            itegralCmpt
         },
         data() {
             return {
@@ -151,7 +153,8 @@
                 userGuideVisible:false,
                 loginType:104,
                 currentOptions:null,
-                giftIntefralInfo:null
+                giftIntefralInfo:null,
+                getIntegralVisible:false
             }
         },
         methods: {
@@ -346,6 +349,11 @@
                 this.handleIsFirst();
             },
 
+            //隐藏积分动画
+            handleHideIntegral(){
+                this.getIntegralVisible = false;
+            },
+
             //试试看
             handleTry(){
                 this.tryVisible = false;

src/views/mobile/guess/rank.vue

@@ -90,6 +90,7 @@
 </template>
 
 <script>
+
     export default {
         name: "rank",
         data() {
@@ -133,6 +134,10 @@
             handleChangeSearch(index) {
                 this.currentSearchIndex = index;
             },
+
+            getGuessRank(){
+
+            }
         },
         mounted() {