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

<template>
	<view>
		<u-navbar title="申请人列表" title-color="#101010">
			
		</u-navbar>
		<view class="search-box">
			<u-search placeholder="搜索授权用户" bg-color="#f2f4f6" height="80" :show-action="true" v-model="keyword">
		
		
			</u-search>
		
		</view>
		
		<!-- 列表 -->
		<view class="member-list">
			<view class="item" v-for="item in 5" >
				<view class="photo">
					<img src="@/assets/img/PEokWS2@3x.png" alt="" />
				</view>
				<view class="infos">
					<view class="name">
						杨静云
					</view>
					<view class="tel-time">
						<span class="tel" >19729922849</span>
						<span class="time">06-17 12:00:00 申请</span>
					</view>
				</view>
				
				<!-- 通过 -->
				<view class="pass" @click="pass=true" v-if="pass==false" >
					通过
				</view>
				<!-- 已通过 -->
				<view class="passed" v-if="pass" >
					已通过
				</view>
				
				
				
			</view>
		</view>
		
		
	</view>
</template>

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

<style>
	page{
		padding-bottom: 100px;
	}
</style>


<style lang="scss" scoped>
	
	
	.search-box {
		padding: 16rpx 32rpx;
		position: sticky;
		top: 88rpx;
		z-index: 999;
		background-color: rgba(255,255,255,1);
	
		/deep/.u-content {
			border-radius: 8px !important;
		}
	
		;
	
		/deep/.u-search {
			position: relative
		}
	
		;
	
		/deep/.u-action {
			width: 96rpx;
			line-height: 56rpx;
			border-radius: 4px;
			background-color: rgba(22, 119, 255, 1);
			color: rgba(255, 255, 255, 1);
			text-align: center;
			z-index: 9999;
			position: absolute;
			right: 12rpx;
		}
	}

  // 列表
  .member-list{
	  background: #fff;
	  .item{
		  padding: 32rpx 0;
		  margin: 0 32rpx;
		  display: flex;
		  align-items: center;
		  border-bottom: 1px solid rgba(244,244,244,1);;
	  }
	  .photo{
		  img{
			  width: 80rpx;
			  height: 80rpx;
			  border-radius: 50px;
		  }
	  }
	  .infos{
		  margin-left: 16rpx;
		  .name{
			  color: rgba(51,51,51,1);
			  font-size: 32rpx;
		  }
		  .tel-time{
			  
			  font-size: 24rpx;
			  margin-top: 4rpx;
			  .tel{
				  color: rgba(119,119,119,1);
			  }
			  .time{
				  color: #999999;
				  margin-left: 16rpx;
			  }
		  }
	  }
	  .pass{
		  width: 120rpx;
		  height: 56rpx;
		  line-height: 56rpx;
		  border-radius: 50px;
		  background-color: rgba(0,185,98,1);
		  color: rgba(255,255,255,1);
		  text-align: center;
		  margin-left: auto;
	  }
	  .passed{
		  margin-left: auto;
		  color: rgba(153,153,153,1);
	  }
	 
	  
  }
 
 
  
 
 

 

 
 
</style>