<template>
  <van-notice-bar
    v-if="list.length !== 0"
    left-icon="volume-o"
    :scrollable="false"
    background="white"
    style="border-radius: 24px"
    color="#1B1F37"
    class="mx-3.5 wrap11"
  >
    <template #left-icon>
      <IconVue name="icon-tongzhi" color="#1B1F37" class="mr-2" />
    </template>
    <van-swipe
      vertical
      class="notice-swipe"
      :autoplay="3000"
      :show-indicators="false"
    >
      <van-swipe-item
        class="overflow-ellipsis overflow-hidden"
        v-for="item in list"
        :key="item.uuid"
      >
        <div
          @click="
            $router.push({
              path: '/msgDetail',
              query: { info: JSON.stringify(item) },
            })
          "
        >
          {{ item.content }}
        </div>
      </van-swipe-item>
    </van-swipe>
  </van-notice-bar>
</template>
<script lang="ts">
import IconVue from "@/components/common/Icon.vue";
import Vue, { defineComponent } from "vue";
import { NoticeBar, Swipe, SwipeItem } from "vant";

export default defineComponent({
  components: {
    IconVue,
    "van-swipe": Swipe,
    "van-swipe-item": SwipeItem,
  },
  props: ["list"],
  setup() {
    const goPage = () => {
      console.log(1111);
    };

    return {
      goPage,
    };
  },
});
</script>
<style>
.notice-swipe {
  height: 40px;
  line-height: 40px;
}

.layer3 {
  z-index: auto;
  height: 17px;
  justify-content: space-between;
}

.wrap11 {
  height: 35px;
  border-radius: 17.5px 17.5px 17.5px 17.5px;
  border-width: 1px;
  border: 1px solid rgba(255, 255, 255, 1);
  background-color: rgba(255, 255, 255, 1);
  justify-content: center;
  padding: 0 14px;
}

.label7 {
  z-index: 12;
  width: 16px;
  height: 14px;
  margin-top: 2px;
}

.word7 {
  z-index: 11;
  display: block;
  overflow-wrap: break-word;
  color: rgba(27, 31, 55, 1);
  font-size: 12px;
  letter-spacing: 0.14399999380111694px;
  white-space: nowrap;
  line-height: 17px;
}
</style>
