zhywpt-sp/components/notice-bar/notice-bar.vue

<template>
  <!-- 通告栏 -->
  <view class="noticeBar">
    <swiper
      class="list"
      circular="true"
      vertical="true"
      autoplay="true"
      interval="3000"
      duration="1000"
    >
      <swiper-item v-for="item in noticeList" :key="item.id">
        <view class="content" @click="emits('noticeClick', item)">
          <view class="icon-notice">●</view>
          <view class="notice-txt">
            {{ item.title }}
          </view>
          <view class="right">
            <view class="label">去办理</view>
            <image class="arror" :src="`${$imgUrl}common/arror-right.png`" mode="aspectFill"/>
          </view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script setup>
import { ref } from "vue";

const emits = defineEmits(["noticeClick"]);

defineProps({
  //公告栏列表
  noticeList: {
    type: Array,
    default: () => {
      return [];
    },
  },
});
</script>

<style lang="scss" scoped>
.noticeBar {
  /* margin: 50rpx 30rpx 0px; */
  padding-left: 30rpx;
  padding-right: 20rpx;
  height: 88rpx;
  line-height: 88rpx;
  background: #ffffff;
  box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
  border-radius: 20rpx;
  color: #172843;
  font-size: 26rpx;
  display: flex;

  .list {
    width: 100%;
    height: 100%;
    .content {
      display: flex;
      align-items: center;
      .icon-notice {
        font-size: 18rpx;
        color: #172843;
      }
      .notice-txt {
        flex: 1;
        font-size: 26rpx;
        color: #172843;
        padding-left: 20rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-right: 10rpx;
      }
      .right {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        .arror {
          width: 30rpx;
          height: 30rpx;
        }
        .label {
          font-size: 24rpx;
          color: #00b38b;
          line-height: 36rpx;
          margin-right: 10rpx;
        }
      }
    }
  }
}
</style>