<template>
  <div class="works-show">
    <h5>请整理好报告然后提交吧！</h5>
    <div class="container">
      <div class="product">
        产品分析报告
        <div class="btn-bar">
          <el-button type="primary" size="medium" plain round>编辑</el-button>
          <el-button type="primary" size="medium" round>提交</el-button>
        </div>
      </div>
      <div class="user">
        用户分析报告
        <div class="btn-bar">
          <el-button type="primary" size="medium" plain round>查看</el-button>
          <el-button type="primary" size="medium" round>成绩</el-button>
        </div>
      </div>
      <div class="tool">
        营销工具使用
        <div class="btn-bar">
          <el-button type="primary" size="medium" plain round>编辑</el-button>
          <el-button type="primary" size="medium" round>提交</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  }
}
</script>

<style scoped>
.works-show{
  height:calc(100vh - 86px);
  width:1180px;
  margin:0 auto;
}
h5{
  font-size:18px;
  line-height:120px;
  font-weight:normal;
  text-indent: 20px;
  color:#666;
  text-align:center;
}
.container{
  /* display: flex; */
  text-align:center;
}
.container>div{
  width:260px;
  height:360px;
  padding-top:240px;
  background:#fff;
  border-radius:10px;
  margin-right:20px;
  text-align:center;
  color:#777;
  display:inline-block;
}
.container .product{
  background:url('@/assets/images/works_show_icon1.png') #fff no-repeat center 8px;
}
.container .user{
  background:url('@/assets/images/works_show_icon2.png') #fff no-repeat center 10px;
}
.container .tool{
  background:url('@/assets/images/works_show_icon3.png') #fff no-repeat center 4px;
}
.btn-bar{
  padding-top:20px;
  border-top:1px dashed #c3c3c3;
  margin:20px 20px 0;
}
.btn-bar .el-button{
  padding:6px 22px;
}
</style>
