rmkc.vue 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  1. <template>
  2. <view class="">
  3. <u-navbar :border-bottom="false" back-icon-size="35" title="热门课程" title-size="32" :background="background"
  4. :back-text-style="hhyanm" title-color="#FFFFFF" back-icon-color="#FFFFFF"></u-navbar>
  5. <view class="zykkddr">
  6. <view class="zykkddra">
  7. <image src="/static/zy/zya1.png" style="width: 750rpx;height: 410rpx;margin-top: -102rpx;margin-left: 132rpx;" mode=""></image>
  8. </view>
  9. <view class="zykkddrb">
  10. <view style="margin: 0 24rpx;">
  11. <u-swiper :list="list" interval="58000" height="364" border-radius="16"></u-swiper>
  12. </view>
  13. </view>
  14. </view>
  15. <view class="rmkdwwer">
  16. <view class="fzctob inbddwddre">
  17. <image src="/static/index/ina1.png"
  18. style="width: 40rpx;height: 40rpx;min-width: 40rpx;margin-right: 12rpx;"></image>
  19. <input type="text" value="" placeholder-style="color: #CCCCCC;font-size: 28rpx;"
  20. placeholder="搜索你感兴趣的内容" />
  21. </view>
  22. </view>
  23. <view class="rmknuy">
  24. <view class="zyhttry" style="padding: 20rpx 30rpx;">
  25. <view class="zyjjdew"></view>
  26. <text>热门课程</text>
  27. </view>
  28. <view class="rmkhdurr">
  29. <view class="jhdurryt">
  30. <text>分类</text>
  31. </view>
  32. <view class="jhdurryt">
  33. <text>强化分类</text>
  34. </view>
  35. <view class="jhdurryt">
  36. <text>强化分类</text>
  37. </view>
  38. <view class="jhdurryt">
  39. <text>强化分类</text>
  40. </view>
  41. <view class="jhdurryt">
  42. <text>强化分类</text>
  43. </view>
  44. <view class="jhdurryt">
  45. <text>强化分类</text>
  46. </view>
  47. </view>
  48. <view style="padding: 20rpx 30rpx;">
  49. <view class="zytlidde">
  50. <view class="zytyyrimg"></view>
  51. <view class="zytyyopf">
  52. <view class="zytyotxta"><text>视频名称视频名称</text></view>
  53. <view class="flztoa zytyotxtb">
  54. <text>小丸子</text>
  55. <image src="/static/zy/zyb3.png" style="width: 48rpx;height: 48rpx;" mode=""></image>
  56. </view>
  57. <view class="flztoa">
  58. <view class="fzctob zytyotxtc">
  59. <text>3982人观看</text>
  60. <image v-show="xqaxuye" @click="xqaxuye = false" src="/static/zy/zyb1.png" style="width: 36rpx;height: 36rpx;margin-left: 20rpx;" mode=""></image>
  61. <image v-show="!xqaxuye" @click="xqaxuye = true" src="/static/zy/zyb2.png" style="width: 36rpx;height: 36rpx;margin-left: 20rpx;" mode=""></image>
  62. </view>
  63. <text class="zytyotxtd">08:40分钟</text>
  64. </view>
  65. </view>
  66. </view>
  67. <view class="zyhxyyer"></view>
  68. <view class="zytlidde">
  69. <view class="zytyyrimg"></view>
  70. <view class="zytyyopf">
  71. <view class="zytyotxta"><text>视频名称视频名称</text></view>
  72. <view class="flztoa zytyotxtb">
  73. <text>小丸子</text>
  74. <image src="/static/zy/zyb3.png" style="width: 48rpx;height: 48rpx;" mode=""></image>
  75. </view>
  76. <view class="flztoa">
  77. <view class="fzctob zytyotxtc">
  78. <text>3982人观看</text>
  79. <image v-show="xqaxuye" @click="xqaxuye = false" src="/static/zy/zyb1.png" style="width: 36rpx;height: 36rpx;margin-left: 20rpx;" mode=""></image>
  80. <image v-show="!xqaxuye" @click="xqaxuye = true" src="/static/zy/zyb2.png" style="width: 36rpx;height: 36rpx;margin-left: 20rpx;" mode=""></image>
  81. </view>
  82. <text class="zytyotxtd">08:40分钟</text>
  83. </view>
  84. </view>
  85. </view>
  86. <view class="zyhxyyer"></view>
  87. <view class="zytlidde">
  88. <view class="zytyyrimg"></view>
  89. <view class="zytyyopf">
  90. <view class="zytyotxta"><text>视频名称视频名称</text></view>
  91. <view class="flztoa zytyotxtb">
  92. <text>小丸子</text>
  93. <image src="/static/zy/zyb3.png" style="width: 48rpx;height: 48rpx;" mode=""></image>
  94. </view>
  95. <view class="flztoa">
  96. <view class="fzctob zytyotxtc">
  97. <text>3982人观看</text>
  98. <image v-show="xqaxuyea" @click="xqaxuyea = false" src="/static/zy/zyb1.png" style="width: 36rpx;height: 36rpx;margin-left: 20rpx;" mode=""></image>
  99. <image v-show="!xqaxuyea" @click="xqaxuyea = true" src="/static/zy/zyb2.png" style="width: 36rpx;height: 36rpx;margin-left: 20rpx;" mode=""></image>
  100. </view>
  101. <text class="zytyotxtd">08:40分钟</text>
  102. </view>
  103. </view>
  104. </view>
  105. <view class="zyhxyyer"></view>
  106. <view class="zytlidde">
  107. <view class="zytyyrimg"></view>
  108. <view class="zytyyopf">
  109. <view class="zytyotxta"><text>视频名称视频名称</text></view>
  110. <view class="flztoa zytyotxtb">
  111. <text>小丸子</text>
  112. <image src="/static/zy/zyb3.png" style="width: 48rpx;height: 48rpx;" mode=""></image>
  113. </view>
  114. <view class="flztoa">
  115. <view class="fzctob zytyotxtc">
  116. <text>3982人观看</text>
  117. <image v-show="xqaxuyeb" @click="xqaxuyeb = false" src="/static/zy/zyb1.png" style="width: 36rpx;height: 36rpx;margin-left: 20rpx;" mode=""></image>
  118. <image v-show="!xqaxuyeb" @click="xqaxuyeb = true" src="/static/zy/zyb2.png" style="width: 36rpx;height: 36rpx;margin-left: 20rpx;" mode=""></image>
  119. </view>
  120. <text class="zytyotxtd">08:40分钟</text>
  121. </view>
  122. </view>
  123. </view>
  124. <view class="zyhxyyer"></view>
  125. </view>
  126. </view>
  127. </view>
  128. </template>
  129. <style>
  130. page {
  131. background: #FAFAFA;
  132. }
  133. </style>
  134. <script>
  135. export default {
  136. data() {
  137. return {
  138. xqaxuye:false,
  139. xqaxuyea:true,
  140. xqaxuyeb:true,
  141. background: {
  142. backgroundColor: '#486A92',
  143. },
  144. hhyanm: {
  145. color: '#FFFFFF',
  146. },
  147. timestamp: 86400,
  148. list: [{
  149. image: '/static/gaoduwe.png',
  150. title: '测试'
  151. },
  152. {
  153. image: '/static/gaoduwe.png',
  154. title: '测试'
  155. },
  156. {
  157. image: '/static/gaoduwe.png',
  158. title: '测试'
  159. }
  160. ],
  161. }
  162. },
  163. }
  164. </script>
  165. <style lang="scss" scoped>
  166. </style>