rollMessage.vue 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. <template>
  2. <view class="roll-box">
  3. <image class="roll-icon" src="@/static/images/icon_01.png" mode="aspectFit"></image>
  4. <view class="roll-list hide_1">
  5. <u-notice-bar icon='' bgColor="" duration="3000" direction="column" @click="lookDetails" :text="rollMsg.map(el => {
  6. return el.title || ''
  7. })">
  8. </u-notice-bar>
  9. <!-- <view class="roll-item hide_1">
  10. 币王BiKing合约交易所代理签约邀您加入币王BiKing合约交易所代理签约邀您加入
  11. </view> -->
  12. </view>
  13. <image class="roll-more" src="@/static/images/icon_02.png" mode="aspectFit"></image>
  14. </view>
  15. </template>
  16. <script>
  17. export default {
  18. name: "rollMessage",
  19. props: {
  20. rollMsg: {
  21. type: Array,
  22. default: () => []
  23. }
  24. },
  25. data() {
  26. return {
  27. list: [
  28. '币王BiKing合约交易所代理签约邀您加入币王BiKing合约交易所代理签约邀您加入',
  29. '币王BiKing合约交易所代理签约邀您加入币王BiKing合约交易所代理签约邀您加入',
  30. '币王BiKing合约交易所代理签约邀您加入币王BiKing合约交易所代理签约邀您加入',
  31. '币王BiKing合约交易所代理签约邀您加入币王BiKing合约交易所代理签约邀您加入',
  32. '币王BiKing合约交易所代理签约邀您加入币王BiKing合约交易所代理签约邀您加入',
  33. '币王BiKing合约交易所代理签约邀您加入币王BiKing合约交易所代理签约邀您加入',
  34. '币王BiKing合约交易所代理签约邀您加入币王BiKing合约交易所代理签约邀您加入',
  35. '币王BiKing合约交易所代理签约邀您加入币王BiKing合约交易所代理签约邀您加入'
  36. ]
  37. };
  38. },
  39. methods:{
  40. lookDetails(index){
  41. // const id = this.rollMsg[index]?.id;
  42. // uni.navigateTo({
  43. // url: this.$path.articleDetails + `${id}`
  44. // })
  45. const link = this.rollMsg[index]?.link;
  46. uni.navigateTo({
  47. url:`/pages/content/affiche?link=${link}`
  48. })
  49. }
  50. }
  51. }
  52. </script>
  53. <style lang="scss" scoped>
  54. .roll-box {
  55. width: 100%;
  56. height: 70rpx;
  57. background-color: $modules-box-bg;
  58. padding: 0 $pages-padding;
  59. display: flex;
  60. justify-content: space-between;
  61. align-items: center;
  62. border-bottom: 1rpx solid $border-color2;
  63. .roll-icon
  64. .roll-more {
  65. width: 33rpx;
  66. height: 30rpx;
  67. flex-shrink: 0;
  68. }
  69. .roll-list {
  70. width: calc(100% - 60rpx);
  71. height: 100%;
  72. flex-shrink: 0;
  73. padding: 0 20rpx;
  74. display: flex;
  75. align-items: center;
  76. // .roll-item{
  77. // width: 100%;
  78. // font-size: 26rpx;
  79. // font-family: PingFang SC, PingFang SC-Regular;
  80. // font-weight: 400;
  81. // text-align: left;
  82. // color: #1a1a1a;
  83. // letter-spacing: 0.52px;
  84. // }
  85. ::v-deep .u-notice-bar {
  86. // width: 100%;
  87. padding-left: 0;
  88. padding-right: 0;
  89. .u-notice__swiper__item__text {
  90. font-size: 24rpx !important;
  91. font-family: PingFang SC, PingFang SC-Regular !important;
  92. font-weight: 400 !important;
  93. color: #1a1a1a !important;
  94. letter-spacing: 0.52px !important;
  95. overflow: hidden;
  96. text-overflow: ellipsis;
  97. white-space: nowrap;
  98. word-wrap: break-word;
  99. }
  100. }
  101. }
  102. }
  103. </style>