zetank-notice.vue 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <template>
  2. <view class="notice">
  3. <view class="right_notice">
  4. <!-- noticeList -->
  5. <swiper class="notice_swiper" vertical easing-function="easeInOutCubic" :circular="true" :autoplay="true" :interval="interval">
  6. <swiper-item v-for="(item,index) in noticeList" :key="index" class="sw_item" @click="clickNotice(item)">
  7. <!-- {{item.content}} -->
  8. <text class="sw_text clamp">{{item.content}}</text>
  9. </swiper-item>
  10. </swiper>
  11. </view>
  12. </view>
  13. </template>
  14. <script>
  15. export default {
  16. data() {
  17. return {};
  18. },
  19. props: ['noticeList','interval'],
  20. methods: {
  21. clickNotice(e){
  22. this.$emit('clickNotice',e)
  23. }
  24. }
  25. };
  26. </script>
  27. <style lang="scss" scoped>
  28. .notice{
  29. height: 64upx;
  30. line-height: 64upx;
  31. margin: 0 3%;
  32. // margin-top: 15upx;
  33. padding: 0 10upx;
  34. // box-shadow: 0upx 0upx 10upx #eee;
  35. // border-radius: 8upx;
  36. }
  37. .right_notice{
  38. float: left;
  39. width: 100%;
  40. }
  41. .right_notice .notice_swiper{
  42. height: 64upx;
  43. }
  44. .notice_swiper .sw_item{
  45. height: 64upx;
  46. }
  47. .notice_swiper .sw_item .sw_text{
  48. font-size: 24upx;
  49. color: #333;
  50. display: inline-block;
  51. line-height: 64rpx;
  52. max-width: 480rpx;
  53. }
  54. </style>