派车记录

liukangdong

2024-05-11 d8a95c4b1553e577331b42b6548b4c960b10e99d

派车记录

 h5/App.vue

@@ -1,199 +1,220 @@
<script>
    export default {
        onLaunch: function() {
            var that = this
            if (!that.$store.state.openid) {
                let url = window.location.href
                let code = ''
                if (url.indexOf('code=') !== -1) {
                    const query = url.split('?')
export default {
    onLaunch: function () {
        var that = this
        if (!that.$store.state.openid) {
            let url = window.location.href
            let code = ''
            if (url.indexOf('code=') !== -1) {
                const query = url.split('?')

                    for (const q of query) {
                        if (q.indexOf('code=') !== -1) {
                            code = q.substring(q.indexOf('code=') + 5, q.length)
                for (const q of query) {
                    if (q.indexOf('code=') !== -1) {
                        code = q.substring(q.indexOf('code=') + 5, q.length)
                    }
                }
                that.$u.api.wxAuthorize({
                    code: code
                }).then(res => {
                    if (res.code === 200) {
                        that.$store.commit('setOpenId', res.data.openid)
                        if (res.data.member) {
                            that.$store.commit('setMember', res.data.member)
                        }
                    }
                    that.$u.api.wxAuthorize({
                        code: code
                    }).then(res => {
                        if (res.code === 200) {
                            that.$store.commit('setOpenId', res.data.openid)
                            if (res.data.member) {
                                that.$store.commit('setMember', res.data.member)
                            }
                        }
                    })
                }
                })
            }
        },
        onShow: function() {
            console.log('App Show')
        },
        onHide: function() {
            console.log('App Hide')
        }
    },
    onShow: function () {
        console.log('App Show')
    },
    onHide: function () {
        console.log('App Hide')
    }
}
</script>

<style lang="scss">
    /*每个页面公共css */
    @import "uview-ui/index.scss";
/*每个页面公共css */
@import "uview-ui/index.scss";

    .flex-cb {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
.flex-cb {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .container {
        height: 100%;
        width: 100%;
        max-width: 800rpx;
        overflow-y: auto;
    }
.container {
    height: 100%;
    width: 100%;
    max-width: 800rpx;
    overflow-y: auto;
}

    .doumee-container .ivu-tabs-nav {
        width: 100%;
    }
.doumee-container .ivu-tabs-nav {
    width: 100%;
}

    .doumee-container .ivu-tabs-nav .ivu-tabs-tab {
        width: calc(100% / 3);
    }
.doumee-container .ivu-tabs-nav .ivu-tabs-tab {
    width: calc(100% / 3);
}

    .doumee-container .ivu-tabs-nav .ivu-tabs-tab {
        margin-right: 0;
        text-align: center;
    }
.doumee-container .ivu-tabs-nav .ivu-tabs-tab {
    margin-right: 0;
    text-align: center;
}

    .cell {
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 100rpx;
        padding: 24rpx 30rpx;
        box-sizing: border-box;
        border-bottom: 1rpx solid #eee;
        font-size: 15rpx;
        position: relative;
    }
.cell {
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 100rpx;
    padding: 24rpx 30rpx;
    box-sizing: border-box;
    border-bottom: 1rpx solid #eee;
    font-size: 15rpx;
    position: relative;
}

    .cell .title {
        flex-shrink: 0;
        color: #222;
        line-height: 20rpx;
        height: 20rpx;
        width: 28%;
        margin-right: 5%;
    }
.cell .title {
    flex-shrink: 0;
    color: #222;
    line-height: 20rpx;
    height: 20rpx;
    width: 28%;
    margin-right: 5%;
}

    .cell .content {
        flex: 1;
        font-size: 28rpx;
        font-weight: 400;
        color: #999999;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
.cell .content {
    flex: 1;
    font-size: 28rpx;
    font-weight: 400;
    color: #999999;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

    .cell .content .input {
        width: 100%;
        height: 100%;
        font-size: 28rpx;
        font-weight: 400;
        color: #333333;
        text-align: right;
    }
.cell .content .input {
    width: 100%;
    height: 100%;
    font-size: 28rpx;
    font-weight: 400;
    color: #333333;
    text-align: right;
}

    .cell.is-link::after {
        content: '';
        display: block;
        width: 8rpx;
        height: 8rpx;
        transform: rotate(-45deg);
        border-right: 1rpx solid #999999;
        border-bottom: 1rpx solid #999999;
        margin-left: 5rpx;
    }
.cell.is-link::after {
    content: '';
    display: block;
    width: 8rpx;
    height: 8rpx;
    transform: rotate(-45deg);
    border-right: 1rpx solid #999999;
    border-bottom: 1rpx solid #999999;
    margin-left: 5rpx;
}

    .card {
        background-color: #fff;
        padding: 16rpx;
        position: relative;
    }
.card {
    background-color: #fff;
    padding: 16rpx;
    position: relative;
}

    .card::after {
        content: '';
        display: block;
        position: absolute;
        width: calc(100% - 32rpx);
        height: 0;
        bottom: 0;
        left: 16rpx;
        border-bottom: 1rpx solid #f7f7f7;
    }
.card::after {
    content: '';
    display: block;
    position: absolute;
    width: calc(100% - 32rpx);
    height: 0;
    bottom: 0;
    left: 16rpx;
    border-bottom: 1rpx solid #f7f7f7;
}

    .card .title {
        color: #777777;
        margin-bottom: 12rpx;
    }
.card .title {
    color: #777777;
    margin-bottom: 12rpx;
}

    .card .content {
        color: #222;
    }
    .placeholder9{
        color: #999999;
        font-size: 28rpx;
    }
        //设置圆角
        checkbox .uni-checkbox-input{
            border-radius: 50%;
        }
        checkbox .uni-checkbox-input.uni-checkbox-input-checked{
            color: #fff !important; 
            border: 1px solid #4d99a8 !important;
            background-color: #4d99a8 !important;
        }
        checkbox .uni-checkbox-input.uni-checkbox-input-checked:before{
            /* color: #4d99a8 !important;  */
            /* border: 1px solid #4d99a8 !important; */
            /* font-size: 58rpx; */
            /* border-radius: 50%; */
        }
		
        // 
		
        view{
            box-sizing: border-box;
        }
        image{
            box-sizing: border-box;
            margin: 0;
            display: flex;
        }
        .df_ac{
            display: flex;
            align-items: center;
        }
        .main_app{
            padding:0 30rpx 30rpx;
            font-size: 28rpx;
            color: #333333;
        }
        .placeholder9{
            color: #999999;
        }
        .mr24{
            margin-right: 24rpx;
        }
        .mr12{
            margin-right: 12rpx;
        }
        .mr6{
            margin-right: 6rpx;
        }
		
		
.card .content {
    color: #222;
}

.placeholder9 {
    color: #999999;
    font-size: 28rpx;
}

//设置圆角
checkbox .uni-checkbox-input {
    border-radius: 50%;
}

checkbox .uni-checkbox-input.uni-checkbox-input-checked {
    color: #fff !important;
    border: 1px solid #4d99a8 !important;
    background-color: #4d99a8 !important;
}

checkbox .uni-checkbox-input.uni-checkbox-input-checked:before {
    /* color: #4d99a8 !important;  */
    /* border: 1px solid #4d99a8 !important; */
    /* font-size: 58rpx; */
    /* border-radius: 50%; */
}

// 

view {
    box-sizing: border-box;
}

image {
    box-sizing: border-box;
    margin: 0;
    display: flex;
}

textarea {
    box-sizing: border-box;
    background-color: #f7f7f7;
    font-size: 28rpx;
    color: #333333;
    padding: 24rpx;
    border-radius: 8rpx;
}

.df_ac {
    display: flex;
    align-items: center;
}

.main_app {
    padding: 0 30rpx 30rpx;
    font-size: 28rpx;
    color: #333333;
}

.placeholder9 {
    color: #999999;
    font-size: 28rpx;
}

.mr24 {
    margin-right: 24rpx;
}

.mr12 {
    margin-right: 12rpx;
}
.ml12 {
    margin-left: 12rpx;
}

.mr6 {
    margin-right: 6rpx;
}
</style>

 h5/pages.json

@@ -278,6 +278,15 @@
            }
            

        }

        ,{

            "path" : "pages/staff/sendACar",

            "style" :                                                                                    
            {
                "navigationBarTitleText": "派车记录",
                "enablePullDownRefresh": false
            }
            
        }

    ],

    "subPackages": [{

            "root": "n_pages",


 h5/pages/staff/index.vue

@@ -55,7 +55,7 @@
                <view class="h1">我的会议日历</view>
                <view class="h2">MY MEETING CALENDAR</view>
            </view>
            <view class="img_wrap" @click="jump('/pages/staff/task/index')">
            <view class="img_wrap" @click="jump('/pages/staff/sendACar')">
                <image class="img" src="@/static/staff/ic_paichejilu.png"></image>
                <view class="h1">派车记录</view>
                <view class="h2">VEHICLE DISPATCH</view>

 h5/pages/staff/sendACar.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,167 @@
<template>
    <view class="main_app">
        <view class="app_header">
            <view class="item" @click="isShowDate = true">
                <text v-if="param.aa">{{ param.aa }}</text>
                <text v-else class="placeholder9">选择日期</text>
                <u-icon class="ml12" name="arrow-down" color="#999999" />
            </view>
            <view class="item" @click="isShowCar = true">
                <text v-if="false">xx</text>
                <text v-else class="placeholder9">选择车辆</text>
                <u-icon class="ml12" name="arrow-down" color="#999999" />
            </view>
        </view>
        <!--  -->
        <view class="box_list">
            <view class="box_list_item" v-for="(item, index) in 3" :key="index">
                <view class="box_list_item_head">
                    <text>丁恩凯的劳务入厂申请</text>
                    <text class="loading">待审核</text>
                </view>
                <view class="box_list_item_nr">
                    <view class="box_list_item_nr_item">
                        <text>被访问人：</text>
                        <text>人事部-王亚蓝</text>
                    </view>
                    <view class="box_list_item_nr_item">
                        <text>进厂时间：</text>
                        <text>12-12 09:00</text>
                    </view>
                    <view class="box_list_item_nr_item">
                        <text>离厂时间：</text>
                        <text>12-12 12:00</text>
                    </view>
                    <view class="box_list_item_nr_item">
                        <text>来访事由：</text>
                        <text>业务来往</text>
                    </view>
                    <view class="box_list_item_nr_item">
                        <text>随行车辆：</text>
                        <text>皖A88888</text>
                    </view>
                </view>
            </view>
        </view>
        <!-- é€‰æ‹©è½¦è¾† -->
        <u-picker keyName="name" closeOnClickOverlay @close="isShowCar = false" :show="isShowCar" :columns="carList" @confirm="seletedCar" @cancel="isShowCar = false"></u-picker>
        <!-- æ—¥æœŸ -->
        <u-datetime-picker :show="isShowDate" :minDate="minDate" @confirm="confirmDate" @cancel="isShowDate = false" mode="date"></u-datetime-picker>
    </view>
</template>

<script>
export default {
    data() {
        return {
            isShowCar: false,
            isShowDate: false,
            param: {},
            carList: [[{ name: 'aa', value: '11' }]],
            timeList: [{ time: '08:30-09:00' }, { time: '08:30-09:00' }, { time: '08:30-09:00' }, { time: '08:30-09:00' }]
        };
    },
    methods: {
        confirmDate(e) {
            console.log(e.value);
            this.param.aa = dayjs(e.value).format('YYYY-MM-DD');
            this.isShowDate = false;
        },
        seletedCar(e) {
            console.log(e.value);
            this.param.aa = dayjs(e.value).format('YYYY-MM-DD');
            this.isShowDate = false;
        }
    }
};
</script>

<style lang="scss">
    .main_app{
        background: #F7F7F7;
        padding: 0;
    }
.app_header {
    display: flex;
    align-items: center;
    margin: 0 -15rpx;
    background-color: #fff;
    .item {
        width: 360rpx;
        height: 72rpx;
        margin: 15rpx;
        padding: 0 30rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        align-items: center;
    }
}
.box_list {
    width: 100%;
    padding: 30rpx;
    box-sizing: border-box;
    .box_list_item {
        width: 100%;
        margin-bottom: 20rpx;
        &:last-child {
            margin: 0 !important;
        }
        .box_list_item_head {
            width: 100%;
            height: 100rpx;
            padding: 0 30rpx;
            box-sizing: border-box;
            background: linear-gradient(270deg, #fefeff 0%, #e1f7fe 100%);
            border-radius: 8rpx 8rpx 0rpx 0rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .loading {
                color: #4c99a8;
            }
            .success {
                color: #03c68f;
            }
            .error {
                color: #e0312a;
            }
            text {
                &:nth-child(1) {
                    font-size: 32rpx;
                    font-weight: 500;
                    color: #222222;
                }
                &:nth-child(2) {
                    font-size: 26rpx;
                    font-weight: 400;
                }
            }
        }
        .box_list_item_nr {
            padding: 30rpx;
            width: 100%;
            box-sizing: border-box;
            background-color: #ffffff;
            .box_list_item_nr_item {
                width: 100%;
                display: flex;
                align-items: center;
                margin-bottom: 20rpx;
                text {
                    &:nth-child(1) {
                        font-size: 26rpx;
                        font-weight: 400;
                        color: #666666;
                    }
                    &:nth-child(2) {
                        font-size: 26rpx;
                        font-weight: 400;
                        color: #333333;
                    }
                }
            }
        }
    }
}
</style>

 h5/pages/staff/task/visitorApprove.vue

@@ -3,349 +3,370 @@
        <view class="status_wrap">
            <view class="name">丁恩凯的访客申请</view>
            <view class="desc">等待我处理</view>
            <view class="box_list_status">审批中</view>
            <view class="status">审批中</view>
        </view>
        <!--  -->
        <view class="emyty"></view>
        <view class="module_list">
            <view class="item">
                <text class="label">拜访人</text>
                <text class="value">廖成瑶</text>
                <view class="label">拜访人</view>
                <view class="value">廖成瑶</view>
            </view>
            <view class="item">
                <text class="label">预计入/离厂时间</text>
                <text class="value">05/01 8:00 - 05/01 18:00</text>
                <view class="label">预计入/离厂时间</view>
                <view class="value">05/01 8:00 - 05/01 18:00</view>
            </view>
            <view class="emyty"></view>
            <view class="item">
                <text class="label">访客信息</text>
                <text class="value">
                <view class="label">访客信息</view>
                <view class="value">
                    <image class="avatar" src="@/static/logo@2x.png" mode="widthFix"></image>
                    <view class="info">
                        <text class="name">孙志 18177665678</text>
                        <text>身份证号：3309****2910</text>
                        <text>入园车辆：皖A88789</text>
                    </view>
                </text>
                </view>
            </view>
            <view class="item">
                <text class="label">公司名称</text>
                <text class="value">中国移动</text>
                <view class="label">公司名称</view>
                <view class="value">中国移动</view>
            </view>
            <view class="item">
                <text class="label">施工人员</text>
                <text class="value">否</text>
                <view class="label">施工人员</view>
                <view class="value">否</view>
            </view>
            <view class="item">
                <text class="label">来访事由</text>
                <text class="value">业务洽谈</text>
                <view class="label">来访事由</view>
                <view class="value">业务洽谈</view>
            </view>
        </view>
		
        <view class="box_list">
            <view class="box_list_title">流程</view>
            <view class="box_list_list">
                <view class="box_list_list_item">
                    <view class="left">
                        <view class="left_d"></view>
                        <view class="left_x"></view>
        <!-- æµç¨‹ -->
        <view class="flow_wrap">
            <view class="flow_title">流程</view>
            <view class="list">
                <view class="item">
                    <view class="avatar">
                        <image class="img" src="@/static/logo@2x.png" mode="widthFix" />
                        <image class="status" src="@/static/staff/liucheng_success@2x.png" mode="widthFix" />
                        <view class="separate"></view>
                    </view>
                    <view class="right">
                        <view class="right_top">
                            <text>栓子哥提交的申请</text>
                            <text>2023-05-01 08:00</text>
                    <view class="content">
                        <view class="head">
                            <view class="event">某某提交的拜访申请</view>
                            <view class="time">time</view>
                        </view>
                        <view class="right_bottom">
                            <text>安徽豆米科技有限公司</text>
                        <view class="name_wrap">
                            <text>李东(<text class="status">处理中</text>)</text>
                        </view>
                        <view class="remark">同意放行</view>
                    </view>
                </view>
                <view class="box_list_list_item">
                    <view class="left">
                        <view class="left_d"></view>
                        <view class="left_x"></view>
                <view class="item">
                    <view class="avatar">
                        <image class="img" src="@/static/logo@2x.png" mode="widthFix" />
                        <image class="status" src="@/static/staff/liucheng_success@2x.png" mode="widthFix" />
                    </view>
                    <view class="right">
                        <view class="right_top">
                            <text>拜访员工</text>
                            <text>2023-05-01 08:00</text>
                    <view class="content">
                        <view class="head">
                            <view class="event">某某提交的拜访申请</view>
                            <view class="time">time</view>
                        </view>
                        <view class="right_bottom">
                            <text>王亚蓝(<text class="blue">审核通过</text>)</text>
                        <view class="name_wrap">
                            <text>李东(<text class="status">处理中</text>)</text>
                        </view>
                    </view>
                </view>
                <view class="box_list_list_item">
                    <view class="left">
                        <view class="left_d"></view>
                        <view class="left_x"></view>
                    </view>
                    <view class="right">
                        <view class="right_top">
                            <text>审批人</text>
                            <text>2023-05-01 08:00</text>
                        </view>
                        <view class="right_bottom">
                            <text>马总(<text class="blue">待审核</text>)</text>
                        <view class="carbon">
                            <view class="carbon_item" v-for="i in 12">
                                <image src="../../../static/logo@2x.png" mode="widthFix"></image>
                                <view class="text">name</view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="emyty"></view>
        <view class="main_footer">
            <view class="btn" @click="handleSub('0')">拒绝</view>
            <view class="btn agree" @click="handleSub('1')">同意</view>
        </view>

        <!--  -->
        <u-popup :show="showApprModal" :round="10" :safeAreaInsetBottom="true" mode="bottom" @close="showApprModal = false">
            <view class="appr_modal">
                <view class="title">同意</view>
                <textarea placeholder="同意说明，非必填" placeholder-class="placeholder9" />
                <view class="main_footer">
                    <view class="btn" @click="showApprModal = false">取消</view>
                    <view class="btn agree">提交</view>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    export default {
        data() {
            return {
				
            };
export default {
    data() {
        return {
            showApprModal: false,
            param: {}
        }
    }
    },
    methods: {
        handleSub(flag) {
            // this.param.flag = 
            if (flag === '1') {

            } else {

            }
            this.showApprModal = true
        }
    },
}
</script>
<style>
    page {
        background-color: #F7F7F7;
    }
page {
    background-color: #F7F7F7;
}
</style>
<style lang="scss" scoped>
    .box {
        width: 100%;
        .p {
            padding: 0 30rpx !important;
<style lang="scss">
.main_app {
    background-color: #fff;
    padding-bottom: 0;

    .flow_wrap {
        padding: 30rpx 0;

        .flow_title {
            font-weight: 500;
            font-size: 32rpx;
            color: #222222;
            margin-bottom: 24rpx;
        }
        .box_list {
            width: 100%;
            padding: 30rpx;
            box-sizing: border-box;
            background-color: #ffffff;
            display: flex;
            flex-direction: column;
            margin-bottom: 20rpx;
            position: relative;
            .box_list_title {
                font-size: 32rpx;
                font-weight: 500;
                color: #222222;
                margin-bottom: 24rpx;
            }
            .box_list_list {
                width: 100%;

        .list {
            .item {
                display: flex;
                flex-direction: column;
                .box_list_list_item {
                    width: 100%;
                    display: flex;
                    align-items: flex-start;
                    margin-bottom: 36rpx;
                    &:last-child {
                        margin: 0;
                    }
                    .left {
                        flex-shrink: 0;
                        height: 100%;
                        position: relative;
                        .left_d {
                            width: 16rpx;
                            height: 16rpx;
                            background: #81AFF7;
                            border-radius: 50%;
                            position: relative;
                            z-index: 2;
                        }
                        .left_x {
                            position: absolute;
                            top: 0;
                            left: 8rpx;
                            width: 1rpx;
                            height: 130rpx;
                            background-color: #EEEEEE;
                        }
                    }
                    .right {
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        margin-left: 30rpx;
                        .right_top {
                            width: 100%;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            text {
                                &:first-child {
                                    font-size: 30rpx;
                                    font-family: PingFangSC, PingFang SC;
                                    font-weight: 400;
                                    color: #333333;
                                }
                                &:last-child {
                                    font-size: 24rpx;
                                    font-family: PingFangSC, PingFang SC;
                                    font-weight: 400;
                                    color: #999999;
                                }
                            }
                        }
                        .right_bottom {
                            width: 100%;
                            margin-top: 10rpx;
                            text {
                                font-size: 26rpx;
                                font-weight: 400;
                                color: #777777;
                            }
                            .blue {
                                color: #025EEF !important;
                            }
                        }
                    }
                }
            }
            .box_list_item1 {
                width: 100%;
                padding: 30rpx 0;
                box-sizing: border-box;
                display: flex;
                align-items: flex-start;
                flex-wrap: wrap;
                justify-content: space-between;
                border-bottom: 1rpx solid #E5E5E5;
                .box_list_item1_head {
                    width: 100%;
                    font-size: 26rpx;
                    font-weight: 400;
                    color: #777777;
                    margin-bottom: 24rpx;
                }
                .box_list_item_img {
                    width: 100rpx;
                    height: 100rpx;
                    flex-shrink: 0;
                    border-radius: 8rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    overflow: hidden;
                    border: 1rpx solid #EEEEEE;
                margin-bottom: 48rpx;

                .avatar {
                    width: 80rpx;
                    height: 80rpx;
                    position: relative;
                    margin-right: 20rpx;
                    image {
                        width: 100%;

                    .img {
                        width: 80rpx;
                        height: 80rpx;
                        border-radius: 50%;
                    }

                    .status {
                        width: 28rpx;
                        height: 28rpx;
                        border-radius: 50%;
                        position: absolute;
                        right: 0;
                        bottom: 0;
                    }

                    .separate {
                        position: absolute;
                        width: 4rpx;
                        height: 100%;
                    } 
                        background-color: #EEEEEE;
                        left: 50%;
                        transform: translate(-50%, 0);
                        bottom: -80rpx;
                    }
                }
                .box_list_item_info {

                .content {
                    flex: 1;

                    .head {
                        display: flex;
                        justify-content: space-between;
                        margin-bottom: 4rpx;

                        .event {
                            font-size: 30rpx;
                        }

                        .time {
                            font-size: 26rpx;
                            color: #999999;
                        }
                    }

                    .name_wrap {
                        font-size: 26rpx;
                        color: #777777;

                        .status {
                            color: #279BAA;
                        }
                    }

                    .remark {
                        margin-top: 12rpx;
                        background-color: #f7f7f7;
                        padding: 14rpx 20rpx;
                        border-radius: 8rpx;
                        font-size: 26rpx;
                        color: #666666;
                        line-height: 36rpx;
                    }
                }
                .carbon{
                    display: flex;
                    width: 590rpx;
                    overflow-x: auto;
                    margin-top: 12rpx;
                    .carbon_item{
                        text-align: center;
                        flex-shrink: 0;
                        width: 100rpx;
                        image{
                            width: 60rpx;
                            height: 60rpx;
                            margin: 0 auto;
                        }
                        view{
                            font-size: 26rpx;
                            color: #777777;
							
                        }
                    }
                }
            }
        }
    }

    .module_list {
        .item {
            padding: 30rpx 0;
            border-bottom: 1rpx solid #E5E5E5;

            .label {
                font-size: 26rpx;
                color: #666666;
                margin-bottom: 20rpx;
            }

            .value {
                font-size: 30rpx;
                display: flex;
                align-items: center;

                .avatar {
                    margin-right: 20rpx;
                    width: 120rpx;
                    height: 120rpx;
                    border-radius: 8rpx;
                    border: 2rpx solid #E5E5E5;
                }

                .info {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    text {
                        &:nth-child(1) {
                            font-size: 28rpx;
                            font-weight: 400;
                            color: #222222;
                        }
                        &:nth-child(2) {
                            font-size: 28rpx;
                            font-weight: 400;
                            color: #222222;
                            margin-top: 20rpx;
                        }
                        &:nth-child(3) {
                            font-size: 28rpx;
                            font-weight: 400;
                            color: #222222;
                            margin-top: 20rpx;
                        }
                    justify-content: space-between;
                    font-size: 26rpx;
                    color: #666666;

                    .name {
                        font-size: 30rpx;
                        color: #333333;
                    }
                }
            }
            .box_list_item {
                width: 100%;
                padding: 30rpx 0;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                border-bottom: 1rpx solid #E5E5E5;
                .box_list_item_img {
                    width: 100rpx;
                    height: 100rpx;
                    border-radius: 8rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    overflow: hidden;
                    border: 1rpx solid #EEEEEE;
                    margin-top: 24rpx;
                    image {
                        width: 100%;
                        height: 100%;
                    } 
                }
                text {
                    &:nth-child(1) {
                        font-size: 26rpx;
                        font-weight: 400;
                        color: #777777;
                    }
                    &:nth-child(2) {
                        font-size: 28rpx;
                        font-weight: 400;
                        color: #222222;
                        margin-top: 20rpx;
                    }
                    &:nth-child(3) {
                        font-size: 28rpx;
                        font-weight: 400;
                        color: #222222;
                        margin-top: 20rpx;
                    }
                    &:nth-child(4) {
                        font-size: 28rpx;
                        font-weight: 400;
                        color: #222222;
                        margin-top: 20rpx;
                    }
                }
            }
            .box_list_name {
                font-size: 32rpx;
                font-weight: 500;
                color: #222222;
            }
            .box_list_job {
                font-size: 26rpx;
                font-weight: 400;
                color: #666666;
                margin-top: 20rpx;
            }
            .box_list_status1 {
                position: absolute;
                right: 30rpx;
                top: 50%;
                transform: translate(0, -50%);
                width: 120rpx;
                height: 120rpx;
                image {
                    width: 100%;
                    height: 100%;
                }
            }
            .box_list_status {
                position: absolute;
                right: 0;
                top: 0;
                width: 140rpx;
                height: 60rpx;
                line-height: 60rpx;
                text-align: center;
                font-size: 26rpx;
                font-weight: 400;
                color: #025EEF;
                background: rgba(66,117,252,0.12);
                border-radius: 0rpx 0rpx 0rpx 30rpx;
            }
        }
    }

    .status_wrap {
        position: relative;
        padding: 30rpx 0;

        .name {
            font-weight: 500;
            font-size: 32rpx;
            margin-bottom: 20rpx;
            color: #222222;
        }

        .desc {
            font-size: 26rpx;
            color: #ED4545;
        }

        .status {
            position: absolute;
            right: -30rpx;
            top: 0;
            height: 60rpx;
            line-height: 60rpx;
            padding: 0 32rpx;
            border-radius: 0rpx 0rpx 0rpx 30rpx;
            background-color: #e9edff;
            color: #279BAA;
        }
    }

    .main_footer {
        padding-bottom: 64rpx;
        display: flex;
        justify-content: space-between;

        .btn {
            width: 336rpx;
            height: 88rpx;
            line-height: 88rpx;
            background: #FFFFFF;
            border-radius: 44rpx;
            border: 1rpx solid #999999;
            font-size: 32rpx;
            text-align: center;
            margin: 16rpx 0;
        }

        .agree {
            background: #279BAA;
            color: #fff;
            border: 1rpx solid #279BAA;
        }
    }

    .appr_modal {
        padding: 36rpx 30rpx 0;

        .title {
            font-weight: 500;
            font-size: 32rpx;
            color: #222222;
            margin-bottom: 40rpx;
            text-align: center;
        }

        textarea {
            box-sizing: border-box;
            width: 690rpx;
            background-color: #f7f7f7;
            font-size: 28rpx;
            color: #333333;
            padding: 24rpx;
            border-radius: 8rpx;
            margin-bottom: 30rpx;
        }
    }

    .emyty {
        width: 750rpx;
        height: 20rpx;
        background-color: #f7f7f7;
        margin: 0 -30rpx;
    }
}
</style>

 h5/static/staff/liucheng_success@2x.png