notice.vue 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. <template>
  2. <view>
  3. <view class="tui-rolling-view">
  4. <view class="tui-rolling-news">
  5. <text class="tui-roll-label">公告:</text>
  6. <swiper vertical autoplay circular interval="3500" class="tui-swiper">
  7. <swiper-item v-for="(item,index) in list" :key="index" class="tui-swiper-item">
  8. <view class="tui-news-item" @tap='detail(item)'>
  9. <text class="news-dot"></text>
  10. {{item.title}}
  11. </view>
  12. </swiper-item>
  13. </swiper>
  14. <view class="tui-roll-more" @tap='newsList(item)'>
  15. 更多<text class="iconfont icon-xiayibu"></text>
  16. </view>
  17. </view>
  18. </view>
  19. </view>
  20. </template>
  21. <script>
  22. export default{
  23. name:'address',
  24. props:{
  25. list:{
  26. type:Array
  27. }
  28. },
  29. data() {
  30. return{
  31. }
  32. },
  33. created(){
  34. },
  35. computed: {
  36. },
  37. methods:{
  38. detail(item){// 跳转公告详情
  39. this.$api.navigateTo(`/pages/service/news-detailes?id=${item.id}`)
  40. },
  41. newsList(){// 公告列表
  42. this.$api.navigateTo('/pages/service/news-list')
  43. },
  44. swiperChange(e) {//轮播图切换
  45. const index = e.detail.current
  46. this.current = index
  47. },
  48. NavToDetailPage(floor) {//跳转
  49. this.$api.FlooryNavigateTo(floor)
  50. }
  51. }
  52. }
  53. </script>
  54. <style lang="scss">
  55. .tui-rolling-view{
  56. width: 100%;
  57. height: 88rpx;
  58. background-color: #F7F7F7;
  59. box-sizing: border-box;
  60. padding: 24rpx 24rpx 0 24rpx;
  61. }
  62. .tui-rolling-news {
  63. width: 100%;
  64. padding: 0 20rpx;
  65. border-radius: 8rpx;
  66. box-sizing: border-box;
  67. display: flex;
  68. align-items: center;
  69. justify-content: center;
  70. flex-wrap: nowrap;
  71. line-height: 56rpx;
  72. background: url('https://static.caimei365.com/app/img/bg/icon-newsbg@2x.png') no-repeat;
  73. background-size: cover;
  74. .tui-roll-label{
  75. font-weight: bold;
  76. font-size: $font-size-26;
  77. color: #FF5B00;
  78. }
  79. .tui-roll-more{
  80. font-size: $font-size-24;
  81. color: #666666;
  82. .icon-xiayibu{
  83. font-size: $font-size-22;
  84. }
  85. }
  86. }
  87. .tui-swiper {
  88. font-size: 28rpx;
  89. height: 50rpx;
  90. flex: 1;
  91. }
  92. .tui-swiper-item {
  93. display: flex;
  94. align-items: center
  95. }
  96. .tui-news-item {
  97. width: 480rpx;
  98. line-height: 28rpx;
  99. white-space: nowrap;
  100. overflow: hidden;
  101. text-overflow: ellipsis;
  102. font-size: $font-size-24;
  103. color: #666666;
  104. .news-dot{
  105. display: inline-block;
  106. width: 10rpx;
  107. height: 10rpx;
  108. background-color: #999999;
  109. border-radius: 50%;
  110. margin-right: 8rpx;
  111. float: left;
  112. margin-top: 10rpx;
  113. }
  114. }
  115. </style>