<script setup></script>

<template>
  <div class="container">
    <div class="title">订单确认</div>
    <div class="content">
      <div class="left">
        <div class="info">
          <div class="name">2024亚洲舞蹈比赛无锡站</div>
          <div class="address">无锡会展中心</div>
        </div>

        <div class="ticket_info">
          <div class="tit_box">
            <div class="line"></div>
            <div class="txt">订票信息</div>
          </div>

          <div class="form">
            <el-form>
              <el-form-item label="联系人">
                <el-input placeholder="请输入手机号" style="width: 260px" />
              </el-form-item>
              <el-form-item label="观看人">
                <div class="p_box">
                  <div class="people">
                    <el-checkbox-group @change="">
                      <div
                        v-for="(it, index) in 5"
                        :key="index"
                        class="prople_item"
                      >
                        <div>
                          <div class="name">张三</div>
                          <div class="idcard">412************073</div>
                        </div>
                        <el-checkbox> </el-checkbox>
                      </div>
                    </el-checkbox-group>
                  </div>
                  <!-- button -->
                  <div class="btn">新增</div>
                </div>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>

      <div class="right">
        <div class="tit_box">
          <div class="line"></div>
          <div class="txt">订单明细</div>
        </div>

        <div class="detail">
          <div class="detail_top">
            <div class="time">2024.03.03 周六</div>
            <div class="ticket">80.00元票档 X2张</div>
          </div>
          <div class="detail_center">
            <div v-for="(it, index) in 4" :key="index" class="ticket">
              A区 6排14座 (B6馆)
            </div>
          </div>
          <div class="detail_b">
            <div class="sum_txt">共计</div>
            <div class="price_num">¥160.00</div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div>
        <span class="label">共计金额：</span><span class="value">¥900.00</span>
      </div>
      <div class="pay">立即支付</div>
    </div>
  </div>
</template>

<style scoped lang="scss">
div {
  box-sizing: border-box;
}
.container {
  padding: 20px 0;
  width: 1200px;
  margin: 0 auto;

  .title {
    padding: 11px;
    text-align: center;
    background: linear-gradient(270deg, #493ceb 0%, #8623fc 100%);
    font-size: 18px;
    color: #ffffff;
  }

  .content {
    display: flex;
    background-color: #fff;
    padding: 20px 0;
  }

  .line {
    width: 4px;
    height: 18px;
    background: linear-gradient(180deg, #493ceb 0%, #8623fc 100%);
    border-radius: 4px;
  }

  .left {
    padding-left: 20px;
    .info {
      width: 640px;
      background: rgba(69, 61, 234, 0.04);
      border-radius: 8px;
      border: 1px solid #d3d1f6;
      padding: 20px 0 28px 33px;
      margin-bottom: 20px;
      .name {
        font-weight: 500;
        font-size: 18px;
        color: #000000;
        margin-bottom: 20px;
      }
      .address {
        font-weight: 400;
        font-size: 14px;
        color: #929aa0;
      }
    }

    .ticket_info {
      .tit_box {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 14px;
        .txt {
          font-weight: bold;
          font-size: 16px;
          color: #493ceb;
        }
      }
      .form {
        width: 640px;
        min-height: 464px;
        padding: 20px 60px;
        border-radius: 5px;
        border: 1px solid #dcdfe6;

        .p_box {
          display: flex;
          gap: 10px;
          .people {
            width: 298px;
            background: #fbfcfd;
            border-radius: 2px;
            border: 1px solid #dcdfe6;
            padding: 0 14px;
            .prople_item {
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 14px 0;
              border-bottom: 1px solid #dcdfe6;
              &:last-child {
                border: none;
              }
              .name {
                font-size: 16px;
                color: #929aa0;
                margin-bottom: 20px;
              }
              .idcard {
                font-size: 10px;
                color: #929aa0;
              }
            }
          }
          .btn {
            width: 90px;
            height: 40px;
            background: #fbfcfd;
            border-radius: 20px;
            border: 1px solid #493ceb;
            margin-top: 10px;
            font-size: 14px;
            color: #493ceb;
            line-height: 40px;
            text-align: center;
            cursor: pointer;
            user-select: none;
          }
        }
      }
    }
  }

  .right {
    width: 460px;
    margin-left: 36px;
    .tit_box {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 20px;
      .txt {
        font-weight: bold;
        font-size: 16px;
        color: #493ceb;
      }
    }

    .detail {
      padding: 15px 26px;
      border-radius: 5px;
      border: 1px solid #dcdfe6;
      .detail_top {
        padding-bottom: 13px;
        border-bottom: 1px solid #dcdfe6;
        .time {
          font-weight: 500;
          font-size: 18px;
          color: #2d373f;
          line-height: 25px;
          margin-bottom: 8px;
        }
        .ticket {
          font-size: 16px;
          color: #2d373f;
        }
      }
      .detail_center {
        margin-top: 14px;
        display: flex;
        flex-direction: column;
        padding-bottom: 13px;
        border-bottom: 1px solid #dcdfe6;
        gap: 8px;
        .ticket {
          font-size: 16px;
          color: #2d373f;
        }
      }
      .detail_b {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 16px;
        .sum_txt {
          font-weight: 600;
          font-size: 18px;
          color: #2d373f;
          line-height: 25px;
        }
        .price_num {
          font-weight: 600;
          font-size: 36px;
          color: #ff8124;
          line-height: 50px;
        }
      }
    }
  }

  .footer {
    display: flex;
    justify-content: space-between;
    height: 70px;
    align-items: center;
    background: #ffffff;
    box-shadow: 0px 0px 46px 0px rgba(1, 16, 64, 0.08);
    margin-top: 9px;
    padding: 0 30px;
    .label {
      font-size: 16px;
      color: #7b7f83;
      line-height: 22px;
    }
    .value {
      font-size: 22px;
      color: #ff8124;
      line-height: 30px;
      font-weight: 600;
    }
    .pay {
        width: 200px;
        height: 40px;
        background: linear-gradient(270deg, #493ceb 0%, #8623fc 100%);
        border-radius: 20px;
        font-weight: 500;
        font-size: 16px;
        color: #ffffff;
        line-height: 40px;
        text-align: center;
        cursor: pointer;
      }
  }
}
</style>