paopao/pages/index/compon/paopao-countdown.vue

<template>
	<!-- 倒计时和排名统计 -->
	<view class="djs-pm" v-show="isClose==false">
		<view class="djs flex">
			<view class="djs-tit">
				有奖竞猜即将开始
			</view>
			<view class="djs-time ">
				<view class="djs-time1" :class="{'xxx':isActive}">
					{{countdown_time}}
				</view>
				<!-- v-if="second>3||second==0" -->
				<!-- <view class="djs-time1 xxx" v-else>
					lalalalal
				</view> -->
			</view>
		</view>
		<view class="pm flex">
			<view class="pm-ear ear-left"></view>
			<view class="pm-ear ear-right"></view>
			<view class="pm-tit">
				近100期冠军数据统计
			</view>
			<view class="pm-list flex">
				<view class="pm-item" v-for="(pmItem, pmIndex) in list" :key="pmIndex">
					<view class="item-logo flex">
						<image :src="`../../static/img/ganme01/xdw0${pmIndex+1}.png`" mode="widthFix"></image>
					</view>
					<view class="item-num flex">
						<image src="../../../static/img/ganme01/win.png" mode="widthFix"></image>
						<text>
						{{pmItem.winNum}}
						</text>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: "paopao-countdown",
		props: {
			// 小动物列表
			list: {
				type: Array,
				default: []
			},
			// 是否倒计时已经结束
			isClose: {
				type: Boolean,
				default: false

			},
			// 倒计时结束时间
			downTime: {
				type: Number,
				default: '10086',
			},
		},
		data() {
			return {
				isActive: false, //倒计时动画
				countdown_time: '00:00',
			};
		},
		watch: {
			downTime(newValue, oldValue) {
				this.isActive = false;
				this.counTime();
			}
		},
		methods: {
			counTime() {
				//获取当前时间
				let data = new Date()
				let newTime = data.getTime()
				//获取结束时间
				// let end = this.downTime
				let end = this.downTime
				
				//时间差
				let leftTime = end - newTime
				if (leftTime <= 0) {
					return
				}
				//定义保存倒计时时间
				let m, s;
				if (leftTime >= 0) {
					// 分钟
					m = Math.floor(leftTime / 1000 / 60 % 60)
					// 秒数
					s = Math.floor(leftTime / 1000 % 60)
					// 当前秒数
					this.second = s
					this.la = m + s
					//倒计时赋值view
					this.countdown_time = `${m}:${s}`
					let timers = setTimeout(this.counTime, 1000)
					// 获取当前剩余时间
					const timeOut = Math.floor( leftTime/1000);
					if ( timeOut<= 3) {
						this.isActive = true;
						if(timeOut==0){
							setTimeout(() => {
								this.$emit('timeOut',true)
							}, 1000);
						}
						return this.countdown_time = `${s}`
						let timers = setTimeout(this.counTime, 1000)
					}
					//显示动态时间效果 
					if (s < 10) {
						return this.countdown_time = `${m}:0${s}`
						let timers = setTimeout(this.counTime, 1000)

					}
					if (m < 10) {
						return this.countdown_time = `0${m}:${s}`
						let timers = setTimeout(this.counTime, 1000)
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.djs-pm {
		pointer-events: none;
		position: fixed;
		z-index: 99999;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		padding-top: 300rpx;

		.djs {
			width: 297rpx;
			padding: 20rpx;
			background: #FFFCFF;
			border-radius: 30rpx;
			flex-direction: column;
			justify-content: center;
			margin: auto;

			.djs-tit {
				font-size: 19rpx;
				font-weight: bold;
				color: #FF2553;
				padding-bottom: 10rpx;
				padding-top: 0;

			}

			.djs-time {
				width: 257rpx;
				line-height: 78rpx;
				background: #F0486B;
				border-radius: 20rpx;
				font-size: 58rpx;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
			}

			.djs-time1 {}

			.xxx {


				position: relative;
				animation: mymove 1.2s;
				animation-iteration-count: infinite;

				/* Safari and Chrome */
				-webkit-animation: mymove 1s;
				-webkit-animation-iteration-count: infinite;
			}

			@keyframes mymove {
				from {
					font-size: 77rpx;
				}

				to {
					font-size: 0rpx;
				}
			}

			@-webkit-keyframes mymove

			/* Safari and Chrome */
				{
				from {
					font-size: 58rpx;
				}

				to {
					font-size: 0rpx;
				}
			}

			// .xxx:hover {

			// 	font-size: 30rpx;
			// 	-webkit-transform: rotate(180deg);
			// 	/* Chrome, Safari, Opera */
			// 	transform: rotate(180deg);
			// }
		}

		.pm {
			margin: 0 auto;
			width: 601rpx;
			height: 285rpx;
			background: linear-gradient(0deg, #FFD5DE, #FFFFFF);
			box-shadow: 0px 12rpx 15rpx 3rpx rgba(240, 72, 107, 0.29);
			border-radius: 20rpx;
			margin-top: 18rpx;
			position: relative;
			padding-top: 29rpx;
			flex-direction: column;
			justify-content: space-between;
			.pm-ear {
				width: 18rpx;
				height: 18rpx;
				background: #FFFCFF;
				border-radius: 8rpx 8rpx 0px 0px;
				position: absolute;
				top: -18rpx;
			}

			.ear-left {
				left: 232rpx;
			}

			.ear-right {
				right: 232rpx;
			}

			.pm-tit {
				flex-grow: 0;
				min-width: 300rpx;
				padding: 0 37rpx;
				line-height: 42rpx;
				background: #FFB310;
				box-shadow: 0px 7rpx 16rpx 0px rgba(255, 179, 16, 0.35);
				border-radius: 21rpx;
				font-size: 23rpx;
				font-weight: bold;
				color: #FFFFFF;
				margin: auto;
			}

			.pm-list {
				padding: 22rpx 17rpx 50rpx;
				width: 100%;
				.pm-item {
					width: 85rpx;
					.item-logo {
						width: 85rpx;
						height: 85rpx;
						background: #FFC1CE;
						border-radius: 50%;
						justify-content: center;
						image {
							width: 70rpx;
						}
					}

					.item-num {
						text-align: center;
						font-size: 23rpx;
						font-weight: bold;
						color: #7B3C0E;
						padding-top: 7rpx;
						justify-content: center;
						image {
							margin-right: 4rpx;
							width: 20rpx;
							height: 24rpx;
						}
					}
				}
			}
		}
	}
</style>