FE-lab-xcx/pages_equipmentUtilization/views/equipmentInformation/listPage.vue

<template>
	<view class="equipmentInformationListPage">
		<view class="top-bix-box">
			<view class="top-box">
				<view class="left-time-box">
					<uni-datetime-picker v-model="range" type="daterange"  :clearIcon="false"/>
				</view>
				<view class="right-button-box">查询</view>
			</view>
			<view class="top-box" style="margin-top:10rpx;">
				<view class="left-time-box">
					<input class="input-text" type="text" v-model="text" placeholder="设备名称">
				</view>
				<view class="right-button-box-2">重置</view>
			</view>
		</view>
		<view class="list-max-big-box">
			<view class="list-for-max-big-box" v-for="(item,index) in dataList" :key="index">
				<view class="top-title-box">
					<view>{{item.data1}}</view>
					<view>{{item.data2}}</view>
				</view>
				<view class="text-p">{{item.data3}} {{item.data4}} {{item.data5}}</view>
				<view class="text-p">使用时间：{{item.data6}} 至 {{item.data7}}</view>
				<view class="bottom-title-box">
					<view>设备编号：{{item.data8}}</view>
					<view>使用人：{{item.data9}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		demo1,
	} from '@/pages_equipmentUtilization/api/index.js'
	export default {
		data() {
			return {
				range:[],
				text:'',
				dataList:[
					{
						data1:'设备名称',
						data2:'使用类型',
						data3:'XX楼',
						data4:'XX层',
						data5:'XX实验室',
						data6:'2026-01-19 12:22',
						data7:'2026-01-19 12:22',
						data8:'01231231',
						data9:'张三',
					},
					{
						data1:'设备名称',
						data2:'使用类型',
						data3:'XX楼',
						data4:'XX层',
						data5:'XX实验室',
						data6:'2026-01-19 12:22',
						data7:'2026-01-19 12:22',
						data8:'01231231',
						data9:'张三',
					},
					{
						data1:'设备名称',
						data2:'使用类型',
						data3:'XX楼',
						data4:'XX层',
						data5:'XX实验室',
						data6:'2026-01-19 12:22',
						data7:'2026-01-19 12:22',
						data8:'01231231',
						data9:'张三',
					},
					{
						data1:'设备名称',
						data2:'使用类型',
						data3:'XX楼',
						data4:'XX层',
						data5:'XX实验室',
						data6:'2026-01-19 12:22',
						data7:'2026-01-19 12:22',
						data8:'01231231',
						data9:'张三',
					},
					{
						data1:'设备名称',
						data2:'使用类型',
						data3:'XX楼',
						data4:'XX层',
						data5:'XX实验室',
						data6:'2026-01-19 12:22',
						data7:'2026-01-19 12:22',
						data8:'01231231',
						data9:'张三',
					},
					{
						data1:'设备名称',
						data2:'使用类型',
						data3:'XX楼',
						data4:'XX层',
						data5:'XX实验室',
						data6:'2026-01-19 12:22',
						data7:'2026-01-19 12:22',
						data8:'01231231',
						data9:'张三',
					},
				]
			}
		},
		onLoad(option) {
			
		},
		onShow() {
			
		},
		mounted() {
		},
		methods: {
			maskClick(){
				
			},
		},
	}
</script>

<style lang="stylus" scoped>
	.equipmentInformationListPage {
		height: 100%;
		flex:1;
		display:flex;
		flex-direction:column;
		.top-bix-box{
			height:160rpx;
			padding:20rpx 20rpx;
			background-color: #fff;
			.top-box{
				display: flex;
				.left-time-box{
					width:600rpx;
					.input-text{
						padding-left:30rpx;
						height:70rpx;
						line-height:70rpx;
						border-radius:6rpx;
						color:#333;
						border:1px solid #e5e5e5;
					}
				}
				.right-button-box{
					margin-left:20rpx;
					width:140rpx;
					height:70rpx;
					line-height:70rpx;
					text-align: center;
					border-radius:6rpx;
					color:#fff;
					background-color: #0183FA;
					border:1px solid #0183FA;
				}
				.right-button-box-2{
					margin-left:20rpx;
					width:140rpx;
					height:70rpx;
					line-height:70rpx;
					text-align: center;
					border-radius:6rpx;
					color:#999;
					border:1px solid #e5e5e5;
				}
			}
		}
		.list-max-big-box{
			flex:1;
			display:flex;
			flex-direction:column;
			overflow: scroll;
			padding-bottom:80rpx;
			.list-for-max-big-box{
				margin:20rpx 0 0;
				padding:20rpx;
				background-color: #fff;
				.top-title-box{
					display:flex;
					line-height:60rpx;
					view{
						flex:1;
					}
					view:nth-child(1){
						color:#333;
					}
					view:nth-child(2){
						text-align: right;
						color:#888;
					}
				}
				.text-p{
					color:#888;
					line-height:60rpx;
				}
				.bottom-title-box{
					display:flex;
					line-height:60rpx;
					view{
						flex:1;
					}
					view:nth-child(1){
						color:#888;
					}
					view:nth-child(2){
						text-align: right;
						color:#888;
					}
				}
			}
		}
	}
</style>