111

pages/monthlyCardActivity/monthlyCardBuy2.vue

@@ -8,9 +8,10 @@
 <!-- 卡片 -->
 <view class="main">
 	<view class="card-1">
+		<view class="tag">新客福利</view>
 		<view class="price">
 			<view class="current-price">
-				99<text>元/月</text>
+				59.9<text>元/月</text>
 			</view>
 			<view class="radio-box">
 				
@@ -25,6 +26,7 @@
 		
 	</view>
 	<view class="card-2">
+		<view class="tag">限时5折</view>
 		<view class="price">
 			<view class="current-price">
 				99<text>元/月</text>
@@ -119,16 +121,44 @@
 	.main{
 		background-color: #404A5E ;
 		padding: 20px 20px 30px 20px;
+		.tag{
+			position: absolute;
+			background-color: rgba(255, 61, 0, 100);
+			color: #ffffff;
+			font-size: 12px;
+			text-align: center;
+			line-height: 20px;
+		    padding: 0 6px;
+			left: 284rpx;
+			top: 44rpx;
+			
+			
+		}
+		@media screen and (max-width:320px){
+			.tag{
+				padding: 0 4rpx;
+			}
+			.price{
+				position: absolute;
+				top:24rpx !important; 
+				right: 8rpx !important;
+			}
+		    .current-price{
+		        font-size: 36rpx;
+		    }
+		}
 		.price{
-			float: right;
-			margin: 32rpx 32rpx 0;
+			top:24rpx;
+			right: 32rpx;
+			position: absolute;
 		}
 		.current-price{
-			font-size: 32px;
+			font-size: 64rpx;
 			color: #101010;
+			text-align: right;
 			
 			text{
-				font-size: 14px;
+				font-size: 28rpx;
 				
 			}
 		}
@@ -138,7 +168,7 @@
 			 
 		}
 		/deep/.u-iconfont{
-			font-size: 18px !important;
+			font-size: 36rpx !important;
 			
 		}
 		
@@ -146,9 +176,9 @@
 		
 		.card-1{
 			background: url(@/assets/img/card_normal.png) no-repeat ;
-			
+			position: relative;
 			background-size:cover;
-			height: 150px;
+			height: 300rpx;
 			/deep/.u-checkbox__icon-wrap{
 				background-color: #446D94 ;
 			}
@@ -159,10 +189,11 @@
 			}
 		}
 		.card-2{
+			position: relative;
 			background: url(@/assets/img/card_operate.png) no-repeat   ;
 			background-size:cover;
-			height: 150px;
-			margin-top: 16px;
+			height: 300rpx;
+			margin-top: 32rpx;
 			/deep/.u-checkbox__icon-wrap{
 				background-color: #B29467 ;
 			}
@@ -236,7 +267,7 @@
 	.notice{
 		background-color: #fff;
 		margin-top: 12px;
-		padding: 20px 20px 30px 30px;
+		padding: 20px 20px 72px 30px;
 		/deep/.u-divider{
 			margin-bottom: 16px !important;
 		}