Bladeren bron

活动专题

zhengjinyi 3 jaren geleden
bovenliggende
commit
1ebf93621b
1 gewijzigde bestanden met toevoegingen van 119 en 0 verwijderingen
  1. 119 0
      html/2022/activity_02.html

+ 119 - 0
html/2022/activity_02.html

@@ -0,0 +1,119 @@
+<!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>