index.vue 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. <template>
  2. <div class="vab-ad">
  3. <el-carousel
  4. v-if="adList"
  5. height="30px"
  6. direction="vertical"
  7. :autoplay="true"
  8. :interval="3000"
  9. indicator-position="none"
  10. >
  11. <el-carousel-item v-for="(item, index) in adList" :key="index">
  12. <el-tag type="warning">Ad</el-tag>
  13. <a target="_blank" :href="item.url">{{ item.title }}</a>
  14. </el-carousel-item>
  15. </el-carousel>
  16. </div>
  17. </template>
  18. <script>
  19. import { getList } from "@/api/ad";
  20. export default {
  21. data() {
  22. return {
  23. nodeEnv: process.env.NODE_ENV,
  24. adList: [],
  25. };
  26. },
  27. created() {
  28. this.fetchData();
  29. },
  30. methods: {
  31. async fetchData() {
  32. const { data } = await getList();
  33. this.adList = data;
  34. },
  35. },
  36. };
  37. </script>
  38. <style lang="scss" scoped>
  39. .vab-ad {
  40. height: 30px;
  41. padding-right: $base-padding;
  42. padding-left: $base-padding;
  43. line-height: 30px;
  44. cursor: pointer;
  45. background: #eef1f6;
  46. box-shadow: 0 -1px 2px rgba(0, 21, 41, 0.08) inset;
  47. a {
  48. color: #999;
  49. }
  50. }
  51. </style>