<template>
  <div class="companydetail">
    <div class="companydetail-top">
      <span></span>
      <div>
        北京蜀天下科技有限公司详情
      </div>
    </div>
    <div class="companydetail-main">
      <div class="companydetail-main-item">
        <div class="companydetail-main-title">交付流程</div>
        <div class="companydetail-main-container">
          <el-steps :active="2" align-center>
            <el-step title="已下单"></el-step>
            <el-step title="已提交材料"></el-step>
            <el-step title="初审通过"></el-step>
            <el-step title="工商审核通过"></el-step>
            <el-step title="刻章完成"></el-step>
            <el-step title="证件已邮寄"></el-step>
            <el-step title="已签收"></el-step>
          </el-steps>
        </div>
      </div>
      <div class="companydetail-main-item">
        <div class="companydetail-main-title">企业信息</div>
        <div class="companydetail-main-container">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="公司名称"> </el-table-column>
            <el-table-column prop="address" label="备选名称"> </el-table-column>
            <el-table-column prop="name" label="公司类型"> </el-table-column>
            <el-table-column prop="address" label="组织形式"> </el-table-column>
            <el-table-column prop="name" label="注册地区"> </el-table-column>
            <el-table-column prop="address" label="行业分类"> </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="companydetail-main-item">
        <div class="companydetail-main-title">企业信息</div>
        <div class="companydetail-main-container">
          <table class="tableList">
            <tr>
              <td rowspan="7" width="50" height="290">
                注 <br />
                册<br />资<br />本<br />/<br />出<br />资<br />比<br />例
              </td>
              <td colspan="2">注册资金（万元）100</td>
              <td colspan="2">经营期限（年）20</td>
              <td colspan="2">注册资本实缴日期（年）20</td>
            </tr>
            <tr>
              <td>法人股东姓名</td>
              <td>出资金额（万）</td>
              <td>出资比例</td>
              <td>身份证号</td>
              <td>联系电话/手机</td>
              <td>联系地址</td>
            </tr>
            <tr>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td>法人股东姓名</td>
              <td>出资金额（万）</td>
              <td>出资比例</td>
              <td>身份证号</td>
              <td>联系电话/手机</td>
              <td>联系地址</td>
            </tr>
            <tr>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td>法人股东姓名</td>
              <td>出资金额（万）</td>
              <td>出资比例</td>
              <td>身份证号</td>
              <td>联系电话/手机</td>
              <td>联系地址</td>
            </tr>
            <tr>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
          </table>
        </div>
      </div>
      <div class="companydetail-main-item">
        <div class="companydetail-main-title">基本信息</div>
        <div class="companydetail-main-container">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="任职信息"> </el-table-column>
            <el-table-column prop="address" label="姓名"> </el-table-column>
            <el-table-column prop="name" label="手机"> </el-table-column>
            <el-table-column prop="address" label="固话"> </el-table-column>
            <el-table-column prop="name" label="住宅地址"> </el-table-column>
            <el-table-column prop="address" label="邮箱"> </el-table-column>
          </el-table>
          <div class="mid"></div>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="纳税人类别"> </el-table-column>
            <el-table-column prop="address" label="公积金缴存比例（%）">
            </el-table-column>
            <el-table-column prop="name" label="公司经营范围">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="companydetail-main-item">
        <div class="companydetail-main-title">交官材料</div>
        <div class="companydetail-main-container">
          <div class="picture-items">
            <div class="picture-item">
              <p>
                <img src="" alt="" />
              </p>
              <p>法人身份证</p>
              <p>正面</p>
            </div>
            <div class="picture-item">
              <p>
                <img src="" alt="" />
              </p>
              <p>法人身份证</p>
              <p>反面</p>
            </div>
            <div class="picture-item">
              <p>
                <img src="" alt="" />
              </p>
              <p>自然人(1)身份证</p>
              <p>正面</p>
            </div>
            <div class="picture-item">
              <p>
                <img src="" alt="" />
              </p>
              <p>自然人(1)身份证</p>
              <p>反面</p>
            </div>
            <div class="picture-item">
              <p>
                <img src="" alt="" />
              </p>
              <p>自然人(2)身份证</p>
              <p>正面</p>
            </div>
            <div class="picture-item">
              <p>
                <img src="" alt="" />
              </p>
              <p>自然人(2)身份证</p>
              <p>反面</p>
            </div>
          </div>
        </div>
      </div>
      <div class="companydetail-main-item">
        <div class="companydetail-main-title">官方回执</div>
        <div class="companydetail-main-container">
          <div class="picture-items">
            <div class="picture-item">
              <p>
                <img src="" alt="" />
              </p>
              <p>营业执照</p>
            </div>
          </div>
        </div>
      </div>
      <div class="companydetail-main-item">
        <div class="companydetail-main-title">收件人信息</div>
        <div class="companydetail-main-container">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="收件人"> </el-table-column>
            <el-table-column prop="address" label="收件人地址">
            </el-table-column>
            <el-table-column prop="name" label="收件人联系方式">
            </el-table-column>
            <el-table-column prop="name" label="收件人邮箱"> </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ]
    };
  }
};
</script>
<style lang="scss">
.companydetail {
  padding: 0 20px;
}
.companydetail-top {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  span {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: rgb(255, 255, 255);
    border: 3px solid rgb(48, 113, 254);
    border-radius: 100%;
  }
  div {
    flex: 1;
    font-size: 16px;
    margin-left: 10px;
    display: flex;
    align-items: center;
  }
}
.companydetail-main {
  width: 100%;
  .companydetail-main-item {
    width: 100%;
    .companydetail-main-title {
      background: #eef2fb;
      width: 100%;
      height: 32px;
      line-height: 32px;
      padding: 0 12px;
      font-family: PingFangSC-Regular;
      font-size: 12px;
      color: #333;
    }
    .companydetail-main-container {
      width: 100%;
      padding: 20px;
      ////////进度条
      .is-finish > .el-step__line {
        border-color: #3071fe;
      }
      .el-step__line {
        background-color: #eef2fb;
      }
      .is-finish .el-step__icon-inner {
        color: #fff;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 14px;
      }
      .is-process .el-step__icon-inner {
        color: #bbb;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 14px;
      }
      .is-wait .el-step__icon-inner {
        color: #bbb;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 14px;
      }
      .is-finish .el-step__icon,
      .is-finish .is-text {
        border-color: #3071fe;
        background: #3071fe;
      }
      .is-process .el-step__icon,
      .is-process .is-text {
        border-color: #eef2fb;
        background: #eef2fb;
      }
      .is-wait .el-step__icon,
      .is-wait .is-text {
        border-color: #eef2fb;
        background: #eef2fb;
      }
      .is-wait,
      .is-process {
        color: #bbb !important;
        font-weight: 500 !important;
      }
      .is-finish,
      .is-wait,
      .is-process {
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #333333;
      }
      /////////表格
      .el-table {
        th > .cell {
          text-align: center;
          font-weight: 500;
          color: #000;
        }
        td > .cell {
          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          p {
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
        // td:last-child > .cell {
        //   text-align: center;
        //   white-space: inherit;
        // }
      }
      .cell button {
        text-align: center;
        padding: 5px;
        margin: 0;
        border: 0;
        width: 100%;
        color: #0f8ee9;
        background: none;
      }
      .cell button:hover {
        background: none;
      }
      .el-table .has-gutter tr th {
        background-color: #eef2fb;
      }
      //////////
      .mid {
        height: 20px;
      }
      .picture-items {
        width: 100%;
        display: flex;
        .picture-item:nth-child(even) {
          margin-right: 50px;
        }
        .picture-item {
          width: 91px;
          margin-right: 25px;
          p:nth-child(1) {
            width: 91px;
            height: 91px;
            border: 1px solid #dee0eb;
            display: flex;
            justify-content: center;
            align-items: center;
            img {
              height: 100%;
            }
          }
          p {
            width: 100%;
            font-family: PingFangSC-Regular;
            font-size: 12px;
            color: #333333;
            text-align: center;
            line-height: 20px;
          }
        }
      }
    }
  }
  .tableList {
    width: 100%;
    tr:nth-child(1) {
      height: 50px;
      background: #eef2fb;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #333333;
    }
    tr:nth-child(odd) {
      td{
          color:#777777;
      }
    }
    tr {
      height: 40px;
      td {
        text-align: center;
        border: 1px solid #e7eaf3;
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #333333;
      }
    }
  }
}
</style>
