<template>
  <div class="confirmation">
    <div class="confirmationTitle">
      <div>确认订单</div>
    </div>
    <div class="confirmationMsg">
      <div class="confirmationMsg-main">
        <div class="main-top">
          <p>产品名称</p>
          <p>配置详情</p>
          <p>付费方式</p>
          <p>数量</p>
          <p>优惠</p>
          <p>资费</p>
        </div>
        <div class="main-top main-msg">
          <p>ICP许可证办理</p>
          <p>ICP许可证产品分类：自助办理</p>
          <p>预付款</p>
          <p>1</p>
          <p>￥0.00</p>
          <p>￥1000.00</p>
        </div>
      </div>
      <div class="confirmationMsg-bottom">
        <div>
          <p>总计费用：<span>¥1000.00</span></p>
          <button>确认购买</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.confirmation {
  width: 100%;
  background: #f5f5f6;
  padding: 0 0 50px 0;
  .confirmationTitle {
    width: 100%;
    padding: 20px 0;
    background: #fff;
    div {
      width: 1200px;
      margin: 0 auto;
      font-size: 20px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
      line-height: 20px;
    }
  }
  .confirmationMsg {
    width: 1200px;
    margin: 30px auto;
  }
}
.confirmationMsg-main {
  width: 100%;
  background: #fff;
  padding: 20px 20px 30px 20px;
  border-radius: 2px;
  margin-bottom: 50px;
  .main-top {
    display: flex;
    padding: 10px 20px;
    border: 1px solid rgba(235, 236, 236, 1);
    margin-bottom: 20px;
    p {
      flex: 1;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.85);
      line-height: 17px;
    }
    p:nth-child(2) {
      width: 260px;
      flex: none;
    }
  }
  .main-msg {
    width: 100%;
    padding: 16px 20px;
    background: rgba(245, 245, 246, 1);
  }
}
.confirmationMsg-bottom {
  width: 100%;
  padding: 27px 32px;
  background: #fff;
  text-align: right;
  div {
    display: flex;
    justify-content: flex-end;
    p {
      margin-right: 40px;
      font-size: 14px;
      font-family: HelveticaNeue;
      color: rgba(0, 0, 0, 0.85);
      line-height: 16px;
      span {
        font-size: 26px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(255, 138, 1, 1);
        line-height: 36px;
        margin-left: 10px;
      }
    }
    button {
      width: 154px;
      height: 36px;
      background: rgba(255, 138, 1, 1);
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      line-height: 22px;
      border: none;
    }
  }
}
</style>
