JP-ChargeTeam51/pages/user/doubleElevenInWinnerList.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="titleBox">
			<img class="cover2" src="@/assets/img/cover2.png" alt="" />
			<view class="title">
				<img src="@/assets/img/winnerList.png" alt="" />
			</view>
			<view class="title2">
				充电七五折 快充抽免单
			</view>
			<view class="date">
				2024.11.10~2024.11.12
			</view>

		</view>
       <!-- <view class="" style="background-color: #fff; z-index: 999; position: relative; margin-top: -220rpx;">
        	<view class="content" v-for="item in 20" >
        		11
        	</view>
        </view> -->
		<view class="listBox" >
			
			<view class="head">
				<view class="head2">
					
					<view class="contentHead">
								
					</view>
				</view>
				
				
			</view>
			
			<view class="content">
				
				
				<view class="list">
					<view class="title">
						服务费免单券 ×1
						<view class="img">
							<img src="@/assets/img/goldMedal.png" alt="" />
						</view>
					</view>
					<view class="listContent">
						<view class="name">
							<view class="title">
								昵称
							</view>
							<view class="value">
								<view class="item"v-for="item in 4" >
									充电达人11
								</view>
							</view>
						</view>
						<view class="account">
							<view class="title">
								账号
							</view>
							<view class="value">
								<view class="item"v-for="item in 4" >
									187****5124
								</view>
							</view>
						</view>
					</view>
				</view>
				
			</view>

		</view>
		

      <view class="hint">
      	活动最终解释权归湖北鹏育优电新能源科技有限公司所有
      </view>
	</view>
</template>

<script>
	export default {

		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #DD3032;
		padding-bottom: 100rpx;

	}
	

	.top {

        height: 620rpx;
		.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%);
		}
	}


	.titleBox {
       
		
		position: relative;
		margin-top: -248rpx;
		background: linear-gradient(180deg, rgba(221, 48, 50, 0) 0%, rgba(221, 48, 50, 1) 76%);

		.title {
			width: 596rpx;
			height: 160rpx;
			color: rgba(255, 255, 215, 1);
			font-size: 18px;
			position: absolute;
			top: -24rpx;
			left: 50%;
			transform: translateX(-50%);

			img {
				width: 100%;
				height: 100%;
			}

		}

		.title2 {
			width: 478rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 50px;
			background: linear-gradient(90deg, rgba(255, 61, 0, 1) 0%, rgba(255, 79, 63, 1) 100%);
			text-align: center;
			position: absolute;
			top: 140rpx;
			left: 50%;
			transform: translateX(-50%);
			color: rgba(255, 255, 215, 1);
			font-size: 40rpx;
		}

		.date {
			position: absolute;
			top: 232rpx;
			left: 50%;
			transform: translateX(-50%);
			color: rgba(255, 255, 215, 1);
			font-size: 32rpx;
		}

		.cover2 {
			width: 100%;
			height: 100%;


		}

		
	}

	.listBox {
		position: relative; 
		margin-top: -220rpx;
		.head {
			width: 100%;
			height: 144rpx;
			border-radius: 16px 16px 0px 0px;
			background: linear-gradient(180deg, rgba(239, 121, 66, 1) 0%, rgba(221, 48, 50, 1) 100%);
			// border: 1px solid rgba(252, 163, 131, 1);
			display: flex;
			align-items: center;
			justify-content: center;
			
		}

		.head2 {
            position: relative;
			width: 702rpx;
			height: 56rpx;
			border-radius: 8px;
			background-color: rgba(145, 17, 18, 1);
			text-align: center;
			border: 6px solid rgba(206, 38, 37, 1);
			
		}
		.contentHead {
			width: 678rpx;
			height: 36rpx;
			background: linear-gradient(180deg, rgba(187, 58, 60, 1) 0%, rgba(255, 255, 255, 1) 100%);
		}

		.content {
			width: 678rpx;
			border-radius: 0px 0px 12px 12px;
			background-color: rgba(255, 255, 255, 1);
			padding: 24rpx 0;
			margin: -54rpx auto 0;
            z-index: 999;
			position: relative;
			
			
			.list{
				border-radius: 8px 50px 8px 8px;
				background: linear-gradient(88.8deg, rgba(226,54,53,1) 1.5%,rgba(247,143,30,1) 99.88%);
				margin: 24rpx;
				padding: 8rpx;
				
				.title{
					color: rgba(255, 255, 255, 1);
					font-size: 36rpx;
					text-align: center;
					font-weight: bold;
					position: relative;
					padding-top:18rpx;
					.img{
						width: 144rpx;
						height: 144rpx;
						position: absolute;
						top: -16rpx;
						left: 0;
						img{
							width: 100%;
							height: 100%;
						}
					}
				}
				.listContent{
					margin-top: 26rpx;
					padding: 16rpx 0;
					border-radius: 8rpx;
					background-color: #fff;
					display: flex;
					align-items: center;
					justify-content: space-around;
					
					
					.name,.account{
						text-align: center;
						.title{
							color: rgba(119, 119, 119, 1);
							font-size: 24rpx;
							margin-top: 24rpx;
						}
						.value{
							color: rgba(51, 51, 51, 1);
							
							.item{
								width: 240rpx;
								
								line-height: 64rpx;
							}
						}
					}
				}
			}
		}
	}
	.hint{
		color: rgba(96, 2, 3, 1);
		
		font-size: 24rpx;
		
		text-align: center;
		margin-top: 20px;
	}
</style>