<template>
  <div class="detail">
    <div class="title"><span class="point"></span>预约详情</div>
    <ul class="items">
      <li>
        <div class="label">已选套餐：</div>
        <div class="content">21招商信诺-银保客户-豪华套餐女未婚</div>
      </li>
      <li>
        <div class="label">已选体检中心：</div>
        <div class="content">上海虹桥分院</div>
      </li>
      <li>
        <div class="label">已选体检中心地址：</div>
        <div class="content">上海虹桥分院</div>
      </li>
      <li>
        <div class="label">已选体检中心地址：</div>
        <div class="content">2021-11-20</div>
      </li>
    </ul>
    <div class="tips">
      <img :src="tips" alt="" />
      <span class="desc"
        >请耐心等待体检确认，预约成功后将发送短信给您，如需改约请致电客服</span
      >
    </div>
    <div class="btns">
      <a-button type="primary" disabled> 预约中 </a-button>
      <a-button type="primary"> 回首页 </a-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "appointmentDetail",
  components: {},

  data() {
    return {
      tips: require("../../../assets/imgs/detail/tips.png"),
    };
  },
  computed: {},
  watch: {},
  methods: {},
};
</script>

<style lang="less" scoped>
.detail {
  .point {
    display: inline-block;
    border-radius: 5px;
    width: 6px;
    height: 6px;
    background-color: #3f7ffb;
    margin-right: 6px;
    position: relative;
    top: -1px;
  }
  .btns {
    text-align: right;
    padding-right: 10px;
    margin-top: 15px;
    .ant-btn {
      &:nth-child(1) {
        margin-right: 30px;
        font-size: 14px;
        color: white;
        border: none;
      }
    }
  }
  .tips {
    padding-left: 8px;
    img {
      position: relative;
      top: -1px;
    }
    .desc {
      color: #cccccc;
      font-size: 14px;
      margin-left: 4px;
    }
  }
  .items {
    margin-top: 21px;
    padding-left: 10px;
    li {
      margin-top: 15px;
    }
    .label {
      font-size: 14px;
      color: #aaaaaa;
    }
    .content {
      width: 700px;
      color: #333333;
      font-size: 14px;
      line-height: 58px;
      background: #fafafa;
      margin-top: 8px;
      border-radius: 2px;
      position: relative;
      left: -10px;
      padding-left: 10px;
    }
  }
}
</style>