<template>
|
<view class="container">
|
<!-- 顶部导航栏 -->
|
<cu-custom :bgColor="NavBarColor" :isBack="true" backRouterName="index">
|
<block slot="backText">返回</block>
|
<block slot="content">操作记录</block>
|
</cu-custom>
|
|
<!-- 吸顶标签栏 -->
|
<view class="solid-bottom" :style="{ top: navBarHeight + 'px' }">
|
<scroll-view scroll-x class="bg-white nav text-center">
|
<view class="cu-item" :class="item.value==TabCur?'text-blue cur':''" v-for="(item,index) in tabs"
|
:key="index" @tap="tabSelect" :data-id="item.value">
|
{{item.title}}
|
</view>
|
</scroll-view>
|
</view>
|
|
<!-- 独立滚动的列表容器 -->
|
<view class="production-container" :style="{ height: contentHeight + 'px' }">
|
<!-- 齐套检查 -->
|
<teleport v-if="TabCur==0">
|
<view class="list-item" v-for="(item, index) in mockBillList" :key="index">
|
<view class="item-details">
|
<view class="detail-row">
|
<text class="label">工单号:</text>
|
<text class="value">{{item.workOrderCode}}</text>
|
</view>
|
<view class="detail-row">
|
<text class="label">物料编号:</text>
|
<text class="value">{{item.materialNumber}}</text>
|
</view>
|
<view class="detail-row">
|
<text class="label">物料名称:</text>
|
<text class="value">{{item.materialName}}</text>
|
</view>
|
<view class="detail-row">
|
<text class="label">需求数量:</text>
|
<text class="value" style="color: #00FF00;">{{item.requiredQuantity}}</text>
|
</view>
|
<view class="detail-row">
|
<text class="label">实际数量:</text>
|
<text class="value" style="color: #00FF00;">{{item.actualQuantity}}</text>
|
</view>
|
<view class="detail-row">
|
<text class="label">是否齐备:</text>
|
<text class="value" v-if="item.checkFlag==='0'" style="color: red;">否</text>
|
<text class="value" v-else style="color: green;">是</text>
|
</view>
|
</view>
|
</view>
|
</teleport>
|
|
<!-- 工艺点检 -->
|
<teleport v-if="TabCur==1">
|
<view class="list-item" v-for="(item, index) in checkList" :key="index">
|
<view class="item-details">
|
<view class="detail-row">
|
<text class="label">工艺参数编号:</text>
|
<text class="value">{{ item.paramCode}}</text>
|
</view>
|
<view class="detail-row">
|
<text class="label">工艺参数:</text>
|
<text class="value">{{ item.paramName}}</text>
|
</view>
|
<view class="detail-row">
|
<text class="label">合格范围:</text>
|
<text class="value">{{ item.validRange}}</text>
|
</view>
|
<view class="detail-row">
|
<text class="label">参数值:</text>
|
<text class="value">{{ item.paramValue}}</text>
|
</view>
|
<view class="detail-row">
|
<text class="label">判定:</text>
|
<text class="value">{{ item.judgment}}</text>
|
</view>
|
</view>
|
</view>
|
</teleport>
|
|
<!-- 设备点检 -->
|
<teleport v-if="TabCur==2">
|
<view class="container-inner">
|
<!-- 浮窗遮罩层 -->
|
<view v-if="showPreview" class="overlay" @tap.stop="closePreview">
|
<view class="modal">
|
<text class="close-btn" @tap.stop="showPreview = false">×</text>
|
<image :src="previewImageSrc" mode="aspectFit" class="preview-image"
|
@error="handleImageError" :show-menu-by-longpress="false" />
|
</view>
|
</view>
|
|
<uni-forms ref="form" :modelValue="formData" validate-trigger="bind"
|
err-show-type="undertext">
|
<uni-group top="1">
|
<view class="divider"><text>基本信息</text></view>
|
<uni-forms-item :label-width="80" name="orderNum" label="工单号:">
|
<uni-easyinput v-model="formData.orderNum" :disabled="true" />
|
</uni-forms-item>
|
<uni-forms-item :label-width="80" name="equipmentNum" label="设备编号:">
|
<uni-easyinput v-model="formData.num" :disabled="true" />
|
</uni-forms-item>
|
<uni-forms-item :label-width="80" name="inspectionDate" label="点检日期:">
|
<uni-easyinput v-model="formData.inspectionDate" :disabled="true" />
|
</uni-forms-item>
|
<uni-forms-item :label-width="80" name="operator" label="点检人:">
|
<uni-easyinput v-model="formData.operator" :disabled="true" />
|
</uni-forms-item>
|
<uni-forms-item :label-width="80" name="remark" label="备注:">
|
<uni-easyinput v-model="formData.remark" :disabled="true" />
|
</uni-forms-item>
|
<uni-forms-item :label-width="80" name="checkImages" label="点检图片:">
|
<uni-file-picker limit="9" :value="fileLists" :image-styles="imageStyles"
|
:sourceType="sourceType" @select="select" @progress="progress"
|
@success="success" @fail="fail" @delete="deletea" :readonly="readonly" />
|
</uni-forms-item>
|
<uni-forms-item name="guide" :label-width="80" label="作业指导:">
|
<button class="cu-btn bg-blue" @tap="showPreview = true">查看</button>
|
</uni-forms-item>
|
</uni-group>
|
</uni-forms>
|
|
<view class="divider"><text>保养项信息</text></view>
|
<uni-collapse>
|
<uni-collapse-item :show-animation="true" :accordion="true" title="查看保养项"
|
:border="false" title-border="none">
|
<uni-card margin="10px" spacing="1px"
|
v-for="(item,index) in partTakeAdviceDetailList" :key="index">
|
<view class="flex">
|
<view class="flex-sub text-light bg-white padding-xs margin-xs radius">行号:</view>
|
<view class="flex-sub bg-white padding-xs margin-xs radius text-right">{{index+1}}</view>
|
</view>
|
<view class="flex">
|
<view class="flex-sub text-light bg-white padding-xs margin-xs radius">保养项:</view>
|
<view class="flex-sub bg-white padding-xs margin-xs text-bold radius text-right">{{item.itemName}}</view>
|
</view>
|
<view class="flex">
|
<view class="flex-sub text-light bg-white padding-xs margin-xs radius">保养要求:</view>
|
<view class="flex-sub bg-white padding-xs margin-xs radius text-right">{{item.itemDemand}}</view>
|
</view>
|
<view class="flex">
|
<view class="flex-sub text-light bg-white padding-xs margin-xs radius">点检结果:</view>
|
<view class="flex-sub bg-white padding-xs text-right margin-xs radius">
|
<uni-data-select :localdata="item.restle"
|
v-model="item.inspectionResult" @change="handleCode($event, index)"
|
:disabled="item.istrue" />
|
</view>
|
</view>
|
<view class="flex">
|
<view class="flex-sub text-light bg-white padding-xs margin-xs radius">异常是否报修:</view>
|
<view class="flex-sub bg-white padding-xs text-right margin-xs radius">
|
<uni-data-select :localdata="item.type"
|
@change="handleType($event, index)" v-model="item.reportFlag"
|
:disabled="item.istrue" />
|
</view>
|
</view>
|
<view class="flex">
|
<view class="flex-sub text-light bg-white padding-xs margin-xs radius">异常描述:</view>
|
<view class="flex-sub bg-white padding-xs text-right margin-xs radius">
|
<uni-easyinput v-model="item.exceptionDescription"
|
:disabled="item.istrue" />
|
</view>
|
</view>
|
</uni-card>
|
</uni-collapse-item>
|
</uni-collapse>
|
|
<view class="padding flex flex-direction">
|
<view class="flex-sub bg-blue padding-sm margin-xl radius text-sm text-center text-white"
|
@click.stop="ProductionTask()" hover-class="is-hover">确定</view>
|
</view>
|
</view>
|
</teleport>
|
|
<!-- 样件校验 -->
|
<teleport v-if="TabCur==3">
|
<view class="container-inner">
|
<uni-forms ref="form" :modelValue="formData" validate-trigger="bind"
|
err-show-type="undertext">
|
<uni-group top="1">
|
<uni-forms-item :label-width="100" name="equipmentName" label="文件名称:">
|
<uni-easyinput v-model="formData.equipmentName" />
|
</uni-forms-item>
|
<uni-forms-item :label-width="100" name="equipmentDoc" label="设备文档:">
|
<uni-file-picker v-model="fileLists" :extension="['.pdf']" @fail="uploadFail"
|
:list-styles="listStyles" :delIcon="del" :max-count="5" file-mediatype="all"
|
@downloadFile="downloadFile" @select="onFileSelect" @delete="onFileDelete">
|
<button size="mini" type="primary">点击上传</button>
|
</uni-file-picker>
|
</uni-forms-item>
|
<uni-forms-item name="result" :label-width="100" label="检验结果:">
|
<radio-group @change="radioChange" v-model="formData.result">
|
<label style="margin-right: 20rpx;">
|
<radio :checked="formData.result=='qualified'" value="qualified" />合格
|
</label>
|
<label style="margin-right: 20rpx;">
|
<radio :checked="formData.result=='unqualified'" value="unqualified" />
|
不合格
|
</label>
|
</radio-group>
|
</uni-forms-item>
|
</uni-group>
|
</uni-forms>
|
|
<view class="file-list margin-sm">
|
<view class="file-item" v-for="(file, index) in selectedFiles" :key="index">
|
<view class="file-icon">
|
<image src="/static/icon_file.png"
|
style="height: 50rpx; width: 50rpx; margin-right: 20rpx;" mode='aspectFit'
|
class="zai-logo "></image>
|
</view>
|
<view class="file-name">{{ file.fileName }}</view>
|
<view class="file-actions">
|
<image v-show="showBtn" src="/static/icon_down.png" @click="downloadFile(file)"
|
style="height: 50rpx; width: 50rpx; margin-right: 20rpx;"></image>
|
</view>
|
</view>
|
</view>
|
|
<view class="padding flex flex-direction">
|
<view class="flex-sub bg-blue padding-sm margin-xl radius text-sm text-center text-white"
|
@click.stop="ProductionTask()" hover-class="is-hover">确定</view>
|
</view>
|
</view>
|
</teleport>
|
|
<!-- 上料记录 -->
|
<teleport v-if="TabCur==4">
|
<view class="list-item" v-for="(item, index) in feedingList" :key="index">
|
<view class="item-details">
|
<view class="detail-row">
|
<text class="label">批次号:</text>
|
<text class="value">{{ item.batchCode}}</text>
|
</view>
|
<view class="detail-row">
|
<text class="label">物料编码:</text>
|
<text class="value">{{ item.materialCode}}</text>
|
</view>
|
<view class="detail-row">
|
<text class="label">物料描述:</text>
|
<text class="value">{{ item.materialDesc}}</text>
|
</view>
|
<view class="detail-row">
|
<text class="label">上料时间:</text>
|
<text class="value">{{ item.feedingTime}}</text>
|
</view>
|
<view class="detail-row">
|
<text class="label">上料数量:</text>
|
<text class="value">{{ item.feedingQty}}</text>
|
</view>
|
<view class="detail-row">
|
<text class="label">上料人员:</text>
|
<text class="value">{{ item.feeder}}</text>
|
</view>
|
</view>
|
</view>
|
</teleport>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
const tabs = [{
|
title: '齐套检查',
|
value: 0
|
}, {
|
title: '工艺点检',
|
value: 1
|
},
|
{
|
title: '设备点检',
|
value: 2
|
},
|
{
|
title: '样件校验',
|
value: 3
|
},
|
{
|
title: '上料记录',
|
value: 4
|
}
|
];
|
import configService from "@/common/service/config.service.js";
|
export default {
|
data() {
|
return {
|
// 吸顶和滚动相关
|
navBarHeight: 0,
|
contentHeight: 0,
|
|
// 数据列表
|
mockBillList: [],
|
checkList: [],
|
partTakeAdviceDetailList: [],
|
feedingList: [],
|
|
// 图片预览
|
previewImageSrc: '',
|
ipAndPort: configService.staticURL,
|
fileLists: [],
|
|
// 上传图片样式
|
imageStyles: {
|
width: 90,
|
height: 90,
|
},
|
sourceType: ['album', 'camera'],
|
|
// 表单数据
|
formData: {
|
num: '',
|
avatar: [],
|
orderNum: '',
|
operator: '',
|
inspectionDate: '',
|
remark: '',
|
equipmentName: '',
|
result: 'qualified'
|
},
|
|
// 标签相关
|
tabs,
|
TabCur: 0,
|
scrollLeft: 0,
|
NavBarColor: this.NavBarColor,
|
|
// 分页配置
|
upOption: {
|
page: {
|
num: 0,
|
size: 10,
|
},
|
noMoreSize: 4,
|
empty: {
|
tip: '~ 暂无数据 ~',
|
},
|
loading: '',
|
text: '全部',
|
isShowNoMore: false,
|
textNoMore: '我是有底线的 >_<'
|
},
|
|
// 其他配置
|
styles: {
|
color: '#2979FF',
|
borderColor: '#2979FF'
|
},
|
url: {
|
upload: "/eam/sysFiles/batch_upload",
|
delete: "/pm/arrivalAdvice/delete",
|
sub: "/pm/arrivalAdvice/issue",
|
list: "/pm/arrivalAdvice/list",
|
sub1:'mes/mesKittingCompletenessCheck/queryCompletenessCheckByWorkOrderId'
|
},
|
placeholderStyle: "color:#2979FF;font-size:14px",
|
current: 0,
|
colorIndex: 0,
|
activeColor: '#5277A6',
|
msgList: [],
|
announcementList: [],
|
workOrderId:'',
|
// 文件相关
|
readonly: false,
|
del: true,
|
showBtn: true,
|
listStyles: { height: '100rpx' },
|
selectedFiles: [],
|
showPreview: false
|
}
|
},
|
|
computed: {
|
top() {
|
return this.CustomBar * 2 + 120
|
},
|
style() {
|
var StatusBar = this.StatusBar;
|
var CustomBar = this.CustomBar;
|
var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
|
return style
|
},
|
},
|
onLoad(options) {
|
this.calculateHeights();
|
if (options.id) {
|
this.workOrderId = options.id;
|
console.log('接收的工单id:', this.workOrderId);
|
|
// 可在此处调用接口，根据id获取工单详情
|
this.upCallback(this.workOrderId);
|
}
|
// 计算导航栏和内容区域高度
|
|
|
},
|
onLoad() {
|
|
},
|
|
methods: {
|
// 计算导航栏和内容区域高度
|
calculateHeights() {
|
uni.getSystemInfo({
|
success: (res) => {
|
// 导航栏高度 = 状态栏高度 + 自定义导航栏高度(44px)
|
this.navBarHeight = res.statusBarHeight + 44;
|
|
// 标签栏高度约50px，计算内容区域高度
|
const tabBarHeight = 50;
|
const safeAreaBottom = res.safeArea?.bottom || 0;
|
this.contentHeight = res.windowHeight - this.navBarHeight - tabBarHeight - (res.windowHeight - safeAreaBottom);
|
}
|
});
|
},
|
|
// 初始化模拟数据
|
initData() {
|
// 齐套检查模拟数据
|
this.mockBillList = [
|
{
|
workOrderCode: 'WO2023001',
|
materialNumber: 'MAT001',
|
materialName: '轴承',
|
requiredQuantity: '100',
|
actualQuantity: '100',
|
checkFlag: '1'
|
},
|
{
|
workOrderCode: 'WO2023001',
|
materialNumber: 'MAT002',
|
materialName: '齿轮',
|
requiredQuantity: '50',
|
actualQuantity: '45',
|
checkFlag: '0'
|
},
|
{
|
workOrderCode: 'WO2023002',
|
materialNumber: 'MAT003',
|
materialName: '螺栓',
|
requiredQuantity: '200',
|
actualQuantity: '200',
|
checkFlag: '1'
|
}
|
];
|
|
// 工艺点检模拟数据
|
this.checkList = [
|
{
|
paramCode: '001',
|
paramName: '转速',
|
validRange: '1000-1500r/min',
|
paramValue: '1200r/min',
|
judgment: '合格'
|
},
|
{
|
paramCode: '002',
|
paramName: '进给',
|
validRange: '0.1-0.3mm/r',
|
paramValue: '0.2mm/r',
|
judgment: '合格'
|
},
|
{
|
paramCode: '003',
|
paramName: '吃刀量',
|
validRange: '2-5mm',
|
paramValue: '3mm',
|
judgment: '合格'
|
},
|
{
|
paramCode: '004',
|
paramName: '倍率',
|
validRange: '80%-120%',
|
paramValue: '100%',
|
judgment: '合格'
|
}
|
];
|
|
// 上料记录模拟数据
|
this.feedingList = [
|
{
|
batchCode: 'B20230501',
|
materialCode: 'MAT001',
|
materialDesc: '轴承',
|
feedingTime: '2023-05-01 08:30',
|
feedingQty: '100',
|
feeder: '张三'
|
},
|
{
|
batchCode: 'B20230501',
|
materialCode: 'MAT002',
|
materialDesc: '齿轮',
|
feedingTime: '2023-05-01 09:15',
|
feedingQty: '50',
|
feeder: '李四'
|
}
|
];
|
|
// 设备点检保养项模拟数据
|
this.partTakeAdviceDetailList = [
|
{
|
itemName: '润滑油检查',
|
itemDemand: '油量在刻度线之间，无变质',
|
restle: [
|
{ text: "正常", value: '1' },
|
{ text: "异常", value: '2' }
|
],
|
type: [
|
{ text: "否", value: "0" },
|
{ text: "是", value: "1" }
|
],
|
istrue: false,
|
inspectionResult: '',
|
reportFlag: '0',
|
exceptionDescription: ''
|
},
|
{
|
itemName: '螺丝紧固',
|
itemDemand: '所有螺丝无松动',
|
restle: [
|
{ text: "正常", value: '1' },
|
{ text: "异常", value: '2' }
|
],
|
type: [
|
{ text: "否", value: "0" },
|
{ text: "是", value: "1" }
|
],
|
istrue: false,
|
inspectionResult: '',
|
reportFlag: '0',
|
exceptionDescription: ''
|
}
|
];
|
|
// 表单初始数据
|
this.formData = {
|
num: 'EQ2023001',
|
orderNum: 'WO2023001',
|
operator: '张三',
|
inspectionDate: '2023-05-01',
|
remark: '设备运行正常',
|
equipmentName: '设备校验报告',
|
result: 'qualified'
|
};
|
},
|
|
mescrollInit(mescroll) {
|
console.log('mescrollInit')
|
this.mescroll = mescroll;
|
},
|
|
upCallback() {
|
// 联网加载数据的逻辑
|
console.log("当前标签页:", this.TabCur)
|
let keyword = this.TabCur
|
if (keyword == 0) {
|
this.$http.get(this.url.sub1, {
|
params: {
|
workOrderId:this.workOrderId
|
|
}
|
}).then(res => {
|
//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
|
this.announcement1 = res.data.result.records
|
if (res.data.success) {
|
this.mockBillList=res.data.result
|
}
|
}).catch(() => {
|
//联网失败, 结束加载
|
this.mescroll.endErr();
|
uni.showToast({
|
title: '网络异常，请稍后再试',
|
icon: 'none'
|
});
|
})
|
|
|
|
} else if (keyword == 1) {
|
console.log("加载工艺点检数据");
|
} else if (keyword == 2) {
|
console.log("加载设备点检数据");
|
}
|
},
|
|
// 标签选择
|
tabSelect(e) {
|
const tabIndex = e.currentTarget.dataset.id;
|
this.TabCur = tabIndex;
|
|
// 动态计算滚动位置
|
const query = uni.createSelectorQuery().in(this);
|
query.selectAll('.cu-item').boundingClientRect(rects => {
|
let scrollLeft = 0;
|
for (let i = 0; i < tabIndex - 1; i++) {
|
scrollLeft += rects[i]?.width || 0;
|
}
|
this.scrollLeft = scrollLeft;
|
}).exec();
|
},
|
|
ListTouchStart(e) {
|
this.listTouchStart = e.touches[0].pageX
|
},
|
|
ListTouchMove(e) {
|
this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
|
},
|
|
ListTouchEnd(e) {
|
if (this.listTouchDirection == 'left') {
|
this.modalName = e.currentTarget.dataset.target
|
} else {
|
this.modalName = null
|
}
|
this.listTouchDirection = null
|
},
|
|
/**
|
* 保养项相关方法
|
*/
|
getList() {
|
// 实际项目中调用API获取保养项数据
|
console.log("获取保养项数据");
|
},
|
|
handleCode(e, index) {
|
console.log("点检结果变更:", e, "索引:", index);
|
},
|
|
handleType(e, index) {
|
console.log("报修状态变更:", e, "索引:", index);
|
},
|
|
// 图片错误处理
|
handleImageError(e) {
|
const icon_prefix = "/static/";
|
this.previewImageSrc = icon_prefix + "icn_erro.png"
|
},
|
|
// 关闭预览
|
closePreview() {
|
this.showPreview = false;
|
},
|
|
/**
|
* 作业指导书
|
*/
|
getStandardFile() {
|
// 实际项目中调用API获取作业指导书
|
console.log("获取作业指导书");
|
},
|
|
// 图片选择
|
select(e) {
|
const tempFilePaths = e.tempFilePaths;
|
uni.showLoading({
|
title: '上传中...'
|
});
|
|
// 模拟上传成功
|
setTimeout(() => {
|
uni.hideLoading();
|
uni.showToast({ title: '上传成功' });
|
}, 1000);
|
},
|
|
// 删除图片
|
deletea(e) {
|
console.log('删除图片', e);
|
},
|
|
// 文件选择
|
onFileSelect(e) {
|
const newFiles = e.tempFiles.map(file => ({
|
fileName: file.name,
|
filePath: file.path,
|
size: file.size
|
}));
|
this.selectedFiles = [...this.selectedFiles, ...newFiles];
|
},
|
|
// 删除文件
|
onFileDelete(e) {
|
this.selectedFiles.splice(e.index, 1);
|
},
|
|
// 下载文件
|
downloadFile(file) {
|
uni.showToast({ title: `正在下载 ${file.fileName}`, icon: 'none' });
|
// 实际项目中调用下载API
|
},
|
|
// 检验结果变更
|
radioChange(e) {
|
this.formData.result = e.detail.value;
|
},
|
|
// 上传失败
|
uploadFail(e) {
|
console.log('上传失败', e);
|
uni.showToast({ title: '上传失败', icon: 'none' });
|
},
|
|
// 进度回调
|
progress(e) {
|
console.log('上传进度', e);
|
},
|
|
// 成功回调
|
success(e) {
|
console.log('上传成功', e);
|
},
|
|
// 失败回调
|
fail(e) {
|
console.log('操作失败', e);
|
},
|
|
// 确定按钮
|
ProductionTask() {
|
uni.showToast({ title: '操作成功' });
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.container {
|
background-color: #f5f7fa;
|
min-height: 100vh;
|
}
|
|
/* 吸顶标签栏样式 */
|
.solid-bottom {
|
position: sticky;
|
z-index: 99;
|
border-bottom: 1px solid #eee;
|
}
|
|
.nav {
|
white-space: nowrap;
|
padding: 12rpx 0;
|
}
|
|
.cu-item {
|
display: inline-block;
|
padding: 10rpx 30rpx;
|
margin: 0 10rpx;
|
font-size: 28rpx;
|
color: #666;
|
position: relative;
|
}
|
|
.cu-item.text-blue.cur {
|
color: #007AFF;
|
font-weight: bold;
|
}
|
|
.cu-item.cur::after {
|
content: '';
|
position: absolute;
|
bottom: 0;
|
left: 50%;
|
transform: translateX(-50%);
|
width: 40rpx;
|
height: 4rpx;
|
background-color: #007AFF;
|
border-radius: 2rpx;
|
}
|
|
/* 列表容器样式 */
|
.production-container {
|
overflow-y: auto;
|
background-color: #f5f7fa;
|
padding: 10rpx;
|
}
|
|
/* 隐藏滚动条 */
|
.production-container::-webkit-scrollbar {
|
display: none;
|
}
|
|
.container-inner {
|
padding: 16rpx;
|
}
|
|
/* 列表项样式 */
|
.list-item {
|
background-color: #fff;
|
border-radius: 16rpx;
|
padding: 20rpx;
|
margin-bottom: 20rpx;
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
transition: background-color 0.2s;
|
}
|
|
.list-item:active {
|
background-color: #f5f7fa;
|
}
|
|
/* 详细信息样式 */
|
.item-details {
|
margin-bottom: 20rpx;
|
}
|
|
.detail-row {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 15rpx;
|
}
|
|
.detail-row:last-child {
|
margin-bottom: 0;
|
}
|
|
.label {
|
font-size: 28rpx;
|
color: #666;
|
flex: 1;
|
}
|
|
.value {
|
font-size: 28rpx;
|
color: #333;
|
flex: 1;
|
text-align: right;
|
}
|
|
/* 分割线样式 */
|
.divider {
|
display: flex;
|
align-items: center;
|
text-align: center;
|
color: gray;
|
margin: 20px 0;
|
}
|
|
.divider::before,
|
.divider::after {
|
content: '';
|
flex: 1;
|
border-bottom: 1px solid gray;
|
margin: 0 16px;
|
}
|
|
.divider text {
|
white-space: nowrap;
|
}
|
|
/* 文件列表样式 */
|
.file-list {
|
margin-top: 20rpx;
|
}
|
|
.file-item {
|
display: flex;
|
align-items: center;
|
padding: 16rpx;
|
background-color: #fff;
|
border-radius: 8rpx;
|
margin-bottom: 10rpx;
|
}
|
|
.file-name {
|
flex: 1;
|
font-size: 28rpx;
|
color: #333;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
|
/* 图片预览样式 */
|
.overlay {
|
position: fixed;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background: rgba(0, 0, 0, 0.8);
|
z-index: 999;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.modal {
|
position: relative;
|
width: 90%;
|
height: 80%;
|
}
|
|
.close-btn {
|
position: absolute;
|
top: -40rpx;
|
right: 0;
|
font-size: 48rpx;
|
color: #fff;
|
}
|
|
.preview-image {
|
width: 100%;
|
height: 100%;
|
border-radius: 16rpx;
|
}
|
|
/* 按钮样式 */
|
.is-hover {
|
opacity: 0.8;
|
}
|
</style>
|
