<template>
|
<view class="page-container">
|
<!-- 刷新提示框 -->
|
<view class="tips" :class="{ 'tips-ani': tipShow }">刷新成功</view>
|
|
<!-- 固定头部区域 -->
|
<view class="fixed-header">
|
<!-- 搜索栏样式 -->
|
<view class="search-bar">
|
<view class="search-card">
|
<picker mode="selector" :range="searchOptions" v-model="selectedOption" @change="onPickerChange">
|
<view class="picker">
|
{{ searchOptions[selectedOption] }}
|
</view>
|
</picker>
|
<input class="search-input" type="text" v-model="searchValue" @keypress.enter="getInputValue"
|
placeholder="请输入搜索值" />
|
<button class="search-btn" @click="getInputValue">搜索</button>
|
</view>
|
</view>
|
|
<!-- 选项卡样式 -->
|
<view class="newsTab">
|
<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" style-type="button"
|
active-color="#165DFF"></uni-segmented-control>
|
</view>
|
</view>
|
|
<!-- 内容区域 -->
|
<view class="content-container">
|
<view v-show="current === 0">
|
<uni-list>
|
<uni-list-item class="list-card" v-for="item in data" :key="item.id"
|
:to="'Add?id=' + item.id + '&lotNo=' + item.lotNo + '&releaseNo=' + item.releaseNo">
|
<template v-slot:header>
|
<view class="card-header">
|
<view class="header-content">
|
<!-- 单号信息区域 - 优化布局 -->
|
<view class="order-info">
|
<view class="order-row">
|
<view class="order-item">
|
<view class="order-label">销售单号</view>
|
<view class="order-value">{{ item.salesOrderId }}</view>
|
</view>
|
<view class="order-item">
|
<view class="order-label">检验单号</view>
|
<view class="order-value">{{ item.releaseNo }}</view>
|
</view>
|
</view>
|
<view class="order-row">
|
<view class="order-item">
|
<view class="order-label">到货单号</view>
|
<view class="order-value">{{ item.lotNo }}</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- 状态标签 - 调整位置 -->
|
<view class="status-badge" :class="item.fsubmit == 1 ? 'approved' : 'pending'">
|
{{ item.fsubmit == 1 ? '已提交' : '待提交' }}
|
</view>
|
</view>
|
</view>
|
</template>
|
<template v-slot:body>
|
<view class="card-body">
|
<!-- 检验人信息移至此处 -->
|
<view class="inspector-info">
|
<view class="info-row">
|
<view class="info-label">检验人</view>
|
<view class="info-value">{{ item.modify1By || '待检验' }}</view>
|
</view>
|
<view class="info-row">
|
<view class="info-label">检验时间</view>
|
<view class="info-value">{{ item.iqcDate || '未检验' }}</view>
|
</view>
|
<view class="info-row">
|
<view class="info-label">检测结果</view>
|
<view class="info-value result-badge" :class="{
|
'pass': item.fcheckResu === '合格',
|
'fail': item.fcheckResu === '不合格',
|
'pending': !item.fcheckResu || item.fcheckResu === '未检验'
|
}">
|
{{ item.fcheckResu || '未检验' }}
|
</view>
|
</view>
|
</view>
|
|
<view class="checkbox-group">
|
<label class="checkbox-item">
|
<checkbox value="F_TYPE" disabled="true" :checked="item.ftype == 1" />
|
委外
|
</label>
|
<label class="checkbox-item">
|
<checkbox value="URGENT_FLAG" disabled="true" :checked="item.urgentFlag == 1" />
|
急料标识
|
</label>
|
</view>
|
|
<!-- 信息网格布局 - 优化列分配 -->
|
<view class="info-grid">
|
<view class="grid-row">
|
<view class="grid-item">
|
<label class="grid-label">创建时间</label>
|
<view class="grid-value">{{ item.createDate }}</view>
|
</view>
|
<view class="grid-item">
|
<label class="grid-label">创建人</label>
|
<view class="grid-value">{{ item.createBy }}</view>
|
</view>
|
<view class="grid-item">
|
<label class="grid-label">物料编码</label>
|
<view class="grid-value">{{ item.itemNo }}</view>
|
</view>
|
</view>
|
<view class="grid-row">
|
<view class="grid-item">
|
<label class="grid-label">物料名称</label>
|
<view class="grid-value">{{ item.itemName }}</view>
|
</view>
|
<view class="grid-item">
|
<label class="grid-label">规格型号</label>
|
<view class="grid-value">{{ item.itemModel }}</view>
|
</view>
|
<view class="grid-item">
|
<label class="grid-label">数量</label>
|
<view class="grid-value">{{ item.fcovertQty }}</view>
|
</view>
|
</view>
|
<view class="grid-row">
|
<view class="grid-item">
|
<label class="grid-label">供应商</label>
|
<view class="grid-value">{{ item.suppName }}</view>
|
</view>
|
<view class="grid-item">
|
<label class="grid-label">送验人</label>
|
<view class="grid-value">{{ item.fcheckBy }}</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
</uni-list-item>
|
</uni-list>
|
<view class="plus-button" @click="handleFabClick">
|
+
|
</view>
|
</view>
|
<!-- 第二个选项卡内容省略，与第一个类似 -->
|
<view v-show="current === 1">
|
<uni-list>
|
<uni-list-item class="list-card" v-for="item in data" :key="item.id"
|
:to="'Add?id=' + item.id + '&lotNo=' + item.lotNo + '&releaseNo=' + item.releaseNo">
|
<template v-slot:header>
|
<view class="card-header">
|
<view class="header-content">
|
<!-- 单号信息区域 - 优化布局 -->
|
<view class="order-info">
|
<view class="order-row">
|
<view class="order-item">
|
<view class="order-label">销售单号</view>
|
<view class="order-value">{{ item.salesOrderId }}</view>
|
</view>
|
<view class="order-item">
|
<view class="order-label">检验单号</view>
|
<view class="order-value">{{ item.releaseNo }}</view>
|
</view>
|
</view>
|
<view class="order-row">
|
<view class="order-item">
|
<view class="order-label">到货单号</view>
|
<view class="order-value">{{ item.lotNo }}</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- 状态标签 - 调整位置 -->
|
<view class="status-badge" :class="item.fsubmit == 1 ? 'approved' : 'pending'">
|
{{ item.fsubmit == 1 ? '已提交' : '待提交' }}
|
</view>
|
</view>
|
</view>
|
</template>
|
<template v-slot:body>
|
<view class="card-body">
|
<!-- 检验人信息移至此处 -->
|
<view class="inspector-info">
|
<view class="info-row">
|
<view class="info-label">检验人</view>
|
<view class="info-value">{{ item.modify1By || '待检验' }}</view>
|
</view>
|
<view class="info-row">
|
<view class="info-label">检验时间</view>
|
<view class="info-value">{{ item.iqcDate || '未检验' }}</view>
|
</view>
|
<view class="info-row">
|
<view class="info-label">检测结果</view>
|
<view class="info-value result-badge" :class="{
|
'pass': item.fcheckResu === '合格',
|
'fail': item.fcheckResu === '不合格',
|
'pending': !item.fcheckResu || item.fcheckResu === '未检验'
|
}">
|
{{ item.fcheckResu || '未检验' }}
|
</view>
|
</view>
|
</view>
|
|
<view class="checkbox-group">
|
<label class="checkbox-item">
|
<checkbox value="F_TYPE" disabled="true" :checked="item.ftype == 1" />
|
委外
|
</label>
|
<label class="checkbox-item">
|
<checkbox value="URGENT_FLAG" disabled="true" :checked="item.urgentFlag == 1" />
|
急料标识
|
</label>
|
</view>
|
|
<!-- 信息网格布局 - 优化列分配 -->
|
<view class="info-grid">
|
<view class="grid-row">
|
<view class="grid-item">
|
<label class="grid-label">创建时间</label>
|
<view class="grid-value">{{ item.createDate }}</view>
|
</view>
|
<view class="grid-item">
|
<label class="grid-label">创建人</label>
|
<view class="grid-value">{{ item.createBy }}</view>
|
</view>
|
<view class="grid-item">
|
<label class="grid-label">物料编码</label>
|
<view class="grid-value">{{ item.itemNo }}</view>
|
</view>
|
</view>
|
<view class="grid-row">
|
<view class="grid-item">
|
<label class="grid-label">物料名称</label>
|
<view class="grid-value">{{ item.itemName }}</view>
|
</view>
|
<view class="grid-item">
|
<label class="grid-label">规格型号</label>
|
<view class="grid-value">{{ item.itemModel }}</view>
|
</view>
|
<view class="grid-item">
|
<label class="grid-label">数量</label>
|
<view class="grid-value">{{ item.fcovertQty }}</view>
|
</view>
|
</view>
|
<view class="grid-row">
|
<view class="grid-item">
|
<label class="grid-label">供应商</label>
|
<view class="grid-value">{{ item.suppName }}</view>
|
</view>
|
<view class="grid-item">
|
<label class="grid-label">送验人</label>
|
<view class="grid-value">{{ item.fcheckBy }}</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
</uni-list-item>
|
</uni-list>
|
<view class="plus-button" @click="handleFabClick">
|
+
|
</view>
|
</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,
|
};
|
},
|
onLoad() {
|
uni.createSelectorQuery().select('.fixed-header').boundingClientRect(rect => {
|
this.headerHeight = rect.height;
|
}).exec();
|
|
this.init();
|
},
|
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 = "/LLJ/getPage"; // 默认调用getPage
|
let requestData = {
|
pageIndex: this.pageIndex,
|
limit: this.limit,
|
createUser: userName,
|
result: result
|
};
|
|
// 判断搜索框是否有值
|
if (this.searchValue != null && this.searchValue.trim() !== '') {
|
url = '/LLJ/getSearchPage'; // 有值则调用getSearchPage
|
|
// 根据选择的搜索选项设置搜索条件
|
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 => {
|
if (this.pageIndex === 1) {
|
this.data = res.data.tbBillList;
|
} else {
|
if (res.data.tbBillList.length > 0) {
|
this.data = [...this.data, ...res.data.tbBillList];
|
}
|
}
|
this.totalCount = res.data.totalCount;
|
this.totalPage = Math.ceil(this.totalCount / this.limit);
|
|
this.noData = this.pageIndex >= this.totalPage;
|
this.isLoading = false;
|
}).catch(() => {
|
this.isLoading = false;
|
this.searchValue = '';
|
});
|
},
|
init() {
|
this.loadData(); // 统一调用loadData方法
|
},
|
handleFabClick() {
|
uni.navigateTo({
|
url: 'Add?id'
|
});
|
},
|
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);
|
}
|
});
|
}
|
},
|
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 lang="scss">
|
/* 基础配色方案不变 */
|
:root {
|
--primary-color: #4080FF;
|
/* 主色调 - 蓝色 */
|
--primary-light: #E6F0FF;
|
/* 主色浅色 */
|
--success-color: #00B42A;
|
/* 成功色 - 绿色 */
|
--warning-color: #FF7D00;
|
/* 警告色 - 橙色 */
|
--danger-color: #F53F3F;
|
/* 危险色 - 红色 */
|
--pending-color: #FFC107;
|
/* 待处理色 - 黄色 */
|
--text-color: #1D2129;
|
/* 主文本色 */
|
--text-secondary: #4E5969;
|
/* 次要文本色 */
|
--bg-color: #F7F8FA;
|
/* 背景色 */
|
--card-bg: #FFFFFF;
|
/* 卡片背景色 */
|
--border-color: #E5E6EB;
|
/* 边框色 */
|
}
|
|
/* 页面整体样式不变 */
|
page {
|
background-color: var(--bg-color);
|
min-height: 100vh;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.page-container {
|
padding: 0;
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
}
|
|
/* 顶部提示框不变 */
|
.tips {
|
color: var(--success-color);
|
font-size: 28rpx;
|
line-height: 80rpx;
|
text-align: center;
|
background-color: rgba(0, 180, 42, 0.1);
|
border-radius: 16rpx;
|
height: 0;
|
opacity: 0;
|
transform: translateY(-20rpx);
|
transition: all 0.3s;
|
margin: 20rpx 20rpx 0 20rpx;
|
box-shadow: 0 2rpx 10rpx rgba(0, 180, 42, 0.15);
|
z-index: 2000;
|
position: relative;
|
}
|
|
.tips-ani {
|
transform: translateY(0);
|
height: 80rpx;
|
opacity: 1;
|
}
|
|
/* 固定头部区域优化 */
|
.fixed-header {
|
position: fixed;
|
top: 0;
|
left: 0;
|
right: 0;
|
z-index: 1000;
|
background-color: var(--bg-color);
|
padding: 16rpx;
|
/* 减小顶部区域内边距 */
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
|
}
|
|
/* 搜索栏样式优化 */
|
.search-bar {
|
margin-bottom: 16rpx;
|
/* 减小底部边距 */
|
}
|
|
.search-card {
|
display: flex;
|
align-items: center;
|
background-color: var(--card-bg);
|
border-radius: 20rpx;
|
/* 减小圆角半径 */
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
/* 减小阴影 */
|
height: 70rpx;
|
/* 减小高度 */
|
}
|
|
.picker {
|
width: 180rpx;
|
/* 减小选择器宽度 */
|
height: 70rpx;
|
line-height: 70rpx;
|
text-align: center;
|
font-size: 24rpx;
|
/* 减小字体大小 */
|
color: var(--text-secondary);
|
border-right: 1rpx solid var(--border-color);
|
white-space: nowrap;
|
}
|
|
.search-input {
|
flex: 1;
|
height: 70rpx;
|
line-height: 70rpx;
|
font-size: 24rpx;
|
/* 减小字体大小 */
|
color: var(--text-color);
|
padding: 0 20rpx;
|
/* 减小内边距 */
|
border: none;
|
outline: none;
|
}
|
|
.search-btn {
|
background: linear-gradient(135deg, var(--primary-color), #2B67FF);
|
color: white;
|
text-align: center;
|
font-size: 24rpx;
|
/* 减小字体大小 */
|
width: 160rpx;
|
/* 减小按钮宽度 */
|
height: 70rpx;
|
line-height: 70rpx;
|
border-radius: 0;
|
letter-spacing: 2rpx;
|
/* 减小字间距 */
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
transition: all 0.3s;
|
box-shadow: 0 2rpx 6rpx rgba(64, 128, 255, 0.2);
|
/* 减小阴影 */
|
}
|
|
.search-btn:hover {
|
background: linear-gradient(135deg, #2B67FF, #1A53FF);
|
transform: translateY(-1rpx);
|
box-shadow: 0 3rpx 8rpx rgba(64, 128, 255, 0.25);
|
}
|
|
.search-btn:active {
|
transform: translateY(1rpx);
|
box-shadow: 0 1rpx 4rpx rgba(64, 128, 255, 0.15);
|
}
|
|
/* 选项卡样式优化 */
|
.newsTab {
|
margin-bottom: 0;
|
}
|
|
uni-segmented-control {
|
background-color: var(--card-bg);
|
border-radius: 20rpx;
|
/* 减小圆角半径 */
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
/* 减小阴影 */
|
overflow: hidden;
|
height: 70rpx;
|
/* 减小高度 */
|
}
|
|
uni-segmented-control .uni-segmented-control__item {
|
font-size: 24rpx;
|
/* 减小字体大小 */
|
color: var(--text-secondary);
|
height: 70rpx;
|
line-height: 70rpx;
|
font-weight: 500;
|
}
|
|
uni-segmented-control .uni-segmented-control__item--active {
|
color: var(--primary-color);
|
border-bottom: 2rpx solid var(--primary-color);
|
/* 减小下划线高度 */
|
}
|
|
/* 内容区域样式优化 */
|
.content-container {
|
margin-top: 180rpx;
|
/* 减小顶部边距 */
|
padding: 16rpx;
|
/* 减小内容区域内边距 */
|
flex: 1;
|
overflow-y: auto;
|
}
|
|
/* 列表卡片样式优化 */
|
.list-card {
|
margin-bottom: 20rpx;
|
/* 减小底部边距 */
|
background-color: var(--card-bg);
|
border-radius: 16rpx;
|
/* 减小圆角半径 */
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
/* 减小阴影 */
|
overflow: hidden;
|
transition: all 0.3s;
|
}
|
|
.list-card:hover {
|
transform: translateY(-2rpx);
|
/* 减小悬停时的上移距离 */
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
|
}
|
|
/* 卡片头部样式优化 */
|
.card-header {
|
padding: 0;
|
background-color: var(--primary-light);
|
}
|
|
.header-content {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 12rpx 16rpx;
|
/* 减小头部区域内边距 */
|
position: relative;
|
}
|
|
/* 单号信息区域优化 */
|
.order-info {
|
flex: 1;
|
margin-right: 16rpx;
|
/* 减小右侧边距 */
|
}
|
|
.order-row {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 12rpx;
|
/* 减小元素间距 */
|
}
|
|
.order-item {
|
flex: 1;
|
min-width: 160rpx;
|
/* 减小最小宽度 */
|
}
|
|
.order-label {
|
font-size: 20rpx;
|
/* 减小标签字体大小 */
|
color: var(--text-secondary);
|
margin-bottom: 2rpx;
|
/* 减小标签与值之间的间距 */
|
display: block;
|
font-weight: 500;
|
}
|
|
.order-value {
|
font-size: 22rpx;
|
/* 减小值字体大小 */
|
color: var(--text-color);
|
font-weight: 500;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
|
/* 状态标签优化 */
|
.status-badge {
|
display: inline-block;
|
padding: 4rpx 10rpx;
|
/* 减小状态标签尺寸 */
|
border-radius: 8rpx;
|
/* 减小圆角半径 */
|
font-size: 18rpx;
|
/* 减小状态标签字体大小 */
|
font-weight: 500;
|
white-space: nowrap;
|
flex-shrink: 0;
|
}
|
|
.approved {
|
background-color: rgba(0, 180, 42, 0.1);
|
color: var(--success-color);
|
}
|
|
.pending {
|
background-color: rgba(245, 63, 63, 0.1);
|
color: var(--danger-color);
|
}
|
|
/* 检验人信息区域优化 */
|
.inspector-info {
|
background-color: rgba(245, 63, 63, 0.05);
|
padding: 12rpx 16rpx;
|
/* 减小内边距 */
|
border-radius: 0;
|
margin-bottom: 12rpx;
|
/* 与下方内容保持适当间距 */
|
}
|
|
.info-row {
|
display: flex;
|
margin-bottom: 8rpx;
|
/* 减小行间距 */
|
align-items: center;
|
}
|
|
.info-label {
|
font-size: 20rpx;
|
/* 减小标签字体大小 */
|
color: var(--text-secondary);
|
width: 120rpx;
|
/* 减小标签宽度 */
|
}
|
|
.info-value {
|
font-size: 22rpx;
|
/* 减小值字体大小 */
|
color: var(--text-color);
|
font-weight: 500;
|
}
|
|
.result-badge {
|
padding: 4rpx 10rpx;
|
/* 减小结果标签尺寸 */
|
border-radius: 8rpx;
|
/* 减小圆角半径 */
|
}
|
|
.pass {
|
background-color: rgba(0, 180, 42, 0.1);
|
color: var(--success-color);
|
}
|
|
.fail {
|
background-color: rgba(245, 63, 63, 0.1);
|
color: var(--danger-color);
|
}
|
|
.pending {
|
background-color: rgba(255, 193, 7, 0.2);
|
/* 黄色背景 */
|
color: #FF7D00;
|
/* 橙色文字 */
|
font-weight: 600;
|
/* 加粗文字 */
|
}
|
|
/* 复选框组样式优化 */
|
.checkbox-group {
|
display: flex;
|
padding: 12rpx 16rpx;
|
/* 减小内边距 */
|
border-bottom: 1rpx solid var(--border-color);
|
background-color: rgba(230, 240, 255, 0.3);
|
}
|
|
.checkbox-item {
|
display: flex;
|
align-items: center;
|
margin-right: 24rpx;
|
/* 减小右侧边距 */
|
font-size: 22rpx;
|
/* 减小字体大小 */
|
color: var(--text-secondary);
|
}
|
|
checkbox {
|
transform: scale(0.8);
|
/* 减小复选框大小 */
|
margin-right: 10rpx;
|
/* 减小右侧边距 */
|
}
|
|
/* 信息网格布局优化 */
|
.info-grid {
|
padding: 12rpx 16rpx;
|
/* 减小内边距 */
|
}
|
|
.grid-row {
|
display: flex;
|
flex-wrap: wrap;
|
margin-bottom: 12rpx;
|
/* 减小行间距 */
|
}
|
|
.grid-item {
|
flex: 1;
|
min-width: 200rpx;
|
/* 减小最小宽度 */
|
margin-right: 16rpx;
|
/* 减小右侧边距 */
|
}
|
|
.grid-item:last-child {
|
margin-right: 0;
|
}
|
|
.grid-label {
|
font-size: 20rpx;
|
/* 减小标签字体大小 */
|
color: var(--text-secondary);
|
margin-bottom: 3rpx;
|
/* 减小标签与值之间的间距 */
|
display: block;
|
}
|
|
.grid-value {
|
font-size: 22rpx;
|
/* 减小值字体大小 */
|
color: var(--text-color);
|
font-weight: 500;
|
}
|
|
/* 浮动按钮样式优化 */
|
.plus-button {
|
position: fixed;
|
bottom: 30rpx;
|
right: 30rpx;
|
width: 80rpx;
|
/* 减小按钮大小 */
|
height: 80rpx;
|
border-radius: 50%;
|
background: linear-gradient(135deg, var(--primary-color), #2B67FF);
|
color: white;
|
text-align: center;
|
line-height: 80rpx;
|
font-size: 40rpx;
|
/* 减小字体大小 */
|
cursor: pointer;
|
z-index: 1000;
|
box-shadow: 0 4rpx 16rpx rgba(64, 128, 255, 0.25);
|
transition: all 0.3s;
|
}
|
|
.plus-button:hover {
|
background: linear-gradient(135deg, #2B67FF, #1A53FF);
|
transform: translateY(-4rpx);
|
box-shadow: 0 8rpx 24rpx rgba(64, 128, 255, 0.35);
|
}
|
|
.plus-button:active {
|
transform: translateY(2rpx);
|
box-shadow: 0 2rpx 8rpx rgba(64, 128, 255, 0.2);
|
}
|
|
/* 响应式设计优化 */
|
@media (max-width: 768px) {
|
.fixed-header {
|
padding: 12rpx;
|
}
|
|
.search-bar {
|
margin-bottom: 12rpx;
|
}
|
|
.search-card {
|
height: 60rpx;
|
}
|
|
.picker {
|
width: 160rpx;
|
height: 60rpx;
|
line-height: 60rpx;
|
font-size: 22rpx;
|
}
|
|
.search-input {
|
height: 60rpx;
|
line-height: 60rpx;
|
font-size: 22rpx;
|
padding: 0 16rpx;
|
}
|
|
.search-btn {
|
width: 140rpx;
|
height: 60rpx;
|
line-height: 60rpx;
|
font-size: 22rpx;
|
}
|
|
uni-segmented-control {
|
height: 60rpx;
|
}
|
|
uni-segmented-control .uni-segmented-control__item {
|
height: 60rpx;
|
line-height: 60rpx;
|
font-size: 22rpx;
|
}
|
|
.content-container {
|
margin-top: 160rpx;
|
padding: 12rpx;
|
}
|
|
.list-card {
|
margin-bottom: 16rpx;
|
border-radius: 12rpx;
|
}
|
|
.header-content {
|
padding: 8rpx 12rpx;
|
/* 进一步减小头部区域高度 */
|
}
|
|
.order-row {
|
gap: 10rpx;
|
}
|
|
.order-item {
|
min-width: 140rpx;
|
}
|
|
.order-label {
|
font-size: 18rpx;
|
margin-bottom: 2rpx;
|
}
|
|
.order-value {
|
font-size: 20rpx;
|
}
|
|
.status-badge {
|
padding: 3rpx 8rpx;
|
font-size: 16rpx;
|
}
|
|
.inspector-info {
|
padding: 8rpx 12rpx;
|
margin-bottom: 8rpx;
|
}
|
|
.info-row {
|
margin-bottom: 6rpx;
|
}
|
|
.info-label {
|
font-size: 18rpx;
|
width: 100rpx;
|
}
|
|
.info-value {
|
font-size: 20rpx;
|
}
|
|
.result-badge {
|
padding: 3rpx 8rpx;
|
}
|
|
.pending {
|
background-color: rgba(255, 193, 7, 0.2);
|
/* 黄色背景 */
|
color: #FF7D00;
|
/* 橙色文字 */
|
}
|
|
.checkbox-group,
|
.info-grid {
|
padding: 8rpx 12rpx;
|
}
|
|
.checkbox-item {
|
margin-right: 20rpx;
|
font-size: 20rpx;
|
}
|
|
.grid-item {
|
min-width: 180rpx;
|
margin-right: 12rpx;
|
}
|
|
.grid-label {
|
font-size: 18rpx;
|
margin-bottom: 2rpx;
|
}
|
|
.grid-value {
|
font-size: 20rpx;
|
}
|
|
.plus-button {
|
width: 70rpx;
|
height: 70rpx;
|
line-height: 70rpx;
|
font-size: 35rpx;
|
bottom: 20rpx;
|
right: 20rpx;
|
}
|
}
|
</style>
|
