<template>
  <div class="paying">
    <div>
      <span class="pay_titile">报名信息</span>
      <div class="pay_top">
        <div>营地名称：2021年南开大学历史学科暑假营</div>
        <div>真实姓名：林柒月</div>
        <div>身份证号：340828199612053920</div>
        <div>缴费时间：2021-8-19 10:00 - 2021-8-31 24:00</div>
        <div>报名费用： 1500元</div>
      </div>
      <div class="line"></div>
      <div class="pay-money flex">
        <div>报名费用 ：<span>￥1500 </span></div>
        <div class="btn">
          <el-button @click="paying()">立即支付 </el-button>
        </div>
      </div>

      <div class="pay_bottom">
        <div>注意事项：</div>
        <div>
          1、考生支付完成后请不要立即关闭浏览器，等待支付完成返回本页面，以确认支付完成：
        </div>
        <div>
          2、支付确认后，将不能再修改姓名和身份证号，请在支付前核对信息；
        </div>
        <div>
          3、如果在完成支付后，状态许久未更新为“报名成功”，请仔细核查自己支付账号是否已扣费
          ；：
        </div>
        <div>
          4、对于多次缴费的考生，除生效一笔之外其他重复支付的得用会在缴费结束阶段统一退款；
        </div>
        <div>5、网上缴费如有问题，请致电项目组工作人员：XXX-XXXXXXXXX</div>
      </div>
    </div>
    <!-- 支付扫码框 -->
    <el-dialog title="微信支付" :visible.sync="dialogVisible" width="20%">
      <div class="pay_code">
        <div class="pay_time">支付剩余时间<span>15分30秒</span></div>
        <div>￥150</div>
        <div class="pay_img">
          <img src="" alt="" />
        </div>
        <div>请使用<span>微信</span>扫一扫，扫描二维码支付</div>
        <div>手机完成支付后，请等待系统处理，在此之前请勿关闭窗口</div>
      </div>
      <span slot="footer" class="dialog-footer">
        <div class="btn">
          <el-button @click="dialogVisible = false">刷新二维码</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>

<script>
/* eslint-disable */
export default {
  name: "Paying",
  data() {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    paying() {
      this.dialogVisible = true;
    },
  },
};
</script>

<style  lang="scss" scoped>
.flex {
  display: flex;
}
.paying {
  padding: 0 56px 65px 56px;
  .pay_titile {
    font-size: 18px;
    font-weight: 500;
    color: #12141c;
    line-height: 18px;
  }
  .pay_top {
    margin: 24px 0;
    div {
      font-size: 14px;
      font-weight: 500;
      color: #12141c;
      line-height: 32px;
    }
  }

  .line {
    height: 1px;
    border-bottom: 1px solid #d1d1d1;
  }
  .pay-money {
    font-size: 18px;
    font-weight: 500;
    color: #12141c;
    line-height: 24px;
    justify-content: space-between;
    margin: 43px 0 110px 0;
    span {
      color: #60194a;
    }
  }
  .pay_bottom {
    font-size: 12px;
    font-weight: 500;
    color: #999999;
    line-height: 21px;
  }
  .btn {
    text-align: center;
    // padding-bottom: 224px;
  }
  .el-button {
    width: 200px;
    height: 50px;
    background: #60194a;
    border-radius: 4px;
    opacity: 0.8;
    line-height: 50px;
    text-align: center;
    color: #fff;
    font-size: 16px;
    padding: 0;
    // margin: 30px 0 0 0;
  }
}
.pay_code {
  text-align: center;
  :nth-child(1) {
    font-size: 14px;
    font-weight: 500;
    color: #12141c;
    line-height: 14px;
    span {
      font-size: 13px !important;
      color: #60194a;
    }
  }
  :nth-child(2) {
    font-size: 14px;
    font-weight: 500;
    color: #60194a;
    line-height: 24px;
  }
  :nth-child(4) {
    font-size: 14px;
    font-weight: 500;
    color: #333333;
    line-height: 16px;
    span {
      font-size: 17px !important;
      color: #60194a;
    }
  }
  :nth-child(5) {
    font-size: 12px;
    font-weight: 500;
    color: #666666;
    line-height: 12px;
  }
}
</style>
