StepSix.vue 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <template>
  2. <div class="container">
  3. <div class="alert">
  4. <i class="alert-icon"></i>
  5. <p class="alert-message">Monday, October 10 9:00 -9:30</p>
  6. </div>
  7. <div class="action">
  8. <i class="icon-calendar"></i><strong>Add to calendar ></strong>
  9. </div>
  10. <div class="note">
  11. <p class="note-title">Preparations:</p>
  12. <ul class="note-list">
  13. <li class="note-item">· You need to back up the data in advance</li>
  14. <li class="note-item">· You need to back up the data in advance</li>
  15. </ul>
  16. </div>
  17. <div class="detail">
  18. <div class="cell">
  19. <span class="cell-label">Store:</span>
  20. <span class="cell-value">xxxxxxxxxx</span>
  21. </div>
  22. <div class="cell">
  23. <span class="cell-label">Phone Brand:</span>
  24. <span class="cell-value">xxxxxxxxxx</span>
  25. </div>
  26. <div class="cell">
  27. <strong class="ptc-text">Navigation></strong>
  28. </div>
  29. <div class="cell">
  30. <span class="cell-label">Phone Model:</span>
  31. <span class="cell-value">xxxxxxxxxx</span>
  32. </div>
  33. <div class="cell">
  34. <span class="cell-label">Phone Number:</span>
  35. <span class="cell-value">xxxxxxxxxx</span>
  36. </div>
  37. <div class="cell">
  38. <span class="cell-label">IMEI:</span>
  39. <span class="cell-value">xxxxxxxxxx</span>
  40. </div>
  41. <div class="cell">
  42. <span class="cell-label">Service:</span>
  43. <span class="cell-value">xxxxxxxxxx</span>
  44. </div>
  45. <div class="cell">
  46. <span class="cell-label">Member Price:</span>
  47. <span class="cell-value">$35</span>
  48. </div>
  49. </div>
  50. <div class="mt48">
  51. <button class="ptc-button mb36">Reselect time</button>
  52. <button class="ptc-button ptc-button--stroke">Cancel appointment</button>
  53. </div>
  54. </div>
  55. </template>