首页样式修改

snowy-admin-web/src/components/HomeCard/SysCountCard/index.vue

@@ -2,57 +2,53 @@
 	<div class="home_count">
 		<div class="ant-card-body">
 			<div class="card-left">
-				<div class="left-title">监测器总数</div>
-				<div class="left-count">{{ data.deviceCount || 0 }}</div>
+				<img src="/src/assets/images/home/02.png" class="left-img" />
+				<div class="row">
+					<div class="label">超低温冰箱</div>
+					<div class="value">{{ data.deviceCount || 0 }}</div>
+				</div>
 			</div>
 			<div class="card-right">
-				<img src="/src/assets/images/home/01.png" class="right-img" />
-			</div>
-		</div>
-		<div class="ant-card-body">
-			<div class="card-left">
-				<div class="left-title">正常</div>
-				<div class="left-count">{{ data.onlineDeviceCount || 0 }}</div>
-			</div>
-			<div class="card-right">
-				<img src="/src/assets/images/home/02.png" class="right-img" />
-			</div>
-		</div>
+				<div class="row row1">
+					<div class="row-img">
+						<img src="/src/assets/images/home/normal.png" />
+					</div>
 
-		<div class="ant-card-body">
-			<div class="card-left">
-				<div class="left-title">离线</div>
-				<div class="left-count">{{ data.offlineDeviceCount || 0 }}</div>
-			</div>
-			<div class="card-right">
-				<img src="/src/assets/images/home/03.png" class="right-img" />
-			</div>
-		</div>
-		<div class="ant-card-body">
-			<div class="card-left">
-				<div class="left-title">总路数</div>
-				<div class="left-count">{{ data.sensorCount || 0 }}</div>
-			</div>
-			<div class="card-right">
-				<img src="/src/assets/images/home/04.png" class="right-img" />
-			</div>
-		</div>
-		<div class="ant-card-body">
-			<div class="card-left">
-				<div class="left-title">已使用路数</div>
-				<div class="left-count">{{ data.usedSensorCount || 0 }}</div>
-			</div>
-			<div class="card-right">
-				<img src="/src/assets/images/home/05.png" class="right-img" />
+					<div class="label">正常</div>
+					<div class="value">{{ data.onlineDeviceCount || 0 }}</div>
+				</div>
+				<div class="row row2">
+					<div class="row-img">
+						<img src="/src/assets/images/home/offline.png" />
+					</div>
+					<div class="label">离线</div>
+					<div class="value">{{ data.offlineDeviceCount || 0 }}</div>
+				</div>
 			</div>
 		</div>
+
 		<div class="ant-card-body">
 			<div class="card-left">
-				<div class="left-title">未使用路数</div>
-				<div class="left-count">{{ data.unusedSensorCount || 0 }}</div>
+				<img src="/src/assets/images/home/03.png" class="left-img" />
+				<div class="row">
+					<div class="label">监测点位</div>
+					<div class="value">{{ data.sensorCount || 0 }}</div>
+				</div>
 			</div>
 			<div class="card-right">
-				<img src="/src/assets/images/home/06.png" class="right-img" />
+				<div class="row row1">
+					<div class="row-img">
+						<img src="/src/assets/images/home/use.png" />
+					</div>
+
+					<div class="label">已使用</div>
+					<div class="value">{{ data.usedSensorCount || 0 }}</div>
+				</div>
+				<div class="row row2">
+					<img src="/src/assets/images/home/not1.png" class="row-img2" />
+					<div class="label">未使用</div>
+					<div class="value">{{ data.unusedSensorCount || 0 }}</div>
+				</div>
 			</div>
 		</div>
 	</div>
@@ -81,45 +77,101 @@
 		justify-content: space-between;
 
 		.ant-card-body {
-			flex: 0 0 calc(16.6% - 10px);
-			width: 100%;
+			width: calc(50% - 10px);
 			height: 150px;
 			margin-bottom: 10px;
 			box-sizing: border-box;
 			background-color: #ffffff;
 			border-radius: 10px;
 			display: flex;
-			justify-content: center;
-
+			box-shadow: 5px 5px 10px 5px rgba(135, 134, 134, 0.4);
 			.card-left {
-				width: 50%;
-				padding: 30px 10px 20px 30px;
-				.left-title {
-					font-size: 18px;
+				width: 35%;
+				height: 100%;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				padding-left: 20px;
+
+				.left-img {
+					width: 100px;
+					height: 100px;
 				}
-				.left-count {
-					padding-top: 10px;
-					font-size: 45px;
-					white-space: nowrap;
-					overflow: hidden;
-					text-overflow: ellipsis;
+
+				.row {
+					width: calc(100% - 130px);
+					padding: 0 10px;
+					text-align: center;
+					.label {
+						font-size: 18px;
+						white-space: nowrap;
+						overflow: hidden;
+						text-overflow: ellipsis;
+					}
+					.value {
+						padding-top: 10px;
+						font-size: 45px;
+						white-space: nowrap;
+						overflow: hidden;
+						text-overflow: ellipsis;
+					}
 				}
 			}
 
 			.card-right {
-				width: 50%;
+				width: 65%;
+				height: 100%;
 				display: flex;
-				justify-content: center;
+				justify-content: space-around;
 				align-items: center;
-				text-align: center;
 
-				.right-img {
-					width: 60%;
+				.row {
+					width: calc(50% - 30px);
+					height: 60%;
+					padding: 0 20px;
+					display: flex;
+					justify-content: space-evenly;
+					align-items: center;
+					border-radius: 15px;
+					div {
+						color: #ffffff;
+						white-space: nowrap;
+						overflow: hidden;
+						text-overflow: ellipsis;
+					}
+					.row-img {
+						width: 50px;
+						height: 50px;
+						line-height: 40px;
+						border-radius: 50%;
+						text-align: center;
+						border: 3px solid #ffffff;
+						img {
+							width: 35px;
+							height: 35px;
+						}
+					}
+					.row-img2 {
+						width: 50px;
+						height: 50px;
+					}
+
+					.label {
+						margin: 0 10px;
+						font-size: 16px;
+					}
+					.value {
+						width: calc(50% - 20px);
+						font-size: 22px;
+					}
+				}
+				.row1 {
+					background-color: #1da7ff;
+				}
+				.row2 {
+					background-color: #a4a4a4;
 				}
 			}
 		}
-		.ant-card-body:nth-child(5n) {
-			margin-right: 0;
-		}
 	}
 </style>