Merge remote-tracking branch 'origin/master'

jiangping

2024-05-11 8ba1fa2ca00e5cd340194bf8aabc8f8516615eb7

Merge remote-tracking branch 'origin/master'

 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/components/Li-Calendar/Li-Calendar.css

@@ -29,7 +29,7 @@
    font-size: 28rpx;

    font-family: PingFangSC-Regular, PingFang SC;

    font-weight: 400;

    color: #0055FF;

    color: #279baa;

}

.calendar-TimeH{

}

@@ -111,8 +111,8 @@
}

.calendar-today {

    /* border-radius: 6upx;

    background-color: #0055FF; */

    color: #0055FF;

    background-color: #279baa; */

    color: #279baa;

    /* -moz-box-shadow: 0px 2upx 10upx #ABABAB;

    -webkit-box-shadow: 0px 2upx 10upx #ABABAB;

    box-shadow: 0px 2upx 10upx #ABABAB; */

@@ -139,7 +139,7 @@


.calendar-active {

    color:#FFFFFF !important;

    background-color: #0055FF;

    background-color: #279baa;

    /* -moz-box-shadow: 0px 2upx 10upx #ABABAB;

    -webkit-box-shadow: 0px 2upx 10upx #ABABAB;

    box-shadow: 0px 2upx 10upx #ABABAB; */


 h5/pages.json

@@ -278,6 +278,42 @@
            }
            

        }

        ,{

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

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

        ,{

            "path" : "pages/staff/meetingCalendar",

            "style" :                                                                                    
            {
                "navigationBarTitleText": "会议日历",
                "enablePullDownRefresh": false
            }
            
        }

        ,{

            "path" : "pages/staff/meetingDetail",

            "style" :                                                                                    
            {
                "navigationBarTitleText": "会议详情",
                "enablePullDownRefresh": false
            }
            
        }

        ,{

            "path" : "pages/staff/meetingManager",

            "style" :                                                                                    
            {
                "navigationBarTitleText": "会议室管理",
                "enablePullDownRefresh": false
            }
            
        }

    ],

    "subPackages": [{

            "root": "n_pages",


 h5/pages/staff/index.vue

@@ -50,17 +50,17 @@
                <view class="h2">TASK CENTER</view>
                <view class="task_num">99+</view>
            </view>
            <view class="img_wrap" @click="jump('/pages/staff/task/index')">
            <view class="img_wrap" @click="jump('/pages/staff/meetingCalendar')">
                <image class="img" src="@/static/staff/ic_wodehuiyi.png"></image>
                <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>
            </view>
            <view class="img_wrap" @click="jump('/pages/staff/task/index')">
            <view class="img_wrap" @click="jump('/pages/staff/meetingManager')">
                <image class="img" src="@/static/staff/ic_huiyishiguanli.png"></image>
                <view class="h1">会议室管理</view>
                <view class="h2">MANAGE MEETING ROOMS</view>

 h5/pages/staff/meetingCalendar.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,342 @@
<template>

    <view class="main_app">

        <view class="tabs">

            <view class="tab" :class="{ active: activeTab === '0' }" @click="tabClick('0')">

                <text class="name">会议日历</text>

                <view class="line"></view>

            </view>

            <view class="tab" :class="{ active: activeTab === '1' }" @click="tabClick('1')">

                <text class="name">预约记录</text>

                <view class="line"></view>

            </view>

        </view>

        <!--  -->

        <template v-if="activeTab == '0'">

            <!-- <uni-calendar @change="changeCalendar" :selected="selected" /> -->

            <!-- æ—¥åŽ† -->

            <view class="container_b">

                <Calendar

                    ref="Calendar"

                    :currentTime="currentTime1"

                    :mark="mark"

                    :showLunar="false"

                    @dayChange="dayChange"

                    @monthChange="monthChange"

                    :rangeMode="false"

                    :maskColor="'#ffffff'"

                    :dateStart="dateStart"

                    :dateEnd="dateEnd"

                    :canDrag="false"

                ></Calendar>

            </view>

            <!--  -->

            <view class="card_list">

                <view class="card_title">

                    <view class="name">

                        <view class="icon"></view>

                        <view class="text">今日会议</view>

                    </view>

                    <view class="meeting">

                        <view class="text mr24">全部会议室</view>

                        <u-icon name="arrow-down" size="12" color="#999999" />

                    </view>

                </view>

                <view class="list">

                    <view class="item">

                        <view class="head">

                            <view class="name">aaaaa选型</view>

                            <view class="status">即将开始</view>

                        </view>

                        <view class="line">

                            <view class="label">会议时间：</view>

                            <view class="value">12:00-12</view>

                        </view>

                        <view class="line">

                            <view class="label">会议室：</view>

                            <view class="value">202会议室</view>

                        </view>

                        <view class="line">

                            <view class="label">预约人：</view>

                            <view class="value">杨某某</view>

                        </view>

                        <view class="line">

                            <view class="label">备注：</view>

                            <view class="value">--</view>

                        </view>

                    </view>

                </view>

            </view>

        </template>

        <!--  -->

        <template v-if="activeTab === '1'">

            <view class="card_list">

                <view class="list">

                    <view class="item" @click="handleDetail()">

                        <view class="head">

                            <view class="name">aaaaa选型</view>

                            <view class="status">即将开始</view>

                        </view>

                        <view class="line">

                            <view class="label">会议时间：</view>

                            <view class="value">12:00-12</view>

                        </view>

                        <view class="line">

                            <view class="label">会议室：</view>

                            <view class="value">202会议室</view>

                        </view>

                        <view class="line">

                            <view class="label">预约人：</view>

                            <view class="value">杨某某</view>

                        </view>

                        <view class="line">

                            <view class="label">备注：</view>

                            <view class="value">--</view>

                        </view>

                    </view>

                </view>

            </view>

        </template>

    </view>

</template>



<script>

import Calendar from '@/components/Li-Calendar/Li-Calendar.vue';

import { getDay } from '@/utils/utils.js';

function getDate(date, AddDayCount = 0) {

    if (!date) {

        date = new Date();

    }

    if (typeof date !== 'object') {

        date = date.replace(/-/g, '/');

    }

    const dd = new Date(date);



    dd.setDate(dd.getDate() + AddDayCount); // èŽ·å–AddDayCount天后的日期



    const y = dd.getFullYear();

    const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1; // èŽ·å–当前月份的日期，不足10è¡¥0

    const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate(); // èŽ·å–当前几号，不足10è¡¥0

    return {

        fullDate: y + '-' + m + '-' + d,

        year: y,

        month: m,

        date: d,

        day: dd.getDay()

    };

}

export default {

    components: {

        Calendar

    },

    data() {

        return {

            activeTab: '0',

            currentTime1: '',

            dateStart: '1999-05-01',

            dateEnd: '2999-06-15',

            mark: [],

            selected: [

                {

                    date: getDate(new Date(), -3).fullDate

                    // info: '打卡'

                },

                {

                    date: getDate(new Date(), -2).fullDate,

                    // info: '签到',

                    data: {

                        custom: '自定义信息',

                        name: '自定义消息头'

                    }

                },

                {

                    date: getDate(new Date(), -1).fullDate,

                    info: '已打卡'

                }

            ]

        };

    },

    methods: {

        tabClick(val) {

            this.activeTab = val;

        },

        handleDetail(item) {

            uni.navigateTo({

                // url: `/pages/staff/meetingDetail?id=${item.id}`,

                url: `/pages/staff/meetingDetail`

            });

        },

        changeCalendar(e) {

            console.log(e);

        },

        // ç‚¹å‡»æŸå¤©

        dayChange(data) {

            console.log(data);

            let date = data.time;

            let yyyy = data.time.substring(0, 4);

            let mm = Number(data.time.substring(data.time.indexOf('-') + 1, data.time.lastIndexOf('-')));

            let dd = Number(data.time.substring(data.time.lastIndexOf('-') + 1, data.time.length));

            mm = mm < 10 ? `0${mm}` : mm;

            dd = dd < 10 ? `0${dd}` : dd;

            let riqi = `${yyyy}-${mm}-${dd}`;

            this.currentTime = riqi;

            this.list = [];

            this.next = false;

            this.page = 0;

            // this.getRoomList()

        },

        // ä¸‹ä¸€æœˆ

        monthChange(data) {

            let date = data.date.replace(/[/]/g, '-');

            let yyyy = date.substring(0, 4);

            let mm = Number(date.substring(date.indexOf('-') + 1, date.lastIndexOf('-')));

            let dd = Number(date.substring(date.lastIndexOf('-') + 1, date.length));

            mm = mm < 10 ? `0${mm}` : mm;

            dd = dd < 10 ? `0${dd}` : dd;

            let riqi = `${yyyy}-${mm}-${dd}`;

            console.log('日期', riqi);

            this.currentTime1 = riqi;

            // this.getDateNum()

        }

    }

};

</script>



<style lang="scss">

page {

    background-color: #f7f7f7;

}

.main_app {

    padding: 0;

    background-color: #f7f7f7;

    ::v-deep .uni-calendar-item--checked {

        background-color: #279baa;

        border-radius: 8rpx;

    }

    ::v-deep .uni-calendar-item--isDay-text {

        color: #279baa;

    }

    ::v-deep .uni-calendar-item--isDay {

        background-color: #279baa;

        color: #fff;

        border-radius: 8rpx;

    }

    .tabs {

        display: flex;

        background-color: #fff;

        .tab {

            flex: 1;

            height: 88rpx;

            display: flex;

            justify-content: center;

            align-items: center;

            font-size: 28rpx;

            color: #666666;

            position: relative;

            .line {

                width: 60rpx;

                height: 4rpx;

                background: #fff;

                border-radius: 3rpx;

                position: absolute;

                bottom: 0;

                left: 50%;

                transform: translate(-50%, 0);

            }

        }

        .active {

            font-weight: 500;

            font-size: 30rpx;

            color: #222222;

            .line {

                background-color: #279baa;

            }

        }

    }

    //

    .card_list {

        padding: 30rpx;

        .card_title {

            display: flex;

            justify-content: space-between;

            align-items: center;

            margin-bottom: 22rpx;

            .name {

                display: flex;

                align-items: center;

                .icon {

                    width: 6rpx;

                    height: 32rpx;

                    background: #279baa;

                    border-radius: 4rpx;

                    margin-right: 16rpx;

                }

                .text {

                    font-weight: 600;

                    font-size: 32rpx;

                    color: #222222;

                }

            }

            .meeting {

                display: flex;

                height: 52rpx;

                line-height: 52rpx;

                background: #ffffff;

                border-radius: 26rpx;

                border: 2rpx solid #eeeeee;

                padding: 0 24rpx;

                .text {

                    font-size: 24rpx;

                    color: #333333;

                }

            }

        }

        .list {

            .item {

                padding: 0rpx 30rpx 30rpx;

                background: #ffffff;

                border-radius: 8rpx;

                .head {

                    display: flex;

                    justify-content: space-between;

                    align-items: center;

                    border-bottom: 1rpx solid #e5e5e5;

                    padding: 22rpx 0;

                    margin-bottom: 22rpx;

                    .name {

                        font-weight: 600;

                        font-size: 32rpx;

                        color: #222222;

                    }

                    .status {

                        height: 38rpx;

                        line-height: 38rpx;

                        padding: 0 16rpx;

                        border-radius: 4rpx;

                        border: 1rpx solid #999999;

                        font-size: 22rpx;

                        color: #999999;

                    }

                }

                .line {

                    display: flex;

                    margin-bottom: 12rpx;

                    .label {

                        width: 140rpx;

                        color: #666666;

                    }

                    .value {

                        flex: 1;

                    }

                }

            }

        }

    }

}

.container_b {

    width: 100%;

    padding: 30rpx;

    background: #ffffff;

    padding-top: 20rpx;

    box-sizing: border-box;

}

</style>

 h5/pages/staff/meetingDetail.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,168 @@
<template>
    <view class="main_app">
        <view class="head_app">
            <view class="title">讨论智能会议室系统选型</view>
            <view class="text">201会议室｜2023å¹´5月4日 10:00-12:00</view>
        </view>
        <!--  -->
        <view class="empty"></view>
        <view class="module_list">
            <view class="item">
                <view class="label">会议内容</view>
                <view class="value">
                    <!-- <text>主要讨论智能会议室系统选型，请大家一定要按时来开会，时间宝贵。感谢大家！</text> -->
                    <u-textarea border="none" v-model="param.aaa" count :maxlength="300" placeholder="请输入会议内容" placeholder-class="placeholder9"     />
                </view>
            </view>
            <view class="item">
                <view class="label">参会人员</view>
                <view class="value">
                    <view class="personnel">
                        <view class="per_item" v-for="i in 10">
                            <image src="../../static/logo@2x.png" class="avatar" mode=""></image>
                            <view class="name">胡八一</view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="item">
                <view class="label">服务项</view>
                <view class="value">席卡 |  æŠ•å½±ä»ª |  ç¬”记本电脑</view>
            </view>
            <view class="item">
                <view class="label">备注</view>
                <view class="value">今天人多，请按时参加</view>
            </view>
            <view class="item">
                <view class="label">预约人</view>
                <view class="value">行政部 èµµå¼º 18832319899</view>
            </view>
        </view>
        <view class="empty empty2"></view>
        <view class="main_footer">
            <view class="btn" @click="handleSub('0')">撤回</view>
            <view class="btn agree" @click="handleSub('1')">修改</view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                param: {}
            };
        },
        methods: {
            handleSub() {
				
            }
        }
    }
</script>

<style lang="scss">
    page{
        background-color: #f7f7f7;
    }
    .main_app{
        padding: 0 ;
        .head_app{
            padding: 30rpx;
            background-color: #fff;
            .title{
                font-weight: 600;
                font-size: 36rpx;
                color: #222222;
                margin-bottom: 30rpx;
            }
            .text{
                font-size: 28rpx;
                color: #666666;
            }
        }
    }
    .module_list {
        background-color: #fff;
        padding: 0 30rpx;
        .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;
                ::v-deep textarea{
                    padding: 0;
                    background-color: #fff !important;
                }
                .personnel{
                    display: flex;
                    width: 100%;
                    overflow-x: auto;
                    .per_item{
                        flex-shrink: 0;
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                            margin-right: 24rpx;
                            .avatar{
                                width: 72rpx;
                                height: 72rpx;
                                border-radius: 50%;
                            }
                            .name{
                                font-size: 26rpx;
                                color: #777777;
                            }
                    }
                }
            }
        }
    }
    .main_footer {
        padding-bottom: 64rpx;
        display: flex;
        justify-content: space-between;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #fff;
        padding: 0 30rpx;
        .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;
        }
    }
.empty{
    width: 750rpx;
        height: 20rpx;
        background-color: #f7f7f7;
        margin: 0 -30rpx;
}
.empty2{
    height: 280rpx !important;
}
</style>

 h5/pages/staff/meetingManager.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,303 @@
<template>

    <view class="main_app">

        <!--  -->

        <!-- <uni-calendar @change="changeCalendar" :selected="selected" /> -->

        <!-- æ—¥åŽ† -->

        <view class="container_b">

            <Calendar

                ref="Calendar"

                :currentTime="currentTime1"

                :mark="mark"

                :showLunar="false"

                @dayChange="dayChange"

                @monthChange="monthChange"

                :rangeMode="false"

                :maskColor="'#ffffff'"

                :dateStart="dateStart"

                :dateEnd="dateEnd"

                :canDrag="false"

            ></Calendar>

        </view>

        <!--  -->

        <view class="card_list">

            <view class="card_title">

                <view class="name">

                    <view class="icon"></view>

                    <view class="text">今日会议</view>

                </view>

                <view class="meeting">

                    <view class="text mr24">全部会议室</view>

                    <u-icon name="arrow-down" size="12" color="#999999" />

                </view>

            </view>

            <view class="list">

                <view class="item">

                    <view class="head">

                        <view class="name">aaaaa选型</view>

                        <view class="status">即将开始</view>

                    </view>

                    <view class="line">

                        <view class="label">会议时间：</view>

                        <view class="value">12:00-12</view>

                    </view>

                    <view class="line">

                        <view class="label">会议室：</view>

                        <view class="value">202会议室</view>

                    </view>

                    <view class="line">

                        <view class="label">预约人：</view>

                        <view class="value">杨某某</view>

                    </view>

                    <view class="line">

                        <view class="label">备注：</view>

                        <view class="value">--</view>

                    </view>

                </view>

            </view>

        </view>



        <!--  -->

    </view>

</template>



<script>

import Calendar from '@/components/Li-Calendar/Li-Calendar.vue';

import { getDay } from '@/utils/utils.js';

function getDate(date, AddDayCount = 0) {

    if (!date) {

        date = new Date();

    }

    if (typeof date !== 'object') {

        date = date.replace(/-/g, '/');

    }

    const dd = new Date(date);



    dd.setDate(dd.getDate() + AddDayCount); // èŽ·å–AddDayCount天后的日期



    const y = dd.getFullYear();

    const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1; // èŽ·å–当前月份的日期，不足10è¡¥0

    const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate(); // èŽ·å–当前几号，不足10è¡¥0

    return {

        fullDate: y + '-' + m + '-' + d,

        year: y,

        month: m,

        date: d,

        day: dd.getDay()

    };

}

export default {

    components: {

        Calendar

    },

    data() {

        return {

            activeTab: '0',

            currentTime1: '',

            dateStart: '1999-05-01',

            dateEnd: '2999-06-15',

            mark: [],

            selected: [

                {

                    date: getDate(new Date(), -3).fullDate

                    // info: '打卡'

                },

                {

                    date: getDate(new Date(), -2).fullDate,

                    // info: '签到',

                    data: {

                        custom: '自定义信息',

                        name: '自定义消息头'

                    }

                },

                {

                    date: getDate(new Date(), -1).fullDate,

                    info: '已打卡'

                }

            ]

        };

    },

    methods: {

        tabClick(val) {

            this.activeTab = val;

        },

        handleDetail(item) {

            uni.navigateTo({

                // url: `/pages/staff/meetingDetail?id=${item.id}`,

                url: `/pages/staff/meetingDetail`

            });

        },

        changeCalendar(e) {

            console.log(e);

        },

        // ç‚¹å‡»æŸå¤©

        dayChange(data) {

            console.log(data);

            let date = data.time;

            let yyyy = data.time.substring(0, 4);

            let mm = Number(data.time.substring(data.time.indexOf('-') + 1, data.time.lastIndexOf('-')));

            let dd = Number(data.time.substring(data.time.lastIndexOf('-') + 1, data.time.length));

            mm = mm < 10 ? `0${mm}` : mm;

            dd = dd < 10 ? `0${dd}` : dd;

            let riqi = `${yyyy}-${mm}-${dd}`;

            this.currentTime = riqi;

            this.list = [];

            this.next = false;

            this.page = 0;

            // this.getRoomList()

        },

        // ä¸‹ä¸€æœˆ

        monthChange(data) {

            let date = data.date.replace(/[/]/g, '-');

            let yyyy = date.substring(0, 4);

            let mm = Number(date.substring(date.indexOf('-') + 1, date.lastIndexOf('-')));

            let dd = Number(date.substring(date.lastIndexOf('-') + 1, date.length));

            mm = mm < 10 ? `0${mm}` : mm;

            dd = dd < 10 ? `0${dd}` : dd;

            let riqi = `${yyyy}-${mm}-${dd}`;

            console.log('日期', riqi);

            this.currentTime1 = riqi;

            // this.getDateNum()

        }

    }

};

</script>



<style lang="scss">

page {

    background-color: #f7f7f7;

}

.main_app {

    padding: 0;

    background-color: #f7f7f7;

    ::v-deep .uni-calendar-item--checked {

        background-color: #279baa;

        border-radius: 8rpx;

    }

    ::v-deep .uni-calendar-item--isDay-text {

        color: #279baa;

    }

    ::v-deep .uni-calendar-item--isDay {

        background-color: #279baa;

        color: #fff;

        border-radius: 8rpx;

    }

    .tabs {

        display: flex;

        background-color: #fff;

        .tab {

            flex: 1;

            height: 88rpx;

            display: flex;

            justify-content: center;

            align-items: center;

            font-size: 28rpx;

            color: #666666;

            position: relative;

            .line {

                width: 60rpx;

                height: 4rpx;

                background: #fff;

                border-radius: 3rpx;

                position: absolute;

                bottom: 0;

                left: 50%;

                transform: translate(-50%, 0);

            }

        }

        .active {

            font-weight: 500;

            font-size: 30rpx;

            color: #222222;

            .line {

                background-color: #279baa;

            }

        }

    }

    //

    .card_list {

        padding: 30rpx;

        .card_title {

            display: flex;

            justify-content: space-between;

            align-items: center;

            margin-bottom: 22rpx;

            .name {

                display: flex;

                align-items: center;

                .icon {

                    width: 6rpx;

                    height: 32rpx;

                    background: #279baa;

                    border-radius: 4rpx;

                    margin-right: 16rpx;

                }

                .text {

                    font-weight: 600;

                    font-size: 32rpx;

                    color: #222222;

                }

            }

            .meeting {

                display: flex;

                height: 52rpx;

                line-height: 52rpx;

                background: #ffffff;

                border-radius: 26rpx;

                border: 2rpx solid #eeeeee;

                padding: 0 24rpx;

                .text {

                    font-size: 24rpx;

                    color: #333333;

                }

            }

        }

        .list {

            .item {

                padding: 0rpx 30rpx 30rpx;

                background: #ffffff;

                border-radius: 8rpx;

                .head {

                    display: flex;

                    justify-content: space-between;

                    align-items: center;

                    border-bottom: 1rpx solid #e5e5e5;

                    padding: 22rpx 0;

                    margin-bottom: 22rpx;

                    .name {

                        font-weight: 600;

                        font-size: 32rpx;

                        color: #222222;

                    }

                    .status {

                        height: 38rpx;

                        line-height: 38rpx;

                        padding: 0 16rpx;

                        border-radius: 4rpx;

                        border: 1rpx solid #999999;

                        font-size: 22rpx;

                        color: #999999;

                    }

                }

                .line {

                    display: flex;

                    margin-bottom: 12rpx;

                    .label {

                        width: 140rpx;

                        color: #666666;

                    }

                    .value {

                        flex: 1;

                    }

                }

            }

        }

    }

}

.container_b {

    width: 100%;

    padding: 30rpx;

    background: #ffffff;

    padding-top: 20rpx;

    box-sizing: border-box;

}

</style>

 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