flying-monkey/pagesA/peopleManagement/peopleManagement.vue

<template>
    <view>
        <statusNav returnColor="#c2c2c2" navBarTitle="人员状态"></statusNav>
		<container-subgroup-two>
			<view slot="content" style="margin: -30rpx;">
				<view class="peopleManagement-input">
					<input type="text" class="int" value="" placeholder="请输入关键字" placeholder-style="color:#999999;" />
					<image class="search" src="../../static/iocn/ss.png" mode=""></image>
					<view class="xian"></view>
				</view>
				<view class="peopleManagement-content">
					<view class="li" v-for="(item,index) in dataList">
						<view class="head">
							<view class="name" @click="listStateFun(item)">
								<view class="icon" v-if="item.state"></view>
								<image class="iconImg" v-else src="../../static/iocn/pxz.png" mode=""></image>
								<view class="">
									{{item.title}}<text class="cor" v-if="item.isJob">(正在作业)</text>
									<text class="cor1" v-else>(空闲中)</text>
								</view>
							</view>
							<view class="state">已审核</view>
						</view>
						<view class="con">
							<image class="img" src="../../static/del/500478055.png" mode=""></image>
							<view class="text scal09">
								<view class="code">
									<view class="">编号: YG20211207-001</view>
									<view class="iconCon">
										<view v-for="(item,index) in 5">
											<image class="icon" v-if="index<=2" src="../../static/iocn/6.png" ></image>
											<image class="icon" v-else src="../../static/iocn/7.png" ></image>
										</view>
									</view>
								</view>
								<view class="p">
									<view class="one">待处理：1单 </view>
									<view class="">已处理：1305单 </view>
								</view>
								<view class="address">当前定位：湖南省株洲市xxxxxxxx小区1栋202室</view>
							</view>
						</view>
						<view class="bottom">
						  <view class="bottom-content">
							  联系电话： <text class="cor3">157xxxx8279</text>
						  </view>  
						  <view class="bottom-content">
							  注册时间： <text class="cor3">2018-12-12</text>
						  </view>
						</view>
					</view>
				</view>
				<button class="submit-button" type="default">派发工单</button>
			</view>
		</container-subgroup-two>
    </view>
</template>

<script>
    import statusNav from '../../components/status-nav.vue';
	import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
    export default {
        components: {
            statusNav,
			containerSubgroupTwo
        },
        data() {
            return {
                dataList: [{
                        title: "陈志远",
                        state: true,
                        isJob: true,

                    },
                    {
                        title: "瓜皮",
                        state: false,
                        isJob: true,
                    },
                    {
                        title: "瓜娃子",
                        state: true,
                        isJob: false,
                    },
                    {
                        title: "憨批",
                        state: true,
                        isJob: false,
                    },
                ]
            }
        },
        methods: {
     listStateFun(item){
         item.state=!item.state
     }
        }
    }
</script>

<style>
   .submit-button {
        width: 686rpx;
        border-radius: 50rpx;
        height: 90rpx;
        background-color: #02A2ea;
        line-height: 90rpx;
        color: #FFFFFF;
        margin-top: 60rpx;
        text-align: center;
        font-size: 30rpx;
    }
    .peopleManagement-input {
        width: 100%;
        position: relative;
        padding: 40rpx 16rpx;
        box-sizing: border-box;
        background-color: #FFFFFF
    }

    .peopleManagement-input .int {
        width: 100%;
        background-color: #F7F7F7;
        padding: 0 25rpx;
        height: 67rpx;
        box-sizing: border-box;
        border-radius: 36rpx;
		font-size: 24rpx;
    }
	.peopleManagement-input  .xian {
		width: 3rpx;
		height: 35rpx;
		position: absolute;
        background-color: #EAEAEA;
		right: 100rpx;
		top: 50%;
		margin-top: -14rpx;
	}
    .peopleManagement-input .search {
        width: 28rpx;
        height: 28rpx;
        position: absolute;
        right: 43rpx;
        top: 50%;
        margin-top: -14rpx;
    }

    .peopleManagement-content .li {
        background-color: #FFFFFF;
        padding-right: 30rpx;
        margin-top: 18rpx;
    }

    .peopleManagement-content .li .head {
        display: flex;
        padding: 22rpx 0rpx;
        padding-left: 40rpx;
        border-bottom: 2rpx solid #eaeaea;
        justify-content: space-between;
        padding-right: 30rpx;
    }

    .peopleManagement-content .li .head .name {
        display: flex;
        align-items: center;
        color: #333333;
        font-size: 27rpx;
        font-weight: bold;

    }

    .peopleManagement-content .li .head .name .icon {
        width: 38rpx;
        height: 38rpx;
        margin-right: 12rpx;
        border: solid #969696 2rpx;
        box-sizing: border-box;
        border-radius: 50%;
    }
 .peopleManagement-content .li .head .name .iconImg{
     width: 38rpx;
     height: 38rpx;
     margin-right: 12rpx;
     box-sizing: border-box;
     border-radius: 50%;
 }
    .cor {
        color: #1c9bdb;
    }

    .cor1 {
        color: #ff424d;
    }

    .peopleManagement-content .li .head .state {
        color: #1c9bdb;
        font-size: 27rpx;
    }

    .peopleManagement-content .li .con {
        padding: 20rpx 0rpx;
        padding-left: 52rpx;
          border-bottom: 2rpx solid #eaeaea;
        display: flex;

    }

    .peopleManagement-content .li .con .img {
        width: 140rpx;
        height: 130rpx;
        margin-right: 10rpx;
    }

    .peopleManagement-content .li .con .text {
        flex: 1;
        margin-left: -14rpx;
    }

    .peopleManagement-content .li .con .text .iconCon {
        font-size: 0rpx;
        display: flex;
    }

    .peopleManagement-content .li .con .text .icon {
        width: 24rpx;
        height: 24rpx;
		margin-left: 10rpx;
    }

    .peopleManagement-content .li .con .text .code {
        font-size: 24rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #333333;
    }
     .peopleManagement-content .li .con .text .p{
         color: #7a7979;
         display: flex;
         font-size: 24rpx;
         
         padding: 15rpx 0rpx;
     }
           
       .peopleManagement-content .li .con .text .p .one{
           margin-right: 40rpx;
       }
      .peopleManagement-content .li .con .text .address{
                color: #7a7979;
                     font-size: 24rpx;
      }
        .peopleManagement-content .li  .bottom{
            display: flex;
            padding: 10rpx 0rpx;
            padding-left: 40rpx;
            color: #333333;
            font-size: 24rpx;
            display: flex;
            padding-right: 22rpx;
            justify-content: space-between;
        }
        .peopleManagement-content .li  .bottom .cor3{
                 color: #666666;
        }
        .peopleManagement-content .li  .bottom .bottom-content{
            height: 60rpx;
            line-height: 60rpx;
        }
       .peopleManagement-content .li  .bottom .bottom-content:last-child{
                 text-align: right;
                      width: 48%;
       }
       .peopleManagement-content .li  .bottom .bottom-content:first-child{
                border-right: 2rpx dashed #eaeaea;
                width: 52%;
       }
</style>