| <template> | 
|     <div class="bg"> | 
|         <V-WorkOrderInfo :info="info"></V-WorkOrderInfo> | 
|         <div class="bg_list"> | 
|             <div class="bg_list_item"> | 
|                 <div class="bg_list_item_top"> | 
|                     <div class="bg_list_item_top_left"> | 
|                         <div class="bg_list_item_top_left_x"></div> | 
|                         <span>投料明细</span> | 
|                         <!-- <span class="blue left">{{tlTotal()}}</span> --> | 
|                     </div> | 
|                     <!-- <div class="bg_list_item_top_right" @click="jumpTL" v-if="proxy.$auth('h5:workorderinput:create')"> | 
|                         <img src="@/assets/icon/gongdan_ic_shoudong@2x.png" alt="" /> | 
|                         <span>手动录入</span> | 
|                     </div> --> | 
|                 </div> | 
|                 <template v-if="feedingData && feedingData.length > 0"> | 
|                     <van-swipe-cell v-for="(item, index) in feedingData" :key="index"> | 
|                         <div class="bg_list_item_num"> | 
|                             <div class="bg_list_item_num_item"> | 
|                                 <!-- <span>{{item.code}}</span> --> | 
|                                 <div class="bg_list_item_num_item_wl"> | 
|                                     <span> {{ item.materialName }}{{ item.procedureName ? ` | ${item.procedureName}` : '' }}</span> | 
|                                     <div class="bg_list_item_num_item_wl_lx"> | 
|                                         <span class="green" v-if="item.qualityType == 0">合格 / </span> | 
|                                         <span class="yellow" v-if="item.qualityType == 1">不良 / </span> | 
|                                         <span class="red" v-if="item.qualityType == 2">报废 / </span> | 
|                                         <span>{{ item.locationName }}</span> | 
|                                         <span>{{ item.batch ? ` / ${item.batch}` : '' }}</span> | 
|                                     </div> | 
|                                 </div> | 
|                                 <div class="bg_list_item_num_item_sr"> | 
|                                     <!-- <input v-model="item.num" :disabled="!proxy.$auth('h5:workorderinput:update')" @blur="change(item.id, item.num, 'T', item.maxNum, item)" type="number" /> --> | 
|                                     <span>{{item.num}} {{item.unitName}}</span> | 
|                                 </div> | 
|                             </div> | 
|                         </div> | 
|                         <!-- <template #right v-if="proxy.$auth('h5:workorderinput:delete')"> | 
|                             <van-button style="height: 100%;" square text="删除" @click="deleItem(item.id, 'T')" type="danger" /> | 
|                         </template> --> | 
|                     </van-swipe-cell> | 
|                 </template> | 
|                 <template v-else> | 
|                     <div class="kong"> | 
|                         <span>暂无数据</span> | 
|                     </div> | 
|                 </template> | 
|             </div> | 
|             <div class="bg_list_item"> | 
|                 <div class="bg_list_item_top"> | 
|                     <div class="bg_list_item_top_left"> | 
|                         <div class="bg_list_item_top_left_x"></div> | 
|                         <span>产出明细</span> | 
|                     </div> | 
|                     <div class="bg_list_item_top_right" @click="jumpTest(info.id)"> | 
|                         <span>查看检验记录</span> | 
|                         <van-icon name="arrow" color="#4275FC" /> | 
|                     </div> | 
|                 </div> | 
|                 <!-- <template v-if="produceData && produceData.length > 0"> --> | 
|                     <!-- v-for="(item, index) in produceData" :key="index" --> | 
|                     <van-swipe-cell> | 
|                         <div class="bg_list_item_num"> | 
|                             <div class="bg_list_item_num_item"> | 
|                                 <span>良品数</span> | 
|                                 <div class="bg_list_item_num_item_sr"> | 
|                                     <!-- :disabled="!proxy.$auth('h5:workorderoutput:update')" --> | 
|                                     <!-- @blur="change(item.id, item.num, 'C', item.maxNum, item)" --> | 
|                                     <!-- <input type="number" v-model="produceFrom.qualified" @blur="changeCC('0', produceFrom.qualified, produceFrom.qualifiedId)" placeholder="请输入" /> --> | 
|                                     <span v-if="info.umodel">{{produceFrom.qualified}} {{info.umodel.name}}</span> | 
|                                 </div> | 
|                             </div> | 
|                         </div> | 
|                     </van-swipe-cell> | 
|                     <van-swipe-cell> | 
|                         <div class="bg_list_item_num"> | 
|                             <!-- @blur="change(item.id, item.num, 'C', item.maxNum, item)" --> | 
|                             <div class="bg_list_item_num_item"> | 
|                                 <span>不良数</span> | 
|                                 <div class="bg_list_item_num_item_sr"> | 
|                                     <!-- :disabled="!proxy.$auth('h5:workorderoutput:update')" --> | 
|                                     <!-- @blur="change(item.id, item.num, 'C', item.maxNum, item)" --> | 
|                                     <!-- <input type="number" v-model="produceFrom.undesirable" @blur="changeCC('1', produceFrom.undesirable, produceFrom.undesirableId)" placeholder="请输入" /> --> | 
|                                     <span v-if="info.umodel">{{produceFrom.undesirable}} {{info.umodel.name}}</span> | 
|                                 </div> | 
|                             </div> | 
|                         </div> | 
|                     </van-swipe-cell> | 
|                     <!-- <van-swipe-cell> | 
|                         <div class="bg_list_item_num"> | 
|                             <div class="bg_list_item_num_item" @click="show = true"> | 
|                                 <span>不良项</span> | 
|                                 <div class="bg_list_item_num_item_sr"> | 
|                                     <span>设置 ></span> | 
|                                 </div> | 
|                             </div> | 
|                         </div> | 
|                     </van-swipe-cell> --> | 
|                 <!-- </template> | 
|                 <template v-else> | 
|                     <div class="kong"> | 
|                         <span>暂无数据</span> | 
|                     </div> | 
|                 </template> --> | 
|             </div> | 
|             <!-- <div class="bg_list_item"> | 
|                 <div class="bg_list_item_top"> | 
|                     <div class="bg_list_item_top_left"> | 
|                         <div class="bg_list_item_top_left_x"></div> | 
|                         <span>产出明细</span> | 
|                         <span class="blue left">{{ccTotal()}}</span> | 
|                     </div> | 
|                 </div> | 
|                 <template v-if="produceData.length > 0"> | 
|                     <div class="bg_list_item_num" v-for="(item, index) in produceData" :key="index"> | 
|                         <div class="bg_list_item_num_item"> | 
|                             <span>{{item.code}}</span> | 
|                             <span>{{item.num}}{{item.dw}}</span> | 
|                         </div> | 
|                     </div> | 
|                 </template> | 
|                 <div class="wu" v-else>暂无数据</div> | 
|             </div> --> | 
|             <!-- <div class="bg_list_item"> | 
|                 <div class="bg_list_item_top"> | 
|                     <div class="bg_list_item_top_left"> | 
|                         <div class="warning"></div> | 
|                         <span>不良产出明细</span> | 
|                         <span class="yellow left">{{blTotal()}}</span> | 
|                     </div> | 
|                     <div class="bg_list_item_top_right" @click="jumpTest(info.id)"> | 
|                         <span>查看检验记录</span> | 
|                         <van-icon name="arrow" color="#4275FC" /> | 
|                     </div> | 
|                 </div> | 
|                 <div class="bg_list_item_num" v-if="undesirable.length > 0"> | 
|                     <div class="bg_list_item_num_item" v-for="(item, index) in undesirable" :key="index"> | 
|                         <span> | 
|                             {{item.code}} | 
|                         </span> | 
|                         <span class="warning">{{item.num}}{{item.dw}}</span> | 
|                     </div> | 
|                 </div> | 
|                 <div class="wu" v-else>暂无数据</div> | 
|             </div> | 
|             <div class="bg_list_item"> | 
|                 <div class="bg_list_item_top"> | 
|                     <div class="bg_list_item_top_left"> | 
|                         <div class="error"></div> | 
|                         <span>报废产出明细</span> | 
|                         <span class="red left">{{bfTotal()}}</span> | 
|                     </div> | 
|                 </div> | 
|                 <div class="bg_list_item_num" v-if="scrap.length > 0"> | 
|                     <div class="bg_list_item_num_item" v-for="(item, index) in scrap" :key="index"> | 
|                         <span> | 
|                             {{item.code}} | 
|                         </span> | 
|                         <span class="err">{{item.num}}{{item.dw}}</span> | 
|                     </div> | 
|                 </div> | 
|                 <div class="wu" v-else>暂无数据</div> | 
|             </div> --> | 
|             <div class="details_dj"> | 
|                 <div class="details_dj_title"> | 
|                     <div class="details_x"></div> | 
|                     <span>生产点检</span> | 
|                 </div> | 
|                 <div class="details_dj_list"> | 
|                     <van-list | 
|                         v-model:loading="loading" | 
|                         :finished="finished" | 
|                         finished-text="没有更多了~" | 
|                         @load="pageDJs" | 
|                     > | 
|                         <div class="details_dj_list_item" v-for="(item, index) in djData" :key="index"> | 
|                             <span>{{item.attrName}}:{{item.val}}</span> | 
|                             <span>{{item.userName}} {{item.createTime}}</span> | 
|                         </div> | 
|                     </van-list> | 
|                 </div> | 
|             </div> | 
|         </div> | 
|         <!-- <div class="bh_zw"></div> --> | 
| <!--        <div class="bg_footer">--> | 
| <!--            <button class="bg_footer_submit" @click="jumpRK" v-if="proxy.$auth('h5:workorder:done')">完工入库</button>--> | 
| <!--        </div>--> | 
|     </div> | 
| </template> | 
|   | 
| <script setup lang="ts"> | 
|     import {ref, onMounted, getCurrentInstance, reactive} from 'vue' | 
|     import { useRouter, useRoute } from "vue-router" | 
|     import {deleteCT, getOrocessRecord, listGroupByAppliance, pageDJ, queryById, allForStandard, getWorkorderRecordListStandard} from '@/apis/WorkOrderAPI' | 
|     import { Dialog } from 'vant' | 
|     const { proxy }: any = getCurrentInstance() | 
|     import VWorkOrderInfo from '@/components/common/WorkOrderInfo.vue' | 
|   | 
|     const router = useRouter() | 
|   | 
|     const route = useRoute() | 
|   | 
|     const loading = ref(false); | 
|     const finished = ref(false); | 
|   | 
|     // 点检数据 | 
|     let djData: any = ref([]) | 
|   | 
|     // 投料 | 
|     let feedingData: any = ref([]) | 
|   | 
|     // 产出 | 
|     let produceData: any = ref([]) | 
|   | 
|     // 不良 | 
|     let undesirable: any = ref([]) | 
|   | 
|     // 报废 | 
|     let scrap: any = ref([]) | 
|   | 
|     let info: any = ref({}) | 
|   | 
|     // 产出合格/不良 | 
|     let produceFrom = reactive({ | 
|         qualifiedId: '', | 
|         qualified: '',  // 合格 | 
|         undesirableId: '', | 
|         undesirable: '' // 不良 | 
|     }) | 
|   | 
|     // 分页查询数据 | 
|     let page = reactive({ | 
|         capacity: 10, | 
|         page: 0 | 
|     }) | 
|   | 
|     // 点检数据 | 
|     const pageDJs = () => { | 
|         if (!finished.value) { | 
|             page.page = page.page + 1 | 
|             loading.value = true | 
|             pageDJ({ | 
|                 capacity: page.capacity, | 
|                 page: page.page, | 
|                 model: { | 
|                     workorderId: route.query.id | 
|                 } | 
|             }).then(res => { | 
|                 if (res.code === 200 && res.data && res.data.records.length !== 0) { | 
|                     djData.value.push(...res.data.records) | 
|                 } else { | 
|                     finished.value = true | 
|                 } | 
|                 loading.value = false | 
|             }).catch(err => { | 
|                 loading.value = false | 
|                 finished.value = true | 
|             }) | 
|         } | 
|     } | 
|   | 
|     // 报废统计 | 
|     const bfTotal = (): string => { | 
|         if (scrap.value.length > 0) { | 
|             let total: number = 0 | 
|             scrap.value.forEach((element: any) => { | 
|                 total = total + element.num | 
|             }) | 
|             return `${total}${scrap.value[0].dw}` | 
|         } | 
|         return '' | 
|     } | 
|   | 
|     // 不良统计 | 
|     const blTotal = (): string => { | 
|         if (undesirable.value.length > 0) { | 
|             let total: number = 0 | 
|             undesirable.value.forEach((element: any) => { | 
|                 total = total + element.num | 
|             }) | 
|             return `${total}${undesirable.value[0].dw}` | 
|         } | 
|         return '' | 
|     } | 
|   | 
|     // 产出统计 | 
|     const ccTotal = (): string => { | 
|         if (produceData.value.length > 0) { | 
|             let total: number = 0 | 
|             produceData.value.forEach((element: any) => { | 
|                 total = total + element.num | 
|             }) | 
|             return `${total}${produceData.value[0].dw}` | 
|         } | 
|         return '' | 
|     } | 
|   | 
|     // 投料统计 | 
|     const tlTotal = (): string => { | 
|         if (feedingData.value.length > 0) { | 
|             let total: number = 0 | 
|             feedingData.value.forEach((element: any) => { | 
|                 total = total + element.num | 
|             }) | 
|             return `${total}${feedingData.value[0].dw}` | 
|         } | 
|         return '' | 
|     } | 
|   | 
|     // 跳转完工入库 | 
|     const jumpRK = () => { | 
|         router.push({ name: 'wipCompletion' }) | 
|     } | 
|   | 
|     // 删除产出/投料 | 
|     const deleItem = (id: any, type: string) => { | 
|         Dialog.confirm({ | 
|             title: '提示', | 
|             message: '确定删除此条记录吗?', | 
|         }) | 
|             .then(() => { | 
|                 deleteCT(id) | 
|                     .then(res => { | 
|                         if (res.code === 200 && type === 'C') { | 
|                             getOrocessRecordCC() | 
|                         } else if (res.code === 200 && type === 'T') { | 
|                             getOrocessRecords() | 
|                         } | 
|                     }) | 
|             }) | 
|             .catch(() => { | 
|   | 
|             }) | 
|     } | 
|   | 
|     // 查询工单生产记录---投料 | 
|     const getOrocessRecords = () => { | 
|         feedingData.value = [] | 
|         allForStandard({ | 
|             workorderId: route.query.id, | 
|             type: 0 | 
|         }).then(res => { | 
|             if (res.code === 200) { | 
|                 feedingData.value = res.data | 
|                 // res.data.forEach((item: any) => { | 
|                 //     feedingData.value.push({ id: item.id, dw: item.umodel.name, name: item.mmodel.name, code: item.amodel.code + ' - ' + item.mmodel.name, num: item.num }) | 
|                 // }) | 
|             } | 
|         }) | 
|     } | 
|   | 
|     // 查询工单生产记录---产出(合格) | 
|     const getOrocessRecordCC = () => { | 
|         produceData.value = [] | 
|         getWorkorderRecordListStandard({ | 
|             workorderId: route.query.id | 
|         }).then(res => { | 
|             if (res.code === 200) { | 
|                 if (res.data.length > 0) { | 
|                     produceFrom.qualified = res.data[0].qualifiedNum | 
|                     produceFrom.undesirable = res.data[0].unqualifiedNum | 
|                     // res.data.forEach((item: any) => { | 
|                     //     if (item.doneType === 1) { | 
|                     //         produceFrom.undesirable = item.num | 
|                     //         produceFrom.undesirableId = item.id | 
|                     //     } else { | 
|                     //         produceFrom.qualified = item.num | 
|                     //         produceFrom.qualifiedId = item.id | 
|                     //     } | 
|                     // }) | 
|                 } | 
|                 // res.data.forEach((item: any) => { | 
|                 //     if (item.doneType === 0) { // 合格 | 
|                 //         produceData.value.push({ id: item.id, dw: item.umodel.name, name: item.mmodel.name, code: item.amodel.code + ' - ' + item.mmodel.name, num: item.num }) | 
|                 //     } else if (item.doneType === 1) { // 不良 | 
|                 //         undesirable.value.push({ id: item.id, dw: item.umodel.name, name: item.mmodel.name, code: item.amodel.code + ' - ' + item.mmodel.name, num: item.num }) | 
|                 //     } else if (item.doneType === 2) { // 报废 | 
|                 //         scrap.value.push({ id: item.id, dw: item.umodel.name, name: item.mmodel.name, code: item.amodel.code + ' - ' + item.mmodel.name, num: item.num }) | 
|                 //     } | 
|                 // }) | 
|             } | 
|         }) | 
|     } | 
|   | 
|     // 查询工单生产记录---产出(不良) | 
|     const getOrocessRecordBL = () => { | 
|         undesirable.value = [] | 
|         getOrocessRecord({ | 
|             workorderId: route.query.id, | 
|             type: 1, | 
|             done_type: 1 | 
|         }).then(res => { | 
|             if (res.code === 200) { | 
|                 res.data.forEach((item: any) => { | 
|                     undesirable.value.push({ id: item.id, dw: item.umodel.name, name: item.mmodel.name, code: item.amodel.code + ' - ' + item.mmodel.name, num: item.num }) | 
|                 }) | 
|                 console.log(undesirable.value) | 
|             } | 
|         }) | 
|     } | 
|   | 
|     // 查询工单生产记录---产出(报废) | 
|     const getOrocessRecordBF = () => { | 
|         scrap.value = [] | 
|         getOrocessRecord({ | 
|             workorderId: route.query.id, | 
|             type: 1, | 
|             done_type: 2 | 
|         }).then(res => { | 
|             if (res.code === 200) { | 
|                 res.data.forEach((item: any) => { | 
|                     scrap.value.push({ id: item.id, dw: item.umodel.name, name: item.mmodel.name, code: item.amodel.code + ' - ' + item.mmodel.name, num: item.num }) | 
|                 }) | 
|             } | 
|         }) | 
|     } | 
|   | 
|     // 查询不良产出明细 | 
|     const listGroupByAppliances = () => { | 
|         listGroupByAppliance({ | 
|             workorderId: route.query.id | 
|         }).then(res => { | 
|             if (res.code === 200 && res.data && res.data.length !== 0) { | 
|                 undesirable.value = res.data | 
|             } | 
|         }) | 
|     } | 
|   | 
|     const jump = () => { | 
|         router.push({ name: 'manualFeeding' }) | 
|     } | 
|   | 
|     const jumpTest = (code: string) => { | 
|         // console.log(info.value) | 
|         router.push({ name: 'exWarehouse', query: { id: code } }) | 
|     } | 
|   | 
|     // 获取详情数据 | 
|     const queryByIds = () => { | 
|         queryById(route.query.id).then(res => { | 
|             if (res.code === 200) { | 
|                 info.value = res.data | 
|             } | 
|         }) | 
|     } | 
|   | 
|     onMounted(() => { | 
|         queryByIds() | 
|         getOrocessRecords() | 
|         getOrocessRecordCC() | 
|         // listGroupByAppliances() | 
|         // getOrocessRecordBL() | 
|         // getOrocessRecordBF() | 
|     }) | 
| </script> | 
|   | 
| <style lang="scss" scoped> | 
|     .bg { | 
|         width: 100%; | 
|         position: absolute; | 
|         background: #F7F7F7; | 
|         .details_dj { | 
|             margin-top: 30px; | 
|             display: flex; | 
|             flex-direction: column; | 
|             .details_dj_title { | 
|                 /*width: 100%;*/ | 
|                 display: flex; | 
|                 align-items: center; | 
|                 margin: 0 30px 30px 30px; | 
|                 box-sizing: border-box; | 
|                 .details_x { | 
|                     width: 8px; | 
|                     height: 30px; | 
|                     background: $nav-color; | 
|                     border-radius: 2px; | 
|                     margin-right: 12px; | 
|                 } | 
|                 span { | 
|                     font-size: 32px; | 
|                     font-weight: 500; | 
|                     color: #222222; | 
|                 } | 
|             } | 
|             .details_dj_list { | 
|                 width: 100%; | 
|                 padding: 30px; | 
|                 box-sizing: border-box; | 
|                 background: #ffffff; | 
|                 display: flex; | 
|                 flex-direction: column; | 
|                 .details_dj_list_item { | 
|                     display: flex; | 
|                     flex-direction: column; | 
|                     border-bottom: 1px solid #E5E5E5; | 
|                     padding-bottom: 30px; | 
|                     margin-top: 30px; | 
|                     &:first-child { | 
|                         margin-top: 0; | 
|                     } | 
|                     &:last-child { | 
|                         padding-bottom: 0; | 
|                         border: none; | 
|                     } | 
|                     span { | 
|                         &:nth-child(1) { | 
|                             font-size: 28px; | 
|                             font-weight: 400; | 
|                             color: #222222; | 
|                         } | 
|                         &:nth-child(2) { | 
|                             font-size: 24px; | 
|                             font-weight: 400; | 
|                             color: #999999; | 
|                             margin-top: 24px; | 
|                         } | 
|                     } | 
|                 } | 
|             } | 
|         } | 
|         .bg_list { | 
|             width: 100%; | 
|             display: flex; | 
|             flex-direction: column; | 
|             margin-top: 30px; | 
|             .bg_list_item { | 
|                 display: flex; | 
|                 flex-direction: column; | 
|                 margin-bottom: 40px; | 
|                 .kong { | 
|                     text-align: center; | 
|                     padding: 30px 0; | 
|                     background: #ffffff; | 
|                     font-size: 25px; | 
|                     span { | 
|                         color: #474747; | 
|                     } | 
|                 } | 
|                 .bg_list_item_top { | 
|                     display: flex; | 
|                     align-items: center; | 
|                     justify-content: space-between; | 
|                     padding-left: 30px; | 
|                     padding-right: 30px; | 
|                     margin-bottom: 30px; | 
|                     .bg_list_item_top_left { | 
|                         display: flex; | 
|                         align-items: center; | 
|                         .left { | 
|                             margin-left: 12px; | 
|                             font-size: 28px; | 
|                         } | 
|                         .warning { | 
|                             width: 8px; | 
|                             height: 30px; | 
|                             border-radius: 2px; | 
|                             margin-right: 12px; | 
|                             background: $nav-stateColor5 !important; | 
|                         } | 
|                         .error { | 
|                             width: 8px; | 
|                             height: 30px; | 
|                             border-radius: 2px; | 
|                             margin-right: 12px; | 
|                             background: $nav-stateColor4 !important; | 
|                         } | 
|                         .bg_list_item_top_left_x { | 
|                             width: 8px; | 
|                             height: 30px; | 
|                             background: $nav-color; | 
|                             border-radius: 2px; | 
|                             margin-right: 12px; | 
|                         } | 
|                         span { | 
|                             font-size: 32px; | 
|                             font-weight: 500; | 
|                             color: #222222; | 
|                             display: flex; | 
|                             align-items: center; | 
|                         } | 
|                     } | 
|                     .bg_list_item_top_right { | 
|                         display: flex; | 
|                         align-items: center; | 
|                         img { | 
|                             width: 28px; | 
|                             height: 28px; | 
|                             margin-right: 12px; | 
|                         } | 
|                         span { | 
|                             font-size: 28px; | 
|                             font-weight: 400; | 
|                             color: $nav-color; | 
|                         } | 
|                     } | 
|                 } | 
|                 .bg_list_item_num { | 
|                     width: 100%; | 
|                     background: white; | 
|                     padding: 0 30px; | 
|                     box-sizing: border-box; | 
|                     .kong { | 
|                         text-align: center; | 
|                         font-size: 25px; | 
|                         padding: 30px 0; | 
|                         background: #ffffff; | 
|                     } | 
|                     .bg_list_item_num_item { | 
|                         display: flex; | 
|                         align-items: center; | 
|                         // height: 118px; | 
|                         padding-top: 20px; | 
|                         box-sizing: border-box; | 
|                         justify-content: space-between; | 
|                         border-bottom: 1px solid #E5E5E5; | 
|                         &:last-child { | 
|                             border: none; | 
|                             padding-bottom: 20px; | 
|                         } | 
|                         .bg_list_item_num_item_wl { | 
|                             flex-shrink: 0; | 
|                             display: flex; | 
|                             flex-direction: column; | 
|                             span { | 
|                                 font-size: 34px; | 
|                                 color: #222222; | 
|                             } | 
|                             .bg_list_item_num_item_wl_lx { | 
|                                 margin-top: 10px; | 
|                                 span { | 
|                                     color: #222222; | 
|                                     font-size: 28px; | 
|                                 } | 
|                             } | 
|                         } | 
|                         .warning { | 
|                             color: $nav-stateColor5 !important; | 
|                         } | 
|                         .err { | 
|                             color: $nav-stateColor4 !important; | 
|                         } | 
|                         span { | 
|                             flex-shrink: 0; | 
|                             overflow: hidden; | 
|                             text-overflow: ellipsis; | 
|                             white-space: nowrap; | 
|                             .warning { | 
|                                 color: $nav-stateColor5 !important; | 
|                                 margin-right: 5px; | 
|                             } | 
|                             .err { | 
|                                 color: $nav-stateColor4 !important; | 
|                                 margin-right: 5px; | 
|                             } | 
|                             &:nth-child(1) { | 
|                                 font-size: 30px; | 
|                                 font-weight: 400; | 
|                                 color: #222222; | 
|                             } | 
|                             &:nth-child(2) { | 
|                                 font-size: 28px; | 
|                                 font-weight: 400; | 
|                                 color: #333333; | 
|                                 flex-shrink: 0; | 
|                             } | 
|                         } | 
|                         .bg_list_item_num_item_sr { | 
|                             flex: 1; | 
|                             display: flex; | 
|                             align-items: center; | 
|                             justify-content: flex-end; | 
|                             input::-webkit-input-placeholder { | 
|                                 font-size: 28px; | 
|                             } | 
|                             input { | 
|                                 text-align: right; | 
|                                 width: 180px; | 
|                                 height: 60px; | 
|                                 border-radius: 8px; | 
|                                 border: 1PX solid #E5E5E5; | 
|                                 margin-right: 20px; | 
|                                 font-size: 28px; | 
|                                 font-weight: 400; | 
|                                 color: #333333; | 
|                                 padding: 0 30px | 
|                             } | 
|                             span { | 
|                                 font-size: 28px; | 
|                                 font-weight: 400; | 
|                                 color: #666666; | 
|                             } | 
|                         } | 
|                     } | 
|                 } | 
|             } | 
|         } | 
|         .bh_zw { | 
|             height: 160px; | 
|             background: #F7F7F7; | 
|         } | 
|         .bg_footer { | 
|             position: fixed; | 
|             bottom: 0; | 
|             left: 0; | 
|             width: 100%; | 
|             padding: 0 30px 60px 30px; | 
|             box-sizing: border-box; | 
|             .bg_footer_submit { | 
|                 width: 690px; | 
|                 height: 88px; | 
|                 background: $nav-color; | 
|                 box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.08); | 
|                 border-radius: 8px; | 
|                 font-size: 30px; | 
|                 font-weight: 500; | 
|                 color: #FFFFFF; | 
|                 display: flex; | 
|                 align-items: center; | 
|                 justify-content: center; | 
|                 border: none; | 
|             } | 
|         } | 
|     } | 
| </style> |