discovery.vue 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. <template>
  2. <view class="card-item" @click="onOpen(dataVal)">
  3. <template v-if="dataVal">
  4. <view class="card-img lazy-falls-img">
  5. <u-image class="service-img" mode="widthFix" loading-icon="@/app/static/ZW/img-load.png" :src="$getImgPath(dataVal.informationThumbnail)"></u-image>
  6. <!-- <u-lazy-load threshold="500" border-radius="10" :image="$getImgPath(dataVal.informationThumbnail)"
  7. height="200" :index="`img_${dataVal.informationTypeId}`"></u-lazy-load> -->
  8. </view>
  9. <!-- <image :src="dataVal.informationThumbnail" mode="aspectFill"></image> -->
  10. <view class="card-info-box">
  11. <text class="card-title zw-two-row">{{dataVal.informationTitle}}</text>
  12. <view class="card-info">
  13. <!-- <image class="card-info-icon" src="../../logo.png" mode="scaleToFill"></image> -->
  14. <text class="card-info-name zw-one-row">{{dataVal.informationAuthor}}</text>
  15. <view class="card-info-nums" v-if="dataVal.browseNum || dataVal.browseNum === 0">
  16. <text v-if="dataVal.collectStatus" class="card-collect is-ok iconfont_yige">&#xe8c3;</text>
  17. <text v-else class="card-collect iconfont_yige">&#xe8ab;</text>
  18. <text class="card-browse">{{getNums(dataVal.browseNum)}}</text>
  19. </view>
  20. </view>
  21. </view>
  22. </template>
  23. </view>
  24. </template>
  25. <script>
  26. export default {
  27. name: "discovery",
  28. props: {
  29. idName: {
  30. type: String,
  31. default: "informationId"
  32. },
  33. dataVal: {
  34. type: Object,
  35. default: null
  36. }
  37. },
  38. data() {
  39. return {
  40. };
  41. },
  42. methods: {
  43. onOpen(item) {
  44. uni.navigateTo({
  45. url: `/pages/government/discoverInfo?informationId=${item[this.idName]}`
  46. })
  47. },
  48. getNums(num) {
  49. let nums = num + ''
  50. if (nums > 10000) {
  51. try {
  52. const w = nums.slice(0, nums.length - 4);
  53. const n = nums.substr(nums.length - 4);
  54. const s = n.slice(0, 1);
  55. nums = `${w}${s >= 1 ? '.' + s : ''}Íò`
  56. } catch {}
  57. }
  58. return nums
  59. }
  60. }
  61. }
  62. </script>
  63. <style lang="scss">
  64. .card-item {
  65. margin-top: 20rpx;
  66. // width: calc(50% - 10rpx);
  67. width: 100%;
  68. // min-height: 468rpx;
  69. background-color: #fff;
  70. border-radius: 20rpx;
  71. overflow: hidden;
  72. .card-img {
  73. width: 100%;
  74. // height: 313rpx;
  75. .service-img{
  76. width: 100%;
  77. }
  78. }
  79. .card-info-box {
  80. width: 100%;
  81. // height: calc(100% - 313rpx);
  82. height: 175rpx;
  83. padding: 20rpx;
  84. display: flex;
  85. flex-direction: column;
  86. justify-content: space-between;
  87. .card-title {
  88. display: inline-block;
  89. width: 100%;
  90. font-size: 28rpx;
  91. line-height: 1.2;
  92. }
  93. }
  94. .card-info {
  95. width: 100%;
  96. // padding: 0 20rpx ;
  97. display: flex;
  98. flex-direction: row;
  99. justify-content: space-between;
  100. align-items: center;
  101. .card-info-icon {
  102. width: 32rpx;
  103. height: 32rpx;
  104. }
  105. .card-info-name {
  106. flex: 1;
  107. font-size: 24rpx;
  108. font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  109. font-weight: 400;
  110. color: #999999;
  111. }
  112. .card-info-nums {
  113. flex-shrink: 0;
  114. display: flex;
  115. align-items: center;
  116. .card-collect {
  117. font-size: 28rpx;
  118. }
  119. .is-ok {
  120. color: red;
  121. }
  122. .card-browse {
  123. padding-left: 10rpx;
  124. font-size: 28rpx;
  125. font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  126. font-weight: 400;
  127. color: #999999;
  128. }
  129. }
  130. }
  131. }
  132. </style>