index.css 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. /* 订单状态卡片样式 - 严格对照 tcb-shop-demo 实现 */
  2. .tdesign-order-group {
  3. margin-bottom: 24rpx;
  4. background-color: #ffffff;
  5. border-radius: 16rpx 16rpx 0 0;
  6. }
  7. /* 顶部单元格样式 */
  8. .tdesign-order-group__top {
  9. padding: 24rpx 18rpx 24rpx 32rpx;
  10. border-radius: 16rpx 16rpx 0 0;
  11. }
  12. .tdesign-order-group__top .tdesign-cell__title {
  13. font-size: 32rpx;
  14. line-height: 48rpx;
  15. font-weight: bold;
  16. }
  17. .tdesign-order-group__top .tdesign-cell__note {
  18. font-size: 28rpx;
  19. }
  20. /* 订单状态内容 */
  21. .tdesign-order-group__content {
  22. overflow: hidden;
  23. width: 100%;
  24. height: 164rpx;
  25. display: flex;
  26. background-color: #fff;
  27. border-radius: 0 0 16rpx 16rpx;
  28. }
  29. /* 订单状态项 */
  30. .tdesign-order-group__item {
  31. overflow: hidden;
  32. display: flex;
  33. flex-direction: column;
  34. align-items: center;
  35. justify-content: center;
  36. flex: 1;
  37. }
  38. .tdesign-order-group__item:first-child {
  39. border-radius: 0 0 0 16rpx;
  40. }
  41. .tdesign-order-group__item:last-child {
  42. border-radius: 0 0 16rpx 0;
  43. }
  44. /* 标题 */
  45. .tdesign-order-group__item__title {
  46. font-size: 24rpx;
  47. color: #666;
  48. line-height: 32rpx;
  49. }
  50. /* 图标区域 */
  51. .tdesign-order-group__item__icon {
  52. margin-bottom: 20rpx;
  53. width: 56rpx;
  54. height: 56rpx;
  55. position: relative;
  56. }
  57. /* 徽章位置调整 - 使用TDesignBadge组件 */
  58. .tdesign-order-group__item__icon .tdesign-badge {
  59. position: absolute;
  60. top: -8rpx;
  61. right: -8rpx;
  62. z-index: 1;
  63. }
  64. /* 图标样式 */
  65. .tdesign-order-group__item__icon-image {
  66. background-image: -webkit-linear-gradient(90deg, #6a6a6a 0%, #929292 100%);
  67. -webkit-background-clip: text;
  68. -webkit-text-fill-color: transparent;
  69. }