vue-ptc/src/pages/repair/steps/StepFour.vue

<template>
  <h3 class="ptc-title">Confirm appointment</h3>
  <div class="ptc-wrapper">
    <div class="ptc-block">
      <div class="ptc-inner">
        <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>
    <div class="ptc-button-group">
      <div class="ptc-inner">
        <button class="ptc-button" @click="state.step++">
          Confirm appointment
        </button>
        <button class="ptc-button ptc-button--stroke" @click="state.step = 0">
          Reselect
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { state } from '../store'
</script>