<template>
|
<view class="page-container">
|
<!-- 刷新提示框 -->
|
<view class="success-toast" :class="{ 'show': tipShow }">
|
<view class="toast-icon">✓</view>
|
<text class="toast-text">刷新成功</text>
|
</view>
|
|
<!-- 头部区域 -->
|
<view class="header-section">
|
<!-- 页面标题 -->
|
<view class="page-header">
|
<view class="header-content">
|
<view class="title-section">
|
<text class="page-title">OQC检验单</text>
|
<text class="page-subtitle">质量检验管理</text>
|
</view>
|
<view class="stats-badge">
|
<text class="stats-number">{{ totalCount }}</text>
|
<text class="stats-label">总计</text>
|
</view>
|
</view>
|
</view>
|
|
<!-- 搜索栏 -->
|
<!-- <view class="search-section"> -->
|
<!-- <view class="search-container">
|
<view class="search-input-wrapper">
|
<uni-icons type="search" size="18" color="#94a3b8"></uni-icons>
|
<input class="search-input" type="text" v-model="searchValue"
|
@confirm="getInputValue" placeholder="搜索检验单号、物料编码..." />
|
<view v-if="searchValue" class="clear-btn" @tap="clearSearch">
|
<uni-icons type="clear" size="16" color="#94a3b8"></uni-icons>
|
</view>
|
</view>
|
<view class="filter-btn" @tap="toggleFilter">
|
<uni-icons type="tune" size="18" color="#4f46e5"></uni-icons>
|
</view>
|
</view> -->
|
|
<!-- 筛选器 -->
|
<!-- <view v-if="showFilter" class="filter-panel">
|
<picker mode="selector" :range="searchOptions" v-model="selectedOption" @change="onPickerChange">
|
<view class="filter-option">
|
<text class="filter-label">筛选条件</text>
|
<text class="filter-value">{{ searchOptions[selectedOption] }}</text>
|
<uni-icons type="arrowdown" size="14" color="#64748b"></uni-icons>
|
</view>
|
</picker>
|
</view> -->
|
<!-- </view> -->
|
|
<!-- 选项卡 -->
|
<view class="tab-section">
|
<view class="custom-tabs">
|
<view v-for="(item, index) in items" :key="index"
|
class="tab-item" :class="{ 'active': current === index }"
|
@tap="onClickItem({ currentIndex: index })">
|
<text class="tab-text">{{ item }}</text>
|
<view class="tab-indicator" v-if="current === index"></view>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- 内容区域 -->
|
<view class="content-container">
|
<view v-show="current === 0">
|
<!-- 加载状态 -->
|
<view v-if="isLoading" class="loading-state">
|
<view class="loading-spinner"></view>
|
<text class="loading-text">加载中...</text>
|
</view>
|
|
<!-- 空状态 -->
|
<view v-else-if="data.length === 0" class="empty-state">
|
<view class="empty-icon">📋</view>
|
<text class="empty-title">暂无检验单</text>
|
<text class="empty-desc">点击右下角按钮创建新的检验单</text>
|
</view>
|
|
<!-- 检验单列表 -->
|
<view v-else class="inspection-list">
|
<view v-for="item in data" :key="item.id || item.releaseNo"
|
class="inspection-card" @tap="navigateToDetail(item)">
|
|
<!-- 卡片头部 -->
|
<view class="card-header">
|
<view class="header-left">
|
<view class="inspection-number">
|
<text class="number-label">检验单号</text>
|
<text class="number-value">{{ item.releaseNo }}</text>
|
</view>
|
<view class="material-info">
|
<text class="material-code">{{ item.itemNo }}</text>
|
<text class="material-name">{{ item.itemName || '未知物料' }}</text>
|
</view>
|
</view>
|
<view class="header-right">
|
<view class="status-badge"
|
:class="{
|
'status-submitted': item.fsubmit == 1,
|
'status-pending': item.fsubmit != 1
|
}">
|
<view class="status-dot"></view>
|
<text class="status-text">{{ item.fsubmit == 1 ? '已提交' : '待提交' }}</text>
|
</view>
|
</view>
|
</view>
|
|
<!-- 检验结果区域 -->
|
<view class="inspection-result">
|
<view class="result-item">
|
<view class="result-icon"
|
:class="{
|
'icon-pass': item.fcheckResu === '合格',
|
'icon-fail': item.fcheckResu === '不合格',
|
'icon-pending': !item.fcheckResu || item.fcheckResu === '未检验'
|
}">
|
<text class="result-symbol">{{
|
item.fcheckResu === '合格' ? '✓' :
|
item.fcheckResu === '不合格' ? '✗' : '○'
|
}}</text>
|
</view>
|
<view class="result-content">
|
<text class="result-label">检验结果</text>
|
<text class="result-value"
|
:class="{
|
'value-pass': item.fcheckResu === '合格',
|
'value-fail': item.fcheckResu === '不合格',
|
'value-pending': !item.fcheckResu || item.fcheckResu === '未检验'
|
}">
|
{{ item.fcheckResu || '未检验' }}
|
</text>
|
</view>
|
</view>
|
|
<view class="inspector-info">
|
<text class="inspector-label">检验人</text>
|
<text class="inspector-name">{{ item.modify1By || '待分配' }}</text>
|
</view>
|
</view>
|
|
<!-- 详细信息 -->
|
<view class="card-details">
|
<view class="detail-grid">
|
<view class="detail-item">
|
<text class="detail-label">创建时间</text>
|
<text class="detail-value">{{ item.createDate }}</text>
|
</view>
|
<view class="detail-item">
|
<text class="detail-label">数量</text>
|
<text class="detail-value">{{ item.planQty }}</text>
|
</view>
|
<view class="detail-item">
|
<text class="detail-label">创建人</text>
|
<text class="detail-value">{{ item.createUser }}</text>
|
</view>
|
<view class="detail-item">
|
<text class="detail-label">送检人</text>
|
<text class="detail-value">{{ item.fcheckUser || '-' }}</text>
|
</view>
|
</view>
|
</view>
|
|
<!-- 操作指示器 -->
|
<view class="action-indicator">
|
<uni-icons type="arrowright" size="16" color="#94a3b8"></uni-icons>
|
</view>
|
</view>
|
</view>
|
</view>
|
<!-- 第二个选项卡内容 - 已检验 -->
|
<view v-show="current === 1">
|
<!-- 加载状态 -->
|
<view v-if="isLoading" class="loading-state">
|
<view class="loading-spinner"></view>
|
<text class="loading-text">加载中...</text>
|
</view>
|
|
<!-- 空状态 -->
|
<view v-else-if="data.length === 0" class="empty-state">
|
<view class="empty-icon">✅</view>
|
<text class="empty-title">暂无已检验单据</text>
|
<text class="empty-desc">完成检验的单据将显示在这里</text>
|
</view>
|
|
<!-- 检验单列表 -->
|
<view v-else class="inspection-list">
|
<view v-for="item in data" :key="item.id || item.releaseNo"
|
class="inspection-card completed" @tap="navigateToDetail(item)">
|
|
<!-- 卡片头部 -->
|
<view class="card-header">
|
<view class="header-left">
|
<view class="inspection-number">
|
<text class="number-label">检验单号</text>
|
<text class="number-value">{{ item.releaseNo }}</text>
|
</view>
|
<view class="material-info">
|
<text class="material-code">{{ item.itemNo }}</text>
|
<text class="material-name">{{ item.itemName || '未知物料' }}</text>
|
</view>
|
</view>
|
<view class="header-right">
|
<view class="status-badge status-completed">
|
<view class="status-dot"></view>
|
<text class="status-text">已完成</text>
|
</view>
|
</view>
|
</view>
|
|
<!-- 检验结果区域 -->
|
<view class="inspection-result">
|
<view class="result-item">
|
<view class="result-icon"
|
:class="{
|
'icon-pass': item.fcheckResu === '合格',
|
'icon-fail': item.fcheckResu === '不合格'
|
}">
|
<text class="result-symbol">{{
|
item.fcheckResu === '合格' ? '✓' : '✗'
|
}}</text>
|
</view>
|
<view class="result-content">
|
<text class="result-label">最终结果</text>
|
<text class="result-value"
|
:class="{
|
'value-pass': item.fcheckResu === '合格',
|
'value-fail': item.fcheckResu === '不合格'
|
}">
|
{{ item.fcheckResu }}
|
</text>
|
</view>
|
</view>
|
|
<view class="inspector-info">
|
<text class="inspector-label">检验人</text>
|
<text class="inspector-name">{{ item.modify1By }}</text>
|
</view>
|
</view>
|
|
<!-- 详细信息 -->
|
<view class="card-details">
|
<view class="detail-grid">
|
<view class="detail-item">
|
<text class="detail-label">检验时间</text>
|
<text class="detail-value">{{ item.modify1Date }}</text>
|
</view>
|
<view class="detail-item">
|
<text class="detail-label">数量</text>
|
<text class="detail-value">{{ item.planQty }}</text>
|
</view>
|
<view class="detail-item">
|
<text class="detail-label">创建人</text>
|
<text class="detail-value">{{ item.createUser }}</text>
|
</view>
|
<view class="detail-item">
|
<text class="detail-label">送检人</text>
|
<text class="detail-value">{{ item.fcheckUser || '-' }}</text>
|
</view>
|
</view>
|
</view>
|
|
<!-- 操作指示器 -->
|
<view class="action-indicator">
|
<uni-icons type="arrowright" size="16" color="#94a3b8"></uni-icons>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- 浮动操作按钮 -->
|
<view class="fab-container">
|
<view class="fab-button" @tap="handleFabClick">
|
<uni-icons type="plus" size="24" color="#ffffff"></uni-icons>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
components: {},
|
data() {
|
return {
|
items: ['未检验', '已检验'],
|
current: 0,
|
data: [],
|
pageIndex: 1,
|
limit: 20,
|
totalPage: 0,
|
totalCount: 0,
|
noData: false,
|
isLoading: false,
|
tipShow: false,
|
searchOptions: ['物料编号', '规格', '物料名称', '供应商', '送检人', '检验单号'],
|
selectedOption: 0,
|
searchValue: '',
|
copiedText: '',
|
headerHeight: 0,
|
showFilter: false, // 控制筛选面板显示
|
};
|
},
|
onLoad() {
|
this.init();
|
},
|
onShow() {
|
// 页面显示时刷新数据
|
this.pageIndex = 1;
|
this.loadData();
|
},
|
methods: {
|
onPickerChange(e) {
|
this.selectedOption = e.detail.value;
|
},
|
getInputValue() {
|
this.pageIndex = 1; // 搜索时重置页码
|
this.loadData(); // 调用统一的数据加载方法
|
},
|
loadData() {
|
let result = "未完成";
|
if (this.current === 1) {
|
result = "已完成";
|
}
|
|
if (this.isLoading) return;
|
|
this.isLoading = true;
|
|
let userName = this.$loginInfo.account;
|
let url = "/MesOqcItemsDetect02/getPage"; // 默认调用getPage
|
let requestData = {
|
pageIndex: this.pageIndex,
|
limit: this.limit,
|
createUser: userName,
|
result: result
|
};
|
|
console.log("请求参数:", requestData);
|
console.log("当前选项卡:", this.current);
|
console.log("result状态:", result);
|
|
// 判断搜索框是否有值
|
if (this.searchValue != null && this.searchValue.trim() !== '') {
|
// 根据选择的搜索选项设置搜索条件
|
switch (this.selectedOption) {
|
case 0:
|
requestData.ItemNo = this.searchValue;
|
break;
|
case 1:
|
requestData.SalesOrder = this.searchValue;
|
break;
|
case 2:
|
requestData.ItemName = this.searchValue;
|
break;
|
case 3:
|
requestData.SuppNameContains = this.searchValue;
|
break;
|
case 4:
|
requestData.SongJ = this.searchValue;
|
break;
|
case 5:
|
requestData.SongNo = this.searchValue;
|
break;
|
}
|
}
|
|
this.$post({
|
url: url,
|
data: requestData
|
}).then(res => {
|
console.log("API返回完整数据:", JSON.stringify(res, null, 2));
|
console.log("res结构:", res);
|
console.log("res.data:", res.data);
|
console.log("res.totalCount:", res.totalCount);
|
|
// 根据响应格式.json，正确的数据结构是：
|
// res.data 是数组，res.totalCount 是总数
|
let dataList = null;
|
let totalCount = 0;
|
|
if (res.data && Array.isArray(res.data)) {
|
// 正确的数据结构：data是数组
|
dataList = res.data;
|
totalCount = res.totalCount || 0;
|
} else if (res.tbBillList) {
|
// 备用结构（兼容其他接口）
|
dataList = res.tbBillList;
|
totalCount = res.totalCount || 0;
|
} else {
|
console.error("无法解析的数据结构:", res);
|
console.error("期望的字段 data (数组) 不存在");
|
this.$showMessage("数据格式错误，请联系技术支持");
|
this.isLoading = false;
|
return;
|
}
|
|
console.log("解析后的dataList:", dataList);
|
console.log("dataList长度:", dataList ? dataList.length : 0);
|
|
if (this.pageIndex === 1) {
|
this.data = dataList || [];
|
} else {
|
if (dataList && dataList.length > 0) {
|
this.data = [...this.data, ...dataList];
|
}
|
}
|
|
console.log("处理后的data:", this.data);
|
console.log("data长度:", this.data.length);
|
|
this.totalCount = totalCount;
|
this.totalPage = Math.ceil(this.totalCount / this.limit);
|
|
this.noData = this.pageIndex >= this.totalPage;
|
this.isLoading = false;
|
}).catch((error) => {
|
console.error("API请求失败:", error);
|
this.isLoading = false;
|
this.searchValue = '';
|
this.$showMessage("请求失败，请重试");
|
});
|
},
|
init() {
|
this.loadData(); // 统一调用loadData方法
|
},
|
handleFabClick() {
|
uni.navigateTo({
|
url: 'ScanCode'
|
});
|
},
|
onClickItem(index) {
|
if (this.current !== index.currentIndex) {
|
this.current = index.currentIndex;
|
this.data = [];
|
this.pageIndex = 1;
|
this.loadData(); // 选项卡切换时调用loadData
|
}
|
},
|
copyText(text) {
|
uni.setClipboardData({
|
data: text,
|
success: () => {
|
this.copiedText = text;
|
this.tipShow = true;
|
setTimeout(() => {
|
this.tipShow = false;
|
}, 1000);
|
}
|
});
|
},
|
// 新增方法
|
navigateToDetail(item) {
|
uni.navigateTo({
|
url: 'Add?id=' + item.id
|
});
|
},
|
toggleFilter() {
|
this.showFilter = !this.showFilter;
|
},
|
clearSearch() {
|
this.searchValue = '';
|
this.pageIndex = 1;
|
this.loadData();
|
}
|
},
|
onPullDownRefresh() {
|
this.pageIndex = 1;
|
this.loadData();
|
this.tipShow = true;
|
uni.stopPullDownRefresh();
|
|
setTimeout(() => {
|
this.tipShow = false;
|
}, 1000);
|
},
|
onReachBottom() {
|
if (this.noData || this.isLoading) return;
|
this.pageIndex++;
|
this.loadData(); // 上拉加载时调用loadData
|
}
|
};
|
</script>
|
|
<style>
|
/* 页面容器 */
|
.page-container {
|
min-height: 100vh;
|
background: #f5f5f5;
|
padding: 0;
|
display: flex;
|
flex-direction: column;
|
}
|
|
/* 成功提示框 */
|
.success-toast {
|
position: fixed;
|
top: 20px;
|
left: 50%;
|
transform: translateX(-50%) translateY(-100px);
|
background: #28a745;
|
color: white;
|
padding: 8px 16px;
|
border-radius: 6px;
|
display: flex;
|
align-items: center;
|
gap: 6px;
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
z-index: 1000;
|
opacity: 0;
|
transition: all 0.3s ease;
|
}
|
|
.success-toast.show {
|
opacity: 1;
|
transform: translateX(-50%) translateY(0);
|
}
|
|
.toast-icon {
|
font-size: 14px;
|
font-weight: bold;
|
}
|
|
.toast-text {
|
font-size: 14px;
|
}
|
|
/* 头部区域 */
|
.header-section {
|
background: white;
|
padding: 16px;
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
}
|
|
/* 页面标题 */
|
.page-header {
|
margin-bottom: 16px;
|
}
|
|
.header-content {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
.title-section {
|
flex: 1;
|
}
|
|
.page-title {
|
font-size: 20px;
|
font-weight: 600;
|
color: #333;
|
margin-bottom: 2px;
|
display: block;
|
}
|
|
.page-subtitle {
|
font-size: 13px;
|
color: #666;
|
display: block;
|
}
|
|
.stats-badge {
|
background: #007AFF;
|
color: white;
|
padding: 8px 12px;
|
border-radius: 8px;
|
text-align: center;
|
min-width: 60px;
|
}
|
|
.stats-number {
|
font-size: 16px;
|
font-weight: 600;
|
display: block;
|
line-height: 1;
|
}
|
|
.stats-label {
|
font-size: 11px;
|
display: block;
|
margin-top: 2px;
|
}
|
|
/* 搜索区域 */
|
.search-section {
|
margin-bottom: 16px;
|
}
|
|
.search-container {
|
display: flex;
|
gap: 8px;
|
align-items: center;
|
}
|
|
.search-input-wrapper {
|
flex: 1;
|
position: relative;
|
display: flex;
|
align-items: center;
|
background: #f8f8f8;
|
border: 1px solid #ddd;
|
border-radius: 8px;
|
padding: 0 12px;
|
}
|
|
.search-input-wrapper:focus-within {
|
border-color: #007AFF;
|
background: white;
|
}
|
|
.search-input {
|
flex: 1;
|
height: 40px;
|
border: none;
|
background: transparent;
|
font-size: 14px;
|
color: #333;
|
margin-left: 8px;
|
outline: none;
|
}
|
|
.search-input::placeholder {
|
color: #999;
|
}
|
|
.clear-btn {
|
padding: 4px;
|
cursor: pointer;
|
}
|
|
.filter-btn {
|
width: 40px;
|
height: 40px;
|
background: #f0f0f0;
|
border: 1px solid #ddd;
|
border-radius: 8px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
cursor: pointer;
|
}
|
|
.filter-btn:active {
|
background: #e0e0e0;
|
}
|
|
/* 筛选面板 */
|
.filter-panel {
|
margin-top: 8px;
|
background: white;
|
border: 1px solid #ddd;
|
border-radius: 8px;
|
padding: 12px;
|
}
|
|
.filter-option {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 8px 0;
|
cursor: pointer;
|
}
|
|
.filter-label {
|
font-size: 14px;
|
color: #666;
|
}
|
|
.filter-value {
|
font-size: 14px;
|
color: #333;
|
font-weight: 500;
|
}
|
|
/* 选项卡 */
|
.tab-section {
|
margin-bottom: 0;
|
}
|
|
.custom-tabs {
|
display: flex;
|
background: #f0f0f0;
|
border-radius: 8px;
|
padding: 2px;
|
}
|
|
.tab-item {
|
flex: 1;
|
position: relative;
|
padding: 10px 16px;
|
text-align: center;
|
cursor: pointer;
|
border-radius: 6px;
|
}
|
|
.tab-item.active {
|
background: white;
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
}
|
|
.tab-text {
|
font-size: 14px;
|
font-weight: 500;
|
color: #666;
|
}
|
|
.tab-item.active .tab-text {
|
color: #007AFF;
|
font-weight: 600;
|
}
|
|
/* 内容区域 */
|
.content-container {
|
flex: 1;
|
padding: 20px 16px;
|
}
|
|
/* 加载状态 */
|
.loading-state {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
padding: 60px 20px;
|
}
|
|
.loading-spinner {
|
width: 40px;
|
height: 40px;
|
border: 3px solid #e2e8f0;
|
border-top: 3px solid #4f46e5;
|
border-radius: 50%;
|
animation: spin 1s linear infinite;
|
margin-bottom: 16px;
|
}
|
|
@keyframes spin {
|
0% { transform: rotate(0deg); }
|
100% { transform: rotate(360deg); }
|
}
|
|
.loading-text {
|
font-size: 14px;
|
color: #64748b;
|
}
|
|
/* 空状态 */
|
.empty-state {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
padding: 80px 20px;
|
text-align: center;
|
}
|
|
.empty-icon {
|
font-size: 64px;
|
margin-bottom: 20px;
|
opacity: 0.6;
|
}
|
|
.empty-title {
|
font-size: 18px;
|
font-weight: 600;
|
color: #374151;
|
margin-bottom: 8px;
|
display: block;
|
}
|
|
.empty-desc {
|
font-size: 14px;
|
color: #9ca3af;
|
display: block;
|
}
|
|
/* 检验单列表 */
|
.inspection-list {
|
display: flex;
|
flex-direction: column;
|
gap: 12px;
|
}
|
|
.inspection-card {
|
background: white;
|
border-radius: 8px;
|
padding: 16px;
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
border: 1px solid #e0e0e0;
|
cursor: pointer;
|
position: relative;
|
}
|
|
.inspection-card:active {
|
background: #f8f8f8;
|
}
|
|
/* 卡片头部 */
|
.card-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: flex-start;
|
margin-bottom: 16px;
|
}
|
|
.header-left {
|
flex: 1;
|
}
|
|
.inspection-number {
|
margin-bottom: 8px;
|
}
|
|
.number-label {
|
font-size: 12px;
|
color: #64748b;
|
display: block;
|
margin-bottom: 4px;
|
}
|
|
.number-value {
|
font-size: 16px;
|
font-weight: 700;
|
color: #1e293b;
|
display: block;
|
}
|
|
.material-info {
|
display: flex;
|
flex-direction: column;
|
gap: 2px;
|
}
|
|
.material-code {
|
font-size: 13px;
|
color: #4f46e5;
|
font-weight: 600;
|
}
|
|
.material-name {
|
font-size: 12px;
|
color: #64748b;
|
max-width: 200px;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
|
.header-right {
|
margin-left: 16px;
|
}
|
|
/* 状态徽章 */
|
.status-badge {
|
display: flex;
|
align-items: center;
|
gap: 4px;
|
padding: 4px 8px;
|
border-radius: 4px;
|
font-size: 12px;
|
font-weight: 500;
|
white-space: nowrap;
|
}
|
|
.status-badge.status-submitted {
|
background: #e8f5e8;
|
color: #2e7d32;
|
border: 1px solid #c8e6c9;
|
}
|
|
.status-badge.status-pending {
|
background: #fff3e0;
|
color: #f57c00;
|
border: 1px solid #ffcc02;
|
}
|
|
.status-badge.status-completed {
|
background: #e8f5e8;
|
color: #2e7d32;
|
border: 1px solid #c8e6c9;
|
}
|
|
.status-dot {
|
width: 6px;
|
height: 6px;
|
border-radius: 50%;
|
background: currentColor;
|
}
|
|
.status-text {
|
font-size: 12px;
|
font-weight: 500;
|
}
|
|
/* 检验结果区域 */
|
.inspection-result {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 12px;
|
padding: 8px;
|
background: #f8f8f8;
|
border-radius: 6px;
|
}
|
|
.result-item {
|
display: flex;
|
align-items: center;
|
gap: 8px;
|
flex: 1;
|
}
|
|
.result-icon {
|
width: 24px;
|
height: 24px;
|
border-radius: 50%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-weight: bold;
|
font-size: 12px;
|
}
|
|
.result-icon.icon-pass {
|
background: #28a745;
|
color: white;
|
}
|
|
.result-icon.icon-fail {
|
background: #dc3545;
|
color: white;
|
}
|
|
.result-icon.icon-pending {
|
background: #ffc107;
|
color: white;
|
}
|
|
.result-content {
|
flex: 1;
|
}
|
|
.result-label {
|
font-size: 12px;
|
color: #666;
|
display: block;
|
margin-bottom: 2px;
|
}
|
|
.result-value {
|
font-size: 14px;
|
font-weight: 500;
|
display: block;
|
}
|
|
.result-value.value-pass {
|
color: #28a745;
|
}
|
|
.result-value.value-fail {
|
color: #dc3545;
|
}
|
|
.result-value.value-pending {
|
color: #ffc107;
|
}
|
|
.inspector-info {
|
text-align: right;
|
}
|
|
.inspector-label {
|
font-size: 12px;
|
color: #666;
|
display: block;
|
margin-bottom: 2px;
|
}
|
|
.inspector-name {
|
font-size: 13px;
|
font-weight: 500;
|
color: #333;
|
display: block;
|
}
|
|
/* 详细信息 */
|
.card-details {
|
margin-bottom: 8px;
|
}
|
|
.detail-grid {
|
display: grid;
|
grid-template-columns: repeat(2, 1fr);
|
gap: 8px;
|
}
|
|
.detail-item {
|
background: #f8f8f8;
|
padding: 6px 8px;
|
border-radius: 4px;
|
}
|
|
.detail-label {
|
font-size: 11px;
|
color: #666;
|
display: block;
|
margin-bottom: 2px;
|
}
|
|
.detail-value {
|
font-size: 12px;
|
font-weight: 500;
|
color: #333;
|
display: block;
|
}
|
|
/* 操作指示器 */
|
.action-indicator {
|
position: absolute;
|
top: 50%;
|
right: 12px;
|
transform: translateY(-50%);
|
opacity: 0.3;
|
}
|
|
/* 浮动操作按钮 */
|
.fab-container {
|
position: fixed;
|
bottom: 20px;
|
right: 20px;
|
z-index: 1000;
|
}
|
|
.fab-button {
|
width: 50px;
|
height: 50px;
|
background: #007AFF;
|
border-radius: 50%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
cursor: pointer;
|
}
|
|
.fab-button:active {
|
transform: scale(0.95);
|
}
|
|
/* 响应式设计 */
|
@media (max-width: 768px) {
|
.header-content {
|
flex-direction: column;
|
align-items: flex-start;
|
gap: 12px;
|
}
|
|
.stats-badge {
|
align-self: flex-end;
|
}
|
|
.search-container {
|
flex-direction: column;
|
gap: 8px;
|
}
|
|
.filter-btn {
|
align-self: flex-end;
|
}
|
|
.detail-grid {
|
grid-template-columns: 1fr;
|
}
|
|
.inspection-result {
|
flex-direction: column;
|
align-items: flex-start;
|
gap: 12px;
|
}
|
|
.inspector-info {
|
text-align: left;
|
width: 100%;
|
}
|
}
|
</style>
|
