/* 运单查询主体 */ .waybill-body-main { background-color: #F5F5F7; width: 100%; margin-bottom: 0; } /*背景图 */ .logistics-image { min-height: 64px; } .head-image.logistics-image { width: 100%; height: 64px; opacity: 0.75; min-height: 64px; } .head-image-wrapper .head-content { position: absolute; top: 4px; text-align: center; } .head-image-wrapper .head-font span { font-size: 18px; font-weight: 500; color: #FFFFFF; letter-spacing: 0; text-align: justify; line-height: 24px; text-shadow: 0 0 4px rgba(0, 0, 0, 0.1); } /* 筹建中 */ .preparation-body-main { background-color: #F5F5F7; width: 100%; height: 400px; } .preparation-block { position: relative; width: 100%; height: 400px; background-color: #fff; text-align: center; } .preparation-block .build-block { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } .build-block img { width: 70px; } .build-block div { margin-top: 10px; font-size: 14px; color: #666666; letter-spacing: 0; text-align: center; } /* 查询块 */ .query-block { position: relative; z-index: 1; width: 100%; box-sizing: border-box; background-color: #fff; padding: 24px; } .query-block .query-content { width: 100%; height: 100%; } .pc-waybill-box { display: none; } .waybill-input, .waybill-show { position: relative; } .waybill-input .delete-all, .waybill-show .delete-all { position: absolute; right: 20px; width: 16px; top: 16px; cursor: pointer; } .verify-row { width: 100%; margin-top: 16px; } .verify-row div:nth-child(1) { float: left; margin-top: 5px; width: 20%; } .verify-row div:nth-child(1) span { font-size: 14px; color: #666666; line-height: 22px; } .verify-row div:nth-child(2) { width: calc(80% - 88px); float: left; } .verify-row div:nth-child(3) { float: left; margin-left: 8px; margin-top: 4px; } .verify-row div:nth-child(4) { float: left; margin-left: 16px; margin-top: 7px; } .img-change-box { display: none; } .mobile-waybill-box { height: 32px; } .form-label { width: 20%; height: 22px; font-size: 14px; color: #666666; line-height: 22px; margin-top: 5px; float: left; } .form-input { width: 80%; float: left; } .waybill-textarea { width: 100%; height: 32px; box-sizing: border-box; background: #FFFFFF; border: 1px solid #DDDDDD; border-radius: 4px; padding: 5px 12px; font-size: 14px; color: #333333; line-height: 22px; } .form-button { background: #286EF0; border-radius: 4px; height: 32px; text-align: center; cursor: pointer; transition: background-color 0.5s; -moz-transition: background-color 0.5s; -webkit-transition: background-color 0.5s; -o-transition: background-color 0.5s; } .mobile-form-button { width: 100%; float: left; margin-top: 24px; } .submit-btn { font-size: 14px; color: #FFFFFF; letter-spacing: 0; line-height: 30px; } .input-content { width: 100%; height: 32px; box-sizing: border-box; background: #FFFFFF; border: 1px solid #DDDDDD; border-radius: 4px; padding: 5px 12px; font-size: 14px; color: #333333; line-height: 22px; } .line-row { margin-top: 16px } .from-line { height: 1px; width: 100%; background-color: #E5E5E5; } .history-row { margin-top: 24px; } .history-row span { font-size: 14px; color: #1D1D1F; font-weight: 500; } .write-waybill { position: absolute; top: 16px; left: 16px; } .history-waybill { overflow: hidden; } .history-waybill li { margin-top: 8px; } .write-waybill li { margin-bottom: 8px; background: #F5F5F5; } .history-waybill li, .write-waybill li { width: 46%; height: 32px; border: 1px solid #DDDDDD; border-radius: 4px; font-size: 14px; color: #333333; line-height: 22px; margin-right: 8px; padding: 4px 11px; box-sizing: border-box; float: left; } .history-waybill .waybill-no { cursor: pointer; float: left; } .history-waybill li div, .write-waybill li div { float: right; } .history-waybill .delete-img, .write-waybill .delete-img { width: 16px; margin-top: 3px; cursor: pointer; float: right; } .waybill-textarea::-webkit-input-placeholder, .input-content::-webkit-input-placeholder { font-size: 14px; color: #999999; line-height: 22px; font-family: '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif; } /* 使用webkit内核的浏览器 */ .waybill-textarea::-moz-placeholder, .input-content::-moz-placeholder { font-size: 14px; color: #999999; line-height: 22px; font-family: '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif; } /* Firefox版本4-18 */ .waybill-textarea:-moz-placeholder, .input-content:-moz-placeholder { font-size: 14px; color: #999999; line-height: 22px; font-family: '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif; } /* Firefox版本19+ */ .waybill-textarea::-ms-input-placeholder, .input-content::-ms-input-placeholder { font-size: 14px; color: #999999; line-height: 22px; font-family: '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif; } .form-button:hover { background: #4A86F5; } #img-verify { height: 25px; width: 80px; } .img-change { color: #286EF0; font-size: 14px; background: transparent; } /* 运单信息 */ .waybill-block { width: 100%; background-color: #F5F5F7; margin-top: 8px; overflow: hidden; } .waybill-block .waybill-list { list-style: none; width: 100%; background-color: #F5F5F7; margin-bottom: 32px; overflow: hidden; } .waybill-block .waybill-list .waybill-item { background-color: #fff; overflow: hidden; } .waybill-number-title { margin-left: 16px; margin-right: 16px; } .table-block { overflow: auto; margin-left: 16px; margin-right: 16px; } .waybill-item .line { display: none; } .waybill-item .waybill-number { width: 100%; padding: 16px 8px; box-sizing: border-box; display: block; text-align: left; margin: auto; } .waybill-number .title { display: inline-block; font-size: 16px; color: #666666; letter-spacing: 0; padding-bottom: 16px; } .waybill-number .number { font-size: 16px; font-weight: 500; color: #1D1D1F; letter-spacing: 0; padding-left: 10px; } .waybill-number .openbtn { display: none; } /* 收起部分 */ .waybill-number .open-block { display: none; width: 100%; } .waybill-number .information-title { font-size: 16px; color: #333333; line-height: 22px; font-weight: 500; margin-top: 32px; margin-left: 16px; text-align: left; } /* 路线 */ .waybill-number .course-block { position: relative; background: #F5F5F7; border-radius: 4px; width: 100%; height: 119px; } .waybill-number .course-block ul { list-style: none; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .waybill-number .course-block ul::before { content: ''; height: 1px; background: #286EF0; display: block; position: absolute; left: 29px; right: 34px; top: 53px; } .waybill-number .course-block ul::after { background: #286EF0; border: solid 2px #286EF0; border-radius: 100%; content: ''; display: block; height: 6px; width: 6px; position: absolute; top: 48px; right: 20px; } .course-block ul li { width: 33.3%; display: block; float: left; text-align: center; } .course-block ul li .airport-content { padding: 16px 0; position: relative; } .course-block ul li:first-child .airport-content { padding-left: 16px; } .course-block ul li:last-child .airport-content { padding-right: 16px; } .airport-content .airport-title { font-size: 16px; margin: 22px auto 1px; color: #1D1D1F; letter-spacing: 0; } .airport-content .airport-abbreviation { font-size: 14px; color: #000000; letter-spacing: 0; } /*----- airport-marker-----*/ .airport-content .airport-marker { position: absolute; height: 18px; width: 18px; background: #F5F5F7; left: 50%; right: 0; top: 44px; transform: translate(-50%, 0); } /* 小圆点 */ .airport-content .airport-marker:after { /* background: #286EF0; */ background: #F5F5F7; border: solid 2px #286EF0; border-radius: 100%; content: ''; display: block; height: 6px; width: 6px; position: absolute; top: 4px; left: 4px; } /* 第一个和最后一个特殊样式 */ .course-block ul li:first-child .airport-title, .course-block ul li:last-child .airport-title { font-weight: 500; } .course-block ul li:first-child .airport-abbreviation, .course-block ul li:last-child .airport-abbreviation { font-weight: 500; } .course-block ul li:first-child { text-align: left; } .course-block ul li:first-child .airport-marker { left: 22px; } .course-block ul li:first-child .airport-marker::after { background: #286EF0; } .course-block ul li:last-child { text-align: right; } .course-block ul li:last-child .airport-marker { display: none; } .course-block ul li .sign-img img { width: 20px; height: 20px; margin-right: 4px; } .course-block ul li:first-child .sign-img img:first-child { margin-left: 0; } /* .course-block ul li:last-child .sign-img img:last-child { margin-right: 0; } */ /* 基本信息 */ .waybill-number .essential-information { width: 100%; text-align: left; } .essential-information tr td { padding-top: 16px; height: 22px; } .essential-information th { padding-top: 16px; font-size: 14px; color: #666666; line-height: 22px; font-weight: 400; } .essential-information td { font-size: 14px; color: #333333; line-height: 22px; font-weight: 400; padding-left: 16px; } .essential-information th:nth-child(1), .essential-information th:nth-child(3) { width: 18%; } .essential-information td:nth-child(2), .essential-information td:nth-child(4) { width: 40%; } /* 航段信息 */ .waybill-number .flight-path-information { margin-top: 16px; width: 690px; text-align: left; position: relative; } .flight-path-information th { height: 54px; background-color: #fafafa; border-bottom: solid 1px #DDDDDD; font-size: 14px; color: #666666; line-height: 22px; font-weight: 500; padding-left: 24px; } .flight-path-information th:nth-child(1), .flight-path-information th:nth-child(2) { width: 70px; } .flight-path-information th:nth-child(3){ width: 46px; } .flight-path-information th:nth-child(4) { width: 76px; } .flight-path-information th:nth-child(9) { width:80px; } .flight-path-information td { height: 76px; border-bottom: 1px solid #DDDDDD; padding-left: 24px; font-size: 14px; color: #333333; line-height: 22px; position: relative; } .flight-path-information td .status-affirm { padding-left: 16px; } .status-affirm:before { background: #286EF0; border-radius: 100%; content: ''; display: block; top: 34px; left: 25px; position: absolute; width: 8px; height: 8px; } /* 状态信息 */ /* ul */ .waybill-number .status-information { list-style: none; text-align: left; width: 100%; padding: 17px 16px; box-sizing: border-box; } /* status-item */ .status-information .status-item { padding-left: 40px; position: relative; } .status-information .status-item:last-child { padding-bottom: 0; } /* 时间 */ .status-time { width: 83px; text-align: right; } .status-time span { font-size: 14px; color: #999; text-align: right; line-height: 22px; } /*----- timeline-marker-----*/ .status-marker { position: absolute; top: 0; bottom: 0; left: 0; width: 43px; } /* 线 */ .status-marker:before { content: ''; width: 2px; background: #e2e2e2; display: block; position: absolute; top: 21px; bottom: 0; left: 21px; } /* 小圆点 */ .status-marker:after { background: #ccc; border: 1px solid #fff; border-radius: 100%; content: ''; display: block; height: 10px; width: 10px; position: absolute; top: 5.5px; left: 16px; } .status-item:last-child .status-marker:before { height: 0; } /*----- timeline-content -----*/ .status-detial { margin-bottom: 24px; display: inline-block; } .status-item:last-child .status-detial{ margin-bottom: 0; } .status-detial .status-title { font-size: 16px; color: #999999; text-align: left; line-height: 24px; padding-bottom: 4px; } .status-detial .status-content { font-size: 14px; color: #999999; text-align: left; line-height: 22px; } /* 第一行 */ .status-item:first-child .status-time span { color: #666; } .status-item:first-child .status-marker:before { top: 21px; } .status-item:first-child .status-marker:after { background: #1677FF; border: 1px solid #1677FF; } .status-item:first-child .status-title { color: #333333; font-weight: 500; } .status-item:first-child .status-content { color: #666666; } .status-information { display: table; } .status-information .status-item { display: table-row; padding: 0; } .status-information .status-time, .status-information .status-marker { display: table-cell; vertical-align: top; } .status-information .status-marker { position: relative; } .layui-layer-content { color: #fff !important; }