feat: mobile address template

src/assets/lang/zh.ts

@@ -35,11 +35,15 @@ export const lang = {
   placeholder: "请输入地址/交易哈希/区块高度",
   address: {
     address: "地址",
+    freeze: "冻结",
     balance: "地址可用余额",
     pleaseSelect: "请选择",
     totalReception: "总接收",
     totalSent: "总发送",
     totalValue: "总价值",
+    accountBalance: "账户余额",
+    votingRecord: "投票记录",
+    packingRecord: "打包记录",
   },
   block: {
     title: "全部区块",

src/components/mobile/m-tabs.vue

@@ -25,7 +25,6 @@
 import Vue, { PropType } from 'vue'
 export default Vue.extend({
   props: {
-    title: String,
     focusedTab: String,
     setFocusedTab: Function,
     tabList: Array as PropType<

src/components/mobile/m-vote-pack.vue

+<template>
+  <div class="c-vote-pack flex items-center px-3.5">
+    <div
+      class="box text-center flex flex-col justify-center"
+      :class="[
+        type === 'vote' ? 'text-orange' : ' text-footer-color',
+        type === 'vote' ? ' bg-lightOrange' : '  bg-lightBlue3',
+      ]"
+    >
+      <div>
+        <span class="text-base font-bold">{{ rewardAmount }}</span>
+        <span class="text-xs">
+          YCC
+        </span>
+      </div>
+      <div>
+        {{ $t('lang.block.blockReward') }}
+      </div>
+    </div>
+    <div class="flex-grow" style="margin-left: 10px;">
+      <div class="flex justify-between" style="margin-bottom: 5px;">
+        <div class="text-darkBlue text-sm font-bold">
+          102938
+        </div>
+        <div class="text-text-color">
+          {{ 2039480923 | formatTime }}
+        </div>
+      </div>
+      <div style="margin-bottom: 5px;">
+        <span class="text-text-color text-xs">
+          {{ $t('lang.txDetail.txHash') }}:
+        </span>
+        <span class="text-footer-color text-xs font-bold">
+          asdlfkjadlsfk
+        </span>
+      </div>
+      <div>
+        <span class="text-text-color text-xs">
+          {{ $t('lang.trade.sender') }}:
+        </span>
+        <span class="text-footer-color text-xs font-bold">
+          asdlfkjadlsfk
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import Vue, { PropType } from 'vue'
+export default Vue.extend({
+  props: {
+    type: String as PropType<'vote' | 'pack'>,
+    rewardAmount: Number,
+    height: Number,
+    txHash: String,
+    sender: String,
+    timeBlock: Number,
+  },
+})
+</script>
+<style lang="scss" scoped>
+.c-vote-pack {
+  height: 90px;
+  background: #ffffff;
+  border-radius: 2px;
+  border-bottom: 1px solid #f5f5ff;
+  .box {
+    width: 90px;
+    height: 54px;
+    border-radius: 2px;
+  }
+}
+</style>

src/components/pc/Select.vue

 <template>
   <div class="relative c-select">
     <div
-      class="select flex items-center justify-between cursor-pointer"
+      class="select flex items-center justify-between cursor-pointer overflow-hidden"
+      :class="{ 'select-small': size === 'small' }"
       ref="select"
     >
-      <div class="selected-txt">
+      <div
+        class="selected-txt flex-grow overflow-hidden overflow-ellipsis"
+        :class="{ 'selected-txt-small': size === 'small' }"
+      >
         {{
           selectedOptionName === undefined
             ? $t('lang.address.pleaseSelect')
@@ -15,12 +19,14 @@
         src="@/assets/images/blockChainBrowser/address/arrow-down.png"
         alt=""
         class="arrow transition-transform transform"
-        :class="{ 'rotate-179': open }"
+        :class="{ 'rotate-180': open }"
       />
     </div>
     <div
       class="options absolute top-full transition-all mt-1"
-      :class="{}"
+      :class="{
+        ' right-0': optionPosition === 'right',
+      }"
       v-show="open"
     >
       <div class="overflow-auto h-full" style="max-height: 200px;">
@@ -50,6 +56,14 @@
 import Vue, { PropType } from 'vue'
 export default Vue.extend({
   props: {
+    size: {
+      type: String as PropType<'big' | 'small'>,
+      default: 'big',
+    },
+    optionPosition: {
+      type: String as PropType<'left' | 'right'>,
+      default: 'left',
+    },
     searchPlaceholder: {
       type: String,
     },
@@ -116,6 +130,11 @@ export default Vue.extend({
     font-weight: bold;
     color: #ffffff;
     margin-left: 10px;
+    white-space: nowrap;
+  }
+  .selected-txt-small {
+    font-size: 14px;
+    margin-left: 5px;
   }
   .select {
     width: 100px;
@@ -128,6 +147,10 @@ export default Vue.extend({
       margin: 0 10px;
     }
   }
+  .select-small {
+    width: 70px;
+    height: 30px;
+  }
   .options {
     width: 310px;
     background: #ffffff;

src/mixin/address.ts

@@ -4,9 +4,26 @@ export default Vue.extend({
   data() {
     return {
       value: "",
+      focusedTab: "1",
     };
   },
   computed: {
+    tabList() {
+      return [
+        {
+          name: this.$t("lang.trade.txRecord"),
+          value: "1",
+        },
+        {
+          name: this.$t("lang.address.votingRecord"),
+          value: "2",
+        },
+        {
+          name: this.$t("lang.address.packingRecord"),
+          value: "3",
+        },
+      ];
+    },
   },
   methods: {
     setValue(v: string) {

src/router/index.ts

@@ -52,7 +52,7 @@ const routes: Array<RouteConfig> = [
       {
         path: '/address',
         name: '个人地址',
-        component: () => import(`@/views/${file}/address.vue`),
+        component: () => import(`@/views/${file}/address/index.vue`),
       }
     ],
   },

src/views/mobile/address/components/m-address-overview/index.vue

+<template>
+  <div class="c-address-overview">
+    <m-address-display class="mx-3.5"></m-address-display>
+    <m-address-blue-card></m-address-blue-card>
+    <m-four-params class="my-3.5"></m-four-params>
+    <m-address-balance-graph class="mx-3.5"></m-address-balance-graph>
+  </div>
+</template>
+<script lang="ts">
+import mAddressDisplay from './m-address-display.vue'
+import VueTypedMixins from 'vue-typed-mixins'
+import AddressOverview from '@/mixin/componentsMixin/AddressOverview'
+import MAddressBlueCard from './m-address-blue-card.vue'
+import MFourParams from './m-four-params.vue'
+import MAddressBalanceGraph from './m-address-balance-graph.vue'
+export default VueTypedMixins(AddressOverview).extend({
+  components: {
+    mAddressDisplay,
+    MAddressBlueCard,
+    MFourParams,
+    MAddressBalanceGraph,
+  },
+})
+</script>
+<style lang="scss" scoped>
+.c-address-overview {
+  background: #ffffff;
+  box-shadow: 0px 1px 8px 0px rgba(31, 52, 112, 0.06);
+  border-radius: 2px;
+}
+</style>

src/views/mobile/address/components/m-address-overview/m-address-balance-graph.vue

+<template>
+  <div class="c-balance-graph">
+    <div class="flex items-center justify-between">
+      <dir>
+        {{ $t('lang.address.accountBalance') }}
+      </dir>
+      <div class="">
+        <span class="text-text-color ml-3">W1</span>
+        <span class="text-footer-color font-bold ml-3">M1</span>
+        <span class="text-text-color ml-3">M6</span>
+        <span class="text-text-color ml-3">Y1</span>
+        <span class="text-text-color ml-3">ALL</span>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import Vue from 'vue'
+export default Vue.extend({})
+</script>
+<style lang="scss" scoped>
+.c-balance-graph {
+  height: 140px;
+  background: #ffffff;
+  border-radius: 2px;
+}
+</style>

src/views/mobile/address/components/m-address-overview/m-address-blue-card.vue

+<template>
+  <div
+    class="c-address-blue-card px-4 flow-root"
+    :style="{
+      backgroundImage: `url(${balanceBg})`,
+    }"
+  >
+    <div class="flex items-center mt-7 justify-between">
+      <div class="yccIcon">
+        <img
+          src="@/assets/images/blockChainBrowser/address/yccIcon.png"
+          class="w-full h-full"
+          alt=""
+        />
+      </div>
+      <Select size="small" :optionPosition="'right'"></Select>
+    </div>
+    <div class="text-white mt-3.5 text-xs">
+      {{ $t('lang.address.balance') }}
+    </div>
+    <div class="text-white mt-1 text-3xl font-bold">
+      1-0293-0123YCC
+    </div>
+    <div class="text-white text-xs" style="margin-top: 5px;">
+      {{ $t('lang.address.freeze') }}
+      0 YCC
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Select from '@/components/pc/Select.vue'
+import balanceBg from '@/assets/images/blockChainBrowser/address/balanceBg-mobile.png'
+import Vue from 'vue'
+export default Vue.extend({
+  components: {
+    Select,
+  },
+  data() {
+    return {
+      balanceBg,
+    }
+  },
+})
+</script>
+<style lang="scss" scoped>
+.c-address-blue-card {
+  height: 180px;
+  background-color: #2545cb;
+  background-repeat: no-repeat;
+  background-position: right;
+  background-size: 172px 151px;
+  border-radius: 10px;
+  .yccIcon {
+    width: 25px;
+    height: 25px;
+  }
+}
+</style>

src/views/mobile/address/components/m-address-overview/m-address-display.vue

+<template>
+  <div class="c-address-display flex items-center">
+    <div class="text-text-color text-sm mr-3.5">
+      {{ $t('lang.address.address') }}
+    </div>
+    <div class="text-darkBlue font-bold text-sm">
+      {{ 'alskdjflkasdf' | filterHash(10) }}
+    </div>
+    <m-copy-btn :copyTxt="'laksdjf'" class="ml-2 mr-5"></m-copy-btn>
+    <div class="qrcodeBox flex items-center justify-center">
+      <div class="qrcodeContainer">
+        <Popover placement="bottom" trigger="click">
+          <canvas id="qrcode" style="margin: 13px;"></canvas>
+          <img
+            slot="reference"
+            :src="qrcodeIcon"
+            class="w-full h-full"
+            alt=""
+          />
+        </Popover>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import MCopyBtn from '@/components/mobile/m-copyBtn.vue'
+import qrcodeIcon from '@/assets/images/blockChainBrowser/address/qrcodeIcon.png'
+import { Popover } from 'element-ui'
+import Vue from 'vue'
+export default Vue.extend({
+  components: { MCopyBtn, Popover },
+  data() {
+    return {
+      qrcodeIcon,
+    }
+  },
+})
+</script>
+<style lang="scss" scoped>
+.c-address-display {
+  height: 50px;
+  .qrcodeBox {
+    height: 25px;
+    width: 25px;
+    background-color: rgba(37, 69, 203, 0.1);
+    .qrcodeContainer {
+      width: 17px;
+      height: 17px;
+    }
+  }
+}
+</style>

src/views/mobile/address/components/m-address-overview/m-four-params.vue

+<template>
+  <div class="c-four-params flex flex-wrap">
+    <div class="param">
+      <div
+        class="text-text-color text-xs mt-2.5 ml-7"
+        style="margin-bottom: 2px;"
+      >
+        {{ $t('lang.address.totalReception') }}
+      </div>
+      <div class="text-title-color text-sm font-bold ml-7">1123</div>
+    </div>
+    <div class="param">
+      <div
+        class="text-text-color text-xs mt-2.5 ml-7"
+        style="margin-bottom: 2px;"
+      >
+        {{ $t('lang.address.totalSent') }}
+      </div>
+      <div class="text-title-color text-sm font-bold ml-7">1123</div>
+    </div>
+    <div class="param">
+      <div
+        class="text-text-color text-xs mt-2.5 ml-7"
+        style="margin-bottom: 2px;"
+      >
+        {{ $t('lang.block.txCount') }}
+      </div>
+      <div class="text-title-color text-sm font-bold ml-7">1123</div>
+    </div>
+    <div class="param">
+      <div
+        class="text-text-color text-xs mt-2.5 ml-7"
+        style="margin-bottom: 2px;"
+      >
+        {{ $t('lang.address.totalValue') }}
+      </div>
+      <div class="text-title-color text-sm font-bold ml-7">
+        laksjdf
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import Vue from 'vue'
+export default Vue.extend({})
+</script>
+<style lang="scss" scoped>
+.param {
+  width: 50%;
+  flex-shrink: 0;
+  height: 55px;
+  background: #ffffff;
+  border-radius: 2px;
+}
+</style>

src/views/mobile/address/index.vue

+<template>
+  <div class="c-address mx-3.5 flow-root">
+    <m-chain-search class="mt-3.5"></m-chain-search>
+    <m-address-overview class="mt-5"></m-address-overview>
+    <m-tabs
+      :focusedTab="focusedTab"
+      :setFocusedTab="($event) => (focusedTab = $event)"
+      :tabList="tabList"
+    ></m-tabs>
+    <m-vote-pack :rewardAmount="30" class="mb-3" :type="'lskjd'"></m-vote-pack>
+  </div>
+</template>
+<script lang="ts">
+import MChainSearch from '@/components/mobile/m-chainSearch.vue'
+import MTabs from '@/components/mobile/m-tabs.vue'
+import MVotePack from '@/components/mobile/m-vote-pack.vue'
+import address from '@/mixin/address'
+import VueTypedMixins from 'vue-typed-mixins'
+import MAddressOverview from './components/m-address-overview/index.vue'
+export default VueTypedMixins(address).extend({
+  components: {
+    MChainSearch,
+    MAddressOverview,
+    MTabs,
+    MVotePack,
+  },
+})
+</script>
+<style lang="scss" scoped>
+.c-address {
+  padding-top: 44px;
+}
+</style>

tailwind.config.js

@@ -40,9 +40,11 @@ module.exports = {
       'bgfootercolor': '#f9fafb',
       "lightBlue": "#4FDDFC",
       lightBlue2: 'rgba(79, 221, 252, 0.04)',
+      lightBlue3: "rgba(37, 69, 203, 0.1)",
       'active': '#0276F7',
       "darkBlue": "#1F3470",
       'orange': '#F8A457',
+      lightOrange: 'rgba(248, 164, 87, 0.1)',
       black: colors.black,
       white: colors.white,
       gray: colors.coolGray,

vue.config.js

@@ -21,7 +21,8 @@ module.exports = {
         changeOrigin: true,
       },
       "/yccApi": {
-        target: "https://mainnet.yuan.org/api",
+        // target: "https://mainnet.yuan.org/api",
+        target: "http://13.115.171.240:7901/",
         pathRewrite: {
           "^/yccApi": ""
         },