浏览代码

占位符,输入框 样式修改

zhupeng 3 年之前
父节点
当前提交
c627af52ce
共有 4 个文件被更改,包括 76 次插入18 次删除
  1. 12 6
      pages/user/freeInstallment.vue
  2. 43 4
      pages/user/message.vue
  3. 5 2
      pages/user/phone.vue
  4. 16 6
      pages/user/toJoin.vue

+ 12 - 6
pages/user/freeInstallment.vue

@@ -24,11 +24,11 @@
 			<view class="application-form ">
 			<view class="application-form ">
 				<view class="name">
 				<view class="name">
 					<p>申请人姓名</p>
 					<p>申请人姓名</p>
-					<u-input placeholder=""></u-input>
+					<u-input :customStyle="placeholderStyle" :placeholderStyle="placeholderStyle" placeholder=""></u-input>
 				</view>
 				</view>
 				<view class="tel">
 				<view class="tel">
 					<p>联系电话</p>
 					<p>联系电话</p>
-					<u-input placeholder=""></u-input>
+					<u-input :customStyle="placeholderStyle" :placeholderStyle="placeholderStyle" placeholder=""></u-input>
 				</view>
 				</view>
 				<view class="place">
 				<view class="place">
 					<p>安装地点</p>
 					<p>安装地点</p>
@@ -81,6 +81,9 @@
 		data() {
 		data() {
 				return {
 				return {
 					elderMode:false,
 					elderMode:false,
+					placeholderStyle:{
+						'font-size':'28rpx'
+					},
 					typeList: [
 					typeList: [
 									{
 									{
 										name: '停车场',
 										name: '停车场',
@@ -123,10 +126,9 @@
 				  {
 				  {
 					document.getElementsByTagName('body')[0].setAttribute('data-theme',type);
 					document.getElementsByTagName('body')[0].setAttribute('data-theme',type);
 					 let data = {
 					 let data = {
-					 	"font-size":'32rpx',
-						"font-weight":'bold!important'
+					 	"font-size":'32rpx', 
 					 	};
 					 	};
-					 this.titleStyle = data;
+					 this.placeholderStyle = data;
 				  }
 				  }
 				  else
 				  else
 				  {
 				  {
@@ -134,7 +136,7 @@
 					 let data = {
 					 let data = {
 					 	"font-size":'28rpx'
 					 	"font-size":'28rpx'
 					 	};
 					 	};
-					 this.titleStyle = data;
+					 this.placeholderStyle = data;
 				  } 
 				  } 
 				}
 				}
 			},
 			},
@@ -240,6 +242,10 @@
 			  border-radius: 22px;
 			  border-radius: 22px;
 			  background-color: rgba(232, 236, 234, 100);
 			  background-color: rgba(232, 236, 234, 100);
 			   margin-top: 12px;
 			   margin-top: 12px;
+			   @include themeify{
+			    	font-size: themed('font-size2');
+			    	line-height: themed('font-size2'); 
+			   }
 			 .uni-textarea-placeholder{
 			 .uni-textarea-placeholder{
 				 padding: 12px;
 				 padding: 12px;
 				 @include themeify{
 				 @include themeify{

+ 43 - 4
pages/user/message.vue

@@ -1,11 +1,11 @@
 <template>
 <template>
-  <view>
+  <view class="all">
 		<u-navbar title="意见反馈"></u-navbar>	  
 		<u-navbar title="意见反馈"></u-navbar>	  
 		<view class="message">
 		<view class="message">
 			<view class="message-form">
 			<view class="message-form">
 				<u-form :model="subForm" ref="uForm" label-width ="100">
 				<u-form :model="subForm" ref="uForm" label-width ="100">
 					<u-form-item label-width="0">
 					<u-form-item label-width="0">
-							<u-input v-model="subForm.content" type="textarea"  placeholder="请描述您的意见" height="200"/>
+							<u-input :customStyle="placeholderStyle" :placeholderStyle="placeholderStyle" v-model="subForm.content" type="textarea"  placeholder="请描述您的意见" height="200"/>
 					</u-form-item>
 					</u-form-item>
 					<u-form-item label-width="0">
 					<u-form-item label-width="0">
 						<view class="upload">
 						<view class="upload">
@@ -16,7 +16,7 @@
 						</view>
 						</view>
 					</u-form-item>
 					</u-form-item>
 					<u-form-item >
 					<u-form-item >
-						<u-input v-model="subForm.telephone" placeholder="请留下联系方式,方便我们与您取得联系(必填)" />
+						<u-input :customStyle="placeholderStyle"  :placeholderStyle="placeholderStyle" v-model="subForm.telephone" placeholder="请留下联系方式,方便我们与您取得联系(必填)" />
 					</u-form-item>
 					</u-form-item>
 				</u-form>
 				</u-form>
 			</view>
 			</view>
@@ -32,6 +32,10 @@
 	export default {
 	export default {
 		data() {
 		data() {
 			return {
 			return {
+				elderMode:false,
+				placeholderStyle:{
+					'font-size':'28rpx'
+				},
 				isReady:false,
 				isReady:false,
 				imgBase64: '',
 				imgBase64: '',
 				listPic: [],
 				listPic: [],
@@ -67,8 +71,33 @@
 					console.log(res)
 					console.log(res)
 			})
 			})
 		},
 		},
+		onReady(){
+			this.elderMode = this.carhelp.get('getElderModeClass')  == '长辈模式';
+			if(this.elderMode)
+				this.theme('elder')
+			else
+				this.theme('standard')
+		},
 		methods: {
 		methods: {
-			 
+			 theme(type) {
+			 	
+			   if(type == 'elder')	
+			   {
+			 	document.getElementsByTagName('body')[0].setAttribute('data-theme',type);
+			 	 let data = {
+			 	 	"font-size":'32rpx',
+			 	 	};
+			 	 this.placeholderStyle = data;
+			   }
+			   else
+			   {
+			 	document.getElementsByTagName('body')[0].setAttribute('data-theme',type);
+			 	 let data = {
+			 	 	"font-size":'28rpx'
+			 	 	};
+			 	 this.placeholderStyle = data;
+			   } 
+			 },
 			//微信选择图片
 			//微信选择图片
 			chooseImage() {
 			chooseImage() {
 				WxJsApi.chooseImage().then(res => {
 				WxJsApi.chooseImage().then(res => {
@@ -170,6 +199,13 @@
 	}
 	}
 </script>
 </script>
 <style lang="scss" scoped>
 <style lang="scss" scoped>
+	@import "@/_theme.scss";
+	.all{
+		@include themeify{
+			font-size: themed('font-size2');
+		}
+	}
+	
 	.upload{
 	.upload{
 		width: 100%;
 		width: 100%;
 	}
 	}
@@ -185,5 +221,8 @@
 		background-color:#00B962!important;
 		background-color:#00B962!important;
 		border-color: #00B962!important;
 		border-color: #00B962!important;
 		color:#fff!important;
 		color:#fff!important;
+		@include themeify{
+			font-size: themed('font-size3');
+		}
 	}
 	}
 </style>
 </style>

+ 5 - 2
pages/user/phone.vue

@@ -4,12 +4,12 @@
 		<view class="login-form">
 		<view class="login-form">
 			<view class="login-form-item">
 			<view class="login-form-item">
 				<view class="input">
 				<view class="input">
-					<u-input v-model="form.telephone" type="number" placeholder="请输入手机号" placeholder-style="font-size:16px;color:#ccc;"/>
+					<u-input :customStyle="placeholderStyle" :placeholderStyle="placeholderStyle" v-model="form.telephone" type="number" placeholder="请输入手机号" placeholder-style="font-size:16px;color:#ccc;"/>
 				</view>
 				</view>
 			</view>
 			</view>
 			<view class="login-form-item">
 			<view class="login-form-item">
 				<view class="input">
 				<view class="input">
-					<u-input v-model="form.verifyCode" type="number" placeholder="请输入验证码" placeholder-style="font-size:16px;color:#ccc;"/>
+					<u-input :customStyle="placeholderStyle" :placeholderStyle="placeholderStyle" v-model="form.verifyCode" type="number" placeholder="请输入验证码" placeholder-style="font-size:16px;color:#ccc;"/>
 					<view class="code" @click="getCode">{{codeTips}}</view>
 					<view class="code" @click="getCode">{{codeTips}}</view>
 				</view>
 				</view>
 			</view>
 			</view>
@@ -33,6 +33,9 @@
 		data() {
 		data() {
 			return {
 			return {
 				elderMode:false,
 				elderMode:false,
+				placeholderStyle:{
+					'font-size':'28rpx'
+				},
 				form: {
 				form: {
 					telephone: '',
 					telephone: '',
 					verifyCode: '',
 					verifyCode: '',

+ 16 - 6
pages/user/toJoin.vue

@@ -18,11 +18,11 @@
 			<view class="application-form ">
 			<view class="application-form ">
 				<view class="name">
 				<view class="name">
 					<p>申请人姓名</p>
 					<p>申请人姓名</p>
-					<u-input placeholder=""></u-input>
+					<u-input :customStyle="placeholderStyle" :placeholderStyle="placeholderStyle" placeholder=""></u-input>
 				</view>
 				</view>
 				<view class="tel">
 				<view class="tel">
 					<p>联系电话</p>
 					<p>联系电话</p>
-					<u-input placeholder=""></u-input>
+					<u-input :customStyle="placeholderStyle" :placeholderStyle="placeholderStyle" placeholder=""></u-input>
 				</view>
 				</view>
 				<view class="place">
 				<view class="place">
 					<p>自有电桩地点</p>
 					<p>自有电桩地点</p>
@@ -80,6 +80,9 @@
 		data() {
 		data() {
 				return {
 				return {
 					elderMode:false,
 					elderMode:false,
+					placeholderStyle:{
+						'font-size':'28rpx'
+					},
 					typeList: [
 					typeList: [
 									{
 									{
 										name: '电动汽车充电桩(快充)',
 										name: '电动汽车充电桩(快充)',
@@ -125,10 +128,9 @@
 				  {
 				  {
 					document.getElementsByTagName('body')[0].setAttribute('data-theme',type);
 					document.getElementsByTagName('body')[0].setAttribute('data-theme',type);
 					 let data = {
 					 let data = {
-					 	"font-size":'32rpx',
-						"font-weight":'bold!important'
+					 	"font-size":'32rpx', 
 					 	};
 					 	};
-					 this.titleStyle = data;
+					 this.placeholderStyle = data;
 				  }
 				  }
 				  else
 				  else
 				  {
 				  {
@@ -136,7 +138,7 @@
 					 let data = {
 					 let data = {
 					 	"font-size":'28rpx'
 					 	"font-size":'28rpx'
 					 	};
 					 	};
-					 this.titleStyle = data;
+					 this.placeholderStyle = data;
 				  } 
 				  } 
 				}
 				}
 			},
 			},
@@ -243,8 +245,16 @@
 				  border-radius: 22px;
 				  border-radius: 22px;
 				  background-color: rgba(232, 236, 234, 100);
 				  background-color: rgba(232, 236, 234, 100);
 				   margin-top: 12px;
 				   margin-top: 12px;
+				  @include themeify{
+				  	font-size: themed('font-size2');
+				  	line-height: themed('font-size2');
+				  } 
 				 .uni-textarea-placeholder{
 				 .uni-textarea-placeholder{
 					 padding: 12px;
 					 padding: 12px;
+					 @include themeify{
+					 	font-size: themed('font-size2');
+					 	line-height: themed('font-size2');
+ 					 }
 				 }
 				 }
 				 /deep/.uni-textarea-textarea{
 				 /deep/.uni-textarea-textarea{
 					 margin: 10px;
 					 margin: 10px;