<template>
  <div class="main-bg">
    <h1 class="title">区块链合同</h1>
    <div class="button-inner">
      <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="草稿箱" @click="handleClick" :button-img-src="require('../../static/index/temp.png')"></block-button>
      <block-button button-id="wait_edit" button-name="待修改" @click="handleClick" :button-img-src="require('../../static/index/wait_edit.png')"></block-button>
      <block-button button-id="wait_sign" button-name="待签署" @click="handleClick" :button-img-src="require('../../static/index/wait_sign.png')"></block-button>
      <block-button button-id="already_sign" button-name="已签署" @click="handleClick" :button-img-src="require('../../static/index/already_sign.png')"></block-button>
      <block-button button-id="already_active" button-name="已生效" @click="handleClick" :button-img-src="require('../../static/index/already_active.png')"></block-button>
      <block-button button-id="out_date" button-name="已失效" @click="handleClick" :button-img-src="require('../../static/index/out_date.png')"></block-button>

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

<script>
  import BlockButton from '../components/blcokButton.vue';
    export default {
        name: "index",
      components:{
          BlockButton
      },
      data(){
          return{

          }
      },
      methods:{
          handleClick(id){
              console.log(id);
          }
      }

    }
</script>

<style scoped>
  .main-bg{
    padding: 1px ;
    background-color: #60c0ff;
    height: 100vh;
  }
  .button-inner{
    width: 9.3rem;
    margin: 0.6rem auto 0;
    background-color: #fff;
    border-radius: 0.1rem;

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