与牧同行-小程序用户端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

61 lines
2.0 KiB

  1. <view class="article-detail-container">
  2. <!-- 文章内容 -->
  3. <scroll-view class="article-content" scroll-y>
  4. <!-- 文章封面 -->
  5. <view class="article-cover">
  6. <image
  7. class="cover-image"
  8. src="{{baseUrl + article.coverImage}}"
  9. mode="widthFix"
  10. lazy-load
  11. ></image>
  12. <view class="cover-overlay"></view>
  13. <view class="cover-gradient"></view>
  14. <view class="cover-category">{{article.category}}</view>
  15. </view>
  16. <!-- 文章主体 -->
  17. <view class="article-body">
  18. <!-- 标题区域 -->
  19. <view class="title-section">
  20. <view class="article-title">{{article.title}}</view>
  21. <view class="article-subtitle">{{article.subtitle}}</view>
  22. <!-- 专家信息 -->
  23. <view class="expert-info">
  24. <image class="expert-avatar" src="{{baseUrl + article.expertAvatar}}"></image>
  25. <view class="expert-detail">
  26. <view class="expert-name">{{article.expertName}}</view>
  27. <view class="publish-time">{{article.publishTime}}</view>
  28. </view>
  29. <view class="view-count">
  30. <image class="view-icon" src="/pagesB/images/lll.png"></image>
  31. <text>{{article.viewCount}} 阅读</text>
  32. </view>
  33. </view>
  34. </view>
  35. <!-- 文章内容(富文本) -->
  36. <view class="rich-content">
  37. <rich-text nodes="{{article.content}}"></rich-text>
  38. </view>
  39. </view>
  40. </scroll-view>
  41. <!-- 加载中 -->
  42. <view class="loading-container" wx:if="{{loading}}">
  43. <view class="loading-spinner">
  44. <view class="spinner-circle"></view>
  45. <view class="spinner-circle circle-2"></view>
  46. <view class="spinner-circle circle-3"></view>
  47. </view>
  48. <text class="loading-text">加载中...</text>
  49. </view>
  50. <!-- 回到顶部按钮 -->
  51. <view class="back-to-top" wx:if="{{scrollTop > 400}}" catchtap="scrollToTop">
  52. <image class="top-icon" src="/pagesB/images/top.png"></image>
  53. </view>
  54. </view>