templateC.vue 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. <template>
  2. <scroll-view scroll-x="true" class="container article-list">
  3. <view class="section" v-for="(item,index) in productList" :key="index" @click="navigaitionTo(item)">
  4. <view class="cover">
  5. <image :src="item.adsImage" mode="widthFix" class="cover-gg"></image>
  6. </view>
  7. <view class="article-text">
  8. <view class="title">{{item.name}}</view>
  9. <view class="content" v-text="item.content"></view>
  10. </view>
  11. </view>
  12. </scroll-view>
  13. </template>
  14. <script>
  15. export default {
  16. data(){
  17. return{
  18. productList:[]
  19. }
  20. },
  21. props:{
  22. pageData: {
  23. type: Object
  24. },
  25. userIdentity: {
  26. type: Number
  27. }
  28. },
  29. created() {
  30. this.initData(this.pageData);
  31. },
  32. methods:{
  33. initData(data){
  34. this.productList = data.floorImageList;
  35. },
  36. navigaitionTo(item){
  37. console.log(item);
  38. if(item.link){
  39. uni.navigateTo({
  40. url:`/h5/pages/article/path?link=${item.link}`
  41. })
  42. }
  43. }
  44. }
  45. }
  46. </script>
  47. <style lang="scss">
  48. .article-list {
  49. width: 750rpx;
  50. margin-left: -24rpx;
  51. height: auto;
  52. box-sizing: border-box;
  53. white-space: nowrap;
  54. .section {
  55. display: inline-block;
  56. width: 310rpx;
  57. height: 392rpx;
  58. background: #ffffff;
  59. box-sizing: border-box;
  60. border-radius: 16rpx;
  61. margin-right: 24rpx;
  62. vertical-align: middle;
  63. &:first-child{
  64. margin-left: 24rpx;
  65. }
  66. .cover {
  67. width: 310rpx;
  68. height: 220rpx;
  69. border-radius: 16rpx 16rpx 0 0;
  70. overflow: hidden;
  71. .cover-gg{
  72. width: 310rpx;
  73. height: 220rpx;
  74. }
  75. }
  76. .article-text {
  77. width: 310rpx;
  78. box-sizing: border-box;
  79. padding: 24rpx;
  80. .title {
  81. font-size: 26rpx;
  82. height: 37rpx;
  83. color: #3a3a3a;
  84. margin-bottom: 16rpx;
  85. }
  86. .content {
  87. white-space: normal;
  88. font-size: 24rpx;
  89. line-height: 40rpx;
  90. color: #8a8a8a;
  91. word-break: break-all;
  92. overflow: hidden;
  93. text-overflow: ellipsis;
  94. display: -webkit-inline-box;
  95. -webkit-line-clamp: 2;
  96. -webkit-box-orient: vertical;
  97. }
  98. }
  99. }
  100. }
  101. </style>