样式优化

components/nbd-anti-record.vue

@@ -87,8 +87,8 @@
 			</view>
 
 			<!-- 弹窗：全部记录 -->
-			<view class="anti-record__overlay" v-if="showPopup" @click="showPopup = false">
-				<view class="anti-record__popup" @click.stop>
+			<u-popup v-model="showPopup" mode="bottom" :safe-area-inset-bottom="true">
+				<view class="anti-record__popup">
 					<view class="anti-record__popup-hd">
 						<text class="anti-record__popup-title">全部防腐记录</text>
 						<text class="anti-record__popup-close" @click="showPopup = false">✕</text>
@@ -162,7 +162,7 @@
 						</view>
 					</scroll-view>
 				</view>
-			</view>
+			</u-popup>
 		</template>
 	</view>
 </template>
@@ -328,16 +328,24 @@ $text-secondary: #8e99a4;
 	}
 
 	&__value {
-		font-size: 26rpx;
 		color: $text;
 		flex: 1;
 		text-align: left;
+		font-family: "SF Mono", "Menlo", "Consolas", monospace;
+		font-size: 28rpx;
+		font-weight: 500;
+		color: #0f1724;
+		letter-spacing: 0.3rpx;
 
 		&--stack {
-			font-size: 24rpx;
 			padding-left: 20rpx;
 			padding-bottom: 8rpx;
 			padding-top: 8rpx;
+			font-family: "SF Mono", "Menlo", "Consolas", monospace;
+			font-size: 28rpx;
+			font-weight: 500;
+			color: #0f1724;
+			letter-spacing: 0.3rpx;
 		}
 	}
 
@@ -386,24 +394,12 @@ $text-secondary: #8e99a4;
 	}
 
 	// ===== 弹窗 =====
-	&__overlay {
-		position: fixed;
-		inset: 0;
-		z-index: 999;
-		background: rgba(0, 0, 0, 0.45);
-		display: flex;
-		align-items: flex-end;
-		justify-content: center;
-	}
-
 	&__popup {
-		width: 100%;
-		height: 80vh;
 		background: #fff;
-		border-radius: 24rpx 24rpx 0 0;
 		display: flex;
 		flex-direction: column;
-		animation: slideUp 0.3s ease-out;
+		height: 80vh;
+		border-radius: 24rpx 24rpx 0 0;
 	}
 
 	&__popup-hd {
@@ -431,7 +427,7 @@ $text-secondary: #8e99a4;
 		box-sizing: border-box;
 		overflow-y: auto;
 		background: #f5f5f5;
-		padding: 12rpx 28rpx 36rpx;
+		padding: 12rpx 20rpx 20rpx;
 	}
 
 	&__card--popup {
@@ -445,14 +441,4 @@ $text-secondary: #8e99a4;
 		margin-bottom: 0;
 	}
 }
-
-@keyframes slideUp {
-	0% {
-		transform: translateY(100%);
-	}
-
-	100% {
-		transform: translateY(0);
-	}
-}
 </style>