<template>
  <view class="head-new-vu flex al-item-center">
    <swiper
      class="swiper-box"
      vertical="true"
      autoplay="true"
      circular="true"
      :indicator-dots="false"
      :auto-play="true"
    >
      <swiper-item
        class="swiper-item"
        v-for="(item, idx) in shopNotice"
        :key="idx"
        @click="goto"
        :data-url="item.hrefurl"
      >
        <view class="new-cnt">
          <image class="notice-icon" :src="noticeIcon ? noticeIcon:event_rul + '/static/theme/note-icon.svg'"></image>
          <view class="notice-txt">{{ item.title }}</view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
var app = getApp();
export default {
  props: {
    noticeIcon: {
      type: String,
      default: '',
    },
    shopNotice: {
      type: Array,
      default: function() {
        return [];
      },
    },
  },
  data() {
    return {
      event_rul: app.globalData.event_url,
    };
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.head-new-vu {
  min-width: 260rpx;
  height: 48rpx;
  border-radius: 24rpx;
  background: rgba($color: #000000, $alpha: 0.4);
  padding: 4rpx 10rpx 4rpx 4rpx;
  .swiper-box,.swiper-item {
    width: 100%;
    height: 100%;
  }

  .new-cnt {
    height: 100%;
    display: flex;
    align-items: center;
    .notice-icon {
      width: 40rpx;
      height: 40rpx;
      flex-shrink: 0;
      border-radius: 20rpx;
    }
    .notice-txt {
      flex: 1;
      font-size: 22rpx;
      color: #FFFFFF;
      margin-left: 6rpx;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}

</style>