activity_16.html 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
  7. <title></title>
  8. <link rel="stylesheet" type="text/css"
  9. href="https://static.caimei365.com/app/caimei-activity-h5/css/common/utils.css">
  10. <style type="text/css">
  11. body,
  12. html {
  13. margin: 0;
  14. padding: 0;
  15. }
  16. .container {
  17. width: 100%;
  18. height: auto;
  19. overflow: hidden;
  20. background-color: #849cfe;
  21. }
  22. .banner {
  23. width: 100%;
  24. height: auto;
  25. }
  26. .banner img {
  27. width: 100%;
  28. height: auto;
  29. display: block;
  30. vertical-align: bottom;
  31. }
  32. .container-section {
  33. float: left;
  34. width: 100%;
  35. box-sizing: border-box;
  36. height: auto;
  37. background-color: #ffdad8;
  38. }
  39. .container-section:first-child {
  40. width: 100%;
  41. }
  42. .container-section .section-image {
  43. width: 100%;
  44. height: auto;
  45. display: block;
  46. vertical-align: bottom;
  47. }
  48. .container-section:nth-child(3),
  49. .container-section:nth-child(4),
  50. .container-section:nth-child(5),
  51. .container-section:nth-child(6),
  52. .container-section:nth-child(7),
  53. .container-section:nth-child(8){
  54. float: left;
  55. width: 50%;
  56. }
  57. </style>
  58. </head>
  59. <body>
  60. <div class="container clearfix" id="activity">
  61. <div class="banner">
  62. <img :src="banner">
  63. </div>
  64. <div class="sections">
  65. <div class="container-section" v-for="(item,index) in imageList1" :key="index"
  66. @click="WxMiniProgram(item.id)">
  67. <img class="section-image" :src="item.path">
  68. </div>
  69. </div>
  70. </div>
  71. <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  72. <script type="text/javascript" src="https://static.caimei365.com/app/caimei-activity-h5/script/jquery.min.js">
  73. </script>
  74. <script type="text/javascript"
  75. src="https://static.caimei365.com/app/caimei-activity-h5/script/vue2.6.11.min.js"></script>
  76. <script type="text/javascript" src="https://static.caimei365.com/app/caimei-activity-h5/script/init.js">
  77. </script>
  78. <script type="text/javascript">
  79. var ACTIVITY = new Vue({
  80. el: '#activity',
  81. data: {
  82. banner: 'https://static.caimei365.com/app/caimei-activity-h5/image/2021/16/banner.jpg',
  83. imageList1: [{
  84. path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2021/16/01.jpg',
  85. id: 5149
  86. },
  87. {
  88. path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2021/16/02.jpg',
  89. id: 4481
  90. },
  91. {
  92. path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2021/16/03.jpg',
  93. id: 4556
  94. },
  95. {
  96. path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2021/16/04.jpg',
  97. id: 4554
  98. },
  99. {
  100. path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2021/16/05.jpg',
  101. id: 4493
  102. },
  103. {
  104. path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2021/16/06.jpg',
  105. id: 4491
  106. },
  107. {
  108. path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2021/16/07.jpg',
  109. id: 4438
  110. },
  111. {
  112. path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2021/16/08.jpg',
  113. id: 4439
  114. }
  115. ]
  116. },
  117. computed: {
  118. },
  119. methods: {
  120. WxMiniProgram: function(id) {
  121. console.log(id)
  122. wx.miniProgram.navigateTo({
  123. url: '/pages/goods/product?id=' + id,
  124. })
  125. }
  126. },
  127. created: function() {
  128. },
  129. mounted: function() {
  130. var _self = this
  131. }
  132. })
  133. </script>
  134. </body>
  135. </html>