feat: add vue-count-to

package-lock.json

@@ -25,6 +25,7 @@
         "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.1.0",
         "terser-webpack-plugin": "^5.1.2",
         "vue": "^2.6.11",
+        "vue-count-to": "^1.0.13",
         "vue-i18n": "^8.24.4",
         "vue-router": "^3.2.0",
         "vue-typed-mixins": "^0.2.0",
@@ -16718,6 +16719,11 @@
       "integrity": "sha1-9evU+mvShpQD4pqJau1JBEVskSM=",
       "license": "MIT"
     },
+    "node_modules/vue-count-to": {
+      "version": "1.0.13",
+      "resolved": "https://registry.npmjs.org/vue-count-to/-/vue-count-to-1.0.13.tgz",
+      "integrity": "sha512-6R4OVBVNtQTlcbXu6SJ8ENR35M2/CdWt3Jmv57jOUM+1ojiFmjVGvZPH8DfHpMDSA+ITs+EW5V6qthADxeyYOQ=="
+    },
     "node_modules/vue-eslint-parser": {
       "version": "7.6.0",
       "resolved": "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-7.6.0.tgz",
@@ -30313,6 +30319,11 @@
       "resolved": "https://registry.nlark.com/vue/download/vue-2.6.12.tgz?cache=0&sync_timestamp=1620856192360&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fvue%2Fdownload%2Fvue-2.6.12.tgz",
       "integrity": "sha1-9evU+mvShpQD4pqJau1JBEVskSM="
     },
+    "vue-count-to": {
+      "version": "1.0.13",
+      "resolved": "https://registry.npmjs.org/vue-count-to/-/vue-count-to-1.0.13.tgz",
+      "integrity": "sha512-6R4OVBVNtQTlcbXu6SJ8ENR35M2/CdWt3Jmv57jOUM+1ojiFmjVGvZPH8DfHpMDSA+ITs+EW5V6qthADxeyYOQ=="
+    },
     "vue-eslint-parser": {
       "version": "7.6.0",
       "resolved": "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-7.6.0.tgz",

package.json

@@ -25,6 +25,7 @@
     "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.1.0",
     "terser-webpack-plugin": "^5.1.2",
     "vue": "^2.6.11",
+    "vue-count-to": "^1.0.13",
     "vue-i18n": "^8.24.4",
     "vue-router": "^3.2.0",
     "vue-typed-mixins": "^0.2.0",

src/components/pc/BlockChainBrowser/ChainOverview/ChainCard.vue

@@ -14,7 +14,13 @@
           class="text-title-color font-bold"
           style="font-size: 32px; font-family: DINAlternate-Bold, DINAlternate;"
         >
-          {{ item.number }}
+          <countto
+            ref="countto"
+            :startVal="0"
+            :endVal="item.number"
+            :autoplay="false"
+            :duration="2000"
+          ></countto>
         </div>
       </div>
     </div>
@@ -22,8 +28,12 @@
 </template>
 <script lang="ts">
 import Vue, { PropType } from 'vue'
+import countto from 'vue-count-to'
 
 export default Vue.extend({
+  components: {
+    countto,
+  },
   props: {
     msgList: Array as PropType<
       {
@@ -33,6 +43,38 @@ export default Vue.extend({
       }[]
     >,
   },
+  computed: {
+    first(): any {
+      return this.msgList[0]
+    },
+    second(): any {
+      return this.msgList[1]
+    },
+    third(): any {
+      return this.msgList[2]
+    },
+    fourth(): any {
+      return this.msgList[3]
+    },
+  },
+  watch: {
+    first(v) {
+      // eslint-disable-next-line @typescript-eslint/no-extra-semi
+      ;(this.$refs.countto as any)[0].start()
+    },
+    second(v) {
+      // eslint-disable-next-line @typescript-eslint/no-extra-semi
+      ;(this.$refs.countto as any)[1].start()
+    },
+    third(v) {
+      // eslint-disable-next-line @typescript-eslint/no-extra-semi
+      ;(this.$refs.countto as any)[2].start()
+    },
+    fourth(v) {
+      // eslint-disable-next-line @typescript-eslint/no-extra-semi
+      ;(this.$refs.countto as any)[3].start()
+    },
+  },
 })
 </script>
 <style scoped>

src/components/pc/BlockChainBrowser/ChainTitle.vue

@@ -33,16 +33,22 @@ export default Vue.extend({
 
 <style scoped>
 .yc {
-  animation-name: fadeIn;
+  position: relative;
+
+  animation-name: slideUp2;
   animation-duration: 1.5s;
   animation-timing-function: ease;
   animation-fill-mode: forwards;
+  animation-delay: 0.3s;
   opacity: 0;
-  z-index: 4;
+
+  z-index: 6;
 }
 .cc {
+  position: relative;
   animation-name: slideIn;
   animation-duration: 1.5s;
+  animation-delay: 1.4s;
   animation-timing-function: ease;
   animation-fill-mode: forwards;
   margin-left: -100px;
@@ -50,22 +56,18 @@ export default Vue.extend({
   z-index: 4;
 }
 .chain-title-txt {
-  animation-name: slideUp;
+  animation-name: slideUp2;
   animation-duration: 1.5s;
   animation-timing-function: ease;
   animation-fill-mode: forwards;
-  animation-delay: 0.3s;
+  animation-delay: 0.7s;
   opacity: 0;
-  z-index: 4;
+  z-index: 6;
 }
 
-.cc {
-  z-index: 4;
-}
 .yc {
   position: relative;
   margin-right: 4px;
-  z-index: 4;
 }
 .title {
   font-size: 53px;

src/components/pc/BlockChainBrowser/LatestTx/index.vue

@@ -10,7 +10,13 @@
           <div>
             <span class="graytxt">{{ $t('lang.trade.hash') }}：</span>
             <span class="text-footer-color">
-              {{ item.hash | filterHash }}
+              <router-link
+                :to="{
+                  path: '/',
+                }"
+              >
+                {{ item.hash | filterHash }}
+              </router-link>
             </span>
           </div>
           <div class="graytxt">

src/global.d.ts

@@ -3,3 +3,4 @@ declare module "@33cn/chain33-transaction-parser";
 declare module "*/lang/en";
 declare module "*/lang/zh-CN";
 declare module "element-ui/lib/locale";
+declare module "vue-count-to";

src/mixin/blockChainBrowser.ts

@@ -95,7 +95,6 @@ export default Vue.extend({
     },
   },
   computed: {
-   
     msgList(): any[] {
       return [
         {

src/views/pc/blockChainBrowser.vue

@@ -72,7 +72,7 @@ export default VueTypedMixins(blockChainBrowserMixin).extend({
 
 .chainCard {
   position: absolute;
-  z-index: 2;
+  z-index: 6;
   top: 170px;
   animation-name: slideIn;
   animation-duration: 1.2s;
@@ -89,12 +89,13 @@ export default VueTypedMixins(blockChainBrowserMixin).extend({
 }
 .chain-search {
   position: absolute;
+  z-index: 6;
   top: 540px;
   left: 572px;
-  animation-name: slideUp;
+  animation-name: slideUp2;
   animation-duration: 1.5s;
   animation-timing-function: ease;
-  animation-delay: 0.5s;
+  animation-delay: 1s;
   opacity: 0;
   animation-fill-mode: forwards;
 }
@@ -103,13 +104,14 @@ export default VueTypedMixins(blockChainBrowserMixin).extend({
 }
 .blue-card {
   position: absolute;
+  z-index: 5;
   top: 0px;
   left: 197px;
   width: 600px;
   height: 840px;
   background: #2545cb;
   animation-name: slideDown;
-  animation-duration: 1.2s;
+  animation-duration: 1.7s;
   animation-timing-function: ease;
 }
 </style>
@@ -136,6 +138,16 @@ export default VueTypedMixins(blockChainBrowserMixin).extend({
     opacity: 1;
   }
 }
+@keyframes slideUp2 {
+  from {
+    transform: translateY(147px);
+    opacity: 0;
+  }
+  to {
+    transform: translate(0);
+    opacity: 1;
+  }
+}
 
 @keyframes slideDown {
   from {

yarn.lock

@@ -9704,6 +9704,11 @@
   "resolved" "https://registry.nlark.com/vm-browserify/download/vm-browserify-1.1.2.tgz"
   "version" "1.1.2"
 
+"vue-count-to@^1.0.13":
+  "integrity" "sha512-6R4OVBVNtQTlcbXu6SJ8ENR35M2/CdWt3Jmv57jOUM+1ojiFmjVGvZPH8DfHpMDSA+ITs+EW5V6qthADxeyYOQ=="
+  "resolved" "https://registry.npmjs.org/vue-count-to/-/vue-count-to-1.0.13.tgz"
+  "version" "1.0.13"
+
 "vue-eslint-parser@^7.0.0":
   "integrity" "sha1-AeoaKTL1gf8kQzZWXXEoAfj3JWE="
   "resolved" "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-7.6.0.tgz"