| | |
| | | @select="onItemChange"></superwei-combox> |
| | | </view> |
| | | <view class="info-block"> |
| | | <view class="info-label">工单编号:</view> |
| | | <view v-if="!isUpdate" class="info-value">{{ formData.daa001 }}</view> |
| | | <picker v-else :range="DAA001List" class="picker info-value-input" name="selector" |
| | | @change="onDaa001Change"> |
| | | <view>{{ DAA001List[DAA001Index] }}</view> |
| | | </picker> |
| | | </view> |
| | | <view class="info-block"> |
| | | <view class="info-label">产品名称:</view> |
| | | <view class="info-value">{{ formData.daa003 }}</view> |
| | | </view> |
| | |
| | | <view class="info-value">{{ formData.daa004 }}</view> |
| | | </view> |
| | | <view class="info-block"> |
| | | <view class="info-label">工单编号:</view> |
| | | <view v-if="!isUpdate" class="info-value">{{ formData.daa001 }}</view> |
| | | <picker v-else :range="DAA001List" class="picker info-value-input" name="selector" |
| | | @change="onDaa001Change"> |
| | | <view>{{ DAA001List[DAA001Index] }}</view> |
| | | </picker> |
| | | <view class="info-label">项目:</view> |
| | | <view class="info-value">{{ formData.projecT_CODE }}</view> |
| | | <view class="info-label">工单数量:</view> |
| | | <view class="info-value highlight">{{ formData.daa008 }}</view> |
| | | </view> |
| | | <view class="info-block"> |
| | | <view class="info-label">工单数量:</view> |
| | | <view class="info-value highlight">{{ formData.daa008 }}</view> |
| | | </view> |
| | | <view v-if="formData.remarks" class="info-block"> |
| | | <view v-if="formData.remarks && current" class="info-block"> |
| | | <view class="info-label">备注:</view> |
| | | <view class="info-value">{{ formData.remarks }}</view> |
| | | </view> |
| | | </view> |
| | | |
| | | <!-- 操作按钮区 --> |
| | | <view v-if="this.current" class="action-buttons"> |
| | | <view class="action-buttons"> |
| | | <button v-if="!isUpdate && !isShowTable" class="secondary-btn" @click="toSNScanCode(formData.releaseNo)">SN确认</button> |
| | | <button v-if="!isUpdate && !isShowTable" class="secondary-btn" @click="toYzxSubmitFrom(formData.releaseNo)">一致性核对</button> |
| | | <button class="secondary-btn" @click="getTable">获取检验项目</button> |
| | |
| | | |
| | | <!-- 检验项目表格 --> |
| | | <view v-if="tableData.length > 0" class="inspection-table"> |
| | | <!-- 表格头部统计信息 --> |
| | | <view class="table-header-stats"> |
| | | <view class="stats-left"> |
| | | <view class="stats-title">检验项目清单</view> |
| | | <view class="stats-subtitle">共 {{ tableData.length }} 个检验项目</view> |
| | | </view> |
| | | <view class="stats-right"> |
| | | <view class="stat-item passed"> |
| | | <span class="stat-count">{{ getPassedCount() }}</span> |
| | | <span class="stat-label">已合格</span> |
| | | </view> |
| | | <view class="stat-item failed"> |
| | | <span class="stat-count">{{ getFailedCount() }}</span> |
| | | <span class="stat-label">不合格</span> |
| | | </view> |
| | | <view class="stat-item pending"> |
| | | <span class="stat-count">{{ getPendingCount() }}</span> |
| | | <span class="stat-label">待检验</span> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <table> |
| | | <thead> |
| | | <tr> |
| | |
| | | </thead> |
| | | <tbody> |
| | | <tr v-for="(item, index) in tableData" :key="index"> |
| | | <td> |
| | | <view class="project-name-wrapper"> |
| | | <span :class="{ |
| | | 'status-approved': item.result=='合格', |
| | | 'status-rejected': item.result=='不合格', |
| | | 'status-pending': item.result=='未完成' |
| | | }" class="status-indicator"></span> |
| | | {{ item.projName }} |
| | | </view> |
| | | </td> |
| | | <td>{{ item.projName }}</td> |
| | | <td> |
| | | <view v-if="item.result=='合格'" class="watermark approved">合格</view> |
| | | <view v-if="item.result=='不合格'" class="watermark rejected">不合格</view> |
| | |
| | | <td> |
| | | <button v-if="item.isCheck < item.levelNum" class="record-btn record-btn-fill" |
| | | @click="toDetail(item, index)"> |
| | | 填写 ({{ item.isCheck }}/{{ item.levelNum }}) |
| | | 填写 <!--({{ item.isCheck }}/{{ item.levelNum }})--> |
| | | </button> |
| | | <button v-else class="record-btn record-btn-view" @click="toDetail(item, index)"> |
| | | 查看 ({{ item.isCheck }}/{{ item.levelNum }}) |
| | | 查看<!--({{ item.isCheck }}/{{ item.levelNum }})--> |
| | | </button> |
| | | </td> |
| | | </tr> |
| | |
| | | <!-- 操作按钮区 --> |
| | | <view class="action-buttons"> |
| | | <button v-if="isUpdate && !isShowTable" class="secondary-btn" @click="save">创建检验单并生成部分默认值</button> |
| | | <button v-if="!isUpdate && !isShowTable" class="secondary-btn" @click="toImage">上传/查看图片</button> |
| | | <button v-if="!isUpdate && !isShowTable" class="secondary-btn" @click="uploadImages">查看所有图片</button> |
| | | <button v-if="!isUpdate && !isShowTable" class="secondary-btn" @click="addDefectDescription">查看不良描述</button> |
| | | <!-- <button v-if="!isUpdate && !formData.statusUser && !isShowTable" class="secondary-btn" @click="removeXJ"> |
| | | 删除单据 |
| | | </button> --> |
| | |
| | | statusUser: "", |
| | | itemId: "", |
| | | fSubmit: 0, |
| | | yzxChecked: false, // 添加一致性核对状态字段 |
| | | }, |
| | | |
| | | DAA020List: [], |
| | |
| | | |
| | | comments: "", |
| | | commentsPopup: false, |
| | | current: true, |
| | | |
| | | }; |
| | | }, |
| | |
| | | }, |
| | | |
| | | submit() { |
| | | // 检查是否需要一致性核对 |
| | | if (this.current && !this.formData.yzxChecked) { |
| | | // 先检查该物料是否维护了一致性核对项目 |
| | | this.$post({ |
| | | url: "/SJ/getYzxItem", |
| | | data: { |
| | | id: this.formData.id |
| | | } |
| | | }).then(res => { |
| | | // 如果维护了一致性核对项目(components.length > 0),则要求完成核对 |
| | | if (res.data && res.data.length > 0) { |
| | | uni.showModal({ |
| | | title: "提示", |
| | | content: "请先完成一致性核对后再提交检验", |
| | | confirmText: "去核对", |
| | | cancelText: "取消", |
| | | success: (modalRes) => { |
| | | if (modalRes.confirm) { |
| | | this.toYzxSubmitFrom(this.formData.billNo); |
| | | } |
| | | } |
| | | }); |
| | | } else { |
| | | // 未维护一致性核对项目,允许直接提交 |
| | | this.submitInspection(); |
| | | } |
| | | }).catch(() => { |
| | | // 接口异常,允许提交 |
| | | this.submitInspection(); |
| | | }); |
| | | return; |
| | | } |
| | | |
| | | // 已完成一致性核对或不需要核对,直接提交 |
| | | this.submitInspection(); |
| | | }, |
| | | |
| | | submitInspection() { |
| | | this.$post({ |
| | | url: "/SJ/SJQaSubmit", |
| | | data: { |
| | |
| | | if (res.statusCode === 200 || res.status === 0 || res.data === true || res.data.tbBillList === true) { |
| | | |
| | | this.$showMessage("成功提交检验"); |
| | | // 提交成功后跳转到列表页面 |
| | | // 提交成功后刷新页面数据 |
| | | this.init(); |
| | | // 1.5秒后跳转到列表页面 |
| | | setTimeout(() => { |
| | | uni.navigateTo({ |
| | | url: '/pages/QC/SJ/List' |
| | | }); |
| | | }, 1500); // 1.5秒后跳转,让用户看到成功提示 |
| | | }, 1500); |
| | | } else { |
| | | this.$showMessage(res.data.message || res.message || "提交失败"); |
| | | } |
| | | }).catch(err => { |
| | | console.log("提交出错:", err); |
| | | this.$showMessage("提交失败,请重试"); |
| | | this.$showMessage("提交失败,请重试"); |
| | | }) |
| | | }, |
| | | |
| | |
| | | }).then(res => { |
| | | let tbBillListElement = res.data.tbBillList[0]; |
| | | if (tbBillListElement) { |
| | | // 保存当前的yzxChecked状态 |
| | | const currentYzxChecked = this.formData.yzxChecked; |
| | | this.formData = tbBillListElement; |
| | | // 恢复yzxChecked状态,避免被服务器数据覆盖 |
| | | this.formData.yzxChecked = currentYzxChecked; |
| | | this.$post({ |
| | | url: "/SJ/getQSItems", |
| | | data: { |
| | |
| | | }, |
| | | toYzxSubmitFrom(releaseNo){ |
| | | uni.navigateTo({ |
| | | url: 'yzxFrom?id=' +this.formData.id+'¤t='+this.current |
| | | url: 'yzxFrom?id=' +this.formData.id+'¤t='+(this.current ? 'true' : 'false') |
| | | }); |
| | | }, |
| | | toSNScanCode(releaseNo){ |
| | | uni.navigateTo({ |
| | | url: 'ScanCode?id=' +this.formData.id+'¤t='+this.current |
| | | url: 'ScanCode?id=' +this.formData.id+'¤t='+(this.current ? 'true' : 'false') |
| | | }); |
| | | }, |
| | | save() { |
| | |
| | | }) |
| | | } |
| | | }, |
| | | toImage() { |
| | | uploadImages() { |
| | | // 查看所有图片的逻辑 |
| | | console.log('点击了查看所有图片按钮,billNo:', this.formData.billNo); |
| | | uni.navigateTo({ |
| | | url: 'ImageItem?id=' + this.formData.id |
| | | url: 'ImageItemALL?id=' + this.formData.id |
| | | }); |
| | | }, |
| | | addDefectDescription() { |
| | | // 查看所有不良描述的逻辑 |
| | | console.log('点击了查看不良描述按钮,billNo:', this.formData.billNo); |
| | | uni.navigateTo({ |
| | | url: 'Blms?id=' + this.formData.id |
| | | }); |
| | | } |
| | | }, |
| | | onShow() { |
| | | //每次进入页面都会执行的方法 |
| | | this.init(); |
| | | // 每次进入页面都会执行的方法 |
| | | // 注释掉init()调用,避免覆盖一致性核对状态 |
| | | // this.init(); |
| | | } |
| | | }; |
| | | </script> |
| | |
| | | /* 表格样式 */ |
| | | .inspection-table { |
| | | margin: 25px 0; |
| | | border-radius: 8px; |
| | | overflow: hidden; |
| | | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); |
| | | background: #fff; |
| | | } |
| | | |
| | | /* 表格头部统计信息 */ |
| | | .table-header-stats { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | padding: 16px 20px; |
| | | background: linear-gradient(135deg, #f8f9fa, #e9ecef); |
| | | border-bottom: 1px solid #e0e0e0; |
| | | } |
| | | |
| | | .stats-left .stats-title { |
| | | font-size: 18px; |
| | | font-weight: bold; |
| | | color: #2c3e50; |
| | | margin-bottom: 4px; |
| | | } |
| | | |
| | | .stats-left .stats-subtitle { |
| | | font-size: 14px; |
| | | color: #7f8c8d; |
| | | } |
| | | |
| | | .stats-right { |
| | | display: flex; |
| | | gap: 16px; |
| | | } |
| | | |
| | | .stat-item { |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | padding: 8px 12px; |
| | | border-radius: 6px; |
| | | min-width: 60px; |
| | | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
| | | } |
| | | |
| | | .stat-item.passed { |
| | | background: linear-gradient(135deg, rgba(39, 174, 96, 0.1), rgba(39, 174, 96, 0.2)); |
| | | border: 1px solid rgba(39, 174, 96, 0.3); |
| | | } |
| | | |
| | | .stat-item.failed { |
| | | background: linear-gradient(135deg, rgba(230, 126, 34, 0.1), rgba(230, 126, 34, 0.2)); |
| | | border: 1px solid rgba(230, 126, 34, 0.3); |
| | | } |
| | | |
| | | .stat-item.pending { |
| | | background: linear-gradient(135deg, rgba(243, 156, 18, 0.1), rgba(243, 156, 18, 0.2)); |
| | | border: 1px solid rgba(243, 156, 18, 0.3); |
| | | } |
| | | |
| | | .stat-count { |
| | | font-size: 20px; |
| | | font-weight: bold; |
| | | line-height: 1; |
| | | margin-bottom: 2px; |
| | | } |
| | | |
| | | .stat-item.passed .stat-count { |
| | | color: #27ae60; |
| | | } |
| | | |
| | | .stat-item.failed .stat-count { |
| | | color: #e67e22; |
| | | } |
| | | |
| | | .stat-item.pending .stat-count { |
| | | color: #f39c12; |
| | | } |
| | | |
| | | .stat-label { |
| | | font-size: 12px; |
| | | color: #7f8c8d; |
| | | font-weight: 500; |
| | | } |
| | | |
| | | .inspection-table table { |
| | |
| | | } |
| | | |
| | | .inspection-table th, .inspection-table td { |
| | | padding: 16px 20px; |
| | | border: none; |
| | | padding: 12px 15px; |
| | | border: 1px solid #ddd; |
| | | text-align: left; |
| | | border-bottom: 1px solid #eee; |
| | | } |
| | | |
| | | .inspection-table th { |
| | | background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| | | font-weight: 600; |
| | | color: #fff; |
| | | font-size: 14px; |
| | | letter-spacing: 0.5px; |
| | | position: relative; |
| | | background-color: #f8f9fa; |
| | | font-weight: bold; |
| | | color: #34495e; |
| | | } |
| | | |
| | | .inspection-table tbody tr { |
| | | transition: all 0.3s ease; |
| | | border-left: 4px solid transparent; |
| | | .inspection-table tr:nth-child(even) { |
| | | background-color: #f9f9f9; |
| | | } |
| | | |
| | | .inspection-table tbody tr:nth-child(even) { |
| | | background-color: #f8fafc; |
| | | } |
| | | |
| | | .inspection-table tbody tr:hover { |
| | | background-color: #e8f4fd; |
| | | border-left-color: #3498db; |
| | | transform: translateY(-1px); |
| | | box-shadow: 0 4px 12px rgba(52, 152, 219, 0.15); |
| | | } |
| | | |
| | | /* 检验项目列样式 */ |
| | | .inspection-table td:first-child { |
| | | font-weight: 600; |
| | | color: #2c3e50; |
| | | font-size: 15px; |
| | | } |
| | | |
| | | /* 项目名称包装器 */ |
| | | .project-name-wrapper { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 8px; |
| | | } |
| | | |
| | | /* 状态指示器 */ |
| | | .status-indicator { |
| | | width: 8px; |
| | | height: 8px; |
| | | border-radius: 50%; |
| | | display: inline-block; |
| | | flex-shrink: 0; |
| | | box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8); |
| | | } |
| | | |
| | | .status-indicator.status-approved { |
| | | background-color: #27ae60; |
| | | box-shadow: 0 0 0 2px rgba(39, 174, 96, 0.3); |
| | | } |
| | | |
| | | .status-indicator.status-rejected { |
| | | background-color: #e67e22; |
| | | box-shadow: 0 0 0 2px rgba(230, 126, 34, 0.3); |
| | | } |
| | | |
| | | .status-indicator.status-pending { |
| | | background-color: #f39c12; |
| | | box-shadow: 0 0 0 2px rgba(243, 156, 18, 0.3); |
| | | .inspection-table tr:hover { |
| | | background-color: #f1f5f9; |
| | | } |
| | | |
| | | /* 检验描述列特殊样式 */ |
| | | .inspection-table td:nth-child(2) { |
| | | position: relative; |
| | | min-height: 80px; |
| | | vertical-align: top; |
| | | padding: 16px 20px; |
| | | overflow: hidden; |
| | | padding: 0; |
| | | } |
| | | |
| | | /* 按钮样式 */ |
| | |
| | | } |
| | | |
| | | .record-btn { |
| | | padding: 8px 16px; |
| | | background: linear-gradient(135deg, #3498db, #2980b9); |
| | | color: #fff; |
| | | border: none; |
| | | border-radius: 6px; |
| | | padding: 6px 12px; |
| | | background-color: #f8f9fa; |
| | | border: 1px solid #ddd; |
| | | cursor: pointer; |
| | | transition: all 0.3s ease; |
| | | font-weight: 500; |
| | | font-size: 13px; |
| | | box-shadow: 0 2px 4px rgba(52, 152, 219, 0.3); |
| | | transition: all 0.2s; |
| | | } |
| | | |
| | | .record-btn:hover { |
| | | background: linear-gradient(135deg, #2980b9, #1f618d); |
| | | transform: translateY(-1px); |
| | | box-shadow: 0 4px 8px rgba(52, 152, 219, 0.4); |
| | | } |
| | | |
| | | .record-btn:active { |
| | | transform: translateY(0); |
| | | background-color: #e9ecef; |
| | | } |
| | | |
| | | /* 填写状态按钮 */ |
| | | .record-btn-fill { |
| | | background: linear-gradient(135deg, #2ecc71, #27ae60); |
| | | box-shadow: 0 2px 4px rgba(46, 204, 113, 0.3); |
| | | background-color: #f8f9fa; |
| | | border: 1px solid #ddd; |
| | | } |
| | | |
| | | .record-btn-fill:hover { |
| | | background: linear-gradient(135deg, #27ae60, #229954); |
| | | box-shadow: 0 4px 8px rgba(46, 204, 113, 0.4); |
| | | background-color: #e9ecef; |
| | | } |
| | | |
| | | /* 查看状态按钮 */ |
| | | .record-btn-view { |
| | | background: linear-gradient(135deg, #95a5a6, #7f8c8d); |
| | | box-shadow: 0 2px 4px rgba(149, 165, 166, 0.3); |
| | | background-color: #f8f9fa; |
| | | border: 1px solid #ddd; |
| | | } |
| | | |
| | | .record-btn-view:hover { |
| | | background: linear-gradient(135deg, #7f8c8d, #6c7b7d); |
| | | box-shadow: 0 4px 8px rgba(149, 165, 166, 0.4); |
| | | background-color: #e9ecef; |
| | | } |
| | | |
| | | /* 水印样式 */ |
| | | .watermark { |
| | | position: absolute; |
| | | font-size: 32px; |
| | | font-size: 40px; |
| | | font-weight: bold; |
| | | opacity: 0.4; |
| | | z-index: 3; |
| | | opacity: 1; |
| | | z-index: 1; |
| | | pointer-events: none; |
| | | bottom: 8px; |
| | | right: 8px; |
| | | transform: rotate(-15deg); |
| | | transform-origin: bottom right; |
| | | text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8); |
| | | min-width: 60px; |
| | | width: 100%; |
| | | text-align: center; |
| | | top: 50%; |
| | | left: 50%; |
| | | transform: translate(-50%, -50%) rotate(-15deg); |
| | | } |
| | | |
| | | .watermark.approved { |
| | | color: #27ae60; /* 更淡的绿色 */ |
| | | color: #2ecc71; /* 绿色 */ |
| | | } |
| | | |
| | | .watermark.rejected { |
| | | color: #e67e22; /* 更淡的红色 */ |
| | | color: #e74c3c; /* 红色 */ |
| | | } |
| | | |
| | | .watermark.pending { |
| | | color: #f39c12; /* 橙色 */ |
| | | } |
| | | |
| | | /* 描述文本样式 */ |
| | | /* 描述文本容器 */ |
| | | .description-text { |
| | | position: relative; |
| | | z-index: 2; |
| | | padding: 12px 16px; |
| | | background: transparent; |
| | | line-height: 1.6; |
| | | font-size: 14px; |
| | | color: #555; |
| | | margin: 0; |
| | | word-wrap: break-word; |
| | | word-break: break-word; |
| | | max-width: 100%; |
| | | /* 确保文字不会太长遮挡水印 */ |
| | | padding-right: 80px; |
| | | min-height: 20px; |
| | | display: block; |
| | | padding: 25px; |
| | | background-color: rgba(255, 255, 255, 0.7); |
| | | } |
| | | |
| | | .sysLike { |
| | |
| | | align-items: flex-start; |
| | | } |
| | | |
| | | .doc-links { |
| | | margin-left: 0; |
| | | margin-top: 10px; |
| | | } |
| | | |
| | | .action-buttons { |
| | | flex-direction: column; |
| | | } |
| | | |
| | | /* 移动端表格头部统计 */ |
| | | .table-header-stats { |
| | | flex-direction: column; |
| | | gap: 12px; |
| | | align-items: flex-start; |
| | | padding: 12px 16px; |
| | | } |
| | | |
| | | .stats-right { |
| | | width: 100%; |
| | | justify-content: space-around; |
| | | gap: 8px; |
| | | } |
| | | |
| | | .stat-item { |
| | | flex: 1; |
| | | min-width: auto; |
| | | padding: 6px 8px; |
| | | } |
| | | |
| | | .stat-count { |
| | | font-size: 16px; |
| | | } |
| | | |
| | | .stat-label { |
| | | font-size: 11px; |
| | | } |
| | | |
| | | .stats-left .stats-title { |
| | | font-size: 16px; |
| | | } |
| | | |
| | | .stats-left .stats-subtitle { |
| | | font-size: 13px; |
| | | } |
| | | |
| | | .inspection-table { |
| | | margin: 15px -10px; |
| | | border-radius: 0; |
| | | } |
| | | |
| | | .inspection-table th, |
| | | .inspection-table td { |
| | | padding: 12px 8px; |
| | | font-size: 13px; |
| | | } |
| | | |
| | | .inspection-table th { |
| | | font-size: 12px; |
| | | } |
| | | |
| | | .description-text { |
| | | padding: 8px 12px; |
| | | padding-right: 50px; |
| | | font-size: 13px; |
| | | } |
| | | |
| | | .record-btn { |
| | | padding: 6px 12px; |
| | | font-size: 12px; |
| | | } |
| | | |
| | | /* 移动端水印样式调整 */ |
| | | .watermark { |
| | | font-size: 24px; |
| | | bottom: 4px; |
| | | right: 4px; |
| | | } |
| | | |
| | | /* 移动端表格hover效果减弱 */ |
| | | .inspection-table tbody tr:hover { |
| | | transform: none; |
| | | box-shadow: none; |
| | | } |
| | | |
| | | /* 移动端状态指示器调整 */ |
| | | .project-name-wrapper { |
| | | gap: 6px; |
| | | } |
| | | |
| | | .status-indicator { |
| | | width: 6px; |
| | | height: 6px; |
| | | } |
| | | |
| | | /* 移动端弹出框优化 */ |
| | | .popup { |
| | | width: 95vw; |
| | | min-height: 40vh; |
| | | max-height: 70vh; |
| | | padding: 15px; |
| | | } |
| | | |
| | | .popup .form-textarea { |
| | | min-height: 100px; |
| | | } |
| | | } |
| | | |
| | | /* 平板设备样式 */ |
| | | @media (min-width: 501px) and (max-width: 768px) { |
| | | .watermark { |
| | | font-size: 28px; |
| | | bottom: 6px; |
| | | right: 6px; |
| | | } |
| | | |
| | | .inspection-table th, |
| | | .inspection-table td { |
| | | padding: 14px 16px; |
| | | } |
| | | |
| | | .description-text { |
| | | font-size: 14px; |
| | | padding-right: 70px; |
| | | } |
| | | |
| | | .record-btn { |
| | | padding: 7px 14px; |
| | | font-size: 13px; |
| | | } |
| | | } |
| | | |
| | | /* 大屏设备优化 */ |
| | | @media (min-width: 1200px) { |
| | | .inspection-table { |
| | | margin: 30px 0; |
| | | } |
| | | |
| | | .watermark { |
| | | font-size: 36px; |
| | | bottom: 10px; |
| | | right: 10px; |
| | | .inspection-table table { |
| | | display: block; |
| | | overflow-x: auto; |
| | | } |
| | | } |
| | | </style> |