| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
- <title></title>
- <link rel="stylesheet" type="text/css"
- href="https://static.caimei365.com/app/caimei-activity-h5/css/common/utils.css">
- <style type="text/css">
- body {
- background-color: #850011;
- }
- .container {
- width: 100%;
- height: auto;
- overflow: hidden;
- }
- .banner {
- width: 100%;
- height: auto;
- }
- .banner img {
- width: 100%;
- height: auto;
- display: block;
- }
- .container-main {
- display: flex;
- justify-content: space-between;
- align-items: flex-start;
- flex-wrap: wrap;
- }
- .container-main .section {
- box-sizing: border-box;
- height: auto;
- background-color: #850011;
- vertical-align: bottom;
- }
- .container-main .section .section-image {
- width: 100%;
- height: auto;
- display: block;
- vertical-align: bottom;
- }
- </style>
- </head>
- <body>
- <div class="container clearfix" id="activity">
- <div class="banner">
- <img :src="banner">
- </div>
- <div class="container-main">
- <div class="section none"
- v-for="(item,index) in imageList"
- :key="index"
- @click="wxMiniProgram(item.id)"
- :style="{ width: item.width / 750 * 100 + '%'}"
- >
- <img class="section-image" :src="item.path">
- </div>
- </div>
- </div>
- <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
- <script type="text/javascript" src="https://static.caimei365.com/app/caimei-activity-h5/script/jquery.min.js">
- </script>
- <script type="text/javascript"
- src="https://static.caimei365.com/app/caimei-activity-h5/script/vue2.6.11.min.js"></script>
- <script type="text/javascript" src="https://static.caimei365.com/app/caimei-activity-h5/script/init.js">
- </script>
- <script type="text/javascript">
- var activity = new Vue({
- el: '#activity',
- data: {
- banner: 'https://static.caimei365.com/app/caimei-activity-h5/image/2022/02/banner.jpg',
- imageList: [{
- path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2022/02/01.jpg',
- id: 5192,
- width: 374
- }, {
- path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2022/02/02.jpg',
- id: 5177,
- width: 376
- }, {
- path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2022/02/03.jpg',
- id: 6075,
- width: 374
- }, {
- path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2022/02/04.jpg',
- id: 6074,
- width: 376
- },{
- path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2022/02/05.jpg',
- id: 6025,
- width: 750
- }, {
- path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2022/02/06.jpg',
- id: 5176,
- width: 750
- }, {
- path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2022/02/07.jpg',
- id: 5178,
- width: 750
- }],
- },
- methods: {
- wxMiniProgram: function(id) {
- console.log(id)
- wx.miniProgram.navigateTo({
- url: '/pages/goods/product?id=' + id,
- })
- }
- }
- })
- </script>
- </body>
- </html>
|
