newsIndex.vue 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. <template>
  2. <view>
  3. <u-navbar :is-back="false" title="消息" :background="background" title-color="#fff"></u-navbar>
  4. <view class="newsIndex">
  5. <view class="newsIndex-item" v-for="(item,i) in list " :key="i" @click="gotoUrlNews(item)">
  6. <u-avatar :src="src[item.classifyId]"></u-avatar>
  7. <view class="newsIndex-text">
  8. <view class="newsIndex-row">
  9. <h3>{{item.classify}}</h3>
  10. <p>{{item.newMessage&&item.newMessage.createTime}}</p>
  11. </view>
  12. <view class="newsIndex-row">
  13. <p>{{item.newMessage&&item.newMessage.title}}</p>
  14. <u-badge size="mini" type="error" :count="item.num" :offset="[0,0]"></u-badge>
  15. </view>
  16. </view>
  17. </view>
  18. </view>
  19. <Tabbar-Job :current="2" ></Tabbar-Job>
  20. </view>
  21. </template>
  22. <script>
  23. import api from './index.js'
  24. export default api;
  25. </script>
  26. <style>
  27. page{
  28. background-color: #F7F7F7;
  29. }
  30. </style>
  31. <style scoped lang="scss">
  32. .newsIndex-item{
  33. display: flex;
  34. padding: 20rpx;
  35. background-color: #fff;
  36. align-items: center;
  37. .newsIndex-text{
  38. flex: 1;
  39. min-width: 0;
  40. margin-left: 20rpx;
  41. }
  42. .newsIndex-row{
  43. display: flex;
  44. justify-content: space-between;
  45. align-items: center;
  46. margin-top: 10rpx;
  47. position: relative;
  48. &:first-child{
  49. margin-top: 0;
  50. }
  51. p{
  52. color:#999;
  53. }
  54. }
  55. }
  56. </style>