news-item.vue 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. <template>
  2. <view class="news-item" @click="onClickDetail(item)">
  3. <view class="news-title">{{ item.title }}</view>
  4. <view class="news-time">{{ formatDate(item.publish_time || item.pub_date) }}</view>
  5. <view class="news-summary">
  6. <view class="text">{{ item.content || item.description }}</view>
  7. <view class="to-detail"><view>了解详情</view> <view class="arrow iconfont icon-right-s"></view></view>
  8. </view>
  9. </view>
  10. </template>
  11. <script>
  12. import { link } from '@/utils/request'
  13. export default {
  14. components: {
  15. },
  16. props: {
  17. type: String,
  18. item: Object
  19. },
  20. data() {
  21. return {
  22. websiteUrl: process.env.WEBSITE
  23. }
  24. },
  25. created() {
  26. },
  27. methods: {
  28. formatDate(dateString) {
  29. const date = new Date(dateString);
  30. const year = date.getFullYear();
  31. const month = date.getMonth() + 1; // 月份从 0 开始
  32. const day = date.getDate();
  33. return `${year}${month}${day}日`;
  34. },
  35. onClickDetail(item) {
  36. if (this.type === 'exhibitor') {
  37. this.navigateTo(link('/' + item.urla))
  38. } else {
  39. this.navigateTo(this.websiteUrl + '/' + item.urla)
  40. }
  41. }
  42. }
  43. }
  44. </script>
  45. <style lang="scss">
  46. .news-item{
  47. display: flex;
  48. flex-direction: column;
  49. height: 210rpx;
  50. background-color: #F6F6F6;
  51. border-radius: 10rpx;
  52. padding: 24rpx 30rpx;
  53. }
  54. .news-summary{
  55. display: flex;
  56. align-items: center;
  57. }
  58. .news-title{
  59. @include text-ellipsis-line;
  60. font-family: Arial, Arial;
  61. font-weight: bold;
  62. font-size: $fontSize3;
  63. line-height: 35rpx;
  64. }
  65. .news-time{
  66. font-size: $fontSize0;
  67. color: #555555;
  68. margin: 12rpx 0;
  69. }
  70. .news-summary{
  71. font-size: $fontSize1;
  72. line-height: 25rpx;
  73. .text{
  74. padding-right: 30rpx;
  75. color: #555555;
  76. @include text-ellipsis-line;
  77. -webkit-line-clamp: 2;
  78. }
  79. .to-detail{
  80. display: flex;
  81. align-items: center;
  82. flex-shrink: 0;
  83. color: $buttonPrimaryColor;
  84. font-size: 16rpx;
  85. font-weight: bold;
  86. padding: 0 24rpx;
  87. }
  88. .arrow{
  89. margin-left: 12rpx;
  90. font-size: $fontSize0;
  91. }
  92. }
  93. </style>