JP-ChargeTeam51/pages/user/doubleElevenLottery.vue

<template>
	<view>
		<ujp-navbar title="双11活动中奖名单"></ujp-navbar>
		<view class="top">
			<img class="cover" src="@/assets/img/topCover.png" alt="" />
			<img class="img1" src="@/assets/img/doubleEleven3x.png" alt="" />
			<img class="img2" src="@/assets/img/doubleElevenLogo.png" alt="" />
			
		</view>
		<view class="lotteryBox">
			<img class="cover2" src="@/assets/img/cover2.png" alt="" />
			<view class="chance">
				您有 1 次抽奖机会
			</view>
			<Lottery class="lottery" ></Lottery>
		</view>
		
		
	</view>
</template>

<script>
	import Lottery from '@/components/lottery/index.vue'
	export default {
		components: {
			Lottery
		},
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #DD3032;
		padding-bottom: 44rpx;
		
	}
	.top{
		
	
	.cover{
		width:100%;
		height:100%;
		position: relative;
		
	}
	 
	.img1{
		width: 100%;
		height: 556rpx;
		position: absolute;
		top: 88rpx;
		left: 50%;
		transform: translateX(-50%);
		
	}
	
	.img2{
		width: 594rpx;
		height: 268rpx;
		position: absolute;
		top: 168rpx;
		left: 50%;
		transform: translateX(-50%);
	}
	}
	
	
	.lotteryBox{
		margin-top: -248rpx;
		position: relative;
		background: linear-gradient(180deg, rgba(221,48,50,0) 0%,rgba(221,48,50,1) 76%);
		.chance{
			width: 402rpx;
			height: 72rpx;
			line-height: 72rpx;
			border-radius: 50px;
			background: linear-gradient(90deg, rgba(211,51,0,1) 0%,rgba(255,79,63,1) 53%,rgba(226,19,0,1) 100%);
			text-align: center;
			margin: 0 auto;
			color: rgba(255, 255, 215, 1);
			font-size: 18px;
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			
		}
		.cover2{
			width: 100%;
			height: 100%;
			
			
		}
		.lottery{
			margin-top: 160rpx;
		}
	}

</style>