首页

pages/index/index.vue

@@ -3,15 +3,17 @@
 		<ujp-navbar title="包月卡购买" :show="false" ></ujp-navbar>
 		
 		<!-- 头部图片 -->
+	<view class="background">
 		<view class="banner">
-			 <u-swiper  bg-color="#fff" 
-			 :img-mode="'scaleToFill'" height="320" 
-			 :list="bannerList" @click="clickBanner"  :name="'picUrl'" >
-			</u-swiper> 
-			
-<!-- 			<img :src="indexLogo?indexLogo:'static/img/banner1.jpg'" alt="">
- -->			
-		</view>
+					 <u-swiper  bg-color="#fff" 
+					 :img-mode="'scaleToFill'" height="320" 
+					 :list="bannerList" @click="clickBanner"  :name="'picUrl'" >
+					</u-swiper> 
+					
+		<!-- 			<img :src="indexLogo?indexLogo:'static/img/banner1.jpg'" alt="">
+		 -->			
+				</view>
+	
 
 		<!-- 选项列表 -->
 		<view class="option-list">
@@ -54,7 +56,16 @@
 			</view>
 
 		</view>
-
+		<!-- 充值活动 -->
+		<view class=" top-up" v-if="activityList.length > 0 && !activityListShow">
+		<view class="card-box">
+			
+			<view class="card" v-for="(item,index) in activityList" :key="item.id"
+				@click="rechargeActivity(item)">
+				<img :src="item.picUrl" alt="">
+			</view>
+		</view>
+</view>
 
 		<u-modal v-model="showOss"  class="showOss"
 		    
@@ -98,18 +109,17 @@
 			</view>
 		</u-mask>
 
-		<view style="height:80px"></view>
+	
 
 		
-		<!-- 充值活动 -->
-		<view class=" top-up" v-if="activityList.length > 0 && !activityListShow">
-			<view class="top-up-title oldTextjp" oldstyle="font-size:20px;"><text class="line"></text>最新活动</view>
+		
+			<!-- <view class="top-up-title oldTextjp" oldstyle="font-size:20px;"><text class="line"></text>最新活动</view>
 			<view class="img-box">
 				<view class="img-1" v-for="(item,index) in activityList" :key="item.id"
 					@click="rechargeActivity(item)">
 					<img :src="item.picUrl" alt="">
 				</view>
-			</view>
+			</view> -->
 		</view>
 		<!-- 最新活动 -->
 		<view class=" top-up" v-if="activityList.length > 0 && activityListShow">
@@ -949,29 +959,32 @@
 	img {
 		width: 100%;
 		height: 100%;
+		
 	}
-
+     .background{
+		 background: linear-gradient(#D6EEDC,#FFFFFF );
+		 padding-top: 16px;
+	 }
 	.banner {
-		width: 100%;
-		height: 160px;
-
+		width: 91.4%;
+		margin: 0 auto ;
+		border-radius: 12px;
+		height: 120px;
+		overflow: hidden;
+         
 
 	}
 
 
 	// 选项列表
 	.option-list {
-		width: 91.4%;
+		
 		padding-top: 15px;
-		height: 90px;
+		
 		line-height: 20px;
 		border-radius: 8px;
 		text-align: center;
-		background-color: #fff;
-		position: absolute;
-		top: 150px;
-		left: 0;
-		right: 0;
+		
 		margin: auto;
 		display: flex;
 		justify-content: space-around;
@@ -989,6 +1002,9 @@
 				margin: auto;
 				color: #ffffff;
 			}
+			.text{
+				margin-top: 4px;
+			}
 
 		}
 
@@ -1002,140 +1018,7 @@
 		font-size: 16px;
 		color: rgba(119, 119, 119, 100);
 	}
-	/* .station {
-		width: 91.4%;
-		border-radius: 8px;
-		padding: 12px 0px 12px 11px;
-		
-		background-color: #fff;
-		margin: 8px auto 0;
-		// position: relative;
-
-		.img-box {
-			width: 100%;
-			height: 100%;
-			border-radius: 8px;
-			overflow: hidden;
-		}
-
-		img {
-			width: 100%;
-			height: 100%;
-
-		}
- 
-		.text {
-			width: 91.4%;
-			// position: absolute;
-			// top: 0;
-			// left: 20px;
-
-			// 头部
-			.station-title {
-				display: flex;
-				justify-content: space-between;
-
-				.title-left {
-					display: inline-block;
-					height: 20px;
-					width: 44px;
-					line-height: 20px;
-					border-radius: 50px;
-					background-color: rgba(133, 140, 255, 100);
-					color: rgba(255, 255, 255, 100);
-					font-size: 12px;
-					text-align: center;
-					font-family: Arial;
-				}
-
-				.title-right {
-					display: inline-block;
-					margin-left: 4px;
-					margin-top: 2px;
-					
-					height: 16px;
-					line-height: 16px;
-					color: #101010;
-					font-weight: 600;
-					font-size: 20px;
-					text-align: left;
-					font-family: AlibabaPuHui-regular;
-				}
-			}
-
-			// 价格
-			.station-price {
-				margin-top: 8px;
-				display: flex;
-               justify-content: space-between;
-				.price-left {
-					width: 40px;
-					height: 20px;
-					line-height: 20px;
-					color: rgba(255, 98, 0, 100);
-					font-size: 20px;
-					text-align: left;
-					font-family: Roboto-medium;
-				}
-
-				.price-right {
-					height: 20px;
-					
-					margin-left: 4px;
-					margin-top: 3px;
-					color: rgba(102, 102, 102, 100);
-					font-size: 14px;
-					text-align: left;
-					font-family: AlibabaPuHui-regular;
-				}
-
-    .free-conut{
-		color: #009143;
-	}
-			}
-			
-
-			// park
-			.park {
-				margin-top: 8px;
-				display: flex;
-		        justify-content: space-between;
-
-				.park-p {
-					
-					width: 20px;
-					height: 20px;
-					line-height: 12px;
-					text-align: center;
-					background-color: #00b962;
-					color: #fff;
-				}
-
-				.park-text {
-					
-					height: 20px;
-					line-height: 20px;
-					color: rgba(102, 102, 102, 100);
-					font-size: 14px;
-					text-align: left;
-					margin-left: 4px;
-					
-				}
-			}
-
-			// 数量
-			.count {
-				margin-top: 14px !important;
-				width: 91.4%;
-				display: flex;
-				justify-content: space-between;
-				white-space: nowrap;
-				overflow: hidden;
-
-			}
-		}
-
-	} */
+	
 
 // 附近站点改版
 .station{
@@ -1356,49 +1239,30 @@
 
 	//充值
 	.top-up {
-		// padding: 0 16px;	
-		width: 91.4%;
+		
+		
 		margin: 0 auto;
-		margin-top: 17px;
+		
 
 		.top-up-title {
 			color: rgba(16, 16, 16, 100);
 			font-size: 16px;
 		}
-
-		.img-box {
-			margin-top: 12px;
-			height: 146px;
+		.card-box{
 			display: flex;
 			justify-content: space-between;
-
-			.img-1 {
+			padding: 16px;
+			.card{
 				width: 48.3%;
-				height: 146px;
-				position: relative;
-
-				.img-text {
-					position: absolute;
-					top: 12px;
-					left: 12px;
-					height: 33px;
-					color: #ff4444;
-					font-size: 24px;
-					text-align: left;
-					margin-left: 12px;
-
-					.img-text2 {
-						font-size: 14px
-					}
-
+				height: 65px;
+				img{
+					width: 100%;
+					height: 100%;
 				}
 			}
-
-			img {
-				width: 100%;
-				height: 100%;
-			}
 		}
+
+		
 	.img-box2{
 		margin-top: 12px;
 		display: flex;
@@ -1675,13 +1539,6 @@
 
 
 
-
-
-
-
-
-
-
 	// 登录提示
 	.login-prompt {
 		width: 91.4%;