vue-ptc/src/pages/appointment/StepFive.vue

<template>
  <h3 class="ptc-title">Confirm appointment</h3>
  <div class="ptc-block">
    <p class="sub-title">
      Monday, October 10 9:00 -9:30 PTC Browns Plains Kiosk
    </p>
    <div class="mt48">
      <div class="cell">
        <span class="cell-label">Phone Brand:</span>
        <span class="cell-value">Apple</span>
      </div>
      <div class="cell">
        <span class="cell-label">Phone Model:</span>
        <span class="cell-value">iPhone 12</span>
      </div>
      <div class="cell">
        <span class="cell-label">Phone Number:</span>
        <span class="cell-value">6668888</span>
      </div>
      <div class="cell">
        <span class="cell-label">IMEI:</span>
        <span class="cell-value">iPhonaskfjoaxxx</span>
      </div>
      <div class="cell">
        <span class="cell-label">Service:</span>
        <span class="cell-value">Batery Replacement</span>
      </div>
      <div class="cell">
        <span class="cell-label">Member Price:</span>
        <span class="cell-value">$35</span>
      </div>
      <div class="cell mt48">
        <span class="cell-label">Postcript:</span>
        <span class="cell-value"
          >This is my remark，This is my remarkThis is my remark</span
        >
      </div>
    </div>
  </div>
  <div class="ptc-wrap mt48">
    <button class="ptc-button mb36" @click="$emit('next')">
      Confirm appointment
    </button>
    <button class="ptc-button ptc-button--stroke" @click="$emit('reselect')">
      Reselect
    </button>
  </div>
</template>

<script setup lang="ts">
defineEmits<{
  (e: 'next'): void
  (e: 'reselect'): void
}>()
</script>