healthCourse.vue 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. <template>
  2. <view class="column " style="height: 100%;">
  3. <view class="justify-center bgf" >
  4. <u-tabs :list="list1" lineWidth='30' lineColor="#018C39"
  5. @click="acttab"></u-tabs>
  6. </view>
  7. <view v-if="acttabs==0" class="list-img flex-1 scrolly p20" >
  8. <!-- <view class="bgf radius20 list mtb10" v-for="item in 9" >
  9. <view class="posimg">
  10. <image src="https://beiliyo-2025.obs.cn-north-4.myhuaweicloud.com/fs/20250116/1737005549926.png" mode="aspectFill" class="img"></image>
  11. <image src="/static/images/common/video_icon.png" class="ve"></image>
  12. </view>
  13. <view class="p20">
  14. <view>健康养生</view>
  15. <view class="color9 fs24 ellipsis ">
  16. 通过科学的饮食、运动等方式养好自己身体,活出生命质量
  17. </view>
  18. <view class="mt8 justify-between align-center">
  19. <view class="justify-start align-center">
  20. <u-avatar :src="src" size="20"></u-avatar>
  21. <text class="fs24 color6 ml8">崔医生</text>
  22. </view>
  23. <view class="justify-start align-center zan">
  24. <image src='/static/images/common/zan_icon.png' v-if='zanact'></image>
  25. <image src='/static/images/common/zan_on_icon.png' v-else></image>
  26. <view class="color6 fs24">5454</view>
  27. </view>
  28. </view>
  29. </view>
  30. </view> -->
  31. </view>
  32. <view v-else>
  33. <view class="column align-center">
  34. <image src="/static/images/common/zanwuzhibo.png"
  35. class="w200 h200"></image>
  36. <view>暂无课程</view>
  37. </view>
  38. </view>
  39. </view>
  40. </template>
  41. <script>
  42. export default {
  43. data() {
  44. return {
  45. list1: [{
  46. name: '红包课程',
  47. }, {
  48. name: '直播课程',
  49. }],
  50. acttabs:0,
  51. src:'',
  52. zanact:true
  53. }
  54. },
  55. methods: {
  56. acttab(e){
  57. this.acttabs=e.index
  58. console.log(e)
  59. }
  60. }
  61. }
  62. </script>
  63. <style lang="scss" scoped>
  64. .list-img{
  65. display: flex;
  66. flex-wrap: wrap;
  67. justify-content: space-between;
  68. .list{
  69. width: 48%;
  70. }
  71. }
  72. .img{
  73. width: 100%;
  74. height: 350rpx;
  75. }
  76. .ve{
  77. width: 60rpx;
  78. height: 60rpx;
  79. position: absolute;
  80. bottom: 50%;
  81. left: 40%;
  82. }
  83. .posimg{
  84. position: relative;
  85. }
  86. .zan{
  87. image{
  88. width: 32rpx;
  89. height: 32rpx;
  90. }
  91. }
  92. </style>