|  |  | 
 |  |  |     <div class="modal_wrap"> | 
 |  |  |       <div class="modal_content"> | 
 |  |  |         <div class="header"> | 
 |  |  |           <img v-if="info.status == '3' || info.status == '6'" class="head_bg" src="@/assets/task/bg_shenhe_fail@2x.png" alt=""> | 
 |  |  |           <img v-else-if="info.status == '2' || info.status == '5'" class="head_bg" src="@/assets/task/bg_shenhe_pass@2x.png" alt=""> | 
 |  |  |           <img v-if="info.status == '3' || info.status == '6'" class="head_bg" src="@/assets/task/bg_shenhe_fail@2x.png" | 
 |  |  |             alt=""> | 
 |  |  |           <img v-else-if="info.status == '2' || info.status == '5'" class="head_bg" | 
 |  |  |             src="@/assets/task/bg_shenhe_pass@2x.png" alt=""> | 
 |  |  |           <img v-else-if="info.status == '4'" class="head_bg" src="@/assets/task/bg_shenhe_chexiao@2x.png" alt=""> | 
 |  |  |           <img v-else class="head_bg" src="@/assets/task/bg_shenhe@2x.png" alt=""> | 
 |  |  |           <div class="left"> | 
 |  |  |             <div class="h1">物流车预约</div> | 
 |  |  |             <div class="time">提交时间:{{ info.createDate }}</div> | 
 |  |  |           </div> | 
 |  |  |           <div class="right" :class="{ scs: info.status == '2' || info.status == '5', msg: info.status == '3' || info.status == '6' }">{{ statusMap[info.status] }}</div> | 
 |  |  |           <div class="right" | 
 |  |  |             :class="{ scs: info.status == '2' || info.status == '5', msg: info.status == '3' || info.status == '6' }">{{ | 
 |  |  |               statusMap[info.status] }}</div> | 
 |  |  |         </div> | 
 |  |  |         <div class="info"> | 
 |  |  |           <div class="title">物流车预约信息</div> | 
 |  |  | 
 |  |  |             <div class="item"> | 
 |  |  |               <div class="label">准运证照片</div> | 
 |  |  |               <div v-if="info.transportImg" class="value"> | 
 |  |  |                 <el-image  style="width: 100px" :preview-src-list="[info.prefixUrl + info.transportImg]" :src="info.prefixUrl + info.transportImg" alt="" /> | 
 |  |  |                 <el-image style="width: 100px" :preview-src-list="[info.prefixUrl + info.transportImg]" | 
 |  |  |                   :src="info.prefixUrl + info.transportImg" alt="" /> | 
 |  |  |               </div> | 
 |  |  |             </div> | 
 |  |  |           </div> | 
 |  |  | 
 |  |  |         } | 
 |  |  |       }) | 
 |  |  |     }, | 
 |  |  |     close(){ | 
 |  |  |     close() { | 
 |  |  |       this.isShowModal = false | 
 |  |  |       this.$emit('close') | 
 |  |  |     }, | 
 |  |  | 
 |  |  |     border-radius: 8px; | 
 |  |  |     overflow: hidden; | 
 |  |  |     height: 100%; | 
 |  |  |  | 
 |  |  |     .title { | 
 |  |  |       font-weight: 600; | 
 |  |  |       font-size: 18px; | 
 |  |  | 
 |  |  |       margin: 0 -30px; | 
 |  |  |       border-radius: 8px 8px 0 0; | 
 |  |  |       position: relative; | 
 |  |  |       .head_bg{ | 
 |  |  |  | 
 |  |  |       .head_bg { | 
 |  |  |         position: absolute; | 
 |  |  |         width: 100%; | 
 |  |  |         height: 100%; | 
 |  |  | 
 |  |  |         top: 0; | 
 |  |  |         z-index: 9; | 
 |  |  |       } | 
 |  |  |  | 
 |  |  |       .h1 { | 
 |  |  |         font-weight: 600; | 
 |  |  |         font-size: 22px; | 
 |  |  | 
 |  |  |         position: relative; | 
 |  |  |         z-index: 99; | 
 |  |  |       } | 
 |  |  |       .scs{ | 
 |  |  |  | 
 |  |  |       .scs { | 
 |  |  |         background-color: #00BA67; | 
 |  |  |       } | 
 |  |  |       .msg{ | 
 |  |  |  | 
 |  |  |       .msg { | 
 |  |  |         background-color: #ED4545; | 
 |  |  |       } | 
 |  |  |     } | 
 |  |  | 
 |  |  |         display: flex; | 
 |  |  |         margin-bottom: 24px; | 
 |  |  |         position: relative; | 
 |  |  |  | 
 |  |  |         .separate { | 
 |  |  |           position: absolute; | 
 |  |  |           border-left: 2px dashed #cccccc; | 
 |  |  | 
 |  |  |           height: calc(100% - 2px); | 
 |  |  |           top: 42px; | 
 |  |  |         } | 
 |  |  |         .info{ | 
 |  |  |  | 
 |  |  |         .info { | 
 |  |  |           padding-top: 10px; | 
 |  |  |           margin-left: 20px; | 
 |  |  |           margin-right: 16px; | 
 |  |  |  | 
 |  |  |           .iconnew { | 
 |  |  |             width: 24px; | 
 |  |  |             height: 24px; | 
 |  |  |           } | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         .avatar_wrap { | 
 |  |  |           width: 40px; | 
 |  |  |           height: 40px; | 
 |  |  | 
 |  |  |             color: #777777; | 
 |  |  |  | 
 |  |  |             .status { | 
 |  |  |               color: $primary-color; | 
 |  |  |               color: $primaryColor; | 
 |  |  |             } | 
 |  |  |           } | 
 |  |  |  | 
 |  |  | 
 |  |  |           width: 100%; | 
 |  |  |           overflow-x: auto; | 
 |  |  |           margin-top: 12px; | 
 |  |  |  | 
 |  |  |           .carbon_item { | 
 |  |  |             text-align: center; | 
 |  |  |             flex-shrink: 0; |