Advert.vue 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. <template>
  2. <div class="advert-slide">
  3. <div class="swiper-container container" v-swiper:swiper="swiperOption">
  4. <div class="swiper-wrapper">
  5. <div class="swiper-slide" v-for="(advert, index) in adverts" :key="index">
  6. <a :href="advert.url">
  7. <img :src="advert.img" target="_blank">
  8. </a>
  9. </div>
  10. </div>
  11. </div>
  12. </div>
  13. </template>
  14. <script>
  15. export default {
  16. name: 'advert',
  17. data () {
  18. return {
  19. swiperOption: {
  20. autoplay: 2500,
  21. slidesPerView: 7,
  22. spaceBetween: 20
  23. },
  24. adverts: [{
  25. url: 'http://www.usoftmall.com/store/worldshine#/home',
  26. img: '/images/adverts/1.jpg'
  27. }, {
  28. url: 'http://www.usoftmall.com/store/adtracon#/home',
  29. img: '/images/adverts/2.jpg'
  30. }, {
  31. url: 'http://www.usoftmall.com/store/compa#/home',
  32. img: '/images/adverts/3.jpg'
  33. }, {
  34. url: 'http://www.usoftmall.com/store/corestaff#/home',
  35. img: '/images/adverts/4.jpg'
  36. }, {
  37. url: 'http://www.usoftmall.com/store/chipled#/home',
  38. img: '/images/adverts/5.jpg'
  39. }, {
  40. url: 'http://www.usoftmall.com/store/opd#/home',
  41. img: '/images/adverts/6.jpg'
  42. }, {
  43. url: 'http://www.usoftmall.com/store/jrxy#/home',
  44. img: '/images/adverts/7.jpg'
  45. }, {
  46. url: 'http://www.usoftmall.com/store/hbt#/home',
  47. img: '/images/adverts/8.jpg'
  48. }, {
  49. url: 'http://www.usoftmall.com/store/yjycoin#/home',
  50. img: '/images/adverts/9.jpg'
  51. }, {
  52. url: 'http://www.usoftmall.com/store/d3567635164a4811a5ba9e9adbcdcc87#/home',
  53. img: '/images/adverts/10.jpg'
  54. }, {
  55. url: 'http://www.usoftmall.com/store/winsen#/home',
  56. img: '/images/adverts/11.jpg'
  57. }]
  58. }
  59. }
  60. }
  61. </script>
  62. <style lang="scss" scoped>
  63. @import '~assets/scss/variables';
  64. .advert-slide {
  65. text-align: center;
  66. /*margin-bottom: $xlg-pad;*/
  67. .swiper-container {
  68. height: 100px;
  69. background-color: $grey-bg;
  70. overflow: hidden;
  71. .swiper-wrapper {
  72. padding: 5px 0;
  73. .swiper-slide {
  74. img {
  75. width: 161px;
  76. height: 90px;
  77. }
  78. }
  79. }
  80. }
  81. }
  82. </style>