flying-monkey/pages/peopleManagement/peopleManagement.vue

<template>
    <view class="content">
        <statusNav returnColor="#c2c2c2" navBarTitle="人员状态"></statusNav>
        <view class="peopleManagement-input">
            <input type="text" class="int" value="" placeholder="请输入关键字" />
            <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>
</template>

<script>
    import statusNav from '../../components/status-nav.vue';
    export default {
        components: {
            statusNav,

        },
        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>
    .content {
        padding-top: 80rpx;
        padding-bottom: 80rpx;
    }
   .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;
    }
	.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: 129rpx;
        height: 114rpx;
        margin-right: 16rpx;
    }

    .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;
    }

    .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>