consensus-node template

src/components/mobile/m-consensus-node.vue

+<template>
+  <div class="consensus-node bg-white">
+    <div
+      class="box"
+      :style="{
+        backgroundColor:
+          type === 'package' ? 'rgba(248, 164, 87, 0.05)' : 'white',
+      }"
+    >
+      <div class="flex items-center justify-between">
+        <div class="text-darkBlue text-sm font-bold">
+          {{
+            type === 'package'
+              ? $t('lang.block.packingNode')
+              : $t('lang.block.votingNode')
+          }}
+        </div>
+        <Count :time="109280192" class="text-text-color text-xs"></Count>
+      </div>
+      <div class="flex justify-between items-center">
+        <div>
+          <span class="text-text-color text-xs">
+            {{ $t('lang.block.consensusAddress') }}:
+          </span>
+          <span
+            class="text-text-color text-xs"
+            :class="[
+              type === 'package' ? ' text-orange' : ' text-footer-color',
+            ]"
+          >
+            {{ 'aslkdjfla' | filterHash }}
+          </span>
+        </div>
+        <div class="mt-2">
+          <span class="text-text-color text-xs">
+            {{ $t('lang.block.blockReward') }}:
+          </span>
+          <span class="font-bold text-darkBlue text-xs">
+            11YCC
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import Vue, { PropType } from 'vue'
+import Count from '../pc/BlockChainBrowser/Count.vue'
+export default Vue.extend({
+  components: {
+    Count,
+  },
+  props: {
+    type: {
+      type: String as PropType<'package' | 'vote'>,
+      default: 'package',
+    },
+  },
+})
+</script>
+<style lang="scss" scoped>
+.consensus-node {
+  .box {
+    padding: 10px;
+    margin: 5px;
+    height: 70px;
+    border-radius: 2px;
+  }
+}
+</style>

src/views/mobile/blockDetail/index.vue

@@ -19,7 +19,7 @@
       :focusedTab="focusedTab"
       :setFocusedTab="setFocusedTab"
     ></m-tabs>
-    <div v-if="focusedTab === '1'" class=" flow-root">
+    <div v-if="focusedTab === '1'" class="flow-root">
       <m-tx-item
         v-for="(trade, i) in Trades"
         :key="i"
@@ -40,6 +40,10 @@
         :total="pages.total"
       ></m-page-container>
     </div>
+    <div v-if="focusedTab === '2'" class="flow-root">
+      <m-consensus-node></m-consensus-node>
+      <m-consensus-node type="vote"></m-consensus-node>
+    </div>
   </div>
 </template>
 <script lang="ts">
@@ -50,6 +54,7 @@ import MBlockDescCard from '@/components/mobile/m-block-desc-card.vue'
 import MTabs from '@/components/mobile/m-tabs.vue'
 import MTxItem from '@/components/mobile/m-txItem.vue'
 import MPageContainer from '@/components/mobile/m-pageContainer.vue'
+import MConsensusNode from '@/components/mobile/m-consensus-node.vue'
 export default VueTypedMixins(blockDetailMixin).extend({
   components: {
     MChainSearch,
@@ -57,6 +62,7 @@ export default VueTypedMixins(blockDetailMixin).extend({
     MTabs,
     MTxItem,
     MPageContainer,
+    MConsensusNode,
   },
 })
 </script>

tailwind.config.js

@@ -42,6 +42,7 @@ module.exports = {
       lightBlue2: 'rgba(79, 221, 252, 0.04)',
       'active': '#0276F7',
       "darkBlue": "#1F3470",
+      'orange': '#F8A457',
       black: colors.black,
       white: colors.white,
       gray: colors.coolGray,