jiaocheng.vue 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. <template>
  2. <view class="container">
  3. <view class="statusBarHG" :style="'height:'+statusBarHeight+'px'"></view>
  4. <view class="tab-h flex-row sticky flex-y-center" :style="'top:'+statusBarHeight+'px'">
  5. <view class="item" :class="tabType == 1?'active':''" @click="onTabChange(1)">文案教程</view>
  6. <!-- <view class="item" :class="tabType == 2?'active':''" @click="onTabChange(2)">文章</view> -->
  7. <view class="item" :class="tabType == 2?'active':''" @click="onTabChange(2)">视频教程</view>
  8. </view>
  9. <view class="statusBarHG" style="height:45px"></view>
  10. <view class="tab-b">
  11. <navigator :url="'./detail?id='+item.id+'&tabType='+tabType" class="item flex-row" v-for="(item,index) in list" :key="item.id">
  12. <image :src="item.thumb" mode="aspectFill" class="img"></image>
  13. <view class="info">
  14. <view class="title text-1">{{item.title}}</view>
  15. <view class="desc text-1">{{item.desc}}</view>
  16. <view class="time">{{item.create_time}}</view>
  17. </view>
  18. </navigator>
  19. </view>
  20. <view class="no-more" v-if="list.length<=0">
  21. 暂无内容
  22. </view>
  23. <!-- <page-btm-bar :active="2" /> -->
  24. </view>
  25. </template>
  26. <script>
  27. export default {
  28. data() {
  29. return {
  30. tabType: 1,
  31. list: [],
  32. statusBarHeight: 0,
  33. }
  34. },
  35. methods: {
  36. onTabChange(index) {
  37. this.tabType = index
  38. index == 1 ? this.jcdetail() : this.vdlist();
  39. },
  40. jcdetail() {
  41. this.request({
  42. url: "Content/jclist",
  43. data: {},
  44. }).then(res => {
  45. console.log(res, "res")
  46. if (res.code === '200') {
  47. this.list = res.data;
  48. }
  49. }).catch((res) => {});
  50. },
  51. vdlist() {
  52. this.request({
  53. url: "Content/vdlist",
  54. data: {},
  55. }).then(res => {
  56. console.log(res, "res")
  57. if (res.code === '200') {
  58. this.list = res.data;
  59. }
  60. }).catch((res) => {});
  61. },
  62. },
  63. onLoad() {
  64. this.jcdetail();
  65. this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
  66. },
  67. }
  68. </script>
  69. <style>
  70. .tab-h {
  71. padding: 0rpx 40rpx;
  72. height: 45px;
  73. background-color: #fff;
  74. position: fixed;
  75. /* top: var(--window-top); */
  76. }
  77. .tab-h .item {
  78. font-size: 40rpx;
  79. color: #242424;
  80. font-weight: 500;
  81. line-height: 67rpx;
  82. margin-right: 60rpx;
  83. /* transition: all 0.2s; */
  84. }
  85. .tab-h .item.active {
  86. font-size: 48rpx;
  87. }
  88. .tab-b .item {
  89. padding: 20rpx 40rpx;
  90. align-items: flex-start;
  91. }
  92. .tab-b .item .img {
  93. flex: none;
  94. display: block;
  95. width: 230rpx;
  96. height: 160rpx;
  97. border-radius: 10rpx;
  98. }
  99. .tab-b .item .info {
  100. flex: none;
  101. width: 416rpx;
  102. min-height: 160rpx;
  103. padding-left: 24rpx;
  104. display: flex;
  105. flex-flow: column nowrap;
  106. justify-content: flex-start;
  107. align-items: flex-start;
  108. }
  109. .tab-b .item .info .title {
  110. font-size: 32rpx;
  111. color: #333;
  112. font-weight: 500;
  113. line-height: 45rpx;
  114. }
  115. .tab-b .item .info .desc {
  116. font-size: 28rpx;
  117. color: #999;
  118. font-weight: 400;
  119. line-height: 40rpx;
  120. margin-top: 10rpx;
  121. }
  122. .tab-b .item .info .time {
  123. font-size: 26rpx;
  124. color: #adadad;
  125. font-weight: 400;
  126. line-height: 37rpx;
  127. margin-top: auto;
  128. }
  129. .no-more {
  130. text-align: center;
  131. font-size: 30rpx;
  132. color: #999999;
  133. }
  134. </style>