zetank-notice.vue 1.1 KB

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