厂改园

liukangdong

2024-06-07 ac44819c6bb4e71161c0b042d27a91c4f2c6666e

 h5/n_pages/visitorApproval/visitorApproval.vue

@@ -1,372 +1,368 @@
<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_item1">
            <view class="box_list_item1_head">
               访客信息
            </view>
            <view class="box_list_item_img">
               <image src="@/static/logo@2x.png" mode="widthFix"></image>
            </view>
            <view class="box_list_item_info">
               <text>孙志 18177665678</text>
               <text>身份证 3309****2910</text>
               <text>皖A88789</text>
            </view>
         </view>
         <view class="box_list_item1">
            <view class="box_list_item1_head">
               随访人员
            </view>
            <view class="box_list_item_img">
               <image src="@/static/logo@2x.png" mode="widthFix"></image>
            </view>
            <view class="box_list_item_info">
               <text>李小双 18177665678</text>
               <text>身份证 3309****2910</text>
               <text>皖A88789</text>
            </view>
         </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>
      <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>
               <view class="right">
                  <view class="right_top">
                     <text>栓子哥提交的申请</text>
                     <text>2023-05-01 08:00</text>
                  </view>
                  <view class="right_bottom">
                     <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>
               </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>
               </view>
            </view>
         </view>
      </view>
   </view>
  <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_item1">
        <view class="box_list_item1_head"> 访客信息 </view>
        <view class="box_list_item_img">
          <image src="@/static/logo@2x.png" mode="widthFix"></image>
        </view>
        <view class="box_list_item_info">
          <text>孙志 18177665678</text>
          <text>身份证 3309****2910</text>
          <text>皖A88789</text>
        </view>
      </view>
      <view class="box_list_item1">
        <view class="box_list_item1_head"> 随访人员 </view>
        <view class="box_list_item_img">
          <image src="@/static/logo@2x.png" mode="widthFix"></image>
        </view>
        <view class="box_list_item_info">
          <text>李小双 18177665678</text>
          <text>身份证 3309****2910</text>
          <text>皖A88789</text>
        </view>
      </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>
    <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>
          <view class="right">
            <view class="right_top">
              <text>栓子哥提交的申请</text>
              <text>2023-05-01 08:00</text>
            </view>
            <view class="right_bottom">
              <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>
          </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>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
   export default {
      data() {
         return {
				
         };
      }
   }
export default {
  data() {
    return {

    }
  }
}
</script>
<style>
   page {
      background-color: #F7F7F7;
   }
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_title {
            font-size: 32rpx;
            font-weight: 500;
            color: #222222;
            margin-bottom: 24rpx;
         }
         .box_list_list {
            width: 100%;
            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-right: 20rpx;
               image {
                  width: 100%;
                  height: 100%;
               } 
            }
            .box_list_item_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;
                  }
               }
            }
         }
         .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;
         }
      }
   }
.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_title {
      font-size: 32rpx;
      font-weight: 500;
      color: #222222;
      margin-bottom: 24rpx;
    }
    .box_list_list {
      width: 100%;
      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-right: 20rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .box_list_item_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;
          }
        }
      }
    }
    .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;
    }
  }
}
</style>