hookehuyr

feat(订单管理): 添加订单详情弹窗组件及样式

实现订单详情弹窗功能,包含订单信息、商品详情、交易信息和评价展示
重构评价弹窗布局,优化样式和交互体验
...@@ -382,6 +382,189 @@ ...@@ -382,6 +382,189 @@
382 } 382 }
383 } 383 }
384 384
385 +/* 订单详情弹窗样式 */
386 +.order-detail-popup {
387 + padding: 40rpx;
388 + height: 100%;
389 + display: flex;
390 + flex-direction: column;
391 +
392 + .detail-header {
393 + text-align: center;
394 + margin-bottom: 40rpx;
395 +
396 + .detail-title {
397 + font-size: 36rpx;
398 + font-weight: 600;
399 + color: #333;
400 + }
401 + }
402 +
403 + .detail-content {
404 + flex: 1;
405 + overflow-y: auto;
406 +
407 + .detail-section {
408 + margin-bottom: 40rpx;
409 + background: #fff;
410 + border-radius: 16rpx;
411 + padding: 30rpx;
412 + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
413 +
414 + .section-title {
415 + font-size: 32rpx;
416 + font-weight: 600;
417 + color: #333;
418 + margin-bottom: 24rpx;
419 + display: block;
420 + border-bottom: 1rpx solid #f0f0f0;
421 + padding-bottom: 16rpx;
422 + }
423 +
424 + .info-row {
425 + display: flex;
426 + justify-content: space-between;
427 + margin-bottom: 16rpx;
428 +
429 + .info-label {
430 + font-size: 28rpx;
431 + color: #666;
432 + }
433 +
434 + .info-value {
435 + font-size: 28rpx;
436 + color: #333;
437 + font-weight: 500;
438 +
439 + &.status-pending {
440 + color: #f97316;
441 + }
442 +
443 + &.status-completed {
444 + color: #10b981;
445 + }
446 +
447 + &.status-cancelled {
448 + color: #6b7280;
449 + }
450 +
451 + &.price {
452 + color: #f97316;
453 + font-weight: 600;
454 + }
455 + }
456 + }
457 +
458 + .product-detail-info {
459 + display: flex;
460 + background: #f8f9fa;
461 + border-radius: 12rpx;
462 + padding: 20rpx;
463 +
464 + .product-detail-image {
465 + width: 180rpx;
466 + height: 180rpx;
467 + border-radius: 12rpx;
468 + margin-right: 24rpx;
469 + }
470 +
471 + .product-detail-content {
472 + flex: 1;
473 + display: flex;
474 + flex-direction: column;
475 + justify-content: space-between;
476 +
477 + .product-detail-name {
478 + font-size: 32rpx;
479 + font-weight: 600;
480 + color: #333;
481 + margin-bottom: 8rpx;
482 + }
483 +
484 + .product-detail-specs {
485 + font-size: 26rpx;
486 + color: #666;
487 + margin-bottom: 8rpx;
488 + }
489 +
490 + .product-detail-battery {
491 + font-size: 26rpx;
492 + color: #666;
493 + margin-bottom: 16rpx;
494 + }
495 +
496 + .product-detail-price {
497 + font-size: 32rpx;
498 + font-weight: 600;
499 + color: #ff6b35;
500 + }
501 + }
502 + }
503 +
504 + .review-info {
505 + background: #f8f9fa;
506 + border-radius: 12rpx;
507 + padding: 20rpx;
508 +
509 + .review-rating {
510 + display: flex;
511 + align-items: center;
512 + margin-bottom: 16rpx;
513 +
514 + .rating-label {
515 + font-size: 28rpx;
516 + color: #666;
517 + margin-right: 16rpx;
518 + }
519 +
520 + .rating-text {
521 + font-size: 26rpx;
522 + color: #666;
523 + margin-left: 16rpx;
524 + }
525 + }
526 +
527 + .review-content {
528 + margin-bottom: 16rpx;
529 +
530 + .content-label {
531 + font-size: 28rpx;
532 + color: #666;
533 + margin-bottom: 8rpx;
534 + display: block;
535 + }
536 +
537 + .content-text {
538 + font-size: 28rpx;
539 + color: #333;
540 + line-height: 1.5;
541 + }
542 + }
543 +
544 + .review-time {
545 + text-align: right;
546 +
547 + .time-text {
548 + font-size: 24rpx;
549 + color: #999;
550 + }
551 + }
552 + }
553 + }
554 + }
555 +
556 + .detail-footer {
557 + padding-top: 40rpx;
558 +
559 + .nut-button {
560 + height: 88rpx;
561 + border-radius: 44rpx;
562 + font-size: 32rpx;
563 + font-weight: 600;
564 + }
565 + }
566 +}
567 +
385 /* 响应式适配 */ 568 /* 响应式适配 */
386 @media (max-width: 750px) { 569 @media (max-width: 750px) {
387 .header { 570 .header {
......
This diff is collapsed. Click to expand it.