样式优化

assets/css/page.scss

@@ -1707,9 +1707,18 @@
 	}
 }
 
-// ===== 详情页区块与卡片通用样式（do_anti_rust / 焊口详情页等）=====
+// ===== 区块标题 =====
 .section {
 	margin: 0 24rpx 20rpx;
+	animation: fadeUp 0.5s ease-out both;
+
+	&:nth-child(2) {
+		animation-delay: 0.05s;
+	}
+
+	&:nth-child(3) {
+		animation-delay: 0.15s;
+	}
 
 	&__header {
 		display: flex;
@@ -1722,79 +1731,170 @@
 	&__bar {
 		width: 6rpx;
 		height: 26rpx;
-		background: #2979ff;
+		background: linear-gradient(180deg, $app-primary, #6ba3ff);
 		border-radius: 3rpx;
 		flex-shrink: 0;
+		animation: breathe 2.5s ease-in-out infinite;
 	}
 
 	&__title {
 		font-size: 28rpx;
 		font-weight: 600;
-		color: #0f1724;
+		color: $app-text;
 		letter-spacing: 0.5rpx;
 	}
+
+	.img-box {
+		padding: 20rpx;
+		border-radius: 16rpx;
+		background-color: #ffffff;
+	}
 }
 
+// ===== 信息卡片 =====
+$card-bg: #ffffff;
+$shadow-md: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
+
 .card {
-	background: #fff;
-	border-radius: 16rpx;
+	background: $card-bg;
+	border-radius: $app-radius;
 	overflow: hidden;
-	box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.06);
+	box-shadow: $shadow-md;
 
 	&__row {
 		display: flex;
 		align-items: center;
 		padding: 22rpx 28rpx;
-		border-bottom: 1rpx solid #e8ecf1;
+		border-bottom: 1rpx solid $app-border;
+		transition: background 0.25s ease;
 
 		&:last-child {
 			border-bottom: none;
 		}
 
+		&:active {
+			background: #f5f4f1;
+		}
+
 		&--stack {
 			flex-direction: column;
 			align-items: flex-start;
+
 			.card__label {
-				margin-bottom: 8rpx;
+				width: auto;
+				padding-left: 16rpx;
+				margin-bottom: 12rpx;
+
+				&::before {
+					content: '';
+					position: absolute;
+					left: 0;
+					top: 50%;
+					transform: translateY(-50%);
+					width: 4rpx;
+					height: 16rpx;
+					background: $app-primary-mid;
+					border-radius: 2rpx;
+				}
 			}
+
+			.card__value {
+				width: 100%;
+				text-align: left;
+			}
+
 			.card__value-wrap {
 				width: 100%;
 				justify-content: flex-start;
 			}
+
+			.card__input {
+				text-align: left;
+				min-height: 132rpx;
+			}
+
+			.remark-input {
+				width: 100%;
+				text-align: left;
+				font-size: 28rpx;
+				color: $app-text;
+				padding: 20rpx 24rpx;
+				background: #f7f8fa;
+				border-radius: 12rpx;
+				line-height: 1.6;
+				min-height: 140rpx;
+				box-sizing: border-box;
+
+				&::placeholder {
+					color: #b0bec5;
+				}
+			}
 		}
 	}
 
 	&__label {
 		width: 180rpx;
 		font-size: 26rpx;
-		color: #6b7c93;
+		color: $app-text-secondary;
 		flex-shrink: 0;
+		position: relative;
+		padding-left: 16rpx;
+
+		&::before {
+			content: '';
+			position: absolute;
+			left: 0;
+			top: 50%;
+			transform: translateY(-50%);
+			width: 4rpx;
+			height: 16rpx;
+			background: $app-primary-mid;
+			border-radius: 2rpx;
+		}
+
+		&.required::before {
+			background: #ff0000;
+		}
 	}
 
 	&__value {
 		flex: 1;
+		font-family: "SF Mono", "Menlo", "Consolas", monospace;
 		font-size: 28rpx;
+		font-weight: 500;
 		color: #0f1724;
+		letter-spacing: 0.3rpx;
 		text-align: left;
+
+		&--placeholder {
+			color: #888888;
+			font-weight: 400;
+		}
 	}
 
 	&__value-wrap {
 		flex: 1;
 		display: flex;
 		align-items: center;
+		justify-content: flex-start;
 		gap: 8rpx;
+
+		&--clickable {
+			min-height: 48rpx;
+			justify-content: flex-end;
+		}
 	}
 
 	&__unit {
 		font-size: 24rpx;
-		color: #6b7c93;
+		color: $app-text-secondary;
 		flex-shrink: 0;
 	}
 
 	&__input {
 		flex: 1;
 		font-size: 28rpx;
-		color: #0f1724;
+		color: $app-text;
 		text-align: left;
 		height: 48rpx;
 
@@ -1802,4 +1902,4 @@
 			color: #b0bec5;
 		}
 	}
-}
+}