充电长者模式

pages/searchPile/chargeProcess/exChanging.vue

@@ -105,6 +105,36 @@
 </template>
 
 <script>
+	export default{
+		data() {
+			return {
+				elderMode:false,
+				}
+		},
+		onReady(){
+			this.elderMode = this.carhelp.get('getElderModeClass')  == '长辈模式';
+			if(this.elderMode)
+				this.theme('elder')
+			else
+				this.theme('standard')
+		},
+		methods:{
+			theme(type) {
+				
+			  if(type == 'elder')	
+			  {
+				document.getElementsByTagName('body')[0].setAttribute('data-theme',type);
+				 
+			  }
+			  else
+			  {
+				document.getElementsByTagName('body')[0].setAttribute('data-theme',type);
+				 
+				  
+			  } 
+			}
+		}
+	}
 </script>
 <style>
 	page{
@@ -113,8 +143,12 @@
 	}
 </style>
 <style lang="scss" scoped>
+	@import "@/_theme.scss";
 	.tittle-font {
-		font-size: 24px;
+		@include themeify{
+			font-size: themed('font-size7');
+		}
+/*		font-size: 24px;*/
 		position: fixed;
 		top: 12px;
 		right: 16px;
@@ -156,7 +190,10 @@
 		}
 		
 		.u-progress-info {
-			font-size: 28px;
+			@include themeify{
+				font-size: themed('font-size9');
+			}
+			/*font-size: 28px;*/
 			padding-left: 16rpx;
 			letter-spacing: 2rpx;
 			color: #8161ff;
@@ -173,22 +210,34 @@
 }
 
 .starting{
-	height: 22px;
+	/*height: 22px;*/
 	color: rgba(0, 185, 98, 100);
-	font-size: 16px;
+	@include themeify{
+		font-size: themed('font-size3');
+		height:themed('font-size6');
+	}
+/*	font-size: 16px;*/
 	text-align: center;
 }
 .timer{
-	height: 43px;
+/*	height: 43px;*/
 	color: rgba(51, 51, 51, 100);
-	font-size: 36px;
+	@include themeify{
+		font-size: themed('font-size13');
+		height:themed('font-size17');
+	}
+/*	font-size: 36px;*/
 	text-align: center;
 	margin-top: 40px;
 }
 .charged{
-	height: 20px;
+/*	height: 20px;*/
 	color: rgba(153, 153, 153, 100);
-	font-size: 14px;
+	@include themeify{
+		font-size: themed('font-size2');
+		height:themed('font-size5');
+	}
+/*	font-size: 14px;*/
 	text-align: center;
 	margin-top: 4px;
 }
@@ -199,9 +248,14 @@
 	display: flex;
 	justify-content: space-between;
 	.cost-top{
-		line-height: 33px;
+/*		line-height: 33px;*/
 		text-align: center;
-		font-size: 24px;
+		@include themeify{
+			font-size:themed('font-size7');
+			line-height:themed('font-size12');
+		}
+		
+/*		font-size: 24px;*/
 		position: relative;
 		.cost-font{
 			position: absolute;
@@ -229,15 +283,23 @@
 	padding: 0 55px;
 	margin-top: 40px;
 	.power-num{
-		height: 27px;
+		@include themeify{
+			font-size:themed('font-size5');
+			height:themed('font-size9');
+		}
+/*		height: 27px;*/
 		color: rgba(51, 51, 51, 100);
-		font-size: 20px;
+/*		font-size: 20px;*/
 		text-align: center;
 	}
 	.power-text{
-		height: 20px;
+/*		height: 20px;*/
 		color: rgba(153, 153, 153, 100);
-		font-size: 14px;
+		@include themeify{
+			font-size:themed('font-size2');
+			height:themed('font-size5');
+		}
+/*		font-size: 14px;*/
 		text-align: center;
 	}
 }
@@ -247,7 +309,10 @@
 	justify-content: space-between;
 	margin: 0 40px;
 	// height: 48px;
-	line-height: 48px;
+	@include themeify{ 
+		line-height:themed('font-size19');
+	}
+/*	line-height: 48px;*/
 	background-color: rgba(255, 255, 255, 100);
 	color: rgba(16, 16, 16, 100);
 	border-bottom: 1px solid #ededed;

pages/searchPile/chargeProcess/exChargeEnd.vue

@@ -43,6 +43,36 @@
 </template>
 
 <script>
+	export default{
+		data() {
+			return {
+				elderMode:false,
+				}
+		},
+		onReady(){
+			this.elderMode = this.carhelp.get('getElderModeClass')  == '长辈模式';
+			if(this.elderMode)
+				this.theme('elder')
+			else
+				this.theme('standard')
+		},
+		methods:{
+			theme(type) {
+				
+			  if(type == 'elder')	
+			  {
+				document.getElementsByTagName('body')[0].setAttribute('data-theme',type);
+				 
+			  }
+			  else
+			  {
+				document.getElementsByTagName('body')[0].setAttribute('data-theme',type);
+				 
+				  
+			  } 
+			}
+		}
+	}
 </script>
 <style>
 	page{
@@ -50,6 +80,8 @@
 	}
 </style>
 <style lang="scss" scoped>
+	@import "@/_theme.scss";
+	
 	.progress-bar{
 		
 		
@@ -76,12 +108,18 @@
 			
 			.u-progress-info {
 				display: block;
-				font-size: 36px;
+				@include themeify{
+					font-size: themed('font-size13');
+				}
+/*				font-size: 36px;*/
 				padding-left: 16rpx;
 				letter-spacing: 2rpx;
 				color: #333333 ;
 				.progress-text{
-					font-size: 14px;
+					@include themeify{
+						font-size: themed('font-size2');
+					}
+/*					font-size: 14px;*/
 					text-align: center;
 					color: #666666;
 				}
@@ -100,15 +138,22 @@
 	justify-content: space-between;
 	padding: 0 65px;
 	.item-num{
-		height: 33px;
+/*		height: 33px;*/
 		color: rgba(51, 51, 51, 100);
-		font-size: 24px;
+		@include themeify{
+			font-size: themed('font-size7');
+			height:themed('font-size12');
+		}
+/*		font-size: 24px;*/
 		text-align: center;
 	}
 	.item-text{
 		eight: 20px;
 		color: rgba(153, 153, 153, 100);
-		font-size: 14px;
+		@include themeify{
+			font-size: themed('font-size2');
+ 		}
+/*		font-size: 14px;*/
 		text-align: center;
 	}
 }