caimeih5_05.html 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  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" href="https://static.caimei365.com/app/caimei-activity-h5/css/common/utils.css">
  9. </head>
  10. <style type="text/css">
  11. body{
  12. background-color:#CEDDF4;
  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. padding: 0 0.63rem;
  33. float: left;
  34. background: url(https://static.caimei365.com/app/caimei-activity-h5/image/2020/05/bg.jpg) no-repeat;
  35. background-size: cover;
  36. }
  37. .container-main .title{
  38. width: 100%;
  39. height: 1.1rem;
  40. line-height: 1.1rem;
  41. font-size: .24rem;
  42. color: #222a37;
  43. text-align: center;
  44. float: left;
  45. }
  46. .container-main .section{
  47. width: 100%;
  48. height: 5.6rem;
  49. float: left;
  50. margin-bottom: .5rem;
  51. border-radius: 0.02rem;
  52. }
  53. .container-main .section img{
  54. width: 100%;
  55. height: 100%;
  56. display: block;
  57. border-radius: 0.02rem;
  58. }
  59. </style>
  60. <body>
  61. <div class="container clearfix" id="activity">
  62. <div class="banner">
  63. <img :src="banner">
  64. </div>
  65. <div class="container-main">
  66. <div class="title">
  67. <p>- 此方案不与其他活动叠加 本活动仅限采美会员参与 -</p>
  68. </div>
  69. <div class="section" v-for="(item,index) in productList" :key="index" @click="WxMiniProgram(item.id)">
  70. <img :src="item.image">
  71. </div>
  72. </div>
  73. </div>
  74. <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  75. <script type="text/javascript" src="https://static.caimei365.com/app/caimei-activity-h5/script/jquery.min.js"></script>
  76. <script type="text/javascript" src="https://static.caimei365.com/app/caimei-activity-h5/script/vue2.6.11.min.js"></script>
  77. <script type="text/javascript" src="https://static.caimei365.com/app/caimei-activity-h5/script/init.js"></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/2020/05/banner.jpg',
  83. productList:[//正式环境 4451 3694
  84. {image:'https://static.caimei365.com/app/caimei-activity-h5/image/2020/05/01.png',id:'3694'},
  85. {image:'https://static.caimei365.com/app/caimei-activity-h5/image/2020/05/02.png',id:'4451'},
  86. ]
  87. },
  88. computed: {
  89. },
  90. methods: {
  91. WxMiniProgram:function(id){
  92. console.log(id)
  93. wx.miniProgram.navigateTo(
  94. {
  95. url: '/pages/goods/product?id='+id,
  96. }
  97. )
  98. }
  99. },
  100. created: function () {
  101. },
  102. mounted: function () {
  103. var _self = this;
  104. }
  105. });
  106. </script>
  107. </body>
  108. </html>