充电桩详情长者模式

pages/searchPile/stationAndPile/chargingPileDetails.vue

@@ -55,7 +55,7 @@
 			<!-- 收费标准 -->
 			<view class="rates ">
 				<view class="rates-title">
-					<view class="title-left">
+					<view class="title-left font-weight3">
 						收费标准
 					</view>
 					<view class="title-right">
@@ -109,6 +109,7 @@
 	export default {
 		data() {
 			return {
+				elderMode:false,
 				isReady: false,
 				onShowRole: false,
 				id: "",
@@ -141,6 +142,13 @@
 			}
 		},
 		onReady() {
+			this.elderMode = this.carhelp.get('getElderModeClass') == '长辈模式'; 
+			
+			if(this.elderMode)
+				this.theme('elder')
+			else
+				this.theme('standard')
+				
 			var  carDet=this.carhelp.getConfig().carDet
 						// img="https://yktwechat.xiaoxinda.com/config/xxd2021.jpg"		
 						if(carDet){
@@ -155,7 +163,19 @@
 			}
 
 		},
-		methods: {
+		methods: {
+			theme(type) {
+			  if(type == 'elder')	
+			  {
+				document.getElementsByTagName('body')[0].setAttribute('data-theme',type);
+				  
+			  }
+			  else
+			  {
+				document.getElementsByTagName('body')[0].setAttribute('data-theme',type);
+				  
+			  } 
+			},
 			customback(){
 				uni.reLaunch({
 					url:"/pages/login/welcome"
@@ -249,7 +269,8 @@
 </script>
 
 
-<style lang="scss">
+<style lang="scss">
+	@import "@/_theme.scss";
 	.ratesbottom{
 		  
 		padding-bottom: 90px;
@@ -257,7 +278,10 @@
 	// 头部
 	.title {
 		width: 100%;
-		line-height: 44px;
+		@include themeify{
+			line-height:themed('font-size17'); 
+		}
+/*		line-height: 44px;*/
 		background-color: rgba(255, 255, 255, 100);
 		text-align: center;
 		border: 1px solid rgba(242, 242, 242, 100);
@@ -281,18 +305,28 @@
 
 			.detail-name {
 				margin-left: 16px;
-				height: 20px;
-				line-height: 23px;
-				color: rgba(102, 102, 102, 100);
+				@include themeify{
+					line-height:themed('font-size2'); 
+					height: themed('font-size5');
+					line-height: themed('font-size6');
+				}
+/*				height: 20px;
 				font-size: 14px;
+				line-height: 23px;*/
+				color: rgba(102, 102, 102, 100);
 
 			}
 
 			.detail-content {
-				height: 23px;
-				line-height: 23px;
+/*				height: 23px;
+				line-height: 23px;*/
 				color: rgba(51, 51, 51, 100);
-				font-size: 14px;
+				@include themeify{
+					line-height:themed('font-size2'); 
+					height: themed('font-size6');
+					line-height: themed('font-size6');
+				}
+/*				font-size: 14px;*/
 
 			}
 		}
@@ -301,15 +335,19 @@
 		.rates {
 			width: 100%;
 			background-color: #fff;
-			margin-top: 12px;
+			margin-top: 24rpx;
 
 			.rates-title {
 				display: flex;
 				justify-content: space-between;
-				height: 48px;
-				line-height: 48px;
-				padding: 0px 16px 0;
-				border-bottom: 1px solid rgba(242, 242, 242, 100);
+				@include themeify{
+ 					height: themed('font-size19');
+					line-height: themed('font-size199');
+				}
+/*				height: 48px;
+				line-height: 48px;*/
+				padding: 0px 32rpx 0;
+				border-bottom: 2rpx solid rgba(242, 242, 242, 100);
 			}
 
 			.time-part {
@@ -318,51 +356,68 @@
 				.part-top {
 					display: flex;
 					justify-content: space-between;
-					padding: 16px;
+					padding: 32rpx;
 
 					.time {
 						color: rgba(16, 16, 16, 100);
-						font-size: 16px;
+						@include themeify{
+							font-size: themed('font-size3');
+ 						}
+/*						font-size: 16px;*/
 					}
 
 					.price {
 						.price-number {
 							color: rgba(255, 61, 0, 100);
-							font-size: 18px;
+							@include themeify{
+								font-size: themed('font-size4');
+								height:themed('font-size5');
+							}
+/*							font-size: 18px;*/
 							text-align: right;
 							font-family: Roboto-regular;
 							display: inline-block;
-							height: 20px;
+/*							height: 20px;*/
 							font-weight: 600;
 						}
 
 						.price-unit {
 							color: rgba(102, 102, 102, 100);
-							font-size: 14px;
+							@include themeify{
+								font-size: themed('font-size2');
+								height:themed('font-size5');
+							}
+/*							font-size: 14px;*/
 							text-align: right;
 							margin-left: 4px;
 							display: inline-block;
-							height: 20px;
+/*							height: 20px;*/
 						}
 					}
 				}
 
 				.part-bottom {
 					.unitPrice-servicePrice {
-						height: 18px;
+/*						height: 18px;*/
 						color: rgba(119, 119, 119, 100);
-						font-size: 14px;
+						@include themeify{
+							font-size: themed('font-size2');
+							height:themed('font-size4');
+						}
+/*						font-size: 14px;*/
 						text-align: right;
-						padding-right: 16px;
-						padding-bottom: 18px;
+						padding-right: 32px;
+						padding-bottom: 36px;
 					}
 				}
 			}
 		}
 
 		.tips {
-
-			font-size: 12px;
+			@include themeify{
+				font-size: themed('font-size1');
+ 			}
+/*			font-size: 12px;*/
 		
 			background-color: #fff;
 			position: relative;
@@ -370,8 +425,8 @@
 			.tips-font {
 				color: #ff7300;
 				position: absolute;
-				top: 16px;
-				left: 16px;
+				top: 32rpx;
+				left: 32rpx;
 			}
 
 			/deep/.u-alert-tips--border--warning-disabled[data-v-4d234687] {
@@ -380,12 +435,18 @@
 
 			/deep/.u-alert-tips--bg--warning-light[data-v-4d234687] {
 				background-color: #fff;
-				padding: 12px 16px 12px 36px;
-				line-height: 17px;
+				padding: 24rpx 32rpx 24rpx 72rpx;
+				@include themeify{
+					line-height: themed('font-size4');
+				}
+/*				line-height: 17px;*/
 			}
 
 			/deep/.u-alert-desc[data-v-4d234687] {
-				font-size: 12px;
+				@include themeify{
+					font-size: themed('font-size1');
+				}
+/*				font-size: 12px;*/
 				color: #ff7300;
 
 			}
@@ -397,22 +458,28 @@
 		background-color: #fff;
 		;
 		width: 100%;
-		height: 64px;
-		line-height: 64px;
+		height: 128rpx;
+		line-height: 128rpx;
 		position: fixed;
 		bottom: 0;
 		left: 0;
 		z-index: 999;
-		padding: 12px 16px;
+		padding: 24rpx 32rpx;
 
 		.botton {
 			//width: 343px;
-			height: 40px;
-			line-height: 40px;
-			border-radius: 50px;
+		/*	height: 40px;
+			line-height: 40px;*/
+			border-radius: 100rpx;
 			background-color: rgba(0, 185, 98, 100);
 			color: rgba(255, 255, 255, 100);
-			font-size: 16px;
+			
+			@include themeify{
+				font-size: themed('font-size3');
+				height: themed('font-size15');
+				line-height: themed('font-size15');
+			}
+/*			font-size: 16px;*/
 			text-align: center;
 			margin: 0 auto;
 		}