feat：更新泡泡抽奖

src/components/swiperNotice/main.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="notice">
+    <swiper :options="swiperOption" class="notice-swiper">
+      <swiper-slide
+        class="notice-swiper-slide"
+        v-for="(item, index) in recordList"
+        :key="`notice-swiper-slide-${item.id}-${index}`"
+      >
+        <div class="notice-swiper-slide-content">
+          <label>{{ item.nick }}</label>
+          <span>{{ text }}</span>
+          <label>{{ item.prizeName }}x{{ item.num }}</label>
+        </div>
+      </swiper-slide>
+    </swiper>
+  </div>
+</template>
+
+<script>
+import { queryPrizeMsg } from "@/api";
+import { Swiper, SwiperSlide } from "vue-awesome-swiper";
+export default {
+  name: "SwiperNotice",
+  components: {
+    Swiper,
+    SwiperSlide
+  },
+  props: {
+    text: {
+      type: String,
+      default: ""
+    }
+  },
+  data() {
+    return {
+      recordList: [],
+      swiperOption: {
+        direction: "vertical",
+        autoplay: {
+          delay: 3000 // 5秒切换一次
+        },
+        // 设置轮播可循环
+        loop: true
+      },
+      interval: 0
+    };
+  },
+
+  created() {
+    this.getQueryPrizeMsg();
+  },
+  mounted() {
+    this.interval = setInterval(this.getQueryPrizeMsg, 120 * 1000);
+  },
+  destroyed() {
+    clearInterval(this.interval);
+  },
+  methods: {
+    getQueryPrizeMsg() {
+      queryPrizeMsg().then(res => {
+        const { code, data, msg } = res;
+        if (code === 200) {
+          this.recordList = data;
+        } else {
+          this.$toast.fail(msg);
+        }
+      });
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+@import "~swiper/css/swiper.css";
+.notice {
+  width: 618px;
+  height: 64px;
+  background-repeat: no-repeat;
+  background-size: cover;
+  margin: 0 auto;
+  &-swiper {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    &-slide {
+      width: 100%;
+      height: 100%;
+      &-content {
+        margin: 0 30px;
+        text-align: center;
+        line-height: 64px;
+        white-space: nowrap;
+        overflow-x: auto;
+        overflow-y: hidden;
+        font-size: 24px;
+        & > label {
+          color: #ffe26c;
+        }
+        & > span {
+          color: #fff;
+        }
+      }
+    }
+  }
+}
+</style>