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