双十一活动介绍 双十一抽奖转盘 双十一中奖名单

pages.json

@@ -964,6 +964,27 @@
         	{
         		"navigationBarTitleText" : ""
         	}
+        },
+        {
+        	"path" : "pages/user/doubleElevenIntroduce",
+        	"style" : 
+        	{
+        		"navigationBarTitleText" : ""
+        	}
+        },
+        {
+        	"path" : "pages/user/doubleElevenLottery",
+        	"style" : 
+        	{
+        		"navigationBarTitleText" : ""
+        	}
+        },
+        {
+        	"path" : "pages/user/doubleElevenInWinnerList",
+        	"style" : 
+        	{
+        		"navigationBarTitleText" : ""
+        	}
         }
     ],
 	"globalStyle": {

pages/user/doubleElevenInWinnerList.vue

@@ -0,0 +1,299 @@
+<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: 16rpx 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;
+					.img{
+						width: 144rpx;
+						height: 144rpx;
+						position: absolute;
+						top: -16rpx;
+						left: 0;
+						img{
+							width: 100%;
+							height: 100%;
+						}
+					}
+				}
+				.listContent{
+					margin-top: 26rpx;
+					border-radius: 8rpx;
+					background-color: #fff;
+					display: flex;
+					align-items: top;
+					justify-content: center;
+					
+					.name,.account{
+						.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>

pages/user/doubleElevenIntroduce.vue

@@ -0,0 +1,130 @@
+<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="introduce">
+			<view class="item">
+				<view class="title">
+					活动时间：
+				</view>
+				<view class="value">
+					2024 年11 月10日至2024年11月12日
+				</view>
+				
+			</view>
+			<view class="item">
+				<view class="title">
+					活动对象：
+				</view>
+				<view class="value">
+					优电联盟注册会员
+				</view>
+				
+			</view>
+			<view class="item">
+				<view class="title">
+					活动内容：
+				</view>
+				<view class="value">
+<p>					1、2024 年 11 月10 日-11 月12 日，凡使用快充充电的平台用户均享受服务费7.5折优惠（电费、停车费及占桩费据实结算）。 </p>
+<p>					2、活动期间，凡使用快充充电达 30 度（含）以上的用户，有机会参加服务费名单抽奖。 </p>
+					<p>3、活动结束后3个工作日内进行抽奖，用户参与点击抽奖，奖品为服务费免单券一张，数量待定。  </p>
+				</view>
+				
+			</view>
+			<view class="item">
+				<view class="title">
+					活动场站：
+				</view>
+				<view class="value">
+					优电联盟所有站点
+				</view>
+				
+			</view>
+			<view class="item">
+				<view class="title">
+					活动内容：
+				</view>
+				<view class="value" 	 >
+					<p>1、本活动以充电开始时间为准。</p>
+					<p>2、本次活动仅适用优电联盟平台会员，不包含快电、新电途用户。</p>
+					<p>3、本次活动最终解释权归湖北鹏育优电新能源科技有限公司所有。</p>
+				</view>
+				
+			</view>
+		</view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	page{
+		background-color: #DD3032;
+		padding-bottom: 100rpx;
+	}
+	.cover{
+		width:100%;
+		height: 456rpx;
+		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%);
+	}
+	.introduce{
+		position: relative;
+		
+		border-radius: 20px;
+		background-color: rgba(255, 255, 255, 1);
+		padding: 40rpx 20rpx 8rpx;
+		margin:-48rpx 24rpx 24rpx;
+		.item{
+			margin-bottom: 40rpx;
+			.title{
+				color: rgba(16, 16, 16, 1);
+				font-size: 32rpx;
+			}
+			.value{
+				color: rgba(51, 51, 51, 1);
+				margin-top: 16rpx;
+				p{
+					margin-top: 8rpx;
+				}
+			}
+		}
+	}
+
+</style>

pages/user/doubleElevenLottery.vue

@@ -0,0 +1,107 @@
+<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>