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

77 lines
1.6 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 year ago
1 year ago
  1. <template>
  2. <view class="pageBgImg">
  3. <topNavbar title=" "></topNavbar>
  4. <view class="pad">
  5. <view class="h3">请选择您要学习的类型</view>
  6. <view class="radioBox">
  7. <view class="radioItem" v-for="(item,index) in radioArr" :key="index" @click="changeNav(item)">
  8. <view class="text">{{ item.text }}</view>
  9. <view class="icon">
  10. <image src="@/static/images/index/radio_cli.png" mode="" v-if="currentId==item.id"></image>
  11. <image src="@/static/images/index/radio_nor.png" mode="" v-else></image>
  12. </view>
  13. </view>
  14. </view>
  15. <view class="btn">去练习</view>
  16. </view>
  17. </view>
  18. </template>
  19. <script>
  20. export default {
  21. data() {
  22. return {
  23. radioArr: [
  24. {text: '自学练习', id: 1},
  25. {text: '记录理论学时', id: 2},
  26. {text: '安全警示教育在线视频学习', id: 3},
  27. ],
  28. currentId: 2,
  29. }
  30. },
  31. methods: {
  32. changeNav(item) {
  33. this.currentId = item.id
  34. }
  35. }
  36. }
  37. </script>
  38. <style lang="scss" scoped>
  39. .radioBox {
  40. width: 100%;
  41. }
  42. .h3 {
  43. font-size: 28rpx;
  44. color: #fff;
  45. padding: 20rpx 10rpx;
  46. }
  47. .radioItem {
  48. width: 100%;
  49. height: 120rpx;
  50. background: #FFFFFF;
  51. border-radius: 16rpx;
  52. margin-bottom: 20rpx;
  53. display: flex;
  54. justify-content: space-between;
  55. align-items: center;
  56. padding: 0 32rpx;
  57. .text {
  58. font-size: 28rpx;
  59. }
  60. .icon {
  61. width: 32rpx;
  62. height: 32rpx;
  63. }
  64. }
  65. .btn {
  66. width: 396rpx;
  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. margin: 140rpx auto 0 auto;
  75. }
  76. </style>