v2.0.0首页修改

App.vue

@@ -88,6 +88,11 @@
 		-webkit-line-clamp: 1;
 	}
 	
+	@font-face {
+	    font-family: 'YouSheBiaoTiHei';
+	    src: url('https://mp-public-test-1307117429.cos.ap-shanghai.myqcloud.com/YouSheBiaoTiHei.ttf');
+	}
+	
 	// 只有在app.vue里面定义的keyframes才能在style里面使用
 	@keyframes moveLeft {
 		0% {

pages.json

@@ -1,6 +1,9 @@
 {
 	"pages": [{
-			"path": "pages/index/index"
+			"path": "pages/index/index",
+			"style": {
+				"navigationBarTextStyle": "white"
+			}
 		},
 		{
 			"path": "pages/core/index"

pages/index/index.vue

@@ -1,78 +1,126 @@
 <template>
 	<view>
-		<!-- 非H5撑高元素 -->
-		<!-- <view class="status_bar"></view> -->
 		<view class="box">
-			<view class="box-top">
-				<view class="box-top-action">
-					<view class="box-top-action-item" @click="toPrize">
-						<view class="flex box-top-action-item-cir">
-							<image src="../../static/icon/index_prize.png" mode=""></image>
+			<view class="index" :style="{ top: statusHeight + 'px' }">
+				<view class="barrage">
+					<!-- 中奖信息轮播 -->
+					<swiper class="barrage-swiper" :interval="2000" :autoplay="true" :vertical="true" :circular="true">
+						<swiper-item v-for="(item, index) in prizeNewsListOne" :key="index">
+							<view class="barrage-swiper-item flex">
+								<view class="barrage-swiper-item-content flex">
+									<image :src="item.avatar" mode="" />
+									<view class="title ells-one">{{ item.nickName }} {{ item.type == 1 ? '刮出了' : '兑换了' }} {{ item.prizeInfo }}</view>
+								</view>
+							</view>
+						</swiper-item>
+					</swiper>
+				</view>
+				
+				<!-- 查看规则 -->
+				<view class="rule">
+					<view class="rule-content flex" @click="toRule">
+						<image src="../../static/index/index_tip.png" mode=""></image>
+						<text>查看规则</text>
+					</view>
+				</view>
+				
+				<!-- 盲票轮播 -->
+				<view class="ticket">
+					<swiper class="ticket-swiper" :current="ticketIndex" :autoplay="false" :circular="true" @change="changeTicket">
+						<swiper-item v-for="(item, index) in list" :key="index">
+							<view class="ticket-swiper-item flex">
+								<image class="box" src="../../static/index/index_ticket.png" mode="scaleToFill"></image>
+								<image class="prize" src="../../static/index/index_prize.png" mode="scaleToFill"></image>
+							</view>
+						</swiper-item>
+					</swiper>
+				</view>
+				
+				<!-- 投诉建议 -->
+				<view class="proposal flex">
+					<view class="proposal-time flex">
+						<image src="../../static/index/index_time_top.png" mode="scaleToFill"></image>
+						<view class="time">
+							<u-count-down :time="30 * 60 * 60 * 1000" format="HH:mm:ss:SSS" autoStart millisecond></u-count-down>
 						</view>
-						<view class="box-top-action-item-txt">奖品库</view>
+					</view>
+					<view class="proposal-progress">
+						<u-line-progress :percentage="percentage" height="3" :showText="false" inactiveColor="rgba(255, 255, 255, .36)" activeColor="#fff" />
+					</view>
+					<view class="proposal-tip" @click="contactService">
+						<image src="../../static/index/index_tip_bg.png" mode=""></image>
+						<text>投诉建议</text>
 					</view>
 				</view>
-				<view class="box-top-tip">
-					<view class="flex box-top-tip-txt" @click="toRule">
-						<text>规则说明</text>
+				
+				<!-- 中奖概率 -->
+				<view class="chance flex">
+					<view class="chance-title">中奖概率:</view>
+					<view class="chance-content flex">
+						<image src="../../static/index/index_chance_1.png" mode="scaleToFill"></image>
+						<text>0.1%</text>
+					</view>
+					<view class="chance-content flex">
+						<image src="../../static/index/index_chance_2.png" mode="scaleToFill"></image>
+						<text>10.0%</text>
 					</view>
-					<view class="flex box-top-tip-txt" @click="toTicket">
-						<text>所有盲票</text>
+					<view class="chance-content flex">
+						<image src="../../static/index/index_chance_3.png" mode="scaleToFill"></image>
+						<text>10.0%</text>
+					</view>
+					<view class="chance-content flex">
+						<image src="../../static/index/index_chance_4.png" mode="scaleToFill"></image>
+						<text>10.0%</text>
 					</view>
 				</view>
-				<!-- 弹幕 -->
-				<view class="box-top-news">
-					<prize-barrage :barrageList="prizeNewsListOne" :time="20" v-if="prizeNewsListOne.length" />
-					<prize-barrage :barrageList="prizeNewsListTwo" :time="15" v-if="prizeNewsListTwo.length" />
+				
+				<!-- 盲票名称轮播 -->
+				<view class="ticket-title" flex>
+					<swiper class="ticket-title-swiper flex" :current="ticketTitleIndex" previous-margin="110px" next-margin="110px" :autoplay="false" :circular="true" @change="changeTicketTitle">
+						<swiper-item v-for="(item, index) in list" :key="index">
+							<view class="ticket-title-swiper-item flex" :class="{ 'action': ticketTitleIndex == index }">
+								<text>爆款必抽</text>
+							</view>
+						</swiper-item>
+					</swiper>
 				</view>
-			</view>
-			<view class="box-ticket">
-				<!-- 盲票 -->
-				<swiper class="image-container" circular :vertical="true" :current="currentIndex" :autoplay="false"
-					@change="changeTicket" v-if="ticketList.length">
-					<swiper-item class="swiper-item" v-for="(item, index) in ticketList" :key="item.picUrl"
-						@click="toTicketBox">
-						<view class="flex image-wrap">
-							<image class="img" :src="item.picUrl" lazy-load mode=""></image>
-						</view>
-					</swiper-item>
-				</swiper>
-				<swiper class="image-container" circular :vertical="true" :autoplay="false" v-else>
-					<swiper-item class="swiper-item">
-						<view class="flex image-wrap">
-							<image class="img" src="../../static/icon/ticket_index.png" lazy-load mode=""></image>
-						</view>
-					</swiper-item>
-				</swiper>
-				<!-- 奖品 -->
-				<view class="prize-goods">
-					<view class="prize-goods-item" :style="{ animation: activeAnimation }">
-						<view class="flex image-wrap" v-for="(item, index) in prizeList" :key="index" @click="toPrizeGoods(item)">
-							<image class="img" :src="item.picUrl" lazy-load mode="aspectFill"></image>
+				
+				<!-- 刮开盲票 -->
+				<view class="ticket-btn flex">
+					<view class="ticket-btn-left flex">
+						<image src="../../static/index/index_btn_left.png" mode="scaleToFill"></image>
+						<view class="ticket-btn-left__title">试玩</view>
+					</view>
+					<view class="ticket-btn-center flex">
+						<image src="../../static/index/index_btn.png" mode="scaleToFill"></image>
+						<view class="ticket-btn-center-wrap flex">
+							<view class="ticket-btn-center-wrap__title">刮开<br />盲票</view>
 						</view>
 					</view>
-					<view class="prize-goods-item" :style="{ animation: activeAnimation }">
-						<view class="flex image-wrap" v-for="(item, index) in prizeList" :key="index" @click="toPrizeGoods(item)">
-							<image class="img" :src="item.picUrl" lazy-load mode="aspectFill"></image>
+					<view class="ticket-btn-right flex" @click="toTicket">
+						<view class="ticket-btn-right__image flex">
+							<image src="../../static/index/index_btn_right_cir.png" mode="scaleToFill"></image>
+							<image src="../../static/index/index_btn_cir_center.png" mode="scaleToFill"></image>
 						</view>
+						<view class="ticket-btn-right__title">更多盲票</view>
 					</view>
 				</view>
-				<!-- 盲票背景 -->
-				<image class="box-img" src="../../static/icon/index_box.png" mode="" @click="toTicketBox"></image>
-				<!-- 向左箭头 -->
-				<image class="index-left" src="../../static/icon/index_left.png" mode="" @click="ticketLeft"></image>
-				<!-- 向右箭头 -->
-				<image class="index-right" src="../../static/icon/index_right.png" mode="" @click="ticketRight"></image>
-			</view>
-			<!-- 立即开刮 -->
-			<view class="flex box-ticket-btn">
-				<view class="box-ticket-btn-content" @click="payment">
-					<image src="../../static/icon/index_btn.png" mode=""></image>
-					<view class="flex title">
-						<text>{{ payInfo.salePrice / 100 }}元立即开刮</text>
+				
+				<!-- 盲票价格 -->
+				<view class="ticket-price flex">
+					<view class="ticket-price-checkbox flex">
+						<image src="../../static/index/index_price_checkout.png" mode="scaleToFill"></image>
+					</view>
+					<view class="ticket-price-amt flex">
+						<view class="num">49.00</view>
+						<view class="txt">元/个</view>
+					</view>
+					<view class="ticket-price-discount flex">
+						<view class="num">原价￥68.00元</view>
 					</view>
 				</view>
 			</view>
+			
 		</view>
 		<!-- tabbar组件 -->
 		<custom-tab-bar :activeValue="'index'" />
@@ -104,6 +152,12 @@
 				payInfo: {}, // 支付详情
 				currentIndex: 0, // 盲票选中下标
 				activeAnimation: 'moveLeft 10s linear infinite normal', // 奖品动画
+
+				statusHeight: 20,
+				ticketIndex: 0, // 盲票选中下标
+				ticketTitleIndex: 0, // 盲票标题选中下边
+				list: [1,2,3,4,5],
+				percentage: 0,
 			};
 		},
 		onLoad(opthios) {
@@ -118,6 +172,15 @@
 				uni.setStorageSync('shareUid', this.sceneArr[0])
 				uni.setStorageSync('shareType', this.sceneArr[1])
 			}
+			
+			// #ifdef MP-WEIXIN
+			const res = uni.getMenuButtonBoundingClientRect()
+			this.statusHeight = res.top //胶囊距离顶部
+			// #endif
+			
+			let num = Math.round(100 / this.list.length)
+			this.percentage = num
+
 			this.getList()
 		},
 		onShow(opthios) {
@@ -126,6 +189,45 @@
 
 		},
 		methods: {
+			// 切换盲票
+			changeTicket({ detail }) {
+				console.log(detail);
+				this.ticketIndex = detail.current
+				this.ticketTitleIndex = detail.current
+				this.setNum(detail.current)
+			},
+			
+			// 切换盲票名称
+			changeTicketTitle({ detail }) {
+				console.log(detail);
+				this.ticketIndex = detail.current
+				this.ticketTitleIndex = detail.current
+				this.setNum(detail.current)
+			},
+			
+			setNum(index) {
+				let num = Math.round(100 / this.list.length)
+				if (index == 0) {
+					this.percentage = uni.$u.range(0, 100, num)
+				} else if (index == this.list.length - 1) {
+					this.percentage = uni.$u.range(0, 100, 100)
+				} else {
+					this.percentage = uni.$u.range(0, 100, num * (index + 1))
+				}
+			},
+			
+			// 投诉建议
+			contactService() {
+				// #ifdef MP-WEIXIN
+				wx.openCustomerServiceChat({
+					extInfo: {
+						url: 'https://work.weixin.qq.com/kfid/kfc36c0d90028adbd24'
+					},
+					corpId: 'ww02da63d80c66284b',
+				})
+				// #endif
+			},
+			
 			// 获取盲票列表
 			getList() {
 				uni.showLoading({
@@ -194,7 +296,7 @@
 						// 根据奖品数量动态设置动画时间
 						let time = Math.ceil(this.prizeList.length / 5 * 10)
 						this.activeAnimation = `moveLeft ${ time }s linear infinite normal`,
-						this.payInfo = this.ticketList[this.currentIndex]
+							this.payInfo = this.ticketList[this.currentIndex]
 					}
 				}).catch(() => {
 					uni.hideLoading();
@@ -233,11 +335,13 @@
 				this.payShow = false
 			},
 
-			// 盲票选中改变
-			changeTicket({ detail }) {
-				this.currentIndex = detail.current
-				this.getPrize(this.ticketList[this.currentIndex].boxId)
-			},
+			// // 盲票选中改变
+			// changeTicket({
+			// 	detail
+			// }) {
+			// 	this.currentIndex = detail.current
+			// 	this.getPrize(this.ticketList[this.currentIndex].boxId)
+			// },
 
 			changeList() {
 				let data = {
@@ -373,183 +477,474 @@
 
 <style lang="scss" scoped>
 	.box {
+		position: relative;
 		width: 100%;
 		height: calc(100vh - 50px);
-		background: url(https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/index_bg.jpeg) center center;
-
-		&-top {
-			position: relative;
-			display: flex;
-			justify-content: space-between;
-			padding: 130rpx 0 0 40rpx;
-
-			&-action {
-				z-index: 20;
-				display: flex;
-
-				&-item {
-					margin-right: 76rpx;
+		background: url(https://mp-public-test-1307117429.cos.ap-shanghai.myqcloud.com/front_bk.png) center center no-repeat;
+		background-size: 100vw calc(100vh - 50px);
+		
+		.index {
+			position: absolute;
+			width: 100%;
+		}
+	}
 
-					&-cir {
-						width: 72rpx;
-						height: 72rpx;
-						background-color: #FFC320;
+	// 中奖信息
+	.barrage {
+		width: 518rpx;
+		height: 84rpx;
+		background: linear-gradient(90deg, #FFD220, #FFF7A2);
+		border-radius: 42rpx;
+		margin-bottom: 16rpx;
+		margin-left: 34rpx;
+		
+		&-swiper {
+			width: 100%;
+			height: 100%;
+			border-radius: 42rpx;
+			overflow: hidden;
+			
+			&-item {
+				width: 100%;
+				height: 100%;
+				
+				&-content {
+					display: flex;
+					align-items: center;
+					width: 510rpx;
+					height: 76rpx;
+					
+					image {
+						width: 66rpx;
+						height: 66rpx;
 						border-radius: 50%;
-						margin-bottom: 14rpx;
-
-						image {
-							width: 40rpx;
-							height: 36rpx;
-						}
+						margin-right: 14rpx;
 					}
-
-					&-txt {
-						font-size: 24rpx;
-						text-align: center;
-						color: #FFFFFF;
+					
+					.title {
+						flex: 1;
+						font-size: 26rpx;
+						font-family: PingFang SC;
+						font-weight: 500;
+						color: #333333;
 					}
 				}
 			}
-
-			&-tip {
-				z-index: 20;
-				display: flex;
-				flex-direction: column;
-				align-items: flex-end;
-				justify-content: flex-end;
-
-				&-txt {
-					font-size: 24rpx;
-					width: 152rpx;
-					height: 48rpx;
-					background-color: #FFC320;
-					border-radius: 24rpx 0 0 24rpx;
-					margin-top: 40rpx;
-				}
-
-				&-txt:last-child {
-					background-color: #FFFFCC;
-				}
+		}
+	}
+	
+	// 查看规则
+	.rule {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		height: 34rpx;
+		padding-right: 34rpx;
+		margin-bottom: 24rpx;
+		
+		&-content {
+			image {
+				width: 34rpx;
+				height: 34rpx;
+				margin-right: 14rpx;
 			}
-
-			&-news {
-				position: absolute;
-				left: 0;
-				bottom: 0;
-				z-index: 10;
-				width: 100vw;
+			
+			text {
+				font-size: 40rpx;
+				font-family: 'YouSheBiaoTiHei';
+				font-weight: 400;
+				color: #FFFFFF;
 			}
 		}
-
-		&-ticket {
-			position: relative;
-			margin: 40rpx 0 0;
-
-			.image-container {
-				width: 750rpx;
-				height: 40vh;
-
-				.swiper-item {
-					position: relative;
-					width: 61vw;
-					height: 40vh;
-					display: flex;
-					justify-content: center;
-					align-items: center;
+	}
+	
+	// 盲票
+	.ticket {
+		height: 36vh;
+		
+		&-swiper {
+			height: 100%;
+			
+			&-item {
+				position: relative;
+				height: 100%;
+				
+				.box {
+					position: absolute;
+					bottom: 0;
+					width: 75vw;
+					height: 75%;
 				}
-
-				.image-wrap {
-					position: relative;
-					width: 61vw;
-					height: 40vh;
-
-					.img {
-						width: 61vw;
-						height: 40vh;
-					}
+				
+				.prize {
+					position: absolute;
+					top: 0;
+					width: 85vw;
+					height: 75%;
+					animation: movePrize 2s linear infinite;
 				}
 			}
-
-			.prize-goods {
-				display: flex;
-				width: 100vw;
-				height: 13vh;
-				margin-top: 2vh;
-				overflow: hidden;
-
-				.prize-goods-item {
-					display: flex;
-					height: 13vh;
-
-					.image-wrap {
-						width: 160rpx;
-						height: 13vh;
-						border-radius: 20rpx;
-						background: linear-gradient(0deg, #e6e6e6, #FFFFFF);
-						margin-right: 60rpx;
-
-						.img {
-							width: 100%;
-							height: 76%;
-						}
-					}
+		}
+	}
+	
+	// 投诉建议
+	.proposal {
+		position: relative;
+		height: 66rpx;
+		margin-bottom: 30rpx;
+		
+		&-time {
+			position: absolute;
+			left: 30rpx;
+			bottom: 0;
+			flex-direction: column;
+			align-items: flex-start;
+			
+			image {
+				width: 140rpx;
+				height: 78rpx;
+				margin-bottom: 12rpx;
+				animation: scaleTime 3s linear infinite;
+			}
+			
+			.time {
+				animation: moveTime 0.5s linear infinite;
+				
+				/deep/ .u-count-down__text {
+					line-height: 30rpx;
+					font-size: 30rpx;
+					font-family: YouSheBiaoTiHei;
+					font-weight: 400;
+					color: #FFFFFF;
 				}
 			}
-
-			.index-left {
+		}
+		
+		&-progress {
+			position: absolute;
+			bottom: 0;
+			width: 140rpx;
+		}
+		
+		&-tip {
+			display: flex;
+			align-items: center;
+			position: absolute;
+			right: 0;
+			bottom: 0;
+			width: 212rpx;
+			height: 66rpx;
+			
+			image {
 				position: absolute;
-				width: 100rpx;
-				height: 100rpx;
-				top: 380rpx;
-				left: 10rpx;
-				z-index: 20;
+				right: 0;
+				bottom: 0;
+				width: 212rpx;
+				height: 66rpx;
 			}
-
-			.index-right {
+			
+			text {
 				position: absolute;
-				width: 100rpx;
-				height: 100rpx;
-				top: 380rpx;
-				right: 10rpx;
-				z-index: 20;
+				right: 16rpx;
+				font-size: 40rpx;
+				font-family: YouSheBiaoTiHei;
+				font-weight: 400;
+				color: #FFFFFF;
 			}
-
-			.box-img {
+		}
+	}
+	
+	// 中奖概率
+	.chance {
+		height: 44rpx;
+		margin: 0 34rpx 26rpx;
+		background-color: rgba(000, 000, 000, .36);
+		border-radius: 22rpx;
+		color: #FFFFFF;
+		font-family: YouSheBiaoTiHei;
+		font-size: 14px;
+		
+		&-content {
+			margin-right: 16rpx;
+			
+			image {
+				width: 44rpx;
+				height: 44rpx;
+			}
+		}
+		
+		&-content:last-child {
+			margin: 0;
+		}
+	}
+	
+	// 盲票名称轮播
+	.ticket-title {
+		height: 66rpx;
+		padding: 0 34rpx;
+		
+		&-swiper {
+			width: calc(100vw - 34px);
+			height: 100%;
+			
+			&-item {
+				height: 100%;
+				background: rgba(255, 255, 255, .16);
+				margin: 0 17rpx;
+				color: #fff;
+				font-size: 34rpx;
+			}
+			
+			.action {
+				background: #FFAE00;
+				box-shadow: 0px 3px 3px 0px rgba(220, 145, 107, 0.57);
+			}
+		}
+	}
+	
+	// 刮开盲票
+	.ticket-btn {
+		justify-content: space-between;
+		height: 20vh;
+		padding: 0 30rpx;
+		
+		&-left {
+			flex-direction: column;
+			
+			image {
+				width: 142rpx;
+				height: 142rpx;
+				margin-bottom: 16rpx;
+			}
+			
+			&__title {
+				line-height: 30rpx;
+				font-size: 30rpx;
+				font-family: YouSheBiaoTiHei;
+				font-weight: 400;
+				color: #FFFFFF;
+			}
+		}
+		
+		&-center {
+			position: relative;
+			flex-direction: column;
+			height: 100%;
+			
+			image {
+				width: 360rpx;
+				height: 100%;
+			}
+			
+			&-wrap {
 				position: absolute;
-				top: 0;
-				z-index: 10;
-				width: 100vw;
-				height: 70vw;
+				animation: scaleBtn 1.5s linear infinite;
+				
+				&__title {
+					font-size: 84rpx;
+					font-family: YouSheBiaoTiHei;
+					font-weight: 400;
+					color: #FFFFFF;
+					line-height: 72rpx;
+					animation: shadowBtn 1.5s linear infinite;
+				}
 			}
 		}
-
-		&-ticket-btn {
-			margin-top: 30rpx;
-
-			&-content {
+		
+		&-right {
+			flex-direction: column;
+			
+			&__image {
 				position: relative;
-				width: 420rpx;
+				width: 142rpx;
 				height: 142rpx;
-
-				image {
-					width: 420rpx;
+				margin-bottom: 16rpx;
+				
+				image:first-child {
+					width: 142rpx;
 					height: 142rpx;
+					margin-bottom: 16rpx;
 				}
-
-				.title {
+				
+				image:last-child {
 					position: absolute;
-					top: 0;
-					width: 100%;
-					height: 142rpx;
-
-					text {
-						font-size: 56rpx;
-						font-weight: bold;
-						color: #C44906;
-						text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.76);
-					}
+					width: 60rpx;
+					height: 60rpx;
+					margin-bottom: 16rpx;
 				}
 			}
+			
+			&__title {
+				line-height: 30rpx;
+				font-size: 30rpx;
+				font-family: YouSheBiaoTiHei;
+				font-weight: 400;
+				color: #FFFFFF;
+			}
+		}
+	}
+	
+	// 盲票价格
+	.ticket-price {
+		height: 44rpx;
+		
+		&-checkbox {
+			width: 44rpx;
+			height: 44rpx;
+			background-color: #fff;
+			border-radius: 50%;
+			overflow: hidden;
+			margin-right: 20rpx;
+			
+			image {
+				width: 44rpx;
+				height: 44rpx;
+			}
+		}
+		
+		&-amt {
+			height: 44rpx;
+			font-family: YouSheBiaoTiHei;
+			font-weight: 400;
+			align-items: flex-end;
+			color: #FFFFFF;
+			margin-right: 20rpx;
+			
+			.num {
+				font-size: 56rpx;
+				line-height: 40rpx;
+			}
+			
+			.txt {
+				line-height: 36rpx;
+				font-size: 40rpx;
+			}
+		}
+		
+		&-discount {
+			height: 44rpx;
+			align-items: flex-end;
+			
+			.num {
+				line-height: 24rpx;
+				font-size: 24rpx;
+				text-decoration: line-through;
+			}
+		}
+	}
+	
+	// 奖品移动动画
+	@keyframes movePrize {
+		0% {
+			transform: translate(0, 10px)
+		}
+	
+		25% {
+			transform: translate(0, 5px)
+		}
+	
+		50% {
+			transform: translate(0, 0px)
+		}
+	
+		75% {
+			transform: translate(0, 5px)
+		}
+	
+		100% {
+			transform: translate(0, 10px)
+		}
+	}
+	
+	// 倒计时移动动画
+	@keyframes moveTime {
+		0% {
+			transform: translate(2px, 0)
+		}
+	
+		25% {
+			transform: translate(0, 0)
+		}
+	
+		50% {
+			transform: translate(1px, 0)
+		}
+	
+		75% {
+			transform: translate(0, 0)
+		}
+	
+		100% {
+			transform: translate(2px, 0)
+		}
+	}
+	
+	// 放大缩小动画
+	@keyframes scaleTime {
+		0% {
+			transform: scale(1.05)
+		}
+	
+		25% {
+			transform: scale(1.02)
+		}
+	
+		50% {
+			transform: scale(0.9)
+		}
+	
+		75% {
+			transform: scale(1.02)
+		}
+	
+		100% {
+			transform: scale(1.05)
+		}
+	}
+	
+	// 刮开刮票呼吸动画
+	@keyframes scaleBtn {
+		0% {
+			transform: scale(1.04)
+		}
+	
+		25% {
+			transform: scale(1.02)
+		}
+	
+		50% {
+			transform: scale(1)
+		}
+	
+		75% {
+			transform: scale(1.02)
+		}
+	
+		100% {
+			transform: scale(1.04)
+		}
+	}
+	
+	// 刮开刮票阴影动画
+	@keyframes shadowBtn {
+		0% {
+			text-shadow: 2px -2px 3px #fff;
+		}
+	
+		25% {
+			text-shadow: none;
+		}
+	
+		50% {
+			text-shadow: none;
+		}
+		
+		75% {
+			text-shadow: none;
+		}
+	
+		100% {
+			text-shadow: 2px -2px 3px #fff;
 		}
 	}
 </style>