JP-ChargeTeam51/pages/user/freeInstallment.vue

<template>
	<view >
		<u-navbar title="免费安桩"></u-navbar>
	    <view class="main">
			<view class="text">
				        为响应政府号召，积极推动充电桩普及，“51充电联盟”现面向公共停车场、私家车位提供“免费安桩”服务，有意加盟“51充电联盟”的机构和个人，均可申请免费安装电动汽车/摩托车/自行车充电桩，在平台的运营支持下，共享风口红利。
			</view>
	    	<view class="suited">
	    		<p class="title">适合对象 :</p>
				<view class="content">
					<p>1.停车场、停车棚</p>
					<view class="suited-text">
						商超、小区、园区、医院等停车场。通过经营充电业务开源增收。
					</view>
				</view>
				<view class="content">
					<p>2.私人车位所有者</p>
					<view class="suited-text">
						可通过共享车位空闲时段，为他人提供充电便利获取被动收入。
					</view>
				</view>
	    	</view>
			
			<view class="application-form ">
				<view class="name">
					<p>申请人姓名</p>
					<u-input placeholder=""></u-input>
				</view>
				<view class="tel">
					<p>联系电话</p>
					<u-input placeholder=""></u-input>
				</view>
				<view class="place">
					<p>安装地点</p>
					<textarea class="textarea" placeholder="填写详细位置"></textarea>
				</view>
				<view class="type">
					<p>场地类型</p>
					<view class="checkbox">
							<view class="">
									<u-checkbox-group @change="checkboxGroupChange" active-color="#00B962">
										<u-checkbox 
											@change="checkboxChange" 
											v-model="item.checked" 
											v-for="(item, index) in typeList" :key="index" 
											:name="item.name"
										>{{item.name}}</u-checkbox>
									</u-checkbox-group>
									
								</view>
						</view>
				</view>
				<view class="want">
					<p>想要安装</p>
					<view class="checkbox">
							<view class="">
									<u-checkbox-group @change="checkboxGroupChange" active-color="#00B962">
										<u-checkbox 
											@change="checkboxChange" 
											v-model="item.checked" 
											v-for="(item, index) in wantList" :key="index" 
											:name="item.name"
										>{{item.name}}</u-checkbox>
									</u-checkbox-group>
									
								</view>
						</view>
				</view>
			      <view class="hint">
			      	*请保持手机畅通，我们将安排专人与您联系。您也可以拨打 
					 <text class="tel-num">400-8899-619</text>查询申请审核进度！
			      </view>
				 <u-button type="warning">提交申请</u-button>
			</view>
	    </view>
	</view>
</template>

<script>
	export default{
		data() {
				return {
					typeList: [
									{
										name: '停车场',
										checked: false,
										disabled: false
									},
									{
										name: '私家车位',
										checked: false,
										disabled: false
									},
									{
										name: '停车棚',
										checked: false,
										disabled: false
									}
								],
								wantList: [
													{
														name: '电动汽车充电桩',
														checked: false,
														disabled: false
													},
													{
														name: '电动摩托/自行车充电桩',
														checked: false,
														disabled: false
													},
													
												]
							
								
				};
				
			},
	}
</script>

<style>
	page{
		background-color: #00b962;
	}
</style>

<style lang="scss" scoped>
	.main{
	   padding: 36px 28px 85px;
	   .text{
		   color: rgba(255, 255, 255, 100);
		   font-size: 18px;
		   text-align: justify;

	   }
	   .suited{
		   background-color: #fff;
		   margin-top: 24px;
		   padding: 24px;
		   border-radius: 16px;
		   .title{
			   height: 18px;
			   color: rgba(16, 16, 16, 100);
			   font-size: 18px;
			   font-weight: 600;
		   }
		   .content{
			   margin-top: 12px;
			   p{
				   font-weight: 550;
				   font-size: 14px
			   }
			   .suited-text{
				   margin-top: 10px;
				   line-height: 20px;
			   }
		   }
	   }
	
	
	.application-form{
		background-color: #fff;
		 border-radius: 16px;
		 margin-top: 24px;
		  padding: 24px;
		  .u-input{
			  border-radius: 50px;
			  background-color: rgba(232, 236, 234, 100);
			  margin-top: 12px;
			
		  }
		  /deep/.uni-input-input{
			  margin-left: 10px;
		  }
		  p{
		  				  height: 18px;
						  line-height: 18px;
		  				  color: rgba(16, 16, 16, 100);
		  				  font-size: 18px;
		  }
		  
		  .tel,.place,.type,.want{
			  margin-top: 24px;
		  }
		  .textarea{
			  width: 72.2vw;
			  height: 100px;
			  border-radius: 22px;
			  background-color: rgba(232, 236, 234, 100);
			   margin-top: 12px;
			 .uni-textarea-placeholder{
				 padding: 12px;
			 }
			 /deep/.uni-textarea-textarea{
				 margin: 10px;
			 }
		  }
	}
	.type{
		.checkbox{
			margin-top: 12px;
			/deep/.u-checkbox{
				width: 50% !important;
				margin-top: 4px;
			}
		}
		
	}
	.want{
		/deep/.u-checkbox{
			margin-top: 8px;
		}
	}
	.hint{
		margin-top: 12px;
		
		font-size: 14px;
		line-height: 20px;
		text-align: justify;
		.tel-num{
			color: #9FC7FF;
		}
	}
	/deep/.u-btn{
		border-radius: 50px ;
		margin-top: 24px;
	}
	}
	
</style>