jp-youdian-Inspection/pages/station/stationInfo.vue

<template>
	<view>
		
		<u-navbar title="场站主页" ></u-navbar>
			
			<view class="gradient-header">
				<view class="jpback">
			
				</view>
			</view>
			
		<view class="panel main1_panel">
			
			
			<view class="name">
				<view class="p1">
					荆鹏软件园
				
				</view>
				<view class="p2">
					地址：荆州市沙市区江津东路155号
				
				</view>
			</view>
			<view class="body">
				<view class="span">
					<image class="img" src="@/assets/img/station/item2.svg" mode=""></image>
					在用
					<span>10</span>
				</view>
				<view class="span">
					<image class="img" src="@/assets/img/station/item3.svg" mode=""></image>
					空闲
					<span>10</span>
				</view>
				<view class="span">
					<image class="img" src="@/assets/img/station/item1.svg" mode=""></image>
					故障
					<span>10</span>
				</view>
				<view class="span">
					<image class="img" src="@/assets/img/station/item4.svg" mode=""></image>
					离线
					<span>10</span>
				</view>
			</view>
		</view>
		<view class="panel main2_panel">
			<view class="p1">
				<view class="na-img">
					<image class="img" src="@/assets/img/station/index2.svg" mode=""></image>
				</view>
				<view class="na-text ">
					设备巡检
				</view>
			</view>
			<view class="p2">
				
			</view>
			<view class="p1">
				<view class="na-img">
					<image class="img" src="@/assets/img/station/index1.svg" mode=""></image>
				</view>
				<view class="na-text ">
					故障处理
				</view>
			</view>
		</view>
		<view class="panel main3_panel">
			<view class="title">
				<view class="icon">
					<image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
				</view>
				<view class="text">
					<view>故障提醒</view>
			
					<view class="check-all">查看全部<u-icon name="arrow-right"></u-icon></view>
			
				</view>
			
			</view>
			<view class="body">
				<view class="line">
					<view class="p1">
						<view class="name">
							停电

						</view>
						<view class="time">
							03-16 09:00

						</view>
					</view>
					<view class="p2">
						<view class="tag tag1">
							未处理
						</view>
						<u-icon name="arrow-right" color="#D4D4D4" ></u-icon>
						
					</view>
				</view>
				<view class="line">
					<view class="p1">
						<view class="name">
							停电
				
						</view>
						<view class="time">
							03-16 09:00
				
						</view>
					</view>
					<view class="p2">
						<view class="tag tag2">
							已处理
						</view>
						<u-icon name="arrow-right" color="#D4D4D4" ></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="panel main4_panel">
			<view class="title">
				<view class="icon">
					<image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
				</view>
				<view class="text">
					<view>巡检记录</view>
			
					<view class="check-all">查看全部<u-icon name="arrow-right"></u-icon></view>
			
				</view>
			
			</view>
			
			<view class="body">
				<view class="line">
					<view class="p1">
						巡检
						
					</view>
					<view class="p2">
						卓光芒、肖鹏明

						
					</view>
					<view class="p3">
						06.15 12:00
					</view>
					
					<u-icon name="arrow-right" color="#D4D4D4" ></u-icon>
					
				</view>
				<view class="line">
					<view class="p1">
						巡检
						
					</view>
					<view class="p2">
						卓光芒、肖鹏明
				
						
					</view>
					<view class="p3">
						06.15 12:00
					</view>
					
					<u-icon name="arrow-right" color="#D4D4D4" ></u-icon>
					
				</view>
			</view>
			
			
			
		</view>
		<view class="panel main5_panel">
			<view class="title">
				<view class="icon">
					<image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
				</view>
				<view class="text">
					<view>设备信息</view>
			
					<view class="check-all">查看全部<u-icon name="arrow-right"></u-icon></view>
			
				</view>
			
			</view>
			
			<view class="body">
				<view class="line lineT">
					<view class="p1">
						设备名称
					</view>
					<view class="p2">
						设备型号

					</view>
					<view class="p3">
						最后充电时间

					</view>
					<u-icon name="arrow-right" color="#FFF" ></u-icon>
					
				</view>
				<view class="line">
					<view class="p1">
						充电枪

						
					</view>
					<view class="p2">
						JPDJ01-0002 

			
						
					</view>
					<view class="p3">
						06.15 12:00
					</view>
					
					<u-icon name="arrow-right" color="#D4D4D4" ></u-icon>
					
				</view>
				<view class="line">
					<view class="p1">
						充电枪

						
					</view>
					<view class="p2">
						JPDJ01-0002 

					</view>
					<view class="p3">
						06.15 12:00
					</view>
					
					<u-icon name="arrow-right" color="#D4D4D4" ></u-icon>
					
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
	.gradient-header {
		height: 0px;
	}
	
	.jpback {
		height: 400rpx;
		background: linear-gradient(180deg, rgba(22, 119, 255, 1) 20%, rgba(121, 177, 255, 1) 100%);
	}
	
	.panel{
		border-radius: 8px;
		background-color: rgba(255, 255, 255, 1);
		box-shadow: 0px 2rpx 6px 0px rgba(0, 59, 142, 0.05);
		margin: 24rpx 32rpx;
		padding: 40rpx;
		
		.title {
			display: flex;
			align-items: center;
			margin-bottom: 32rpx;
			font-weight: bold;
		
			.img {
				width: 36rpx;
				height: 36rpx;
				vertical-align: middle;
				border-radius: 999px;
		
			}
		
			.change {
				display: flex;
				align-items: center;
		
				.change-img {
					width: 32rpx;
					height: 32rpx;
					vertical-align: middle;
				}
		
				text {
		
					margin-left: 8rpx;
				}
			}
		
		
			.text {
				color: rgba(16, 16, 16, 1);
				font-size: 36rpx;
				margin-left: 16rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
		
				.tag {
					border-radius: 4px;
					border: 2rpx solid rgba(187, 187, 187, 1);
					color: rgba(51, 51, 51, 1);
		
					font-size: 24rpx;
					padding: 2rpx 8rpx;
					margin-left: 8rpx;
				}
		
			}
		
			.change {
				margin-left: 16rpx;
				font-size: 24rpx;
				color: #838383;
		
			}
		
			.check-all {
				margin-left: auto;
				color: rgba(131, 131, 131, 1);
				font-size: 24rpx;
			}
		}
	}
	
	.main1_panel{
		padding: 40rpx 0;
		.name{
			padding:   0 40rpx 24rpx 40rpx;
			border-bottom: 2rpx solid #F5F5F5 ;
			.p1{
				color: rgba(51,51,51,1);
				font-size: 18px;
				font-weight: bold;
			}
			.p2{
				color: rgba(51,51,51,1);
				font-size: 14px;
			}
		}
		.body{
			padding:   26rpx 40rpx 0 40rpx;
			    display: flex;
			    justify-content: space-between;
			.img{
				width: 14px;
				height: 14px;
				margin-right: 8rpx;

			}
			.span{
				    display: flex;
				    align-items: center;
					span{
						margin-left: 8rpx;
					}
			}
		}
	}
	.main2_panel{
		margin-top: 32rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 24rpx 0 20rpx 0;
		
		.p2 {
			border-left: 2rpx solid rgba(187, 187, 187, 0.43);
			height: 70rpx;
		}
		
		.p1 {
			width: 48%;
			text-align: center;
		
			.na-img {
				display: flex;
				justify-content: center;
		
				.img {
					width: 56rpx;
					height: 56rpx;
				}
			}
		}
	}
	.main3_panel{
		.body{
			.line{
				padding: 12rpx 0;
				    display: flex;
				    justify-content: space-between;
				.p1{
					.name{
						    font-weight: 600;
						color: rgba(51,51,51,1);
						font-size: 14px;
					}
					.time{
						color: rgba(119,119,119,1);
						font-size: 12px;
					}
				}
				.p2{
					    display: flex;
					    align-items: center;
					
				}
			}
			
			.line:not(:last-child) {
			  border-bottom:2rpx solid rgba(232,232,232,1);
			}
			
			.tag{
				background-color: rgba(255,255,255,1);
				color: rgba(255,61,0,1);
				font-size: 12px;
				height: 20px;
				padding: 0 4rpx;
				border-radius: 4px;
				border: 2rpx solid rgba(255,61,0,1);
			}
			.tag1{
				color: rgba(255,61,0,1);
				
				border: 2rpx solid rgba(255,61,0,1);
			}
			.tag2{
				color: #00B962;
				
				border: 2rpx solid  #00B962;
			}
		}
	}
	.main4_panel,.main5_panel{
		.body{
			.line{
				padding: 12rpx 0;
				    display: flex;
				    justify-content: space-between;
				}
				.p1{
					    font-weight: 600;
					color: rgba(51,51,51,1);
					font-size: 14px;
				}
				.p2{
					width: 300rpx;
					overflow: hidden;
					   text-overflow: ellipsis;
					   white-space: nowrap; 
				}
				.line:not(:last-child) {
				  border-bottom:2rpx solid rgba(232,232,232,1);
				}
		}
	}
	.main5_panel{
		.p1{
			width: 140rpx;
			   
		}
		.p2{
			width: 270rpx !important;
			
		}
		.lineT{
			font-weight: bold;
		}
	}
</style>