<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: 600; 
 | 
      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> 
 |