question_bank.vue 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. <template>
  2. <view style="padding: 32rpx;">
  3. <navigator url="/pages2/bank/my_question">
  4. <view class="my_question">
  5. <view class="flex">
  6. <view class="text">我的题库></view>
  7. <image src="/static/icon/my_icon7.png" class="my_icon"></image>
  8. </view>
  9. </view>
  10. </navigator>
  11. <view class="bottom">
  12. <view class="item collect">
  13. <view class="text">收藏集></view>
  14. <image class="img" src="/static/sc.png"></image>
  15. </view>
  16. <view class="item list">
  17. <navigator url="/pages2/bank/question_record">
  18. <view class="list-in">
  19. <image class="img" src="/static/icon/wk_icon2.png" ></image>
  20. 做题记录 >
  21. </view>
  22. </navigator>
  23. <navigator url="/pages2/subject/wrong">
  24. <view class="list-in">
  25. <image class="img" src="/static/icon/wk_icon2.png"></image>
  26. 错题集 >
  27. </view>
  28. </navigator>
  29. </view>
  30. </view>
  31. </view>
  32. </template>
  33. <script>
  34. export default {
  35. data() {
  36. return {
  37. list:[
  38. 1,2,3
  39. ]
  40. }
  41. },
  42. onLoad(option) {
  43. // this.getDict()
  44. },
  45. onShow(){
  46. },
  47. methods: {
  48. },
  49. }
  50. </script>
  51. <style >
  52. page {
  53. background: #fff;
  54. }
  55. </style>
  56. <style lang="scss" scope>
  57. .my_question {
  58. display: flex;
  59. width: 686rpx;
  60. height: 240rpx;
  61. background: linear-gradient(45deg, #015EEA, #00C0FA);
  62. border-radius: 24rpx;
  63. padding:0 40rpx;
  64. .flex {
  65. .text {
  66. padding-top:32rpx;
  67. font-size: 32rpx;
  68. font-family: PingFang SC;
  69. font-weight: bold;
  70. color: #FFFFFF;
  71. }
  72. .my_icon {
  73. margin-top:23rpx;
  74. width: 122rpx;
  75. height: 132rpx;
  76. }
  77. }
  78. .flex_auto {
  79. flex:1;
  80. .bg {
  81. width:100%;
  82. }
  83. }
  84. }
  85. .bottom {
  86. margin-top:16rpx;
  87. display: flex;
  88. justify-content: space-between;
  89. .item {
  90. width: 335rpx;
  91. &.collect {
  92. font-size: 32rpx;
  93. color: #FFFFFF;
  94. height: 240rpx;
  95. background: linear-gradient(45deg, rgba(255, 177, 2, 0.75), rgba(255, 84, 79, 0.75));
  96. border-radius: 24rpx;
  97. padding:32rpx;
  98. .img {
  99. width: 125rpx;
  100. height: 126rpx;
  101. opacity: 0.4;
  102. }
  103. }
  104. &.list {
  105. .list-in {
  106. width: 335rpx;
  107. height: 112rpx;
  108. background: #007AFF;
  109. border-radius: 24rpx;
  110. display: flex;
  111. align-items: center;
  112. justify-content: center;
  113. font-size: 32rpx;
  114. color: #fff;
  115. &:first-of-type {
  116. margin-bottom:16rpx;
  117. }
  118. .img {
  119. width: 32rpx;
  120. height: 32rpx;
  121. opacity: 0.8;
  122. margin-right:17rpx;
  123. }
  124. }
  125. }
  126. }
  127. }
  128. </style>