activity_34.html 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  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. background-color: #FFFFFF;
  13. }
  14. .container {
  15. width: 100%;
  16. height: auto;
  17. }
  18. .banner {
  19. width: 100%;
  20. height: auto;
  21. float: left;
  22. }
  23. .banner img {
  24. width: 100%;
  25. height: auto;
  26. display: block;
  27. }
  28. .container-main {
  29. width: 100%;
  30. box-sizing: border-box;
  31. height: auto;
  32. float: left;
  33. background-color: #ffdad8;
  34. }
  35. .container-main .section {
  36. width: 50%;
  37. height: auto;
  38. float: left;
  39. }
  40. .container-main .section:last-child{
  41. width: 100%;
  42. }
  43. .container-main .section .section-image {
  44. width: 100%;
  45. height: auto;
  46. display: block;
  47. }
  48. </style>
  49. </head>
  50. <body>
  51. <div class="container clearfix" id="activity">
  52. <div class="banner">
  53. <img :src="banner">
  54. </div>
  55. <div class="container-main">
  56. <div class="section" v-for="(item,index) in imageList" :key="index" @click="WxMiniProgram(item.id)">
  57. <img class="section-image" :src="item.path">
  58. </div>
  59. </div>
  60. </div>
  61. <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  62. <script type="text/javascript" src="https://static.caimei365.com/app/caimei-activity-h5/script/jquery.min.js">
  63. </script>
  64. <script type="text/javascript"
  65. src="https://static.caimei365.com/app/caimei-activity-h5/script/vue2.6.11.min.js"></script>
  66. <script type="text/javascript" src="https://static.caimei365.com/app/caimei-activity-h5/script/init.js">
  67. </script>
  68. <script type="text/javascript">
  69. var ACTIVITY = new Vue({
  70. el: '#activity',
  71. data: {
  72. banner: 'https://static.caimei365.com/app/caimei-activity-h5/image/2021/34/banner.jpg',
  73. imageList: [{
  74. path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2021/34/01.jpg',
  75. id: 4925,
  76. },
  77. {
  78. path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2021/34/02.jpg',
  79. id: 4929,
  80. },
  81. {
  82. path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2021/34/03.jpg',
  83. id: 4927,
  84. }
  85. ],
  86. },
  87. computed: {
  88. },
  89. methods: {
  90. WxMiniProgram: function(id) {
  91. console.log(id)
  92. wx.miniProgram.navigateTo({
  93. url: '/pages/goods/product?id=' + id,
  94. })
  95. }
  96. },
  97. created: function() {
  98. },
  99. mounted: function() {
  100. var _self = this
  101. }
  102. })
  103. </script>
  104. </body>
  105. </html>