| <template> | 
|     <div class="desc"> | 
|         <div class="desc_info"> | 
|             <div class="desc_info_title"> | 
|                 <span>林明燕提交的工序返工申请</span> | 
|                 <span>待审核</span> | 
|             </div> | 
|             <div class="desc_info_company">汇智新材</div> | 
|             <div class="desc_info_box"> | 
|                 <div class="desc_info_box_item"> | 
|                     <span>申请编号:</span> | 
|                     <span>2022062183928394</span> | 
|                 </div> | 
|                 <div class="desc_info_box_item"> | 
|                     <span>申请日期:</span> | 
|                     <span>2022/06/12</span> | 
|                 </div> | 
|                 <div class="desc_info_box_item"> | 
|                     <span>申请类型:</span> | 
|                     <span>返工申请</span> | 
|                 </div> | 
|                 <div class="desc_info_box_item"> | 
|                     <span>客户信息:</span> | 
|                     <span>中航客户</span> | 
|                 </div> | 
|                 <div class="desc_info_box_item"> | 
|                     <span>销售订单:</span> | 
|                     <span>S20220622-0001</span> | 
|                 </div> | 
|                 <div class="desc_info_box_item"> | 
|                     <span>退回原因:</span> | 
|                     <span>有毛刺,需要返修</span> | 
|                 </div> | 
|                 <div class="desc_info_box_item"> | 
|                     <span>申请人:</span> | 
|                     <span>李小慧/NCL班组</span> | 
|                 </div> | 
|             </div> | 
|         </div> | 
|         <div class="desc_qd"> | 
|             <div class="desc_qd_header"> | 
|                 <div class="desc_qd_header_x"></div> | 
|                 <span>退回工装清单(1)</span> | 
|             </div> | 
|             <div class="desc_qd_info"> | 
|                 <div class="desc_qd_info_item"> | 
|                     <span class="black">LK0001:</span> | 
|                     <span class="black">10件</span> | 
|                 </div> | 
|                 <div class="desc_qd_info_item"> | 
|                     <span>物料信息:</span> | 
|                     <span>花键2993 | 21E8-002-2993-H1</span> | 
|                 </div> | 
|                 <div class="desc_qd_info_item"> | 
|                     <span>批次号:</span> | 
|                     <span>PC-20220719-0001</span> | 
|                 </div> | 
|             </div> | 
|         </div> | 
|         <div class="desc_process"> | 
|             <div class="desc_process_title"> | 
|                 <div class="desc_process_title_x"></div> | 
|                 <span>流程</span> | 
|             </div> | 
|             <div class="desc_process_content"> | 
|                 <div class="item"> | 
|                     <div class="item_left"> | 
|                         <div class="item_x"></div> | 
|                         <div class="item_left_img"> | 
|                             <p>文武</p> | 
|                             <img src="../../assets/icon/ic_pass@2x.png" alt="" /> | 
|                         </div> | 
|                         <div class="item_left_text"> | 
|                             <span>发起申请</span> | 
|                             <span>我</span> | 
|                         </div> | 
|                     </div> | 
|                     <div class="item_right">11-28 13:00</div> | 
|                 </div> | 
|                 <div class="item"> | 
|                     <div class="item_left"> | 
|                         <div class="item_left_img"> | 
|                             <p>文武</p> | 
|                             <img src="../../assets/icon/ic_shenhe@2x.png" alt="" /> | 
|                         </div> | 
|                         <div class="item_left_text"> | 
|                             <span>发起申请</span> | 
|                             <span>我(审批中)</span> | 
|                         </div> | 
|                     </div> | 
|                     <div class="item_right"></div> | 
|                 </div> | 
|             </div> | 
|         </div> | 
|     </div> | 
| </template> | 
|   | 
| <script setup lang="ts"> | 
|   | 
| </script> | 
|   | 
| <style lang="scss" scoped> | 
|     .desc { | 
|         position: absolute; | 
|         top: 0; | 
|         width: 100%; | 
|         height: 100%; | 
|         .desc_info { | 
|             padding: 30px; | 
|             background: #ffffff; | 
|             .desc_info_title { | 
|                 display: flex; | 
|                 align-items: center; | 
|                 justify-content: space-between; | 
|                 span { | 
|                     &:first-child { | 
|                         font-size: 32px; | 
|                         font-weight: 500; | 
|                         color: #333333; | 
|                     } | 
|                     &:last-child { | 
|                         font-size: 26px; | 
|                         font-weight: 400; | 
|                         color: #F5A400; | 
|                     } | 
|                 } | 
|             } | 
|             .desc_info_company { | 
|                 font-size: 24px; | 
|                 font-weight: 400; | 
|                 color: #666666; | 
|                 margin: 24px 0; | 
|             } | 
|             .desc_info_box { | 
|                 padding: 24px 30px; | 
|                 background: #F7F7F7; | 
|                 border-radius: 16px; | 
|                 display: flex; | 
|                 flex-direction: column; | 
|                 .desc_info_box_item { | 
|                     display: flex; | 
|                     align-items: center; | 
|                     margin-bottom: 24px; | 
|                     &:last-child { | 
|                         margin-bottom: 0 !important; | 
|                     } | 
|                     span { | 
|                         font-size: 26px; | 
|                         font-weight: 400; | 
|                         &:first-child { | 
|                             color: #666666; | 
|                         } | 
|                         &:last-child { | 
|                             color: #222222; | 
|                         } | 
|                     } | 
|                 } | 
|             } | 
|         } | 
|         .desc_qd { | 
|             margin-top: 40px; | 
|             .desc_qd_header { | 
|                 display: flex; | 
|                 align-items: center; | 
|                 padding: 0 30px; | 
|                 .desc_qd_header_x { | 
|                     width: 8px; | 
|                     height: 30px; | 
|                     background: #4275FC; | 
|                     border-radius: 2px; | 
|                     margin-right: 12px; | 
|                 } | 
|                 span { | 
|                     font-size: 32px; | 
|                     font-weight: 500; | 
|                     color: #222222; | 
|                 } | 
|             } | 
|             .desc_qd_info { | 
|                 background: white; | 
|                 padding: 30px; | 
|                 margin-top: 30px; | 
|                 .desc_qd_info_item { | 
|                     display: flex; | 
|                     align-items: center; | 
|                     margin-bottom: 24px; | 
|                     &:last-child { | 
|                         margin-bottom: 0; | 
|                     } | 
|                     .black { | 
|                         font-size: 28px !important; | 
|                         font-weight: 400 !important; | 
|                         color: #222222 !important; | 
|                     } | 
|                     span { | 
|                         font-size: 26px; | 
|                         font-weight: 400; | 
|                         &:first-child { | 
|                             color: #666666; | 
|                         } | 
|                         &:last-child { | 
|                             color: #333333; | 
|                         } | 
|                     } | 
|                 } | 
|             } | 
|         } | 
|         .desc_process { | 
|             margin-top: 40px; | 
|             .desc_process_title { | 
|                 display: flex; | 
|                 align-items: center; | 
|                 padding: 0 30px; | 
|                 span { | 
|                     font-size: 32px; | 
|                     font-weight: 500; | 
|                     color: #222222; | 
|                 } | 
|                 .desc_process_title_x { | 
|                     margin-right: 12px; | 
|                     width: 8px; | 
|                     height: 30px; | 
|                     background: #4275FC; | 
|                     border-radius: 2px; | 
|                 } | 
|             } | 
|             .desc_process_content { | 
|                 padding: 30px; | 
|                 background: white; | 
|                 margin-top: 30px; | 
|                 .item { | 
|                     display: flex; | 
|                     justify-content: space-between; | 
|                     margin-bottom: 60px; | 
|                     &:last-child { | 
|                         margin-bottom: 0 !important; | 
|                     } | 
|                     .item_left { | 
|                         display: flex; | 
|                         align-items: center; | 
|                         position: relative; | 
|                         .item_x { | 
|                             position: absolute; | 
|                             bottom: -100%; | 
|                             left: 38px; | 
|                             height: 150px; | 
|                             border-right: 2PX solid #E5E5E5; | 
|                         } | 
|                         .item_left_img { | 
|                             width: 76px; | 
|                             height: 76px; | 
|                             background: #4275FC; | 
|                             border: 4px solid #FFFFFF; | 
|                             position: relative; | 
|                             border-radius: 50%; | 
|                             display: flex; | 
|                             align-content: center; | 
|                             justify-content: center; | 
|                             white-space: nowrap; | 
|                             p { | 
|                                 font-size: 22px; | 
|                                 font-weight: 400; | 
|                                 color: #FFFFFF; | 
|                             } | 
|                             img { | 
|                                 position: absolute; | 
|                                 bottom: 0; | 
|                                 right: 0; | 
|                                 width: 28px; | 
|                                 height: 28px; | 
|                             } | 
|                         } | 
|                         .item_left_text { | 
|                             display: flex; | 
|                             flex-direction: column; | 
|                             span { | 
|                                 margin-left: 20px; | 
|                                 &:first-child { | 
|                                     font-size: 28px; | 
|                                     font-weight: 400; | 
|                                     color: #111111; | 
|                                 } | 
|                                 &:last-child { | 
|                                     font-size: 24px; | 
|                                     font-weight: 400; | 
|                                     color: #999999; | 
|                                     margin-top: 10px; | 
|                                 } | 
|                             } | 
|                         } | 
|                     } | 
|                     .item_right { | 
|                         font-size: 24px; | 
|                         font-weight: 400; | 
|                         color: #999999; | 
|                     } | 
|                 } | 
|             } | 
|         } | 
|     } | 
| </style> |