FE-lab-xcx/pages_hazardousWasteRecycling/views/weighingRegistration/infoPage.vue

<!-- 登记称重详情 -->
<template>
	<view class="weighingRegistrationInfoPage">
		<view class="title-p" style="margin-top:20rpx;">基础信息</view>
		<view class="title-weight-p">称重登记单编号：{{newData.listNewData1}}</view>
		<view class="text-p">实验室：{{newData.listNewData2}}</view>
		<view class="text-p">上门回收日期：{{newData.listNewData3}}</view>
		<view class="text-p">报备人：{{newData.listNewData4}}</view>
		<view class="text-p">报备时间：{{newData.listNewData5}}</view>
		<view class="text-p">称重登记人：{{newData.listNewData6}}</view>
		<view class="text-p">称重登记时间：{{newData.listNewData7}}</view>
		<view class="text-p">回收人员确认时间：{{newData.listNewData8}}</view>
		<view class="signature-box">
			<view>回收人员签名：</view>
			<img :src="newData.listNewData9">
		</view>
		<view class="title-p">称重登记内容</view>
		<view class="text-weight-box">
			<view>危险废物种类</view>
			<view>共{{dataList.length}}种</view>
		</view>
		<view class="text-box" v-for="(item,index) in dataList" :key="index">
			<view>{{item.name}}</view>
			<view>{{item.value}}{{item.unit}}</view>
		</view>
		<view class="img-box">
			<view>图片</view>
			<view>
				<img :src="img" v-for="(img,imgIndex) in imgList" :key="imgIndex">
			</view>
		</view>
		<view class="flex-null-p"></view>
	</view>
</template>

<script>
	import {
		demo1,
		demo2
	} from '@/pages_hazardousWasteRecycling/api/index.js'
	export default {
		data() {
			return {
				newData:{
					listNewData0:'1',
					listNewData1:'HW202510400001',
					listNewData2:'植物营养实验室(A201)',
					listNewData3:'2025-11-05（星期四）',
					listNewData4:'王二小（2020110010）',
					listNewData5:'2025-11-04 10:10:09',
					listNewData6:'2025-11-04 10:10:09',
					listNewData7:'2025-11-04 10:10:09',
					listNewData8:'2025-11-04 10:10:09',
					listNewData9:'https://img0.baidu.com/it/u=966104283,4150027431&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500',
				},
				dataList:[
					{name:'实验室废液',value:'1',unit:'桶'},
					{name:'实验室废固',value:'2',unit:'袋'},
					{name:'动物解剖废弃物',value:'3',unit:'袋'},
					{name:'废旧试剂',value:'4',unit:'支'},
					{name:'剧毒废弃化学品',value:'5',unit:'瓶'},
					{name:'电池',value:'6',unit:'枚'},
				],
				imgList:[
					'https://img0.baidu.com/it/u=966104283,4150027431&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500',
					'https://img0.baidu.com/it/u=966104283,4150027431&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500',
					'https://img0.baidu.com/it/u=966104283,4150027431&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500',
				],
			}
		},
		onLoad(option) {
			
		},
		onShow() {

		},
		mounted() {
			
		},
		methods: {
			
		},
	}
</script>

<style lang="stylus" scoped>
	.weighingRegistrationInfoPage{
		height: 100%;
		display flex;
		flex-direction column;
		background-color: #fff;
		position: relative;
		overflow-x: hidden;
		overflow-y: scroll;
		.title-p{
			line-height:80rpx;
			font-size:34rpx;
			padding:0 30rpx;
			color:#0183FA;
		}
		.title-weight-p{
			line-height:60rpx;
			font-size:32rpx;
			padding:0 50rpx;
			color:#333;
			font-weight:700;
		}
		.text-p{
			line-height:60rpx;
			font-size:32rpx;
			padding:0 50rpx;
			color:#333;
		}
		.signature-box{
			display: flex;
			line-height:60rpx;
			font-size:32rpx;
			padding:0 50rpx;
			view{
				flex:1;
			}
			img{
				width:400rpx;
				height:160rpx;
				margin-top:15rpx;
			}
		}
		.img-box{
			line-height:60rpx;
			font-size:32rpx;
			padding:0 50rpx;
			margin-bottom:80rpx;
			view:nth-child(1){
				line-height:60rpx;
				font-size:32rpx;
				color:#333;
				font-weight:700;
			}
			view:nth-child(2){
				img{
					display: inline-block;
					width:210rpx;
					height:210rpx;
				}
				img:nth-child(2){
					margin:0 10rpx;
				}
			}
		}
		.positon-p{
			position: absolute;
			top:20rpx;
			right:30rpx;
		}
		.text-weight-box{
			display: flex;
			line-height:60rpx;
			font-size:32rpx;
			padding:0 50rpx;
			color:#333;
			font-weight:700;
			view:nth-child(1){
				flex:1;
			}
			view:nth-child(2){
				
			}
		}
		.text-box{
			display: flex;
			line-height:60rpx;
			font-size:32rpx;
			padding:0 50rpx;
			color:#333;
			view:nth-child(1){
				flex:1;
			}
			view:nth-child(2){
				
			}
		}
		.remark-box{
			line-height:60rpx;
			font-size:32rpx;
			padding:0 30rpx;
			color:#333;
			view:nth-child(1){
				line-height:80rpx;
				font-size:32rpx;
				color:#333;
				font-weight:700;
			}
			view:nth-child(2){
				padding:0 20rpx;
				line-height:50rpx;
				font-size:32rpx;
				color:#333;
			}
		}
		.flex-null-p{
			width:2rpx;
			height:20rpx;
		}
		.bottom-button-p{
			width:700rpx;
			height:80rpx;
			line-height:80rpx;
			font-size:34rpx;
			color:#fff;
			background-color: #0183FA;
			margin:40rpx 25rpx;
			border-radius:10rpx;
			text-align: center;
		}
		.colorA{
			color:#0183FA;
		}
		.colorB{
			color:#00CD66;
		}
		.colorC{
			color:#FF6A6A;
		}
	}
</style>