江西小程序管理端
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.

173 lines
3.6 KiB

1 year ago
  1. <template>
  2. <view class="pageBgImg">
  3. <view class="searchBox">
  4. <topNavbar title="待结算记录"></topNavbar>
  5. </view>
  6. <view class="pad">
  7. <view class="searcBox">
  8. <searchRow placeholder="搜索学员姓名、学员手机号"/>
  9. </view>
  10. <view class="tabs">
  11. <view class="tab" v-for="(item,index) in tabData" :key="index" :class="{active: index==1}">{{ item.text }}</view>
  12. </view>
  13. <view class="total">12条记录</view>
  14. <view class="list">
  15. <view class="card">
  16. <view class="top_row">
  17. <view class="name">张三三</view>
  18. <view class="tag">第三阶段</view>
  19. <view class="price"><text>待结算金额</text> 1333.3</view>
  20. </view>
  21. <view class="row">
  22. <view class="lab">学员确认</view>
  23. <view class="icon">
  24. <image src="@/static/images/index/radio_cli.png" mode=""></image>
  25. <!-- <image src="@/static/images/index/radio_nor.png" mode=""></image> -->
  26. </view>
  27. <view class="right">
  28. <view class="btnBg">确认</view>
  29. </view>
  30. </view>
  31. <view class="row">
  32. <view class="lab">教练确认</view>
  33. <view class="icon">
  34. <image src="@/static/images/index/radio_cli.png" mode=""></image>
  35. <!-- <image src="@/static/images/index/radio_nor.png" mode=""></image> -->
  36. </view>
  37. <view class="right">
  38. <view class="btnBg">确认</view>
  39. </view>
  40. </view>
  41. <view class="row">
  42. <view class="lab">驾校确认</view>
  43. <view class="icon">
  44. <image src="@/static/images/index/radio_cli.png" mode=""></image>
  45. <!-- <image src="@/static/images/index/radio_nor.png" mode=""></image> -->
  46. </view>
  47. <view class="right">
  48. 2023/08/08 10:55:21
  49. </view>
  50. </view>
  51. </view>
  52. </view>
  53. </view>
  54. </view>
  55. </template>
  56. <script>
  57. export default {
  58. data() {
  59. return {
  60. tabData: [
  61. {text: '全部', id: 1},
  62. {text: '阶段二', id: 2},
  63. {text: '阶段三', id: 3},
  64. {text: '阶段五', id: 4}
  65. ]
  66. }
  67. }
  68. }
  69. </script>
  70. <style lang="scss" scoped>
  71. .searcBox {
  72. padding-top: 24rpx;
  73. }
  74. .total {
  75. font-size: 24rpx;
  76. color: #686B73;
  77. line-height: 74rpx;
  78. text-align: right;
  79. height: 74rpx;
  80. }
  81. .tabs {
  82. display: flex;
  83. justify-content: space-between;
  84. height: 110rpx;
  85. align-items: center;
  86. .tab {
  87. font-size: 28rpx;
  88. color: #fff;
  89. line-height: 110rpx;
  90. &.active {
  91. position: relative;
  92. &::before {
  93. content: '';
  94. width: 56rpx;
  95. height: 6rpx;
  96. background: #FFFFFF;
  97. border-radius: 3rpx;
  98. position: absolute;
  99. left: 50%;
  100. transform: translateX(-50%);
  101. bottom: 20rpx;
  102. }
  103. }
  104. }
  105. }
  106. .list {
  107. .card {
  108. padding: 0 32rpx;
  109. .top_row {
  110. display: flex;
  111. border-bottom: 2rpx dashed #E8E9EC;
  112. height: 98rpx;
  113. align-items: center;
  114. width: 100%;
  115. margin-bottom: 12rpx;
  116. .name {
  117. font-size: 32rpx;
  118. color: #333;
  119. }
  120. .tag {
  121. width: 144rpx;
  122. height: 60rpx;
  123. background: rgba(25,137,250,0.1);
  124. border-radius: 8rpx;
  125. font-size: 28rpx;
  126. color: $themC;
  127. text-align: center;
  128. margin-left: 10rpx;
  129. line-height: 60rpx;
  130. }
  131. .price {
  132. color: $themC;
  133. margin-left: auto;
  134. font-size: 32rpx;
  135. font-weight: 500;
  136. text {
  137. font-size: 24rpx;
  138. }
  139. }
  140. }
  141. .row {
  142. display: flex;
  143. align-items: center;
  144. justify-content: space-between;
  145. height: 88rpx;
  146. .lab {
  147. color: #686B73;
  148. }
  149. .icon {
  150. width: 32rpx;
  151. height: 32rpx;
  152. }
  153. .right {
  154. color: #686B73;
  155. width: 300rpx;
  156. display: flex;
  157. justify-content: flex-end;
  158. .btnBg {
  159. width: 130rpx;
  160. }
  161. }
  162. }
  163. }
  164. }
  165. </style>