index.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317
  1. <template>
  2. <view class="container">
  3. <view style="background: #fff;">
  4. <yf-carsousel :img-list="imgList"></yf-carsousel>
  5. </view>
  6. <view @tap="navtoNotice(notice.id)" v-if="notice && notice.id">
  7. <uni-notice-bar single="true" showIcon="true" :text="notice.title"></uni-notice-bar>
  8. </view>
  9. <!-- 一般用法 -->
  10. <view style="padding: 15px; background: #fcfcfc;">
  11. <view class="uni-flex uni-row" style="flex-wrap: wrap;">
  12. <view class="flex-item" @click="navigateToCourse" >
  13. <view class="item-box" style="border-radius: 0px 5px 15px 5px; ">
  14. <image src="../../static/nav/nav01.png" mode="heightFix"></image>
  15. <text class="tt2">课程学习</text>
  16. </view>
  17. </view>
  18. <view class="flex-item" @click="navigateToExam">
  19. <view class="item-box" style="border-radius: 5px 0px 5px 15px;">
  20. <image src="../../static/nav/nav02.png" mode="heightFix"></image>
  21. <text class="tt2">在线考试</text>
  22. </view>
  23. </view>
  24. <view class="flex-item" @click="navigateToRepo">
  25. <view class="item-box" style="border-radius: 5px 15px 5px 0px;">
  26. <image src="../../static/nav/nav03.png" mode="heightFix"></image>
  27. <text class="tt2">题库训练</text>
  28. </view>
  29. </view>
  30. <view class="flex-item" @click="navigateToPaper">
  31. <view class="item-box" style="border-radius: 15px 5px 0px 5px;">
  32. <image src="../../static/nav/nav04.png" mode="heightFix"></image>
  33. <text class="tt2">我的成绩</text>
  34. </view>
  35. </view>
  36. </view>
  37. </view>
  38. </view>
  39. </template>
  40. <script>
  41. import { noticePaging } from '@/api/notice.js'
  42. export default {
  43. data() {
  44. return {
  45. fileUrl: '',
  46. items: ['我的考试', '训练进度', '消息通知'],
  47. current: 0,
  48. more: 'loading',
  49. query: {
  50. current: 1,
  51. size: 5,
  52. params: {
  53. title: ''
  54. }
  55. },
  56. notice: {
  57. id: '',
  58. title: ''
  59. },
  60. imgList: [
  61. {
  62. url: 'https://cdn.yfhl.net/static/banner/ob1.jpg',
  63. id: 3
  64. },
  65. {
  66. url: 'https://cdn.yfhl.net/static/banner/ob2.jpg',
  67. id: 3
  68. }, {
  69. url: 'https://cdn.yfhl.net/static/banner/ob3.jpg',
  70. id: 4
  71. }]
  72. // imgList: [
  73. // {
  74. // url: 'https://cdn.yfhl.net/static/banner/2.png',
  75. // id: 3
  76. // },
  77. // {
  78. // url: 'https://cdn.yfhl.net/static/banner/3.png',
  79. // id: 3
  80. // }, {
  81. // url: 'https://cdn.yfhl.net/static/banner/4.png',
  82. // id: 4
  83. // }, {
  84. // url: 'https://cdn.yfhl.net/static/banner/5.png',
  85. // id: 5
  86. // }]
  87. }
  88. },
  89. onShow() {
  90. this.fetchNoticePaging();
  91. },
  92. methods: {
  93. swiperChange(e) {
  94. this.current = e.detail.current
  95. },
  96. fetchNoticePaging() {
  97. noticePaging({
  98. size: 1,
  99. current: 1,
  100. params: {
  101. state: 0
  102. }
  103. }).then(data => {
  104. //打印请求返回的数据
  105. this.notice = data.records[0]
  106. }, error => {
  107. console.log(error);
  108. })
  109. },
  110. // 考试详情页
  111. navtoDetail(id) {
  112. uni.navigateTo({
  113. url: '/pages/exam/detail?id=' + id
  114. });
  115. },
  116. navigateToCourse(){
  117. uni.switchTab({
  118. url: '/pages/course/index'
  119. });
  120. },
  121. navigateToExam() {
  122. uni.switchTab({
  123. url: '/pages/exam/index'
  124. });
  125. },
  126. navigateToRepo() {
  127. uni.switchTab({
  128. url: '/pages/repo/index'
  129. });
  130. },
  131. navigateToPaper() {
  132. uni.navigateTo({
  133. url: '/pages/paper/index'
  134. });
  135. },
  136. navigateHistory() {
  137. uni.navigateTo({
  138. url: '/pages/repo/history'
  139. });
  140. },
  141. navigateToBattle(){
  142. uni.navigateTo({
  143. url: '/pages/battle/battle'
  144. });
  145. },
  146. selectedBanner(item, index) {
  147. console.log('🥒', item, index)
  148. },
  149. // 考试详情页
  150. navtoNotice(id) {
  151. uni.navigateTo({
  152. url: '/pages/notice/detail?id=' + id
  153. });
  154. },
  155. navitoVideo(){
  156. uni.navigateTo({
  157. url: '/pages/video/video'
  158. });
  159. }
  160. }
  161. }
  162. </script>
  163. <style>
  164. .flex-item{
  165. flex: 0 0 50%;
  166. }
  167. .item-box {
  168. display: flex;
  169. flex-direction: column;
  170. align-items: center;
  171. padding: 20px 30px 20px 30px;
  172. border: #E9F3FF 1px solid;
  173. border-radius: 5px;
  174. margin: 10px;
  175. box-shadow: 3px 3px 6px #DEEDFF;
  176. color: #ccc;
  177. }
  178. .item-box image {
  179. height: 40px;
  180. }
  181. .item-box .tt2 {
  182. color: #333;
  183. font-weight: 700;
  184. padding-top: 12px;
  185. }
  186. .notice {
  187. display: flex;
  188. align-items: center;
  189. border-top: #efefef 1px solid;
  190. border-bottom: #efefef 10px solid;
  191. padding: 10px 20px 10px 20px;
  192. }
  193. .notice .tt {
  194. font-weight: bold;
  195. color: #ff0000;
  196. border-right: #eee 2px solid;
  197. padding-right: 10px;
  198. }
  199. .notice .cc {
  200. flex-grow: 1;
  201. padding-left: 10px;
  202. color: #555;
  203. }
  204. .exam-item {
  205. display: flex;
  206. align-items: center;
  207. line-height: 25px;
  208. border-bottom: #f5f5f5 1px solid;
  209. margin-bottom: 10px;
  210. }
  211. .exam-item .left {
  212. text-align: left;
  213. flex-grow: 1;
  214. }
  215. .desc {
  216. color: #888;
  217. }
  218. .exam-item .left .icons {
  219. display: flex;
  220. align-items: center;
  221. color: #666;
  222. }
  223. .exam-item .right {
  224. text-align: right;
  225. }
  226. .nav {
  227. display: flex;
  228. align-items: center;
  229. align-content: space-around;
  230. line-height: 50px;
  231. color: #666;
  232. padding: 20px 0px 0px 0px;
  233. }
  234. .nav .item {
  235. display: flex;
  236. flex-direction: column;
  237. align-items: center;
  238. align-content: center;
  239. width: 25%;
  240. }
  241. .nav .item image {
  242. width: 32px;
  243. height: 32px;
  244. }
  245. .nav .item text {
  246. color: #666;
  247. }
  248. .tab {
  249. display: flex;
  250. align-items: center;
  251. padding: 10px 20px 10px 20px;
  252. border-bottom: #efefef 1px solid;
  253. }
  254. .tab .item {
  255. border-bottom: #fff 2px solid;
  256. color: #666;
  257. margin-right: 15px;
  258. padding-bottom: 5px;
  259. }
  260. .tab .active {
  261. border-bottom: #007AFF 2px solid;
  262. color: #007AFF;
  263. }
  264. </style>