学员端小程序
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.

98 lines
2.0 KiB

  1. <template>
  2. <view class="step2">
  3. <searchBox placeholder="搜索场地名称" key="step3"></searchBox>
  4. <view class="card" v-for="(item,index) in 10" :key="index" :class="{active: index==2}">
  5. <view class="leftTxt">
  6. <view class="name oneRowText">某某模拟驾驶馆</view>
  7. <view class="adr">江西省江西市江西区尚坤丁兰国际1190</view>
  8. </view>
  9. <view class="icon">
  10. <image src="@/static/images/car/btn_daohang.png" mode=""></image>
  11. <!-- <image src="@/static/images/car/btn_daohang_cli.png" mode=""></image> -->
  12. </view>
  13. </view>
  14. <view class="poz_btn">
  15. <view class="btn_row" >
  16. <view class="border btn" @click="changeStep(1)">返回上一步</view>
  17. <view class="btn" @click="changeStep(3)">下一步</view>
  18. </view>
  19. </view>
  20. </view>
  21. </template>
  22. <script>
  23. import searchBox from './searchBox'
  24. export default {
  25. components: { searchBox },
  26. methods: {
  27. changeStep(val) {
  28. this.$emit('changeStep', val)
  29. }
  30. }
  31. }
  32. </script>
  33. <style lang="scss" scoped>
  34. .poz_btn {
  35. position: fixed;
  36. bottom: 0;
  37. left: 0;
  38. padding: 12rpx 32rpx;
  39. width: 100%;
  40. background: #F6F6F6;
  41. }
  42. .step2 {
  43. width: 100%;
  44. padding-bottom: 120rpx;
  45. .card {
  46. padding: 28rpx 36rpx;
  47. display: flex;
  48. justify-content: space-between;
  49. align-items: center;
  50. margin-bottom: 20rpx;
  51. &.active {
  52. background: rgba(25,137,250,0.1);
  53. border: 2rpx solid #1989FA;
  54. color: $themC;
  55. }
  56. .leftTxt {
  57. width: 0;
  58. flex: 1;
  59. .name {
  60. font-size: 32rpx;
  61. font-weight: 600;
  62. }
  63. .adr {
  64. font-size: 24rpx;
  65. margin-top: 8rpx;
  66. }
  67. }
  68. .icon {
  69. width: 72rpx;
  70. height: 72rpx;
  71. }
  72. }
  73. }
  74. .btn_row {
  75. display: flex;
  76. justify-content: space-between;
  77. padding-bottom: 20rpx;
  78. .btn {
  79. width: 47%;
  80. height: 72rpx;
  81. background: #1989FA;
  82. border-radius: 8rpx;
  83. font-size: 28rpx;
  84. color: #fff;
  85. text-align: center;
  86. line-height: 72rpx;
  87. &.border {
  88. background: rgba(25, 137, 250, 0.1);
  89. border: 2rpx solid $themC;
  90. color: $themC;
  91. }
  92. }
  93. }
  94. </style>