学员端小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

167 lines
3.1 KiB

1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
  1. <template>
  2. <view class="step1">
  3. <pickDateTimer/>
  4. <view class="btn_row">
  5. <view class="border btn" @click="changeStep(3)">返回上一步</view>
  6. <view class="btn" @click="show=true">确认预约</view>
  7. </view>
  8. <u-popup :show="show" mode="center" :round="8">
  9. <view class="popupCon">
  10. <view class="h2">再次确认预约信息</view>
  11. <view class="content">
  12. <view class="row">
  13. <view class="lab">预约类型</view>
  14. <view class="val">xxx</view>
  15. </view>
  16. <view class="row">
  17. <view class="lab">预约科目</view>
  18. <view class="val">xxx</view>
  19. </view>
  20. <view class="row">
  21. <view class="lab">预约考场</view>
  22. <view class="val">2023/08/08 08:009:00</view>
  23. </view>
  24. <view class="row">
  25. <view class="lab">预约车型</view>
  26. <view class="val">xxx</view>
  27. </view>
  28. <view class="row">
  29. <view class="lab">预约车辆</view>
  30. <view class="val">xxx</view>
  31. </view>
  32. <view class="row">
  33. <view class="lab">预约时间</view>
  34. <view class="val">2023/08/08 08:009:00</view>
  35. </view>
  36. </view>
  37. <view class="btn_row">
  38. <view class="border btn" @click="show = false">返回修改</view>
  39. <view class="btn">确认</view>
  40. </view>
  41. </view>
  42. </u-popup>
  43. </view>
  44. </template>
  45. <script>
  46. export default {
  47. data() {
  48. return {
  49. show: false
  50. }
  51. },
  52. methods: {
  53. changeStep(val) {
  54. this.$emit('changeStep', val)
  55. }
  56. }
  57. }
  58. </script>
  59. <style lang="scss" scoped>
  60. .card {
  61. width: 100%;
  62. overflow: hidden;
  63. .dateBox {
  64. padding: 36rpx 0 40rpx 0;
  65. .month-row {
  66. display: flex;
  67. justify-content: center;
  68. align-items: center;
  69. margin-bottom: 36rpx;
  70. .month {
  71. font-size: 32rpx;
  72. color: $themC;
  73. }
  74. .arrow {
  75. margin-left: 6rpx;
  76. }
  77. }
  78. .date_row {
  79. width: 100%;
  80. height: 100rpx;
  81. position: relative;
  82. .icon {
  83. width: 40rpx;
  84. height: 40rpx;
  85. background: rgba(51,51,51,0.18);
  86. backdrop-filter: blur(4rpx);
  87. position: absolute;
  88. top: 50%;
  89. transform: translateY(-50%);
  90. display: flex;
  91. align-items: center;
  92. justify-content: center;
  93. border-radius: 50%;
  94. &.left {
  95. left: 16rpx;
  96. }
  97. &.right {
  98. right: 16rpx;
  99. }
  100. }
  101. }
  102. }
  103. }
  104. .popupCon {
  105. padding: 30rpx 50rpx;
  106. .h2 {
  107. font-weight: 600;
  108. color: #333333;
  109. line-height: 70rpx;
  110. font-size: 36rpx;
  111. text-align: center;
  112. }
  113. .content {
  114. padding-bottom: 20rpx;
  115. .row {
  116. padding: 22rpx 0;
  117. display: flex;
  118. font-size: 28rpx;
  119. align-items: center;
  120. .lab {
  121. width: 180rpx;
  122. color: #686B73;
  123. }
  124. .val {
  125. flex: 1;
  126. font-weight: 500;
  127. }
  128. }
  129. }
  130. }
  131. .btn_row {
  132. display: flex;
  133. justify-content: space-between;
  134. .btn {
  135. width: 47%;
  136. height: 72rpx;
  137. background: #1989FA;
  138. border-radius: 8rpx;
  139. font-size: 28rpx;
  140. color: #fff;
  141. text-align: center;
  142. line-height: 72rpx;
  143. &.border {
  144. background: rgba(25, 137, 250, 0.1);
  145. border: 2rpx solid $themC;
  146. color: $themC;
  147. }
  148. }
  149. }
  150. </style>