<template> 
 | 
    <view class="box"> 
 | 
        <view class="box_list"> 
 | 
            <view class="box_list_name">丁恩凯的「拜访申请」</view> 
 | 
            <view class="box_list_job">储运科</view> 
 | 
            <!-- <view class="box_list_status">待处理</view> --> 
 | 
            <view class="box_list_status1"> 
 | 
                <image src="@/static/ic_passed@2x.png" mode="widthFix"></image> 
 | 
                <!-- <image src="@/static/ic_refused@2x.png" mode="widthFix"></image> --> 
 | 
            </view> 
 | 
        </view> 
 | 
        <view class="box_list p"> 
 | 
            <view class="box_list_item"> 
 | 
                <text>拜访人</text> 
 | 
                <text>廖成瑶</text> 
 | 
            </view> 
 | 
            <view class="box_list_item"> 
 | 
                <text>预计入/离厂时间</text> 
 | 
                <text>05/01 8:00 - 05/01 18:00</text> 
 | 
            </view> 
 | 
        </view> 
 | 
        <view class="box_list p"> 
 | 
            <view class="box_list_item"> 
 | 
                <text>访客信息</text> 
 | 
                <text>孙志 18177665678</text> 
 | 
                <text>3309****2910</text> 
 | 
            </view> 
 | 
            <view class="box_list_item"> 
 | 
                <text>随访人员</text> 
 | 
                <text>李白 18177665678</text> 
 | 
                <text>3309****2910</text> 
 | 
            </view> 
 | 
            <view class="box_list_item"> 
 | 
                <text>杜甫 18177665678</text> 
 | 
                <text>3309****2910</text> 
 | 
            </view> 
 | 
        </view> 
 | 
        <view class="box_list p"> 
 | 
            <view class="box_list_item"> 
 | 
                <text>公司名称</text> 
 | 
                <text>安徽豆米科技有限公司</text> 
 | 
            </view> 
 | 
            <view class="box_list_item"> 
 | 
                <text>来访事由</text> 
 | 
                <text>商量合同事宜</text> 
 | 
            </view> 
 | 
            <view class="box_list_item"> 
 | 
                <text>人脸照片</text> 
 | 
                <view class="box_list_item_img"> 
 | 
                    <image src="@/static/logo@2x.png" mode="widthFix"></image> 
 | 
                </view> 
 | 
            </view> 
 | 
            <view class="box_list_item"> 
 | 
                <text>健康证</text> 
 | 
                <view class="box_list_item_img"> 
 | 
                    <image src="@/static/logo@2x.png" mode="widthFix"></image> 
 | 
                </view> 
 | 
            </view> 
 | 
        </view> 
 | 
    </view> 
 | 
</template> 
 | 
  
 | 
<script> 
 | 
    export default { 
 | 
        data() { 
 | 
            return { 
 | 
                 
 | 
            }; 
 | 
        } 
 | 
    } 
 | 
</script> 
 | 
<style> 
 | 
    page { 
 | 
        background-color: #F7F7F7; 
 | 
    } 
 | 
</style> 
 | 
<style lang="scss" scoped> 
 | 
    .box { 
 | 
        width: 100%; 
 | 
        .p { 
 | 
            padding: 0 30rpx !important; 
 | 
        } 
 | 
        .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_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-family: PingFangSC, PingFang SC; 
 | 
                        font-weight: 400; 
 | 
                        color: #777777; 
 | 
                    } 
 | 
                    &:nth-child(2) { 
 | 
                        font-size: 28rpx; 
 | 
                        font-family: PingFangSC, PingFang SC; 
 | 
                        font-weight: 400; 
 | 
                        color: #222222; 
 | 
                        margin-top: 20rpx; 
 | 
                    } 
 | 
                    &:nth-child(3) { 
 | 
                        font-size: 28rpx; 
 | 
                        font-family: PingFangSC, PingFang SC; 
 | 
                        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; 
 | 
            } 
 | 
        } 
 | 
    } 
 | 
</style> 
 |