IHG/pages/index/active-detail/index.vue

<template>
	<view class="active-detail">
					
		<!-- 自定义导航栏 -->
		<u-navbar :leftText='title'  fixed safeAreaInsetTop :placeholder='true'  :bgColor="bgColor" @leftClick='back'>
		</u-navbar>

		<!-- 背景图 -->
		<view class="active-detail-img">
			<image style="width: 100%; height: 720rpx;" :src="activeDeatil.banners" mode=""></image>
		</view>

		<!--投票数  -->
		<view class="vote">
			<view class="vote-detail">
				<!-- 改版 -->
				<view class="vote-detail-top-main1">
					<view class="vote-detail-top-main-text" style="display: inline-block; width: 230rpx;" v-if="activeDeatil.activity_status == 1">距活动开始</view>
					<view class="vote-detail-top-main-text" style="display: inline-block; width: 230rpx;" v-else>距活动结束</view>
					<view>
						<!-- <text v-if="countdownh>0">{{countdownd}}</text> -->
						<text>{{countdownd}}</text>
						<text>{{countdownh}}</text>
						<text>{{countdownm}}</text>
						<text>{{countdowns}}</text>
					</view>
				</view>

				<view class="vote-detail-btn">
					<view class="vote-detail-btn-item">
						<text class="vote-detail-btn-item-num">{{activeDeatil.project_num}}</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">{{activeDeatil.vote_num}}</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">{{activeDeatil.view_num}}</text>
						<text class="vote-detail-btn-item-text">访问量</text>
					</view>
				</view>

			</view>

		</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="{'active':isActive === index}" @click="checked(index)">
							{{item.title}}
						</view>
					</view>
				</view>
			</view>
			<view class="rank-search" v-if="isActive==0">
				<u-input placeholderStyle='color:#999' placeholder="输入IHG酒店名称或编号" border='none' v-model="search" @input='searchText'>
					<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_area" v-if="isActive==0">
				<view class="areaTitle" v-for="(item,index) in areaList" :key="index"
					@click="checkedArea(index,item.id)">
					<view class="areaTitle-item" :class="{'active-area':isActiveArea === index}">
						<view>
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 查询结果 -->
		<view class="List" v-if="isActive==0">
			<view class="ListItem" v-for="(item,index) in voteList" :key="index" @click="goVoteDetail(item.id)">
				<image :src="item.cover_img" style="width: 640rpx;height:420rpx;border-radius: 12rpx; "></image>
				<view class="kudosicon" :style="{backgroundImage:'url('+hotelImageUrl+')'}">
					<text
						style="width: 36rpx;height: 52rpx; display: flex;align-items: center;justify-content: center;color: #FFF;font-size: 24rpx;font-weight: bold; ">{{item.sort}}</text>
				</view>
				<view class="nav">
					<view class="events">
						<text>{{item.project_name}}</text>
					</view>
					<view class="voteStatus">
						<text v-if="item.ticket_num>=0">{{item.ticket_num + item.virtual_ticket_num }}票</text>
					</view>
				</view>
				<view class="foot" @click.stop="goVoteDetail(item.id)">
					<text>{{activeDeatil.vote_name}}</text>
				</view>
			</view>
		</view>

		<view class="rank-detail" :style="{backgroundImage:'url('+backImageUrl+')'}" v-if="isActive==1">
			<view class="rank-detail-rank" v-if="rankItemList[0].logo">
				<image style="width: 92rpx; height: 92rpx; border-radius: 50%; " :src="rankItemList[0].logo" mode="">
				</image>
				<text class="rank-detail-rank-text">{{rankItemList[0].project_name}}</text>
				<view class="rank-detail-rank-data">
					<image style="width: 26rpx;height: 24rpx; margin-right: 10rpx; " src="/static/icon/votes01.png"
						mode=""></image>
					<text>{{rankItemList[0].ticket_num + rankItemList[0].virtual_ticket_num }}</text>
				</view>
			</view>
			<view class="rank-detail-rank rank-detail-rankS" v-if="rankItemList[1].logo">
				<image style="width: 92rpx; height: 92rpx; border-radius: 50%; " :src="rankItemList[1].logo" mode="">
				</image>
				<text class="rank-detail-rank-text">{{rankItemList[1].project_name}}</text>
				<view class="rank-detail-rank-data">
					<image style="width: 26rpx;height: 24rpx; margin-right: 10rpx; " src="/static/icon/votes01.png"
						mode=""></image>
					<text>{{rankItemList[1].ticket_num + rankItemList[1].virtual_ticket_num }}</text>
				</view>
			</view>
			<view class="rank-detail-rank rank-detail-rankT" v-if="rankItemList[2].logo">
				<image style="width: 92rpx; height: 92rpx; border-radius: 50%; " :src="rankItemList[2].logo" mode="">
				</image>
				<text class="rank-detail-rank-text">{{rankItemList[2].project_name}}</text>
				<view class="rank-detail-rank-data">
					<image style="width: 26rpx;height: 24rpx; margin-right: 10rpx; " src="/static/icon/votes01.png"
						mode=""></image>
					<text>{{rankItemList[2].ticket_num + rankItemList[2].virtual_ticket_num }}</text>
				</view>
			</view>
		</view>
		<!-- 具体排名(4-10) -->
		<view class="rank-other" v-if="isActive==1">
			<view class="rank-other-item" v-for="(item,index) in rankItemList" v-if="index>2" :key="index">
				<view class="rank-other-item-left">
					<text>{{index+1}}</text>
				</view>
				<view class="rank-other-item-main">
					<image
						style="width: 112rpx;height: 112rpx;margin-left: 24rpx; margin-right: 16rpx;border-radius: 50%; "
						:src="item.logo" mode=""></image>
					<text class="rank-other-item-main-text">{{item.project_name}}</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>{{item.ticket_num + item.virtual_ticket_num }}</text>
				</view>
			</view>
		</view>

		<view class="introduce" v-if="isActive==2">

			<view class="introduce-top">
				<text class="introduce-top-rule1"></text>
				<text style="margin-right:  8rpx; margin-left: 12rpx; ">活动规则</text>
				<text class="introduce-top-rule2"></text>
			</view>
			<view class="introduce-main">
				<u-parse :content="activeDeatil.rule"></u-parse>
			</view>
		
			<!-- 分割线 -->
			<view
				style="width: 94%; height: 2rpx; background-color:rgba(240, 240, 240, .7);margin: 64rpx auto 80rpx;  ">
			</view>
			<view class=" introduce-top">
				<text class="introduce-top-rule1"></text>
				<text style="margin-right:  8rpx; margin-left: 12rpx; ">活动介绍</text>
				<text class="introduce-top-rule2"></text>
			</view>
			<view class="introduce-btn-text">
				<u-parse :content="activeDeatil.details"></u-parse>
			</view>
			<!-- 分割线 -->
			<view
				style="width: 94%; height: 2rpx; background-color:rgba(240, 240, 240, .7);margin: 64rpx auto 80rpx;  ">
			</view>
			<view class=" introduce-top">
				<text class="introduce-top-rule1"></text>
				<text style="margin-right:  8rpx; margin-left: 12rpx; ">活动声明</text>
				<text class="introduce-top-rule2"></text>
			</view>
			<!-- 声明 -->
			<view class="introduce-btn">
				<u-parse :content="activeDeatil.statement"></u-parse>
			</view>

		</view>
		<!-- 触底 -->
		<view class="home-bottom" v-if="isActive==0">
			<uni-load-more :status="status" color="#CCCCCC" :content-text="contentText" />
		</view>
	</view>
</template>

<script>
	import util from './../../../utils/util.js'
	export default {
		data() {
			return {
				//自定义导航栏
				bgColor: '#fff',
				title: '',
				//排行榜
				rankItemList: [],

				//活动结束倒计时
				endTime: '',
				countdownd:"",
				countdownh: '',
				countdownm: '',
				countdowns: '',
				timer: null, //重复执行

				// 搜索
				search: '',
				// 活动id
				id: '',
				// 活动详情
				activeDeatil: '',
				// 投票列表
				voteList: [],
				//酒店排名背景图片
				hotelImageUrl: require('../../../static/icon/tip01.png'),
				//排行榜背景图片
				backImageUrl: 'http://t9.9026.com/imgs/rank01.png',
				rankList: [{
						title: '投票'
					},
					{
						title: '排行榜'
					}, {
						title: '活动介绍'
					}
				],
				areaList: [],
				//激活指定table菜单
				isActive: 0,
				isActiveArea: 0,
				status: 'noMore',
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '——  已经到底啦  ——'
				},
			}
		},

		onShow() {
			this.admin = this.$store.getters.userInfo
			console.log(this.admin);
		},
		onLoad(o) {
			this.id = o.id
			this.getList(o.id)
			this.getActiveDetail(o.id)
			this.getCategoryList(o.id)
			uni.$on('refreshVoteNum',()=>{
				this.getList(o.id)
			})
		},
		onUnload(){
			clearInterval(this.timer)
		},
		methods: {
			//返回上一级
			back() {  
				uni.navigateBack({ 
					fail:()=>{
						uni.switchTab({
							url: "/pages/index/index"
						})
					} 
				})
			},

			showtime(time) {
				let nowtime = new Date(), //获取当前时间
					// endtime = new Date("2021/12/10"); //定义结束时间
					endtime = new Date(time); //定义结束时间
				// let lefttime = endtime.getTime() - nowtime.getTime(), //距离结束时间的毫秒数
				// 	leftd = Math.floor(lefttime / (1000 * 60 * 60 * 24)), //计算天数
				// 	lefth = Math.floor((lefttime / (1000 * 60 * 60) % 24) + leftd * 24) < 10 ? "0" + Math.floor((lefttime /
				// 		(1000 * 60 * 60) % 24) + leftd * 24) : Math.floor((lefttime / (1000 * 60 * 60) % 24) + leftd *
				// 		24), //计算小时数
				// 	leftm = Math.floor(lefttime / (1000 * 60) % 60) < 10 ? "0" + Math.floor(lefttime / (1000 * 60) % 60) :
				// 	Math.floor(lefttime / (1000 * 60) % 60), //计算分钟数
				// 	lefts = Math.floor(lefttime / 1000 % 60) < 10 ? "0" + Math.floor(lefttime / 1000 % 60) : Math.floor(
				// 		lefttime / 1000 % 60); //计算秒数
				
				const lefttime = (endtime.getTime() - nowtime.getTime()) / 1000;
				const leftd =  Math.floor(lefttime / (60 * 60 * 24))<10?"0"+Math.floor(lefttime / (60 * 60 * 24)):Math.floor(lefttime / (60 * 60 * 24));
				const lefth = Math.floor((lefttime - leftd * 86400) / (60 * 60))<10?"0"+Math.floor((lefttime - leftd * 86400) / (60 * 60)) : Math.floor((lefttime - leftd * 86400) / (60 * 60));
				const leftm = Math.floor((lefttime - leftd * 86400 - lefth * 3600) / 60)<10?"0"+Math.floor((lefttime - leftd * 86400 - lefth * 3600) / 60):Math.floor((lefttime - leftd * 86400 - lefth * 3600) / 60);
				const lefts =  Math.floor(lefttime - leftd * 86400 - lefth * 3600 - leftm*60)<10?"0"+Math.floor(lefttime - leftd * 86400 - lefth * 3600 - leftm*60):Math.floor(lefttime - leftd * 86400 - lefth * 3600 - leftm*60);
				
				this.countdownd = leftd 
				this.countdownh = lefth //返回倒计时的字符串
				this.countdownm = leftm //返回倒计时的字符串
				this.countdowns = lefts //返回倒计时的字符串
				// 倒计时结束时，显示00:00:00
				if (lefttime < 0) {
					this.countdownd = this.countdownh = this.countdownm = this.countdowns = "00"
				}

			},
			// 获取活动项目列表
			getList(id) {
				this.$api.active.getActiveProjectList({
					activity_id: id,
					page: 0,
				}).then(res => {
					console.log(res, "活动项目列表")
					if (res.code == 0) {
						this.voteList = JSON.parse(JSON.stringify(res.data.data))
						this.rankItemList = res.data.data.sort((a, b) => {
							return (b.ticket_num + b.virtual_ticket_num) - (a.ticket_num + a
								.virtual_ticket_num)
						})
						console.log(this.rankItemList, '--->rankItemList');
					}
				})
			},
			// 获取活动详情
			getActiveDetail(id) {
				this.$api.active.getActiveDetail({
					activity_id: id
				}).then(res => {
					console.log(res, "活动详情")
					if (res.code == 0) {
						this.title = res.data.title
						this.activeDeatil = res.data
						
						if(res.data.activity_status == 1){
							this.start_time = (()=>{
								const endT = res.data?.start_time ? res.data.start_time : "";
								return endT.replace(/-/g, "/");
							})()
							
							this.timer = setInterval(() => {
								this.showtime(this.start_time)
							}, 100);
						}else{
							this.endTime = (()=>{
								const endT = res.data?.end_time ? res.data.end_time : "";
								return endT.replace(/-/g, "/");
							})()
							
							this.timer = setInterval(() => {
								this.showtime(this.endTime)
							}, 100);
						}
						
						
						
					}
				})
			},
			// 获取活动投票项分类
			getCategoryList(id) {
				this.$api.category.getCategoryList({
					page: 1,
					type: 3,
					activity_id: id
				}).then(res => {
					console.log(res, "活动投票项分类")
					if (res.code == 0) {
						this.areaList = res.data.data
						console.log(this.areaList, '---->this.areaList');
						this.areaList.unshift({
							name: '全部'
						})
					}
				})
			},
			//获取地区的投票项
			getAreaList(category_id) {
				this.$api.active.getActiveProjectList({
					activity_id: this.id,
					category_id,
					page: 0,
				}).then(res => {
					if (res.code == 0) {
						this.voteList = res.data.data
					}
				})
			},


			//购票详情
			goVoteDetail(id) {
				if (this.admin == undefined) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				} else {
					uni.navigateTo({
						url: '/pages/index/vote-detail/index?id=' + id
					})
				}

			},
			// 搜索防抖
			searchText: util.debounce(function() {
				this.goSearch()
			}, 1000),
			// 搜索
			goSearch() {
				this.$api.active.getActiveProjectList({
					activity_id: this.id,
					page: 0,
					keyword: this.search
				}).then(res => {
					console.log(res, "搜索活动项目列表")
					if (res.code == 0) {
						this.voteList = res.data.data
						//回到地区分类全部
						this.isActiveArea = 0
					}
				})
			},
			//投票/排行榜/活动介绍切换
			checked(index) {
				this.isActive = index
			},
			//地区分类切换
			checkedArea(index, id) {
				this.isActiveArea = index
				if (index == 0) {
					this.getList(this.id)
				} else {
					this.getAreaList(id)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	$pageColor:#F9F9F9;
	$bgColor:#FFFFFF;

	@mixin flexlayout {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.active-detail {
		height: 100%;
		background: #F9F9F9;
	}

	.home-bottom {
		background-color: #fff;
		padding-bottom: 84rpx;
	}

	.rank-search {
		margin-top: 66rpx;

		::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;
		}

		::v-deep .u-input__content__field-wrapper__field {
			color: #999999 !important;
			font-size: 28rpx !important;
		}
	}


	.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: 46rpx;
			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 {
			margin-top: 40rpx;
			padding: 0 30rpx;
			padding-bottom: 80rpx;
			width: 100%;
			display: flex;
			font-size: 28rpx;
			color: #333;
			font-weight: bold;
		}
	}


	//地区切换
	.tab_area {
		margin-top: 48rpx;
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-family: PingFang-SC-Heavy, PingFang-SC;
		overflow-x: scroll;
	}

	.area_nav .areaTitle {
		// width: 140rpx;
		height: 52rpx;
		background-color: #F1F1F1;
		border-radius: 26rpx;
		flex: none;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 46rpx;

	}

	.areaTitle-item {
		// width: 140rpx;
		height: 52rpx;
		background-color: #F1F1F1;
		border-radius: 26rpx;
		font-size: 24rpx;
		color: #999;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 16rpx;
		padding: 0 46rpx;
	}

	.active-area {
		// width: 100%;
		height: 52rpx;
		// border-radius: 26rpx;
		background-color: #FF6200;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		// padding: 0 46rpx;
	}


	.rank {
		height: 340rpx;
		background-color: #fff;
		padding: 40rpx 30rpx 0;

		//菜单切换
		.tab_nav {
			width: 100%;
			display: flex;
			justify-content: space-around;
			align-items: center;
			font-family: PingFang-SC-Heavy, PingFang-SC;
		}

		.tab_nav .navTitle {
			width: 30%;
			flex: none;
			font-size: 32rpx;
			color: #666;
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.navTitle-item {
			height: 40rpx;
		}

		.active {
			color: #333333;
			font-weight: bold;
			font-size: 40rpx;

			&::after {
				display: inline-block;
				content: '';
				width: 156rpx;
				height: 24rpx;
				background: linear-gradient(180deg, rgba(249, 231, 219, 0) 0%, #F3C063 100%);
				border-radius: 12rpx;
				position: absolute;
				bottom: -20rpx;
				left: 25rpx;
				
			}
		}
	}

	.vote {
		height: 322rpx;
		background-color: #fcfcfd;

		.vote-detail {
			position: relative;
			top: -40rpx;
			margin: 0 auto;
			width: 690rpx;
			height: 310rpx;
			background: #FFFFFF;
			box-shadow: 0px 20rpx 40rpx 0px rgba(220, 222, 229, 0.4);
			border-radius: 16rpx;
			padding: 40rpx 30rpx 0;

			.vote-detail-top {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.vote-detail-top-main {
					flex: 1;
					margin-left: 20rpx;
					color: #333;
					font-size: 28rpx;
					display: flex;
					align-items: center;
					justify-content: flex-start;

					.time {
						display: flex;
						align-items: center;
						justify-content: flex-start;
					}
				}
			}

			.vote-detail-btn {
				margin-top: 75rpx;
				padding: 0 38rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.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;
					}
				}
			}
		}
	}

	.active-detail-img {
		width: 100%;
		height: 720rpx;
	}

	.rank-detail {
		width: 100%;
		height: 592rpx;
		position: relative;
		top: -176rpx;
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;

		.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 80rpx;
		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;
					margin-top: 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;
			width: 100%;
			height: 665rpx;
			background: $bgColor;
			box-shadow: 0rpx 12rpx 40rpx 0rpx rgba(220, 222, 229, 0.4);
			border-radius: 24rpx;
			padding: 20rpx 26rpx 26rpx 24rpx;

			.kudosicon {
				background-repeat: no-repeat;
				background-size: 36rpx 52rpx;
				position: absolute;
				top: 20rpx;
				left: 60rpx;

				@include flexlayout() image {
					width: 32rpx;
					height: 28rpx;
				}
			}

			.nav {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.events {
					text {
						margin-top: 10rpx;
						font-size: 30rpx;
						font-family: PingFang-SC-Bold, PingFang-SC;
						font-weight: bold;
						color: #333333;
					}
				}

				.voteStatus {
					width: 126rpx;
					height: 48rpx;
					background: #FFFFFF;
					border-radius: 6rpx;
					border: 2rpx solid #A18353;
					font-size: 30rpx;
					color: #A18353;
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.foot {
				margin-top: 24rpx;
				width: 100%;
				height: 84rpx;
				background: linear-gradient(338deg, #FF6200 0%, #FF9D4F 100%);
				border-radius: 12rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: bold;
				color: #fff;
			}

		}
	}
	
	.vote-detail-top-main1{
		display: flex;
		align-items: center;
		justify-content: space-around;
		height:22px;
		line-height: 22px;
		.vote-detail-top-main-text{
			position: relative;
			top: 0;
			left: 38rpx;
		}
		
		&::before,&::after{
			content: " ";
			height: 0.5px;
			width: 80rpx;
			background-color: rgba(0,0,0,0.2);
		}
		
		>view{
			position: relative;
			left: -8rpx;
			width: 256px;
			font-size: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			
			text{
				width: 22px;
				margin-left: 15px;
				height:inherit;
				line-height: inherit;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 3px;
				background-color: #000;
				color: #fff;
				&::before{
					content: ":";
					width: 0px;
					line-height: inherit;
					background-color: transparent;
					color: rgba(0,0,0,0.7);
					transform: translateX(-11px);
				}
				&:first-child::before{
					content: "";
				}
				&:nth-child(1){
					margin-left: 15px;
				}
			}
			
		}
		
		
	}
</style>