contract/src/views/index.vue

<template>
  <div class="main-bg">
    <h1 class="title">区块链合同</h1>
    <div class="button-inner clearfix">
      <block-button button-id="upload_contract" button-name="上传合同" @click="handleClick" :button-img-src="require('../../static/index/upload_contract.png')"></block-button>
      <block-button button-id="template_create" button-name="模版创建" @click="handleClick" :button-img-src="require('../../static/index/template_create.png')"></block-button>
      <block-button button-id="temp" :button-name="'草稿箱('+count.temp+')'" @click="handleClick" :button-img-src="require('../../static/index/temp.png')"></block-button>
      <block-button button-id="wait_edit" :button-name="'待修改('+count.wait_edit+')'" @click="handleClick" :button-img-src="require('../../static/index/wait_edit.png')"></block-button>
      <block-button button-id="wait_sign" :button-name="'待签署('+count.wait_sign+')'" @click="handleClick" :button-img-src="require('../../static/index/wait_sign.png')"></block-button>
      <block-button button-id="already_sign" :button-name="'已签署('+count.already_sign+')'" @click="handleClick" :button-img-src="require('../../static/index/already_sign.png')"></block-button>
      <block-button class="no-bottom-border" button-id="already_active" :button-name="'已生效('+count.already_active+')'" @click="handleClick" :button-img-src="require('../../static/index/already_active.png')"></block-button>
      <block-button class="no-bottom-border" button-id="out_date" :button-name="'已失效('+count.out_date+')'" @click="handleClick" :button-img-src="require('../../static/index/out_date.png')"></block-button>

    </div>
  </div>
</template>

<script>
  import BlockButton from '../components/blockButton.vue';
    export default {
        name: "index",
      components:{
          BlockButton
      },
      data(){
          return{
            count:{
              temp:0,
              wait_edit:0,
              wait_sign:0,
              already_sign:0,
              already_active:0,
              out_date:0
            }
          }
      },
      mounted(){
        // console.log(this.ADRESS.indexCount)
        this.$http.get(this.ADRESS.indexCount).then((response)=>{
          // console.log(response.data)
          this.count=response.data.data
        })
      },
      methods:{
          handleClick(id){
              console.log(id);
          }
      }

    }
</script>

<style scoped>
  .main-bg{
    background-color: #60c0ff;
    height: 100%;
    display: flex;

    flex-direction: column;
    align-items: center;
    justify-content: space-around;
  }
  .no-bottom-border{
    border-bottom: 0!important;
  }
  .button-inner{
    width: 9.3rem;
    margin: 0 auto 0;
    background-color: #fff;
    border-radius: 0.1rem;

    /*padding-bottom: 0.5rem;*/

  }
  .title{
    text-align: center;
    font-size: 0.5rem;
    /*margin-top: 0.5rem;*/
    color: #fff;

  }
</style>