[AI Generated]: refactor(Views): 重构连接设备页设备列表为统一循环并补全卡片样式

2026-05-11 16:25:35 +08:00
parent 8b91edcef7
commit 640966ae61
5 changed files with 310 additions and 74 deletions
@@ -58,6 +58,7 @@
 			color: #808080;
 			font-size: 30rpx;
 			line-height: 30rpx;
+			margin-right: 8rpx;
 		}

 		.help-link {
@@ -68,11 +69,160 @@
 	}

 	.search-device {
+		width: 100%;

-	}
+		.search-device-header {
+			width: 100%;
+			height: 32rpx;
+			display: flex;
+			flex-wrap: nowrap;
+			justify-content: space-between;
+			margin-bottom: 38rpx;

-	.empty {
+			.search-device-title {
+				color: #252535;
+				height: 32rpx;
+				font-size: 32rpx;
+				font-weight: bold;
+				line-height: 32rpx;
+			}

+			.search-device-count {
+				height: 32rpx;
+				display: flex;
+				flex-wrap: nowrap;
+
+				.count-text {
+					color: #808080;
+					height: 32rpx;
+					font-size: 28rpx;
+					line-height: 32rpx;
+				}
+
+				.count-num {
+					color: #1385FA;
+					height: 32rpx;
+					font-size: 28rpx;
+					font-weight: bold;
+					line-height: 32rpx;
+					padding: 0 6rpx;
+				}
+			}
+		}
+
+		.empty {
+			width: 100%;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			margin-top: 160rpx;
+
+			.empty-image {
+				width: 193rpx;
+				height: 138rpx;
+				margin-bottom: 40rpx;
+				background-color: #F5F5F5;
+			}
+
+			.empty-text {
+				color: #808080;
+				width: 100%;
+				height: 30rpx;
+				font-size: 30rpx;
+				line-height: 30rpx;
+				text-align: center;
+			}
+		}
+
+		.device-list {
+			width: 100%;
+			display: flex;
+			flex-direction: column;
+
+			.device-card {
+				width: 100%;
+				height: 150rpx;
+				display: flex;
+				align-items: center;
+				padding: 0 30rpx;
+				background-color: #FFFFFF;
+				border: 2rpx solid #E6E6EA;
+				border-radius: 16rpx;
+				box-sizing: border-box;
+				margin-bottom: 24rpx;
+
+				.card-icon {
+					width: 90rpx;
+					height: 90rpx;
+					overflow: hidden;
+					border-radius: 24rpx;
+					margin-right: 24rpx;
+					background-color: red;
+				}
+
+				.card-info {
+					flex: 1;
+					display: flex;
+					flex-direction: column;
+					justify-content: center;
+
+					.card-name {
+						color: #252535;
+						font-size: 32rpx;
+						font-weight: bold;
+						height: 32rpx;
+						line-height: 32rpx;
+					}
+
+					.card-status {
+						margin-top: 18rpx;
+						display: flex;
+						align-items: center;
+
+						.card-dot {
+							width: 12rpx;
+							height: 12rpx;
+							border-radius: 50%;
+							background-color: #2AC79F;
+							margin-right: 15rpx;
+						}
+
+						.card-status-text {
+							color: #2AC79F;
+							height: 28rpx;
+							font-size: 28rpx;
+							font-weight: 500;
+							line-height: 28rpx;
+						}
+					}
+				}
+
+				.card-btn-primary {
+					color: #FFFFFF;
+					font-size: 24rpx;
+					font-weight: 500;
+					width: 88rpx;
+					height: 48rpx;
+					line-height: 48rpx;
+					text-align: center;
+					border-radius: 8rpx;
+					background-color: #2AC79F;
+				}
+
+				.card-btn-danger {
+					color: #F24439;
+					font-size: 24rpx;
+					font-weight: 500;
+					width: 120rpx;
+					height: 48rpx;
+					line-height: 44rpx;
+					text-align: center;
+					border: 2rpx solid #F24439;
+					border-radius: 8rpx;
+					box-sizing: border-box;
+				}
+			}
+		}
 	}
 }