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

85 lines
1.5 KiB

  1. <template>
  2. <view class="step1">
  3. <view class="card">
  4. <view class="list">
  5. <view class="listItem" v-for="(item,index) in list" :key="index" :class="{active: index==1}">
  6. {{ item.text }}</view>
  7. </view>
  8. </view>
  9. <view class="btn_row" style="margin-top: 108rpx;">
  10. <view class="border btn" @click="changeStep(1)">返回上一步</view>
  11. <view class="btn" @click="changeStep(3)">下一步</view>
  12. </view>
  13. </view>
  14. </template>
  15. <script>
  16. export default {
  17. data() {
  18. return {
  19. list: [{
  20. text: '科目二',
  21. id: 2
  22. },
  23. {
  24. text: '科目三',
  25. id: 3
  26. },
  27. ],
  28. }
  29. },
  30. methods: {
  31. changeStep(val) {
  32. this.$emit('changeStep', val)
  33. }
  34. }
  35. }
  36. </script>
  37. <style lang="scss" scoped>
  38. .list {
  39. display: flex;
  40. flex-wrap: wrap;
  41. display: flex;
  42. padding: 24rpx;
  43. .listItem {
  44. width: 32.4%;
  45. height: 120rpx;
  46. background: #F8F8F8;
  47. border-radius: 12rpx;
  48. font-weight: 500;
  49. text-align: center;
  50. line-height: 120rpx;
  51. margin-right: 20rpx;
  52. &.active {
  53. width: 200rpx;
  54. height: 120rpx;
  55. background: rgba(25, 137, 250, 0.1);
  56. border-radius: 12rpx;
  57. border: 2rpx solid $themC;
  58. color: $themC;
  59. }
  60. }
  61. }
  62. .btn_row {
  63. display: flex;
  64. justify-content: space-between;
  65. .btn {
  66. width: 47%;
  67. height: 72rpx;
  68. background: #1989FA;
  69. border-radius: 8rpx;
  70. font-size: 28rpx;
  71. color: #fff;
  72. text-align: center;
  73. line-height: 72rpx;
  74. &.border {
  75. background: rgba(25, 137, 250, 0.1);
  76. border: 2rpx solid $themC;
  77. color: $themC;
  78. }
  79. }
  80. }
  81. </style>