jp-housekeep-manage/pages/managementList/applyAuthorisation.vue

<template>
	<view>
		<u-navbar title="填写申请人信息" title-color="#101010">
			
		</u-navbar>
		
		<view class="main">
			<view class="item">
				<view class="title">
					<span>*</span>头像
				</view>
				<view class="value">
					<img src="@/assets/img/PEokWS2Copy1@3x.png" alt="" />
				</view>
				<view class="icon">
					<u-icon name="arrow-right" color="#777777" ></u-icon>
				</view>
			</view>
			
			<view class="item">
				<view class="title">
					<span>*</span>姓名
				</view>
				<view class="value">
					<input type="text" placeholder="请填写姓名" />
				</view>
				
			</view>
			
			<view class="item">
				<view class="title">
					<span>*</span>联系电话
				</view>
				<view class="value">
					<input type="text" placeholder="请填写手机号码" />
				</view>
				
			</view>
			
		</view>
		<!-- 提交 -->
		<button class="submit" @click="show=true" >提交</button>
		<!-- 提交反馈 -->
		<u-modal v-model="show" :show-title="false" :show-cancel-button="true" cancel-text="关闭" :show-confirm-button="false" >
			<view class="modal">
				<view class="success-icon">
					<img src="@/assets/img/md-check_circle vRxbRvD@3x.png" alt="" />
				</view>
				<view class="success-text">
					授权申请提交成功
				</view>
				<view class="wait">
					请等待单位能源管理员审核通过
				</view>
				
			</view>
			
		</u-modal>
				
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		margin: 24rpx 0;
		background-color: #fff;
		.item{
			padding: 24rpx 32rpx; 
			display: flex;
			align-items: center;
			border-bottom: 1px solid rgba(221,221,221,1);
			.title{
				width: 30%;
				color: #777777;
				font-size: 32rpx;
				span{
					color: #EE3138;
				}
			}
			.value{
				
				img{
					width: 80rpx;
					
				}
				.uni-input-placeholder{
					color: rgba(204,204,204,1);;
				}
			}
			.icon{
				margin-left: auto;
			}
		}
		.item:last-of-type{
			border: none;
		}
		
	}
     
	 // 提交
	 .submit{
		 background-color: rgba(22,119,255,1);
		 color: rgba(255,255,255,1);
		 margin: 0 32rpx;
		 border-radius: 50px;
	 }

  // 提交反馈
  .modal{
	  text-align: center;
	  .success-icon{
		  margin-top: 24rpx;
		  img{
			  width: 132rpx;
			  height: 132rpx;
			  
		  }
	  }
	  .success-text{
		  color: rgba(16,16,16,1);
		  font-size: 36rpx;
		  margin-top: 16rpx;
		  font-weight: bold;
		  
	  }
	  .wait{
		  margin-top: 10rpx;
		  margin-bottom: 48rpx;
	  }
  }

</style>