JP-Equipment-Jingli/pages/index/equipmentRetrieval/equipmentInfo.vue

<template>
	<view>
		<u-navbar title="接地线无杆(新）"></u-navbar>
		<!-- 图片 -->
		<view class="picture">
			<img :src="info.img" alt="">
			<view class="amount">
				<text>1</text>/
				<text>5</text>
			</view>
		</view>
		<!-- 信息 -->
		<view class="main">
			<view class="title">
				接地线无杆(新）
			</view>
			<!-- 标签 -->
			<view class="tabs ">
				<u-tabs bar-width="120" inactive-color="#999999" active-color="#000000"   :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
			</view>
			<view class="content">
				<!-- 设备信息 -->
				<view class="infos">
					<view class="name">
					<view class="icon"><img src="@/assets/img/riLine-robot-line@1x.png" alt=""></view>
					<view class="text">
						设备信息
					</view>
					</view>
					
					<view class="details">
						<view class="item">
							<view class="item-title">
								规格
							</view>
							<view class="item-value">
								220kV
							</view>
						</view>
						
						<view class="item" >
							<view class="item-title">
								购置时间
							</view>
							<view class="item-value">
								2022.5
							</view>
						</view>
						<view class="item" >
							<view class="item-title">
								数量
							</view>
							<view class="item-value">
								48
							</view>
						</view>
						<view class="item" >
							<view class="item-title">
								设备状况
							</view>
							<view class="item-value">
								合格
							</view>
						</view>
						<view class="item" >
							<view class="item-title">
								单位
							</view>
							<view class="item-value">
								根
							</view>
						</view>
						<view class="item" >
							<view class="item-title">
								试验时间
							</view>
							<view class="item-value">
								2022.05.19
							</view>
						</view>
						<view class="item" >
							<view class="item-title">
								制造厂家
							</view>
							<view class="item-value">
								鸿瑞电力工程有限公司
							</view>
						</view>
						<view class="item" >
							<view class="item-title">
								试验周期
							</view>
							<view class="item-value">
								1年
							</view>
						</view>
						<view class="item" >
							<view class="item-title">
								单价
							</view>
							<view class="item-value">
								无
							</view>
						</view>
					</view>
					
				</view>
			</view>
			<!-- 存放地点 -->
			<view class="content">
				<view class="infos">
					<view class="name">
					<view class="icon"><img src="@/assets/img/riLine-robot-line@1x.png" alt=""></view>
					<view class="text">
						存放地点
					</view>
					</view>
					
					<view class="details">
						<view class="location">
							荆力总包仓库A区C货架2-12
						</view>
					</view>
					
				</view>
			</view>
			<!-- 巡检记录 -->
			<view class="content">
				<view class="infos">
					<view class="name">
					<view class="icon"><img src="@/assets/img/riLine-device-recover-line@1x.png" alt=""></view>
					<view class="text">
						巡检记录
					</view>
					
					<view class="all">
						全部记录<u-icon name="arrow-right"></u-icon>
					</view>
					</view>
					<!-- 提示 -->
					<view class="hint">
						<u-alert-tips  icon="bell-fill" show-icon="true" type="warning" :title="title" :description="description"></u-alert-tips>
					</view>
					
					<view class="inspection-contents">
						<view class="inspection-title">
							<view class="text">
								巡检内容名称
							</view>
							<view class="state">
								合格
							</view>
						</view>
						<view class="inspection-infos">
							<view class="inspection-personnel">
								<view class="inspection-name">
									巡检人：
								</view>
								<view class="value">
									孙斌
								</view>
							</view>
							<view class="inspection-date">
								2023/03/15 09:45:21
							</view>
						</view>
						
					</view>
				</view>
			</view>
			<!-- 出入库记录 -->
			<view class="content">
				<view class="infos">
					<view class="name">
					<view class="icon"><img src="@/assets/img/riLine-todo-line@1x.png" alt=""></view>
					<view class="text">
						出入库记录
					</view>
					<view class="all">
						全部记录<u-icon name="arrow-right"></u-icon>
					</view>
					</view>
					<view class="records">
						<view class="records-title">
							洪湖华电光伏线路
						</view>
						<view class="records-infos">
							<view class="item">
								<view class="item-title">
									借用数量：
								</view>
								<view class="item-value">
									4
								</view>
							</view>
							<view class="item">
								<view class="item-title">
									借出时间：
								</view>
								<view class="item-value">
									2023.2.13
								</view>
							</view>
							<view class="item">
								<view class="item-title">
									借用人：
								</view>
								<view class="item-value">
									丁文
								</view>
							</view>
							<view class="item">
								<view class="item-title">
									归还时间：
								</view>
								<view class="item-value highlight">
									未归还
								</view>
							</view>
						</view>
					</view>
					
					<view class="records">
						<view class="records-title">
							仙桃华润恒升线路
						</view>
						<view class="records-infos">
							<view class="item">
								<view class="item-title">
									借用数量：
								</view>
								<view class="item-value">
									4
								</view>
							</view>
							<view class="item">
								<view class="item-title">
									借出时间：
								</view>
								<view class="item-value">
									2023.2.13
								</view>
							</view>
							<view class="item">
								<view class="item-title">
									借用人：
								</view>
								<view class="item-value">
									丁文
								</view>
							</view>
							<view class="item">
								<view class="item-title">
									归还时间：
								</view>
								<view class="item-value">
									2023.4.1
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info:{},
				description: '下次巡检时间：2023/03/30',
				list: [{
					name: '设备信息'
				}, {
					name: '设备位置'
				}, {
					name: '巡检记录',
				},{
					name:'出入库记录'
				}],
				current: 0
			}
		},
		methods: {
			change(index) {
				this.current = index;
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		padding-bottom:100px;
	}
	/deep/.u-line-1{
		overflow: inherit;	
	}
	// 图片
	.picture{
		width: 100%;
		height: 400rpx;
		overflow: hidden;
		position: relative;
		img{
			width: 100%;
			height: 100%;
		}
		.amount{
			width: 108rpx;
			height: 48rpx;
			line-height: 48rpx;
			border-radius: 4px;
			background-color: rgba(0, 0, 0, 1);
			color: rgba(255, 255, 255, 1);
			font-size: 28rpx;
			text-align: center;
			font-family: Arial;
			position: absolute;
			bottom: 48rpx;
			right: 32rpx;
		}
	}
  // 信息
  .main{
	  border-radius: 16px 16px 0px 0px;
	  background-color: #ffffff;
	  padding-top: 24rpx;
	  margin-top:-24rpx;
	  z-index: 999;
	  position: relative;
	  .title{
		  color: rgba(51, 51, 51, 1);
		  font-size: 36rpx;
		  margin-bottom: 24rpx;
		  padding:0 32rpx;
	  }
	  // 标签
	  .tabs{
		  position: sticky;
		  top: 0;
		  z-index: 9999;
		  /deep/.u-tab-bar{
			  background-color: #2A8EFB !important;
			  bottom:-8rpx;
		  }
	  }
	
	  
	  .content{
		  
		  border-top: 1px solid #B7BDBF;
		  .infos{
			  padding: 32rpx;
		  }
		  .name{
			  font-size: 32rpx;
			  margin-bottom: 16rpx;
			  display: flex;
			  align-items: center;
			  color: rgba(51, 51, 51, 1);
			  .icon{
				  width: 32rpx;
				  height: 32rpx;
				  margin-right: 8rpx;
				  img{
					  width: 100%;
					  height: 100%;
				  }
			  }
			 .text{
				 line-height: 50rpx;
			 }
		  }
		  .all{
			  margin-left: auto;
			  color: rgba(119, 119, 119, 1);
			  font-size: 24rpx;
		  }
		  // 提示
		  .hint{
			  /deep/.u-alert-desc{
				  color: rgba(255, 121, 0, 1);
				  font-size: 28rpx
			  }
		  }
		  .details{
			  border-radius: 8px;
			  background-color: rgba(245, 246, 249, 1);
			  padding: 24rpx 24rpx 8rpx 24rpx;
			  display: flex;
			  justify-content: space-between;
			  flex-wrap: wrap;
			  .item{
				  display: flex;
				  margin-bottom: 16rpx;
				  font-size: 24rpx;
				  width: 45%;
				  .item-title{
					  width: 96rpx;
					  color: rgba(119, 119, 119, 1);	  
				  }
				  @media screen and (max-width: 375px) {
				     .item-title{
				     	width: 120rpx;
				     					  
				     }
				  }
				  @media screen and (max-width: 300px) {
				     .item-title{
				     	width: 130rpx;
				     					  
				     }
				  }
				  .item-value{
					  flex: 1;
					  color: rgba(51, 51, 51, 1);
					  margin-left: 16rpx;
					  white-space: nowrap;
					  overflow: hidden;
					  text-overflow: ellipsis;
				  }
			  }
			  
			  .location{
				  color: rgba(51, 51, 51, 1);
				  padding-bottom: 8rpx;
			  }
		  }
	  }
	  
	  .inspection-contents{
		  border-radius: 8px;
		  background-color: rgba(245, 246, 249, 1);
		  padding: 24rpx ;
		  margin-top: 16rpx;
		  .inspection-title{
			  display: flex;
			  justify-content: space-between;
			  align-items: center;
			  font-weight: bold;
			  color: rgba(51, 51, 51, 1);
			  .state{
				  width: 80rpx;
				  height: 48rpx;
				  line-height: 48rpx;
				  border-radius: 4px;
				  background-color: rgba(255, 255, 255, 1);
				  color: rgba(0, 185, 98, 1);
				  font-size: 24rpx;
				  text-align: center;
				  font-family: Microsoft Yahei;
				  border: 1px solid rgba(141, 217, 181, 1);
			  }
			  
		  }
		  .inspection-infos{
			  display: flex;
			  justify-content: space-between;
			  align-items: center;
			  font-size: 24rpx;
			  margin-top: 8rpx;
			  line-height: 36rpx;
			  .inspection-personnel{
			  			  display: flex;
						  align-items: center;
			  			  color: rgba(119, 119, 119, 1);
			  			  
			  };
			  .date{
				  color: rgba(119, 119, 119, 1);
				  
			  }
		  }
		  
	  }
	  // 出入库记录
	  .records{
		  border-radius: 8px;
		  background-color: rgba(245, 246, 249, 1);
		  padding: 24rpx 24rpx 8rpx 24rpx ;
		  margin-top: 16rpx;
		  .records-title{
			  font-weight: bold;
			  color: #333333;
		  }
		  .records-infos{
			  display: flex;
			  flex-wrap: wrap;
			  margin-top: 16rpx;
			  .item{
				  font-size: 24rpx;
				  width: 300rpx;
				  display: flex;
				  margin-bottom: 16rpx;
				  color: rgba(119, 119, 119, 1);
			  }
		  }
	  }
  }
  .highlight{
	  color:#E60012
  }
</style>