合并

components/waterfall/waterfall-item.vue

@@ -0,0 +1,97 @@
+<template>
+	<view class="waterfall-item-container">
+		<view class="waterfall-item" @tap="onTap">
+			<image :src="params.url" mode="widthFix" @load="emitHeight" @error="emitHeight"></image>
+			<view class="content">
+				<view>{{params.title}}</view>
+				<view class="money">{{params.money}}元</view>
+				<view style="margin: 0 0 8rpx 0;">
+					<text class="label">{{params.label}}</text>
+				</view>
+				<view class="shop-name">{{params.shop}}</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name:"helangWaterfallItem",
+		options:{
+			virtualHost: true
+		},
+		props:{
+			params:{
+				type: Object,
+				default(){
+					return {}
+				}
+			},
+			tag:{
+				type:String | Number,
+				default:''
+			},
+			index:{
+				type:Number,
+				default:-1
+			}
+		},
+		data() {
+			return {
+				
+			};
+		},
+		methods:{
+			// 发出组件高度信息，在此处可以区分正确和错误的加载，给予错误的提示图片
+			emitHeight(e){
+				const query = uni.createSelectorQuery().in(this);
+				query.select('.waterfall-item-container').boundingClientRect(data => {
+					let height = Math.floor(data.height);
+					this.$emit("height",height,this.$props.tag);
+				}).exec();
+			},
+			onTap(){
+				this.$emit("click",this.$props.index,this.$props.tag);
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+.waterfall-item{
+	padding: 16rpx;
+	background-color: #fff;
+	border-radius: 4px;
+	font-size: 28rpx;
+	color: #666;
+	
+	image{
+		display: block;
+		width: 100%;
+		// 默认设置一个图片的大约值
+		height: 350rpx;
+	}
+	
+	.content{
+		margin-top: 16rpx;
+		
+		.money{
+			color: #fa3534;
+			margin-top: 8rpx;
+		}
+		
+		.label{
+			background-color: #fa3534;
+			color: #fff;
+			font-size: 20rpx;
+			padding: 4rpx 16rpx;
+			border-radius: 20rpx;
+		}
+		
+		.shop-name{
+			font-size: 20rpx;
+			color: #999;
+		}
+	}
+}
+</style>

components/waterfall/waterfall-list.vue

@@ -0,0 +1,238 @@
+<template>
+	<view>
+		<view class="waterfall-box h-flex-x h-flex-2" v-if="showList">
+			<view>
+				<view v-for="(item,index) in leftList" :key="item._render_id" 
+					class="list-item" 
+					:class="{'show': showPage > item._current_page }"
+				>
+					<helang-waterfall-item
+						:params="item" 
+						tag="left"
+						:index="index"
+						@height="onHeight"
+						@click="onClick"
+					></helang-waterfall-item>
+				</view>
+			</view>
+			<view>
+				<view v-for="(item,index) in rightList" :key="item._render_id" 
+					class="list-item"
+					:class="{'show': showPage > item._current_page }"
+				>
+					<helang-waterfall-item
+						:params="item" 
+						@height="onHeight"
+						@click="onClick"
+						tag="right"
+						:index="index"
+					></helang-waterfall-item>
+				</view>
+			</view>
+		</view>
+		
+		<slot name="default"></slot>
+	</view>
+</template>
+
+<script>
+	import helangWaterfallItem from "./waterfall-item.vue"
+		
+	export default {
+		name:"helangWaterfallList",
+		options:{
+			virtualHost: true
+		},
+		components: {
+			"helang-waterfall-item": helangWaterfallItem
+		},
+		props:{
+			// 组件状态
+			status:{
+				type: String,
+				default:''
+			},
+			// 待渲染的数据
+			list:{
+				type: Array,
+				default(){
+					return [];
+				}
+			},
+			// 重置列表，设置为 true 时，瀑布流会自动重新渲染列表
+			reset:{
+				type: Boolean,
+				default:false
+			},
+		},
+		watch:{
+			"$props.status"(newValue,oldValue){
+				// 状态变更为 加载成功 时，执行瀑布流数据渲染	
+				if(newValue == 'success'){
+					this.startRender();
+				}else if(!this.showList){
+					this.resetData();
+				}
+			}
+		},
+		computed:{
+			showList(){
+				return !["fail","empty"].includes(this.$props.status);
+			}
+		},
+		data() {
+			return {
+				// 左侧列表高度
+				leftHeight: 0,
+				// 右侧列表高度
+				rightHeight: 0,
+				// 左侧列表数据
+				leftList: [],
+				// 右侧列表数据
+				rightList: [],
+				// 待渲染列表
+				awaitRenderList:[],
+				// 当前展示页码数据
+				showPage:1
+			}
+		},
+		mounted() {
+			if(this.$props.status == 'success'){
+				this.startRender();
+			}
+		},
+		methods: {
+			// 监听高度变化
+			onHeight(height, tag) {
+				/**
+				 * 这个为实际渲染后 CSS 中 margin-buttom 的值，本示例默认为20rpx
+				 * 用于解决实际渲染后因为数据条数关系，高度差计算偏差的问题
+				 * */
+				let marginBottom = uni.upx2px(20);
+				
+				// console.log(`左高：${this.leftHeight},右高：${this.rightHeight},当前高：${height},插入方向：${tag}`)
+				
+				if (tag == 'left') {
+					this.leftHeight += (height + marginBottom);
+				} else {
+					this.rightHeight += (height + marginBottom);
+				}
+				this.renderList();
+			},
+			// 组件点击事件
+			onClick(index, tag){
+				// 对应的数据
+				if(tag == 'left'){
+					this.$emit("click",this.leftList[index],index,tag);
+				}else{
+					this.$emit("click",this.rightList[index],index,tag);
+				}
+			},
+			// 渲染列表，这里实现瀑布流的左右分栏
+			renderList() {
+				// 待渲染长度为 0 时表示已渲染完成
+				if(this.awaitRenderList.length < 1){
+					this.showPage++;
+					this.$emit("done");
+					
+					// 为防止 js 数值类型最大值溢出，当高度值大于 1亿时重置高度
+					if(this.leftHeight > 100000000){
+						if(this.leftHeight > this.rightHeight){
+							this.leftHeight = 2;
+							this.rightHeight = 1;
+						}else{
+							this.leftHeight = 1;
+							this.rightHeight = 2;
+						}
+					}
+					return;
+				}
+				let item = {
+					...this.awaitRenderList.splice(0,1)[0],
+					// 当前数据添加当前页面标识
+					_current_page:this.showPage,
+					// 当前数据添加一个渲染id，解决 v-for 重复会出现不执行 load 的 BUG
+					_render_id:new Date().getTime()
+				};
+				
+				if(this.leftHeight > this.rightHeight){
+					this.rightList.push(item);
+				}else{
+					this.leftList.push(item);
+				}
+			},
+			// 重置数据
+			resetData(){
+				this.leftHeight = 0;
+				this.rightHeight = 0;
+				this.leftList = [];
+				this.rightList = [];
+				this.awaitRenderList = [];
+				// 当前展示页码数据
+				this.showPage = 1;
+			},
+			// 启动渲染
+			startRender(){
+				if(!this.showList){
+					this.resetData();
+					return;
+				}
+				
+				if(!this.$props.list || this.$props.list.length < 1){
+					console.log('河浪瀑布流插件提示：当前数据为空，不会触发列表渲染');
+					return;
+				}
+				
+				// 若本次渲染为 重置 则先恢复组件的默认参数
+				if(this.$props.reset){
+					this.resetData();
+				}
+				
+				this.awaitRenderList = [...this.$props.list];
+				this.renderList();
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.waterfall-box {
+		padding: 20rpx 10rpx;
+		box-sizing: border-box;
+
+		>view {
+			padding: 0 10rpx;
+		}
+		
+		.list-item{
+			margin-bottom: 0;
+			// 设置透明，默认是可视的
+			opacity: 0;
+			// 默认超出隐藏，不影响加载中的文字显示效果
+			overflow: hidden;
+			height: 0;
+			
+			&.show{
+				margin-bottom: 20rpx;
+				opacity: 1;
+				overflow: auto;
+				height: auto;
+			}
+		}
+	}
+
+	.h-flex-x {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: nowrap;
+		justify-content: flex-start;
+		align-items: flex-start;
+		align-content: flex-start;
+
+		&.h-flex-2 {
+			>view {
+				width: 50%;
+			}
+		}
+	}
+</style>

pages.json

@@ -1,5 +1,6 @@
 {
 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+		
 		{
 			"path": "pages/index/index",
 			"style": {
@@ -26,6 +27,30 @@
 				"enablePullDownRefresh": false
 			}
 		
+		},
+		{
+			"path": "pages/index/vote-detail/index",
+			"style": {
+				"navigationBarTitleText": "投票详情",
+				"enablePullDownRefresh": false
+			}
+		
+		},
+		{
+			"path": "pages/goods/goods",
+			"style": {
+				"navigationBarTitleText": "产品活动列表",
+				"enablePullDownRefresh": false
+			}
+		
+		},
+		{
+			"path": "pages/goods/goods-detail/index",
+			"style": {
+				"navigationBarTitleText": "产品详情",
+				"enablePullDownRefresh": false
+			}
+		
 		},
 		{
 			"path": "pages/map/map",
@@ -275,5 +300,15 @@
 	      "text": "我的"
 	    }
 	  ]
+	},
+	"condition" : { //模式配置，仅开发期间生效
+		"current": 0, //当前激活的模式(list 的索引项)
+		"list": [
+			{
+				"name": "", //模式名称
+				"path": "", //启动页面，必选
+				"query": "" //启动参数，在页面的onLoad函数里面得到
+			}
+		]
 	}
 }

pages/goods/goods-detail/index.vue

@@ -0,0 +1,351 @@
+<template>
+	<view class="goods-detail">
+		<!-- swiper -->
+		<view class="home-swiper">
+			<uni-swiper-dot :info="info" :current="current1" :mode="mode" :dots-styles="dotsStyles">
+				<swiper class="swiper-box" @change="change1" circular>
+					<swiper-item v-for="(item ,index) in info" :key="index">
+						<view class="swiper-item" @click="goGoodsDetail(item.pic_url)">
+							<image style="width: 100%;height:576rpx;" :src="item.img" mode="aspectFill"></image>
+						</view>
+					</swiper-item>
+				</swiper>
+			</uni-swiper-dot>
+		</view>
+
+		<view style="background-color: #f9f9f9;">
+			<!-- 价格 -->
+			<view class="price">
+				<view class="price-top">
+					<text>￥</text>
+					<text>269</text>
+				</view>
+				<text class="price-text">端午佳节五香肉粽子，仅限前五名供。</text>
+				<view class="price-banner" :style="{backgroundImage:'url('+backImageUrl+')'}">
+					<text>加入IHG优悦会会员享受更多福利</text>
+				</view>
+				<!--规格-->
+				<view class="price-specs">
+					<view class="price-specs-left">
+						<text>选择</text>
+					</view>
+					<view class="price-specs-main" @click="Recipientopen()">
+						<text>请选择规格</text>
+					</view>
+					<view @click="Recipientopen()">
+						<image style="width: 12rpx;height: 20rpx;" src="/static/icon/right03.png" mode=""></image>
+					</view>
+
+				</view>
+			</view>
+
+			<!--酒店信息  -->
+			<view class="about">
+				<text class="about-title">可购买酒店信息</text>
+				<text class="about-name">洲际环球大酒店</text>
+				<view class="about-address">
+					<text style="margin-right:20rpx ;">地址:</text>
+					<text>成都市武侯区天府大道北段1928号</text>
+				</view>
+				<view class="about-phone">
+					<text style="margin-right:20rpx ;">电话:</text>
+					<text>201823102</text>
+				</view>
+				<view class="about-all">
+					<text style="margin-right: 16rpx;">全部酒店</text>
+					<image style="width: 12rpx;height: 20rpx;" src="/static/icon/right04.png" mode=""></image>
+				</view>
+
+			</view>
+
+			<!-- 产品介绍 -->
+			<view class="produce">
+				<view class="produce-title">
+					<text>产品简介</text>
+				</view>
+				<view class="produce-text">
+					<text>洲际环球大酒店洲际环球大酒店洲际环球大酒店洲际环球大酒店洲际环球大酒店洲际环球大酒店洲际环球大酒店</text>
+				</view>
+			</view>
+		</view>
+
+		<view class="buy-btn">
+			<view class="buy-btn-left">
+				<image style="width: 40rpx;height: 42rpx;" src="/static/icon/home01.png" mode=""></image>
+				<text>首页</text>
+			</view>
+			<view class="buy-btn-right">
+				<text>立即购买</text>
+			</view>
+		</view>
+		<view style="height: 140px;background-color: #f9f9f9;"></view>
+
+		<!-- 选择规格 -->
+		<uni-popup ref="Recipient" type="bottom" mask-background-color=" rgba(0,0,0,0.7);">
+			<view class="pop">
+				<view class="">
+					<image style="width: 180rpx;height: 136rpx; border-radius:12rpx ;" src="/static/icon/special01.png" mode=""></image>
+					<view class="">
+						<text>￥</text>
+						<text>269</text>
+					</view>
+					<image style="width: 52rpx;height: 52rpx;" src="/static/icon/close01.png" mode=""></image>
+				</view>
+			</view>
+		</uni-popup>
+
+
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				backImageUrl: require('../../../static/icon/add01.png'),
+
+				//轮播图
+				info: [{
+					img: require('../../../static/icon/swiper01.png'),
+					name: '酒店预订'
+				}, ],
+				dotsStyles: {
+					backgroundColor: 'rgba(255, 255, 255, .3)',
+					border: '1px rgba(255, 255, 255, .3) solid',
+					color: '#fff',
+					selectedBackgroundColor: 'rgba(255, 255, 255, 1)',
+					selectedBorder: '1px rgba(255, 255, 255, 1) solid'
+				},
+				//指示点显示位置
+				current1: 0,
+				//指示点模式
+				mode: 'default',
+			}
+		},
+		methods: {
+			Recipientopen() {
+				this.$refs.Recipient.open('bottom')
+			},
+			Recipientclose() {
+				this.$refs.Recipient.close()
+			},
+			// 切换轮播图指示点
+			change1(e) {
+				this.current1 = e.detail.current;
+			},
+
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	$pageColor:#F9F9F9;
+	$bgColor:#FFFFFF;
+
+	@mixin flexlayout {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	page {
+		height: 100% !important;
+		background: #F9F9F9 !important;
+	}
+
+	.pop {
+		padding: 32rpx 30rpx 0;
+		width: 100%;
+		height: 914rpx;
+		background: #FFFFFF;
+		border-radius: 22rpx 22rpx 0px 0px;
+		overflow: hidden;
+	}
+
+	.buy-btn {
+		position: fixed;
+		bottom: 0;
+		width: 100%;
+		padding: 0 30rpx 0 58rpx;
+		height: 148rpx;
+		background: #FFFFFF;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+
+		.buy-btn-left {
+			flex: none;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			color: #FF6200;
+			font-size: 22rpx;
+		}
+
+		.buy-btn-right {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			margin-left: 40rpx;
+			flex: 1;
+			height: 92rpx;
+			background: linear-gradient(270deg, #FF6200 0%, #FF9342 100%);
+			border-radius: 12rpx;
+			font-weight: bold;
+			color: #FFFFFF;
+			font-size: 30rpx;
+		}
+	}
+
+
+	.goods-detail {
+		height: 100%;
+		background: #F9F9F9;
+	}
+
+	.produce {
+		margin-top: 24rpx;
+		padding: 40rpx 30rpx 36rpx;
+		background: #FFFFFF;
+		box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.02);
+		border-radius: 16rpx;
+
+		.produce-title {
+			font-size: 32rpx;
+			font-weight: bold;
+			color: #333333;
+		}
+
+		.produce-text {
+			margin-top: 26rpx;
+			font-size: 30rpx;
+			color: #333333;
+			line-height: 48rpx;
+		}
+	}
+
+	.about {
+		padding: 40rpx 30rpx 40rpx;
+		width: 100%;
+		// height: 350rpx;
+		background: #FFFFFF;
+		box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.02);
+		border-radius: 16rpx;
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		justify-content: flex-start;
+
+		.about-title {
+			font-size: 32rpx;
+			font-weight: bold;
+			color: #333333;
+		}
+
+		.about-name {
+			margin: 30rpx 0 20rpx;
+			font-size: 30rpx;
+			color: #333333;
+		}
+
+		.about-address {
+			font-size: 30rpx;
+			color: #333333;
+		}
+
+		.about-phone {
+			margin: 20rpx 0 48rpx;
+			font-size: 30rpx;
+			color: #333333;
+		}
+
+		.about-all {
+			width: 100%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			font-size: 32rpx;
+			color: #FF6200;
+		}
+	}
+
+
+
+	.home-swiper {
+		height: 576rpx;
+
+		.swiper-box {
+			height: 576rpx;
+		}
+	}
+
+	::v-deep .uni-swiper__dots-box {
+		bottom: 48rpx !important;
+	}
+
+	.price {
+		padding: 32rpx 30rpx 0rpx;
+		position: relative;
+		top: -20rpx;
+		// height: 406rpx;
+		background: #FFFFFF;
+		box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.02);
+		border-radius: 16rpx;
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		justify-content: flex-start;
+
+		.price-top {
+			font-size: 48rpx;
+			font-weight: 800;
+			color: #FF6200;
+		}
+
+		.price-text {
+			margin: 30rpx 0 26rpx;
+			font-size: 32rpx;
+			font-weight: bold;
+			color: #333333;
+		}
+
+		.price-banner {
+			padding: 0 24rpx;
+			width: 100%;
+			height: 80rpx;
+			background-repeat: no-repeat;
+			font-size: 32rpx;
+			color: #FFFFFF;
+			display: flex;
+			align-items: center;
+			justify-content: flex-start;
+		}
+
+		.price-specs {
+			margin-top: 48rpx;
+			width: 100%;
+			height: 110rpx;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			border-top: 2rpx solid #F0F0F0;
+
+			.price-specs-left {
+				flex: none;
+				font-size: 32rpx;
+				font-weight: bold;
+				color: #333333;
+			}
+
+			.price-specs-main {
+				flex: 1;
+				margin-left: 28rpx;
+				font-size: 30rpx;
+				color: #666666;
+			}
+
+		}
+	}
+</style>

pages/goods/goods.vue

@@ -0,0 +1,239 @@
+<template>
+	<view class="goods">
+		<!-- 背景图 -->
+		<view class="goods-img">
+			<image style="width: 100%; height: 450rpx;" src="/static/icon/swiper01.png" mode=""></image>
+		</view>
+		<!-- 内容 -->
+		<view class="main">
+			<view class="search">
+				<u-input placeholder="搜索" border='none'>
+					<template slot="suffix" style='margin-right:40rpx;'>
+						<u-image :showLoading="true" :showError='true' src="/static/icon/search.png" width="40rpx"
+							height="32rpx"></u-image>
+					</template>
+				</u-input>
+			</view>
+			<view class="tab_nav">
+				<view class="navTitle" v-for="(item,index) in items" :key="index">
+					<view class="navTitle-item">
+						<view :class="{'active':isActive === index}" @click="checked(index)">
+							{{item.title}}
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="">
+			<text @click="goGoodsDetail">商品</text>
+			<waterfall :status="waterfall.status" :list="waterfall.list" :reset="waterfall.reset" @click="onClick"
+				@done="onDone">
+				<!-- <template>
+					<view v-if="waterfall.status == 'await'">
+						<view class="load-txt">上拉加载更多</view>
+					</view>
+					<view v-else-if="waterfall.status == 'loading'">
+						<view class="load-txt">加载中</view>
+					</view>
+					<view v-else-if="waterfall.status == 'success'">
+						<view class="load-txt">加载中</view>
+					</view>
+					<view v-else-if="waterfall.status == 'finish'">
+						<view class="load-txt">没有更多了</view>
+					</view>
+					<view v-else-if="waterfall.status == 'fail'">
+						<image class="load-icon" src="../../static/waterfall/fail.png"></image>
+						<view class="load-txt">出错了，请刷新重试</view>
+					</view>
+					<view v-else-if="waterfall.status == 'empty'">
+						<image class="load-icon" src="../../static/waterfall/empty.png"></image>
+						<view class="load-txt">暂无数据</view>
+					</view>
+					<view v-else>
+						<!-- 别问我为什么要写一个 v-else 的空 view,不写H5平台就会有CSS生效的离谱BUG -->
+					<!-- </view> -->
+				<!-- </template> --> 
+			</waterfall>
+		</view>
+
+
+
+	</view>
+</template>
+
+<script>
+	import waterfall from '../../components/waterfall/waterfall-list.vue'
+	export default {
+		components: {
+			waterfall
+		},
+		data() {
+			return {
+				// 瀑布流组件相关
+				waterfall: {
+					status: "",
+					reset: false,
+					list: [{
+							id: 1,
+							image_url: require('../../static/icon/swiper01.png'),
+							title: "可爱的小猫咪呀",
+							text: "小小的猫咪，甚是呆萌，呆萌呆萌呆萌呆萌呆萌呆萌呆萌呆萌呆萌呆萌呆萌呆萌呆萌呆萌呆萌呆萌呆萌呆萌呆萌",
+						},
+						{
+							id: 2,
+							image_url: require('../../static/icon/special01.png'),
+							title: "迪士尼动画",
+							text: "迪士尼动画之……",
+						},
+					]
+				},
+				//分段器
+				items: [{
+						title: '月饼'
+					},
+					{
+						title: '月饼礼盒'
+					}, {
+						title: '商务礼盒'
+					},
+					{
+						title: '洲际礼盒'
+					},
+					{
+						title: '个性礼盒'
+					},
+					{
+						title: '生日礼盒'
+					}
+				],
+				//激活指定table菜单
+				isActive: 0,
+
+			};
+		},
+		methods: {
+			//去活动详情
+			goGoodsDetail(){
+				uni.navigateTo({
+					url:'/pages/goods/goods-detail/index'
+				})
+			},
+			// 瀑布流组件点击事件
+			onClick(data, index, tag) {
+				console.log(data);
+				let direction = {
+					"left": '左',
+					"right": '右'
+				}
+				uni.showToast({
+					title: `${direction[tag]}侧列表第${index+1}个被点击`,
+					icon: 'none'
+				})
+			},
+			// 瀑布流组件渲染完成
+			onDone() {
+				// 设置组件为 非重置，这行代码保留不删即可
+				this.waterfall.reset = false;
+
+				// 恢复 getList 方法的调用
+				// this.ajax.load = true;
+				// this.ajax.page++;
+
+				// 设置组件状态为 等待加载
+				this.waterfall.status = 'await';
+			},
+			//菜单index切换
+			checked(index) {
+				this.isActive = index
+			},
+		}
+
+	}
+</script>
+
+<style lang="scss" scoped>
+	.goods {
+		height: 100%;
+	}
+
+	.tab_nav {
+		width: 100%;
+		height: 100rpx;
+		display: flex;
+		align-items: center;
+		font-family: PingFang-SC-Heavy, PingFang-SC;
+		overflow-x: scroll;
+
+	}
+
+	.tab_nav .navTitle {
+		width: 154rpx;
+		flex: none;
+		height: 28rpx;
+		font-size: 32rpx;
+		color: #666;
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-right: 16rpx;
+	}
+
+	.navTitle-item {
+		width: 154rpx;
+		flex: none;
+		height: 28rpx;
+		font-size: 32rpx;
+		color: #666;
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.active {
+		color: #D9A94D;
+		font-weight: bold;
+
+		&::after {
+			display: inline-block;
+			content: '';
+			width: 48rpx;
+			height: 12rpx;
+			background: linear-gradient(90deg, #F3D69F 0%, #D9A94D 100%);
+			border-radius: 6px;
+			position: absolute;
+			bottom: -32rpx;
+			left: 51rpx;
+		}
+	}
+
+	.search {
+		::v-deep .u-input {
+			width: 690rpx !important;
+			height: 68rpx !important;
+			background: #F1F1F1;
+			border-radius: 74rpx;
+		}
+
+		::v-deep .u-input__content__field-wrapper {
+			padding-left: 36rpx;
+		}
+	}
+
+
+	.goods-img {
+		width: 100%;
+		height: 450rpx;
+	}
+
+	.main {
+		position: relative;
+		top: -36rpx;
+		padding: 48rpx 30rpx 0;
+		border-radius: 16rpx 16rpx 0px 0px;
+		height: 238rpx;
+		background: #FFFFFF;
+		box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.04);
+	}
+</style>

pages/index/active-detail/index.vue

@@ -38,12 +38,12 @@
 		</view>
 		<!-- 分段栏 -->
 		<view style="width: 100%;height: 16rpx;background-color:#F0F0F0 ;"></view>
-		
+
 		<!-- 排行榜 -->
 		<view class="rank">
 			<view class="tab_nav">
 				<view class="navTitle" v-for="(item,index) in rankList" :key="index">
-					<view class="navTitle-item"  >
+					<view class="navTitle-item">
 						<view :class="{'active':isActive === index}" @click="checked(index)">
 							{{item.title}}
 						</view>
@@ -58,32 +58,28 @@
 					</template>
 				</u-input>
 			</view>
-			
+
 			<view class="tab_area" v-if="isActive==0">
 				<view class="areaTitle" v-for="(item,index) in areaList" :key="index">
-					<view class="areaTitle-item"  >
+					<view class="areaTitle-item">
 						<view :class="{'active-area':isActive === index}" @click="checked(index)">
 							{{item.title}}
 						</view>
 					</view>
 				</view>
 			</view>
-			
+
 			<view class="tab_area" v-if="isActive==0">
 				<view class="areaTitle" v-for="(item,index) in areaList" :key="index">
-					<view class="areaTitle-item"  >
+					<view class="areaTitle-item">
 						<view :class="{'active-area':isActive === index}" @click="checked(index)">
 							{{item.title}}
 						</view>
 					</view>
 				</view>
 			</view>
-			
-			
-			
-			
 		</view>
-		
+
 		<!-- 查询结果 -->
 		<view class="List" v-if="isActive==0">
 			<view class="ListItem" v-for="item in 2" @click="activeDetail">
@@ -97,22 +93,117 @@
 						<text>IHG最受欢迎的酒店</text>
 					</view>
 					<view class="voteStatus">
-							<text>1258票</text>
+						<text>1258票</text>
 					</view>
 				</view>
-				<view class="foot">
+				<view class="foot" @click.stop="goVoteDetail">
 					<text>投票</text>
 				</view>
 			</view>
 		</view>
-		
-		<view class="rank-detail" v-if="isActive==1">
 
+		<view class="rank-detail" :style="{backgroundImage:'url('+backImageUrl+')'}" v-if="isActive==1">
+			<view class="rank-detail-rank">
+				<image style="width: 92rpx; height: 92rpx; border-radius: 50%; " src="/static/icon/avatar.png" mode="">
+				</image>
+				<text class="rank-detail-rank-text">成都环球中心天新中秋</text>
+				<view class="rank-detail-rank-data">
+					<image style="width: 26rpx;height: 24rpx; margin-right: 10rpx; " src="/static/icon//votes01.png"
+						mode=""></image>
+					<text>25330</text>
+				</view>
+			</view>
+			<view class="rank-detail-rank rank-detail-rankS">
+				<image style="width: 92rpx; height: 92rpx; border-radius: 50%; " src="/static/icon/avatar.png" mode="">
+				</image>
+				<text class="rank-detail-rank-text">成都环球中心天新中秋</text>
+				<view class="rank-detail-rank-data">
+					<image style="width: 26rpx;height: 24rpx; margin-right: 10rpx; " src="/static/icon//votes01.png"
+						mode=""></image>
+					<text>25330</text>
+				</view>
+			</view>
+			<view class="rank-detail-rank rank-detail-rankT">
+				<image style="width: 92rpx; height: 92rpx; border-radius: 50%; " src="/static/icon/avatar.png" mode="">
+				</image>
+				<text class="rank-detail-rank-text">成都环球中心天新中秋</text>
+				<view class="rank-detail-rank-data">
+					<image style="width: 26rpx;height: 24rpx; margin-right: 10rpx; " src="/static/icon//votes01.png"
+						mode=""></image>
+					<text>25330</text>
+				</view>
+			</view>
 		</view>
-		
-		
-		
-		<uni-load-more :status="status" color="#CCCCCC" :content-text="contentText" />
+		<!-- 具体排名(4-10) -->
+		<view class="rank-other" v-if="isActive==1">
+			<view class="rank-other-item" v-for="item in 6">
+				<view class="rank-other-item-left">
+					<text>4</text>
+				</view>
+				<view class="rank-other-item-main">
+					<image style="width: 112rpx;height: 112rpx;margin-left: 24rpx; margin-right: 16rpx; "
+						src="/static/icon/avatar.png" mode=""></image>
+					<text class="rank-other-item-main-text">成都环球中心天新中秋接力活动</text>
+				</view>
+				<view class="rank-other-item-right">
+					<image style="width: 26rpx;height: 24rpx; margin-right: 8rpx; " src="/static/icon//votes02.png"
+						mode=""></image>
+					<text>25530</text>
+				</view>
+			</view>
+		</view>
+
+		<view class="introduce" v-if="isActive==2">
+
+			<view class="introduce-top">
+				<text class="introduce-top-rule1"></text>
+				<text style="margin: 0 8rpx;">活动规则</text>
+				<text class="introduce-top-rule2"></text>
+			</view>
+			<view class="introduce-main">
+				<view class="introduce-main-start">
+					<text>开始时间:</text>
+					<text style="display: inline-block;margin-left: 20rpx;">2022年10月28日 09:00</text>
+				</view>
+				<view class="introduce-main-start">
+					<text>介绍时间:</text>
+					<text style="display: inline-block;margin-left: 20rpx;">2022年10月28日 09:00</text>
+				</view>
+				<view class="introduce-main-start">
+					<text>主办方:</text>
+					<text style="display: inline-block;margin-left: 50rpx;">成都洲际天堂大饭店</text>
+				</view>
+				<view class="introduce-main-rule">
+					<text>规则:</text>
+					<view class="introduce-main-rule-left">
+						<text>每人每天可投三次</text>
+						<text style="margin: 24rpx 0;">可重复投同一人</text>
+						<text>点击加入会员可多3次机会</text>
+					</view>
+				</view>
+				
+			</view>
+			
+			<!-- 分割线 -->
+			<view style="width: 94%; height: 2rpx; background-color:#F0F0F0;margin: 64rpx auto 80rpx;  "></view>
+			<view class=" introduce-top">
+				<text class="introduce-top-rule1"></text>
+				<text style="margin: 0 8rpx;">活动介绍</text>
+				<text class="introduce-top-rule2"></text>
+			</view>
+			<view class="introduce-btn-text">
+				<text>由中国最佳酒店评选委员会、洲际酒店共同打造的国内</text>
+			</view>
+			
+			<!-- 声明 -->
+			<view class="introduce-btn">
+				<text>活动声明</text>
+			</view>
+		</view>
+
+
+
+		<uni-load-more v-if="isActive==0" :status="status" color="#CCCCCC" :content-text="contentText" />
 		<view style="height:168rpx; background-color: #FFF; "></view>
 	</view>
 </template>
@@ -121,6 +212,8 @@
 	export default {
 		data() {
 			return {
+				//排行榜背景图片
+				backImageUrl: require('../../../static/icon/rank01.png'),
 				rankList: [{
 						title: '投票'
 					},
@@ -131,17 +224,16 @@
 					}
 				],
 				areaList: [{
-						title: '全部'
-					},{
-						title: '成都'
-					}, {
-						title: '重庆'
-					} ,{
-						title: '绵阳'
-					},{
-						title: '南充'
-					}
-				],
+					title: '全部'
+				}, {
+					title: '成都'
+				}, {
+					title: '重庆'
+				}, {
+					title: '绵阳'
+				}, {
+					title: '南充'
+				}],
 				//激活指定table菜单
 				isActive: 0,
 				status: 'noMore',
@@ -153,6 +245,13 @@
 			}
 		},
 		methods: {
+			//购票详情
+			goVoteDetail(){
+				uni.navigateTo({
+					url:'/pages/index/vote-detail/index'
+				})
+			},
+			
 			//菜单index切换
 			checked(index) {
 				this.isActive = index
@@ -179,21 +278,96 @@
 		height: 100%;
 		background: #F9F9F9;
 	}
-	
-	
-	.rank-search{
+
+
+	.rank-search {
 		margin-top: 80rpx;
+
 		::v-deep .u-input {
 			width: 690rpx !important;
 			height: 68rpx !important;
 			background: #F1F1F1;
 			border-radius: 74rpx;
 		}
+
 		::v-deep .u-input__content__field-wrapper {
 			padding-left: 36rpx;
 		}
 	}
-	
+
+
+	.introduce {
+		width: 100%;
+		background-color: #fff;
+		position: relative;
+		top: -176rpx;
+		padding-bottom: 50rpx;
+		position: relative;
+
+		.introduce-top {
+			height: 32rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			font-size: 32rpx;
+			font-weight: bold;
+			letter-spacing: 2rpx;
+			.introduce-top-rule1 {
+				width: 56rpx;
+				height: 4rpx;
+				background: linear-gradient(90deg, #FFFFFF 0%, #D9A94D 100%);
+			}
+			.introduce-top-rule2 {
+				width: 56rpx;
+				height: 4rpx;
+				background: linear-gradient(-90deg, #FFFFFF 0%, #D9A94D 100%);
+			}
+		}
+		.introduce-main{
+			margin-top: 40rpx;
+			padding: 0 30rpx;
+			font-size: 28rpx;
+			font-weight: bold;
+			color: #333;
+			.introduce-main-start{
+				margin-bottom: 24rpx;
+			}
+			.introduce-main-rule{
+				display: flex;
+				align-items: flex-start;
+				justify-content: flex-start;
+				.introduce-main-rule-left{
+					display: flex;
+					flex-direction: column;
+					align-items: flex-start;
+					justify-content: flex-start;
+					margin-left: 75rpx;
+				}
+			}
+		}
+		.introduce-btn-text{
+			padding: 0 30rpx;
+			margin-top: 40rpx;
+			text-indent: 2em;
+			font-size: 28rpx;
+			color: #333;
+			font-weight: bold;
+			line-height: 56rpx;
+		}
+		.introduce-btn{
+			width: 100%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			font-size: 32rpx;
+			color: #101010;
+			font-weight: bold;
+			position: absolute;
+			bottom: 0;
+		}
+	}
+
+
 	//地区切换
 	.tab_area {
 		margin-top: 48rpx;
@@ -203,6 +377,7 @@
 		align-items: center;
 		font-family: PingFang-SC-Heavy, PingFang-SC;
 	}
+
 	.area_nav .areaTitle {
 		width: 124rpx;
 		height: 52rpx;
@@ -212,9 +387,10 @@
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		
+
 	}
-	.areaTitle-item{
+
+	.areaTitle-item {
 		width: 124rpx;
 		height: 52rpx;
 		background-color: #F1F1F1;
@@ -224,24 +400,26 @@
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		
+
 	}
+
 	.active-area {
 		width: 124rpx;
 		height: 52rpx;
 		border-radius: 26rpx;
-		background-color:#FF6200 ;
+		background-color: #FF6200;
 		color: #fff;
 		display: flex;
 		justify-content: center;
 		align-items: center;
 	}
-	
-	
+
+
 	.rank {
 		height: 340rpx;
 		background-color: #fff;
 		padding: 40rpx 30rpx 0;
+
 		//菜单切换
 		.tab_nav {
 			width: 100%;
@@ -250,6 +428,7 @@
 			align-items: center;
 			font-family: PingFang-SC-Heavy, PingFang-SC;
 		}
+
 		.tab_nav .navTitle {
 			width: 30%;
 			flex: none;
@@ -260,9 +439,9 @@
 			justify-content: center;
 			align-items: center;
 		}
-		.navTitle-item{
-			height:40rpx ;
 
+		.navTitle-item {
+			height: 40rpx;
 		}
 
 		.active {
@@ -275,15 +454,13 @@
 				content: '';
 				width: 156rpx;
 				height: 24rpx;
-				background: linear-gradient(180deg, rgba(249,231,219,0) 0%, #F3C063 100%);
+				background: linear-gradient(180deg, rgba(249, 231, 219, 0) 0%, #F3C063 100%);
 				border-radius: 12rpx;
 				position: absolute;
 				bottom: -35rpx;
 				left: 25rpx;
 			}
 		}
-
-
 	}
 
 	.vote {
@@ -346,19 +523,130 @@
 		width: 100%;
 		height: 720rpx;
 	}
-	
-	.rank-detail{
+
+	.rank-detail {
 		width: 100%;
 		height: 592rpx;
-		background-image: url('../../../static/icon/Kudosbg.png');
+		position: relative;
+		top: -176rpx;
+		background-repeat: no-repeat;
+
+		.rank-detail-rank {
+			position: relative;
+			top: 80rpx;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+
+			.rank-detail-rank-text {
+				width: 182rpx;
+				height: 76rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				text-align: center;
+				font-size: 26rpx;
+				color: #333;
+				margin: 16rpx 0 52rpx;
+			}
+
+			.rank-detail-rank-data {
+				width: 136rpx;
+				height: 56rpx;
+				background: #141414;
+				border-radius: 8rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				font-size: 24rpx;
+				font-weight: bold;
+				color: #fff;
+			}
+		}
+
+		.rank-detail-rankS {
+			position: relative;
+			top: -155rpx;
+			left: -230rpx;
+		}
+
+		.rank-detail-rankT {
+			position: relative;
+			top: -390rpx;
+			left: 230rpx;
+		}
+	}
+
+	.rank-other {
+		position: relative;
+		top: -204rpx;
+		width: 100%;
+		padding: 48rpx 30rpx 54rpx;
+		background-color: #fff;
+		border-radius: 32rpx 32rpx 0px 0px;
+
+		.rank-other-item {
+			margin-bottom: 24rpx;
+			padding: 0 24rpx;
+			height: 176rpx;
+			background: #FFFFFF;
+			box-shadow: 0px 4rpx 24rpx -10rpx rgba(101, 95, 90, 0.3);
+			border-radius: 16rpx;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+
+			.rank-other-item-left {
+				width: 48rpx;
+				height: 48rpx;
+				border: 3rpx solid #E6E6E6;
+				border-radius: 50%;
+				font-size: 24rpx;
+				color: #858494;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+
+			.rank-other-item-main {
+				flex: 1;
+				display: flex;
+				align-items: center;
+				justify-content: flex-start;
+
+				.rank-other-item-main-text {
+					width: 282rpx;
+					height: 80rpx;
+					font-size: 28rpx;
+					color: #333;
+					line-height: 40rpx;
+				}
+			}
+
+			.rank-other-item-right {
+				width: 132rpx;
+				height: 48rpx;
+				background: rgba(255, 98, 0, 0.22);
+				border-radius: 24rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				font-size: 24rpx;
+				color: #FF6200;
+				font-weight: bold;
+			}
+		}
 	}
-	
-	
+
+
+
 
 	.List {
 		padding: 0 30rpx;
 		padding-top: 20rpx;
 		padding-bottom: 32rpx;
+
 		.ListItem {
 			position: relative;
 			margin-bottom: 40rpx;
@@ -407,7 +695,7 @@
 					border-radius: 4rpx;
 					border: 2rpx solid #A18353;
 					font-size: 30rpx;
-					color:#A18353 ;
+					color: #A18353;
 					margin-top: 20rpx;
 					display: flex;
 					align-items: center;

pages/index/index.vue

@@ -74,7 +74,7 @@
 
 		<!-- 酒店推荐图片 -->
 		<view class="home-hotel-img">
-			<view class="home-hotel-img-more">
+			<view class="home-hotel-img-more" @click="goProduceList">
 				<text>查看更多商品</text>
 			</view>
 		</view>
@@ -192,6 +192,13 @@
 
 		onLoad() {},
 		methods: {
+			//产品列表
+			goProduceList(){
+				uni.navigateTo({
+					url:'/pages/goods/goods'
+				})
+			},
+			
 			//活动列表
 			goSpecialList(){
 				uni.navigateTo({

pages/index/vote-detail/index.vue

@@ -0,0 +1,331 @@
+<template>
+	<view class="vote-detail">
+		<!-- 活动查询 -->
+		<view class="title">
+			<image style="width: 158rpx;height: 158rpx;border-radius: 50%; " src="/static/icon/avatar.png" mode="">
+			</image>
+			<text class="title-text">成都IHG大酒店</text>
+			<text class="title-btn">2022年四川 “最受欢迎-IHG酒店” 评选</text>
+		</view>
+		<!-- 分割线 -->
+		<view style="width: 92%; height: 2rpx; background-color:#F0F0F0;margin: 40rpx auto;  "></view>
+		<!-- 排名 -->
+		<view class="rank">
+			<view class="vote-detail-btn">
+				<view class="vote-detail-btn-item">
+					<text class="vote-detail-btn-item-num">1</text>
+					<text class="vote-detail-btn-item-text">编号</text>
+				</view>
+				<view style="width: 2rpx;height: 52rpx;background-color: #ccc;"></view>
+				<view class="vote-detail-btn-item">
+					<text class="vote-detail-btn-item-num">2342</text>
+					<text class="vote-detail-btn-item-text">票数</text>
+				</view>
+				<view style="width: 2rpx;height: 52rpx;background-color: #ccc;"></view>
+				<view class="vote-detail-btn-item">
+					<text class="vote-detail-btn-item-num">234</text>
+					<text class="vote-detail-btn-item-text">排名</text>
+				</view>
+				<view style="width: 2rpx;height: 52rpx;background-color: #ccc;"></view>
+				<view class="vote-detail-btn-item">
+					<text class="vote-detail-btn-item-num">65</text>
+					<text class="vote-detail-btn-item-text">距上名</text>
+				</view>
+			</view>
+		</view>
+		<!-- 轮播图 -->
+		<view style="background-color: #f9f9f9;">
+			<view class="swiper">
+				<view class="home-swiper">
+					<uni-swiper-dot :info="info" :current="current1" :mode="mode" :dots-styles="dotsStyles">
+						<swiper class="swiper-box" @change="change1" circular>
+							<swiper-item v-for="(item ,index) in info" :key="index">
+								<view class="swiper-item" @click="goGoodsDetail(item.pic_url)">
+									<image style="width: 100%;height:576rpx; border-radius: 12rpx; " :src="item.img"
+										mode="aspectFill"></image>
+								</view>
+							</swiper-item>
+						</swiper>
+					</uni-swiper-dot>
+				</view>
+			</view>
+			<!-- 投票 -->
+			<view class="btn">
+				<view class="btn-vote">
+					<text>投票</text>
+				</view>
+			</view>
+			<!-- 帮我拉票 -->
+			<view class="help">
+				<view class="help-btn">
+					<text>帮我拉票</text>
+				</view>
+				<view class="img-IHg">
+					<image style="width: 64rpx; height: 58rpx; " src="/static/icon/vip.png" mode=""></image>
+				</view>
+			</view>
+			
+			<!-- 分割线 -->
+			<view style="width: 92%; height: 2rpx; background-color:#F0F0F0;margin: 64rpx auto;  "></view>
+			<!-- 介绍 -->
+			<view class="introduce">
+				<view class="introduce-title">
+					<text>参赛介绍</text>
+				</view>
+				<view class="introduce-text">
+					成都世纪城天堂洲际大饭店为您提供世界各地美食和当地美食；成都世纪城天堂洲际大饭店六个不同的烹饪台将为您展示国际喷人艺术的精辟之处。在这里，我们的厨师师傅就是艺术能手，而咖啡厅则成就了他们表演绝伦技艺的舞台。
+				</view>
+			</view>
+			
+			<!-- 预约 -->
+			<view class="reserve">
+				<view class="reserve-left">
+					<image style="width: 36rpx;height: 36rpx; margin-right: 10rpx;" src="/static/icon/reserve02.png"
+						mode=""></image>
+					<text>预约</text>
+				</view>
+				<view class="reserve-right">
+					<image style="width: 60rpx;height: 56rpx; margin-right: 4rpx; " src="/static/icon/reserve01.png"
+						mode=""></image>
+					<text>加入IHG会员</text>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				//轮播图
+				info: [{
+					img: require('../../../static/icon/swiper01.png'),
+					name: '酒店预订'
+				}, ],
+				dotsStyles: {
+					backgroundColor: 'rgba(255, 255, 255, .3)',
+					border: '1px rgba(255, 255, 255, .3) solid',
+					color: '#fff',
+					selectedBackgroundColor: 'rgba(255, 255, 255, 1)',
+					selectedBorder: '1px rgba(255, 255, 255, 1) solid'
+				},
+				//指示点显示位置
+				current1: 0,
+				//指示点模式
+				mode: 'default',
+			}
+		},
+		methods: {
+			// 切换轮播图指示点
+			change1(e) {
+				this.current1 = e.detail.current;
+			},
+
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	$pageColor:#F9F9F9;
+	$bgColor:#FFFFFF;
+
+	@mixin flexlayout {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	page {
+		height: 100% !important;
+		background: #F9F9F9 !important;
+	}
+
+	.vote-detail {
+		height: 100%;
+		background: #F9F9F9;
+	}
+
+	.reserve {
+		// position: fixed;
+		// bottom: 0;
+		width: 100%;
+		height: 148rpx;
+		padding: 0 30rpx;
+		background-color: #fff;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		font-size: 30rpx;
+		color: #fff;
+		font-weight: bold;
+
+		.reserve-left {
+			width: 204rpx;
+			height: 92rpx;
+			background: linear-gradient(270deg, #FF6200 0%, #FF9342 100%);
+			border-radius: 12rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+
+		.reserve-right {
+			width: 466rpx;
+			height: 92rpx;
+			background: linear-gradient(270deg, #FF6200 0%, #FF9342 100%);
+			border-radius: 12rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+
+	}
+
+
+
+	.introduce {
+		padding: 0 30rpx;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		margin-bottom: 102rpx;
+
+		.introduce-title {
+			font-size: 32rpx;
+			font-weight: bold;
+			color: #333;
+		}
+
+		.introduce-text {
+			margin-top: 44rpx;
+			line-height: 40rpx;
+			color: #333333;
+			font-size: 28rpx;
+		}
+	}
+
+
+	.help {
+		padding: 0 30rpx;
+		margin-top: 30rpx;
+		position: relative;
+
+		.help-btn {
+			height: 108rpx;
+			background: #F9F9F9;
+			border-radius: 14rpx;
+			border: 2rpx solid #FF6200;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			color: #FF6200;
+			font-weight: bold;
+			font-size: 30rpx;
+		}
+
+		.img-IHg {
+			width: 84rpx;
+			height: 84rpx;
+			background-color: #fff;
+			box-shadow: 0px 8rpx 24rpx 0px rgba(220, 222, 229, 0.4);
+			border-radius: 50%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			position: absolute;
+			top: -28rpx;
+			right: 14rpx;
+
+		}
+	}
+
+
+
+	.btn {
+		padding: 0 30rpx;
+		margin-top: 48rpx;
+
+		.btn-vote {
+			height: 108rpx;
+			background: linear-gradient(338deg, #FF6200 0%, #FF9D4F 100%);
+			border-radius: 12rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			color: #FFFFFF;
+			font-size: 30rpx;
+			font-weight: bold;
+		}
+	}
+
+
+
+
+	.swiper {
+		padding: 0 30rpx;
+		margin-top: 64rpx;
+	}
+
+	.home-swiper {
+		height: 576rpx;
+
+		.swiper-box {
+			height: 576rpx;
+		}
+	}
+
+	.title {
+		padding-top: 30rpx;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+
+		.title-text {
+			margin: 32rpx 0 16rpx;
+			font-size: 40rpx;
+			font-weight: bold;
+			color: #333;
+		}
+
+		.title-btn {
+			color: #FF6200;
+			font-size: 28rpx;
+		}
+	}
+
+	.rank {
+		padding: 0 30rpx;
+	}
+
+	.vote-detail-btn {
+		height: 190rpx;
+		background-color: #fff;
+		box-shadow: 0px 20rpx 40rpx 0px rgba(220, 222, 229, 0.4);
+		border-radius: 16rpx;
+		display: flex;
+		align-items: center;
+		justify-content: space-around;
+
+		.vote-detail-btn-item {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: space-between;
+			font-size: 28rpx;
+			color: #333;
+
+			.vote-detail-btn-item-num {
+				font-size: 44rpx;
+				font-weight: bold;
+			}
+
+			.vote-detail-btn-item-text {
+				margin-top: 20rpx;
+			}
+		}
+	}
+</style>

unpackage/dist/dev/mp-weixin/app.json

@@ -3,6 +3,9 @@
     "pages/index/index",
     "pages/index/active-list/index",
     "pages/index/active-detail/index",
+    "pages/index/vote-detail/index",
+    "pages/goods/goods",
+    "pages/goods/goods-detail/index",
     "pages/map/map",
     "pages/msg/msg",
     "pages/login/login",
@@ -67,5 +70,6 @@
       }
     ]
   },
-  "usingComponents": {}
+  "usingComponents": {},
+  "sitemapLocation": "sitemap.json"
 }

unpackage/dist/dev/mp-weixin/components/waterfall/waterfall-item.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "component": true
+}

unpackage/dist/dev/mp-weixin/components/waterfall/waterfall-item.wxml

@@ -0,0 +1 @@
+<view class="waterfall-item-container data-v-23049246"><view data-event-opts="{{[['tap',[['onTap',['$event']]]]]}}" class="waterfall-item data-v-23049246" bindtap="__e"><image src="{{params.url}}" mode="widthFix" data-event-opts="{{[['load',[['emitHeight',['$event']]]],['error',[['emitHeight',['$event']]]]]}}" bindload="__e" binderror="__e" class="data-v-23049246"></image><view class="content data-v-23049246"><view class="data-v-23049246">{{params.title}}</view><view class="money data-v-23049246">{{params.money+"元"}}</view><view style="margin:0 0 8rpx 0;" class="data-v-23049246"><text class="label data-v-23049246">{{params.label}}</text></view><view class="shop-name data-v-23049246">{{params.shop}}</view></view></view></view>

unpackage/dist/dev/mp-weixin/components/waterfall/waterfall-item.wxss

@@ -0,0 +1,57 @@
+@charset "UTF-8";
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+/* 颜色变量 */
+/* 行为相关颜色 */
+/* 文字基本颜色 */
+/* 背景颜色 */
+/* 边框颜色 */
+/* 尺寸变量 */
+/* 文字尺寸 */
+/* 图片尺寸 */
+/* Border Radius */
+/* 水平间距 */
+/* 垂直间距 */
+/* 透明度 */
+/* 文章场景相关 */
+.waterfall-item.data-v-23049246 {
+  padding: 16rpx;
+  background-color: #fff;
+  border-radius: 4px;
+  font-size: 28rpx;
+  color: #666;
+}
+.waterfall-item image.data-v-23049246 {
+  display: block;
+  width: 100%;
+  height: 350rpx;
+}
+.waterfall-item .content.data-v-23049246 {
+  margin-top: 16rpx;
+}
+.waterfall-item .content .money.data-v-23049246 {
+  color: #fa3534;
+  margin-top: 8rpx;
+}
+.waterfall-item .content .label.data-v-23049246 {
+  background-color: #fa3534;
+  color: #fff;
+  font-size: 20rpx;
+  padding: 4rpx 16rpx;
+  border-radius: 20rpx;
+}
+.waterfall-item .content .shop-name.data-v-23049246 {
+  font-size: 20rpx;
+  color: #999;
+}
+

unpackage/dist/dev/mp-weixin/components/waterfall/waterfall-list.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "helang-waterfall-item": "/components/waterfall/waterfall-item"
+  }
+}

unpackage/dist/dev/mp-weixin/components/waterfall/waterfall-list.wxml

@@ -0,0 +1 @@
+<view class="data-v-2d0a0a51"><block wx:if="{{showList}}"><view class="waterfall-box h-flex-x h-flex-2 data-v-2d0a0a51"><view class="data-v-2d0a0a51"><block wx:for="{{leftList}}" wx:for-item="item" wx:for-index="index" wx:key="_render_id"><view class="{{['list-item','data-v-2d0a0a51',(showPage>item._current_page)?'show':'']}}"><helang-waterfall-item vue-id="{{'7437c0d5-1-'+index}}" params="{{item}}" tag="left" index="{{index}}" data-event-opts="{{[['^height',[['onHeight']]],['^click',[['onClick']]]]}}" bind:height="__e" bind:click="__e" class="data-v-2d0a0a51" bind:__l="__l"></helang-waterfall-item></view></block></view><view class="data-v-2d0a0a51"><block wx:for="{{rightList}}" wx:for-item="item" wx:for-index="index" wx:key="_render_id"><view class="{{['list-item','data-v-2d0a0a51',(showPage>item._current_page)?'show':'']}}"><helang-waterfall-item vue-id="{{'7437c0d5-2-'+index}}" params="{{item}}" tag="right" index="{{index}}" data-event-opts="{{[['^height',[['onHeight']]],['^click',[['onClick']]]]}}" bind:height="__e" bind:click="__e" class="data-v-2d0a0a51" bind:__l="__l"></helang-waterfall-item></view></block></view></view></block><slot></slot></view>

unpackage/dist/dev/mp-weixin/components/waterfall/waterfall-list.wxss

@@ -0,0 +1,57 @@
+@charset "UTF-8";
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+/* 颜色变量 */
+/* 行为相关颜色 */
+/* 文字基本颜色 */
+/* 背景颜色 */
+/* 边框颜色 */
+/* 尺寸变量 */
+/* 文字尺寸 */
+/* 图片尺寸 */
+/* Border Radius */
+/* 水平间距 */
+/* 垂直间距 */
+/* 透明度 */
+/* 文章场景相关 */
+.waterfall-box.data-v-2d0a0a51 {
+  padding: 20rpx 10rpx;
+  box-sizing: border-box;
+}
+.waterfall-box > view.data-v-2d0a0a51 {
+  padding: 0 10rpx;
+}
+.waterfall-box .list-item.data-v-2d0a0a51 {
+  margin-bottom: 0;
+  opacity: 0;
+  overflow: hidden;
+  height: 0;
+}
+.waterfall-box .list-item.show.data-v-2d0a0a51 {
+  margin-bottom: 20rpx;
+  opacity: 1;
+  overflow: auto;
+  height: auto;
+}
+.h-flex-x.data-v-2d0a0a51 {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  align-content: flex-start;
+}
+.h-flex-x.h-flex-2 > view.data-v-2d0a0a51 {
+  width: 50%;
+}
+