|
|
@@ -0,0 +1,189 @@
|
|
|
+<!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: #FFFFFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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: #FFFFFF;
|
|
|
+ vertical-align: bottom;
|
|
|
+ }
|
|
|
+
|
|
|
+ .section_left {
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .section_right {
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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">
|
|
|
+ <div class="section_left none" :style="{ width: imageList[0].width / 750 * 100 + '%'}">
|
|
|
+ <div class="tt none" @click="wxMiniProgram(imageList[0].id)" :style="{ width:100 + '%'}">
|
|
|
+ <img class="section-image" :src="imageList[0].path">
|
|
|
+ </div>
|
|
|
+ <div class="tt none" @click="wxMiniProgram(imageList[1].id)" :style="{ width:100 + '%'}">
|
|
|
+ <img class="section-image" :src="imageList[1].path">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="section_right none" @click="wxMiniProgram(imageList[2].id)"
|
|
|
+ :style="{ width: imageList[2].width / 750 * 100 + '%'}">
|
|
|
+ <img class="section-image" :src="imageList[2].path">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="section none" v-for="(item,index) in imageList1" :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/08/banner.jpg',
|
|
|
+ imageList: [{
|
|
|
+ path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2022/08/1.jpg',
|
|
|
+ id: 7221,
|
|
|
+ width: 375
|
|
|
+ },
|
|
|
+ {
|
|
|
+ path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2022/08/2.jpg',
|
|
|
+ id: 6955,
|
|
|
+ width: 374
|
|
|
+ },
|
|
|
+ {
|
|
|
+ path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2022/08/3.jpg',
|
|
|
+ id: 7231,
|
|
|
+ width: 375
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ imageList1: [{
|
|
|
+ path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2022/08/4.jpg',
|
|
|
+ id: 7192,
|
|
|
+ width: 266
|
|
|
+ },
|
|
|
+ {
|
|
|
+ path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2022/08/5.jpg',
|
|
|
+ id: 7181,
|
|
|
+ width: 219
|
|
|
+ },
|
|
|
+ {
|
|
|
+ path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2022/08/6.jpg',
|
|
|
+ id: 7176,
|
|
|
+ width: 265
|
|
|
+ },
|
|
|
+ {
|
|
|
+ path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2022/08/7.jpg',
|
|
|
+ id: 7152,
|
|
|
+ width: 375
|
|
|
+ },
|
|
|
+ {
|
|
|
+ path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2022/08/8.jpg',
|
|
|
+ id: 7168,
|
|
|
+ width: 375
|
|
|
+ },
|
|
|
+ {
|
|
|
+ path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2022/08/9.jpg',
|
|
|
+ id: 7232,
|
|
|
+ width: 264
|
|
|
+ },
|
|
|
+ {
|
|
|
+ path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2022/08/10.jpg',
|
|
|
+ id: 7230,
|
|
|
+ width: 219
|
|
|
+ },
|
|
|
+ {
|
|
|
+ path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2022/08/11.jpg',
|
|
|
+ id: 7120,
|
|
|
+ width: 267
|
|
|
+ },
|
|
|
+ {
|
|
|
+ path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2022/08/12.jpg',
|
|
|
+ id: 7121,
|
|
|
+ width: 214
|
|
|
+ },
|
|
|
+ {
|
|
|
+ path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2022/08/13.jpg',
|
|
|
+ id: 6779,
|
|
|
+ width: 161
|
|
|
+ },
|
|
|
+ {
|
|
|
+ path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2022/08/14.jpg',
|
|
|
+ id: 6783,
|
|
|
+ width: 162
|
|
|
+ },
|
|
|
+ {
|
|
|
+ path: 'https://static.caimei365.com/app/caimei-activity-h5/image/2022/08/15.jpg',
|
|
|
+ id: 7158,
|
|
|
+ width: 213
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ wxMiniProgram: function(id) {
|
|
|
+ console.log(id)
|
|
|
+ wx.miniProgram.navigateTo({
|
|
|
+ url: '/pages/goods/product?id=' + id,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ </script>
|
|
|
+ </body>
|
|
|
+</html>
|
