news.vue 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. <template>
  2. <view class="content">
  3. <view class="top">
  4. <u-navbar title=" " @leftClick="leftClick" height="44px" bgColor="rgb(255,255,255)" :placeholder="true">
  5. <view class="u-nav-slot" slot="center">
  6. <u-input v-model="keyword" type="text" :border="true" placeholder="搜索关键词" shape="circle"
  7. prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399" @focus="search">
  8. <template slot="suffix">
  9. <view @click="search">搜索</view>
  10. </template>
  11. </u-input>
  12. </view>
  13. </u-navbar>
  14. </view>
  15. <view class="boxs">
  16. <u-tabs :list="tabs" @click="changeTaaba"
  17. :scrollable = "false"
  18. :activeStyle="{
  19. color: '#000',
  20. }" :inactiveStyle="{
  21. color: '#888888'
  22. }"></u-tabs>
  23. </view>
  24. <view class="boxs">
  25. <news-module :pageList="pageList"></news-module>
  26. </view>
  27. </view>
  28. </template>
  29. <script>
  30. import $api from '@/static/js/api.js'
  31. var that = ''
  32. export default {
  33. data() {
  34. return {
  35. keyword: '',
  36. tabs: [
  37. {
  38. name: '推荐',
  39. },
  40. {
  41. name: '发现',
  42. },
  43. {
  44. name: '资讯',
  45. },
  46. {
  47. name: '实时',
  48. },
  49. {
  50. name: '娱乐',
  51. },
  52. {
  53. name: '美食',
  54. }
  55. ],
  56. pageList: [
  57. {
  58. title: '2022年上半年十部好剧,《开端》第7名,《人世间》第4名,值得观看',
  59. imgs: [
  60. "/static/images/index/class_img1.png",
  61. "/static/images/index/class_img1.png",
  62. "/static/images/index/class_img1.png"
  63. ],
  64. type: '资讯',
  65. client: '澎湃新闻客户端',
  66. comment: 77
  67. }
  68. ],
  69. }
  70. },
  71. onLoad(options) {
  72. that = this
  73. that.keyword = options.value
  74. },
  75. methods: {
  76. // 返回
  77. leftClick() {
  78. console.log('返回');
  79. $api.jump(-1)
  80. },
  81. // 切换tabs
  82. changeTaaba(e) {
  83. console.log(e);
  84. },
  85. },
  86. }
  87. </script>
  88. <style lang="scss" scoped>
  89. .content::v-deep {
  90. .top {
  91. box-sizing: border-box;
  92. // padding: 30rpx;
  93. // height: 540rpx;
  94. .u-nav-slot {
  95. position: absolute;
  96. top: 8rpx;
  97. left: 84rpx;
  98. width: 470rpx;
  99. }
  100. .u-input {
  101. background-color: #fff;
  102. height: 64rpx;
  103. padding: 0 0 0 18rpx !important;
  104. border: 1rpx solid #506Dff;
  105. margin-bottom: 12rpx;
  106. }
  107. .u-input__content__subfix-icon {
  108. width: 128rpx;
  109. height: 64rpx;
  110. background-color: #506Dff;
  111. border-radius: 32rpx;
  112. color: #fff;
  113. font-size: 28rpx;
  114. text-align: center;
  115. line-height: 64rpx;
  116. }
  117. }
  118. .boxs {
  119. width: 100%;
  120. box-sizing: border-box;
  121. padding: 0 30rpx;
  122. margin: 24rpx 0 0;
  123. }
  124. }
  125. </style>