|
|
@@ -0,0 +1,197 @@
|
|
|
+<!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,
|
|
|
+ html {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ background: #000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .banner {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .banner img {
|
|
|
+ width: 100%;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ .section {
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .section img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <div class="container clearfix" id="activity">
|
|
|
+ <div class="banner">
|
|
|
+ <img :src="banner">
|
|
|
+ </div>
|
|
|
+ <div class="section" v-for="(item,index) in imageList" :key="index" @click="wxMiniProgram(item.id)"
|
|
|
+ :style="{ width: item.width / 750 * 100 + '%'}">
|
|
|
+ <img :src="item.path">
|
|
|
+ </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/29/banner.jpg',
|
|
|
+ imageList: [{
|
|
|
+ path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2022/29/01.jpg',
|
|
|
+ width: 750
|
|
|
+ }, {
|
|
|
+ path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2022/29/02.jpg',
|
|
|
+ id: 6785,
|
|
|
+ width: 212
|
|
|
+ }, {
|
|
|
+ path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2022/29/03.jpg',
|
|
|
+ id: 6781,
|
|
|
+ width: 163
|
|
|
+ }, {
|
|
|
+ path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2022/29/04.jpg',
|
|
|
+ id: 6784,
|
|
|
+ width: 164
|
|
|
+ }, {
|
|
|
+ path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2022/29/05.jpg',
|
|
|
+ id: 7269,
|
|
|
+ width: 211
|
|
|
+ }, {
|
|
|
+ path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2022/29/06.jpg',
|
|
|
+ id: 7267,
|
|
|
+ width: 212
|
|
|
+ }, {
|
|
|
+ path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2022/29/07.jpg',
|
|
|
+ id: 6783,
|
|
|
+ width: 163
|
|
|
+ }, {
|
|
|
+ path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2022/29/08.jpg',
|
|
|
+ id: 6782,
|
|
|
+ width: 164
|
|
|
+ }, {
|
|
|
+ path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2022/29/09.jpg',
|
|
|
+ id: 7266,
|
|
|
+ width: 211
|
|
|
+ }, {
|
|
|
+ path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2022/29/10.jpg',
|
|
|
+ id: 6786,
|
|
|
+ width: 212
|
|
|
+ }, {
|
|
|
+ path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2022/29/11.jpg',
|
|
|
+ id: 6787,
|
|
|
+ width: 163
|
|
|
+ }, {
|
|
|
+ path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2022/29/12.jpg',
|
|
|
+ id: 6779,
|
|
|
+ width: 164
|
|
|
+ }, {
|
|
|
+ path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2022/29/13.jpg',
|
|
|
+ id: 6780,
|
|
|
+ width: 211
|
|
|
+ }, {
|
|
|
+ path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2022/29/14.jpg',
|
|
|
+ width: 750
|
|
|
+ }, {
|
|
|
+ path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2022/29/15.jpg',
|
|
|
+ id: 6791,
|
|
|
+ width: 212
|
|
|
+ }, {
|
|
|
+ path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2022/29/16.jpg',
|
|
|
+ id: 6790,
|
|
|
+ width: 163
|
|
|
+ }, {
|
|
|
+ path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2022/29/17.jpg',
|
|
|
+ id: 6803,
|
|
|
+ width: 164
|
|
|
+ }, {
|
|
|
+ path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2022/29/18.jpg',
|
|
|
+ id: 6806,
|
|
|
+ width: 211
|
|
|
+ }, {
|
|
|
+ path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2022/29/19.jpg',
|
|
|
+ id: 6802,
|
|
|
+ width: 212
|
|
|
+ }, {
|
|
|
+ path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2022/29/20.jpg',
|
|
|
+ id: 7265,
|
|
|
+ width: 163
|
|
|
+ }, {
|
|
|
+ path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2022/29/21.jpg',
|
|
|
+ id: 6789,
|
|
|
+ width: 164
|
|
|
+ }, {
|
|
|
+ path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2022/29/22.jpg',
|
|
|
+ id: 6788,
|
|
|
+ width: 211
|
|
|
+ }, {
|
|
|
+ path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2022/29/23.jpg',
|
|
|
+ id: 6805,
|
|
|
+ width: 212
|
|
|
+ }, {
|
|
|
+ path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2022/29/24.jpg',
|
|
|
+ id: 6804,
|
|
|
+ width: 538
|
|
|
+ }, {
|
|
|
+ path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2022/29/25.jpg',
|
|
|
+ width: 750
|
|
|
+ }, {
|
|
|
+ path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2022/29/26.jpg',
|
|
|
+ id: 7268,
|
|
|
+ width: 401
|
|
|
+ }, {
|
|
|
+ path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2022/29/27.jpg',
|
|
|
+ id: 7270,
|
|
|
+ width: 349
|
|
|
+ }, {
|
|
|
+ path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2022/29/28.jpg',
|
|
|
+ width: 750
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ wxMiniProgram: function(id) {
|
|
|
+ if (!id) return
|
|
|
+ console.log(id)
|
|
|
+ wx.miniProgram.navigateTo({
|
|
|
+ url: '/pages/goods/product?id=' + id,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created: function() {
|
|
|
+
|
|
|
+ },
|
|
|
+ mounted: function() {
|
|
|
+ var _self = this
|
|
|
+ }
|
|
|
+ })
|
|
|
+ </script>
|
|
|
+ </body>
|
|
|
+</html>
|
yuwenjun1997