index.vue 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. <template>
  2. <div class="ad-wrap">
  3. <h1 class="title">广告位招租</h1>
  4. <h3 class="title">
  5. billd-live服务器:阿里云轻量服务器:2核cpu、2GB内存、30M带宽(香港)
  6. </h3>
  7. <div class="ad-list">
  8. <div
  9. v-for="(item, index) in list"
  10. :key="index"
  11. class="item"
  12. @click="openToTarget(item.url)"
  13. >
  14. <div>
  15. <img
  16. class="cover"
  17. :src="item.cover"
  18. alt=""
  19. />
  20. </div>
  21. <div>
  22. <div>{{ item.name }}</div>
  23. <div
  24. v-for="(iten, indey) in item.list"
  25. :key="indey"
  26. class="hot"
  27. >
  28. {{ iten }}
  29. </div>
  30. </div>
  31. </div>
  32. </div>
  33. </div>
  34. </template>
  35. <script lang="ts" setup>
  36. import { openToTarget } from 'billd-utils';
  37. import { ref } from 'vue';
  38. const list = ref([
  39. {
  40. // eslint-disable-next-line
  41. cover: require('@/assets/img/ad/tencent-1.jpg'),
  42. name: '【腾讯云】个人开发者 买赠福利专区 买即送 个人开发者专享免费服务器3个月!',
  43. list: [
  44. '【腾讯云】:1年轻量服务器 2核cpu、2G内存、4M带宽、50G系统盘(上海/广州/北京),132元!',
  45. '【腾讯云】:1年轻量服务器 2核cpu、4G内存、5M带宽、60G系统盘(上海/广州/北京),198元!',
  46. ],
  47. url: 'https://cloud.tencent.com/act/cps/redirect?redirect=35916&cps_key=ebe55ad4d940d688bcde548b101dff5f',
  48. },
  49. {
  50. // eslint-disable-next-line
  51. cover: require('@/assets/img/ad/tencent-2.png'),
  52. name: '【腾讯云】爆品抢先购,预热专属折上折券限时领!',
  53. list: [
  54. '【腾讯云】:1年轻量服务器 2核cpu、2G内存、3M带宽、40G系统盘(上海/广州/北京),95元!',
  55. '【腾讯云】:1年轻量服务器 2核cpu、4G内存、5M带宽、60G系统盘(上海/广州/北京),168元!',
  56. '【腾讯云】:3年轻量服务器 2核cpu、2G内存、4M带宽、50G系统盘(上海/广州/北京),396元!',
  57. '【腾讯云】:3年轻量服务器 2核cpu、4G内存、5M带宽、60G系统盘(上海/广州/北京),628元!',
  58. ],
  59. url: 'https://cloud.tencent.com/act/cps/redirect?redirect=35864&cps_key=ebe55ad4d940d688bcde548b101dff5f',
  60. },
  61. {
  62. // eslint-disable-next-line
  63. cover: require('@/assets/img/ad/tencent-3.jpg'),
  64. name: '【腾讯云】推广者专属福利,新客户无门槛领取总价值高达2860元代金券,每种代金券限量500张,先到先得。',
  65. list: [
  66. '【腾讯云】满200减100,仅用于非促销新购云服务器、MySQL数据库',
  67. '【腾讯云】满500减250,仅用于非促销新购云服务器、MySQL数据库',
  68. '【腾讯云】满1000减500,仅用于非促销新购云服务器、MySQL数据库',
  69. '【腾讯云】满2000减1000,仅用于非促销新购云服务器、MySQL数据库',
  70. ],
  71. url: 'https://cloud.tencent.com/act/cps/redirect?redirect=35834&cps_key=ebe55ad4d940d688bcde548b101dff5f',
  72. },
  73. {
  74. // eslint-disable-next-line
  75. cover: require('@/assets/img/ad/aliyun-1.png'),
  76. name: '云小站特惠超底价',
  77. url: 'https://www.aliyun.com/minisite/goods?userCode=41m2k6bt',
  78. },
  79. {
  80. // eslint-disable-next-line
  81. cover: require('@/assets/img/ad/aliyun-2.jpg'),
  82. name: '云服务器t6 2核2G低至10.14元/月',
  83. url: 'https://www.aliyun.com/daily-act/ecs/activity_share?userCode=41m2k6bt',
  84. },
  85. {
  86. // eslint-disable-next-line
  87. cover: require('@/assets/img/ad/qiniu-1.jpg'),
  88. name: '新人免费 CDN(全球2000+节点无盲区覆盖,注册即可免费使用)',
  89. url: 'https://s.qiniu.com/Q7zqeq',
  90. },
  91. {
  92. // eslint-disable-next-line
  93. cover: require('@/assets/img/ad/qiniu-2.jpg'),
  94. name: '对象存储新人好礼(10年专注云存储,注册即可免费使用)',
  95. url: 'https://s.qiniu.com/iQR7Jz',
  96. },
  97. {
  98. // eslint-disable-next-line
  99. cover: require('@/assets/img/ad/qiniu-3.jpg'),
  100. name: '新人免费试用(多款云产品长期免费使用,注册即享超值赠送)',
  101. url: 'https://s.qiniu.com/JnIbyq',
  102. },
  103. {
  104. // eslint-disable-next-line
  105. cover: require('@/assets/img/ad/qiniu-4.jpg'),
  106. name: '新人免费云主机(注册免费领取 4核8G 云服务器,享免费数据迁移服务)',
  107. url: 'https://s.qiniu.com/B3i63y',
  108. },
  109. ]);
  110. </script>
  111. <style lang="scss" scoped>
  112. .ad-wrap {
  113. .title {
  114. text-align: center;
  115. }
  116. .ad-list {
  117. padding: 20px;
  118. .item {
  119. display: flex;
  120. align-items: center;
  121. margin-right: 20px;
  122. padding: 10px;
  123. border-radius: 10px;
  124. box-shadow: 0 4px 30px 0 rgba(238, 242, 245, 0.8);
  125. cursor: pointer;
  126. transition: box-shadow 0.2s linear;
  127. margin-top: 10px;
  128. margin-bottom: 10px;
  129. &:hover {
  130. box-shadow: 4px 4px 20px 0 rgba(205, 216, 228, 0.6);
  131. }
  132. .cover {
  133. width: 300px;
  134. margin-right: 10px;
  135. }
  136. .hot {
  137. color: red;
  138. }
  139. }
  140. }
  141. }
  142. </style>