process.wxss 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. @charset "UTF-8";
  2. /* 需要放到文件最上面 */
  3. /* 水平间距 */
  4. /* 水平间距 */
  5. /*
  6. 以下变量是默认值,如不需要修改可以不用给下面的变量重新赋值
  7. */
  8. /* 水平间距 */
  9. .process-list {
  10. padding-top: 20rpx;
  11. }
  12. .process-list .process-item {
  13. position: relative;
  14. display: flex;
  15. }
  16. .process-list .process-item .user-avatar-box {
  17. position: relative;
  18. }
  19. .process-list .process-item .user-avatar-box .user-avatar {
  20. width: 64rpx;
  21. height: 64rpx;
  22. background: #08979c;
  23. border-radius: 50%;
  24. margin-right: 20rpx;
  25. margin-top: 16rpx;
  26. display: flex;
  27. align-items: center;
  28. justify-content: center;
  29. overprocess: hidden;
  30. color: #fff;
  31. }
  32. .process-list .process-item .user-avatar-box .user-avatar-status {
  33. width: 28rpx;
  34. height: 28rpx;
  35. border-radius: 50%;
  36. border: 2rpx solid #fff;
  37. position: absolute;
  38. top: 60rpx;
  39. right: 20rpx;
  40. display: flex;
  41. align-items: center;
  42. justify-content: center;
  43. }
  44. .process-list .process-item .user-avatar-box .user-avatar-status.success {
  45. background: #389e0d;
  46. }
  47. .process-list .process-item .user-avatar-box .user-avatar-status.failed {
  48. background: #ff4d4f;
  49. }
  50. .process-list .process-item .user-avatar-box .user-avatar-status.waiting {
  51. background: #fa8c16;
  52. }
  53. .process-list .process-item .user-avatar-box .user-avatar-status.info {
  54. background: #8f939c;
  55. }
  56. .process-list .process-item .process-content {
  57. flex: 1;
  58. width: 0;
  59. }
  60. .process-list .process-item .process-content .user-name {
  61. height: 96rpx;
  62. display: flex;
  63. flex-direction: column;
  64. justify-content: center;
  65. }
  66. .process-list .process-item .process-content .user-name .name {
  67. font-size: 32rpx;
  68. font-weight: 600;
  69. }
  70. .process-list .process-item .process-content .user-name .date {
  71. font-size: 24rpx;
  72. color: #8c8c8c;
  73. display: flex;
  74. align-items: center;
  75. justify-content: space-between;
  76. }
  77. .process-list .process-item .process-content .user-content {
  78. background-color: #f5f5f5;
  79. border-radius: 16rpx;
  80. padding: 20rpx 20rpx 10rpx 20rpx;
  81. }
  82. .process-list .process-item .process-content .user-content .remark {
  83. line-height: 17px;
  84. font-weight: 400;
  85. padding-bottom: 10rpx;
  86. }
  87. .process-list .process-item .user-line {
  88. width: 1px;
  89. border-left: 1px solid #B9B9B9;
  90. position: absolute;
  91. top: 80rpx;
  92. bottom: -16rpx;
  93. left: 30rpx;
  94. }