index.less 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. .top-view {
  2. position: sticky;
  3. top: 0px;
  4. z-index: 999;
  5. .title-view {
  6. margin: 5px;
  7. background-color: #f0f0f0;
  8. height: 60px;
  9. border-radius: 10px;
  10. display: flex;
  11. align-items: center;
  12. align-content: center;
  13. flex-direction: column;
  14. padding: 5px 10px;
  15. .title-view-up, .title-view-down {
  16. display: flex;
  17. flex-direction: row;
  18. justify-content: space-between;
  19. align-items: center;
  20. height: 50%;
  21. width: 100%;
  22. align-content: center;
  23. text {
  24. color: #666;
  25. font-size: 13px;
  26. }
  27. }
  28. .title-view-up {
  29. border-bottom: 1px solid #ddd;
  30. }
  31. }
  32. .order-info {
  33. display: flex;
  34. flex-direction: row;
  35. justify-content: space-between;
  36. margin: 15px 5px;
  37. text {
  38. color: #333;
  39. font-size: 14px;
  40. }
  41. }
  42. }
  43. .item-view {
  44. margin: 5px;
  45. border-radius: 10px;
  46. display: flex;
  47. align-items: center;
  48. align-content: center;
  49. flex-direction: column;
  50. padding: 5px 10px;
  51. border: 1px solid #ddd;
  52. .item-view-up, .item-view-mid, .item-view-dwn {
  53. display: flex;
  54. flex-direction: row;
  55. justify-content: space-between;
  56. align-items: center;
  57. height: 50%;
  58. width: 100%;
  59. align-content: center;
  60. height: 25px;
  61. text {
  62. color: #333;
  63. font-size: 13px;
  64. /*超出隐藏*/
  65. overflow: hidden;
  66. /*溢出不换行*/
  67. white-space: nowrap;
  68. /*溢出显示用省略号*/
  69. text-overflow: ellipsis;
  70. text-align: center;
  71. }
  72. :first-child {
  73. text-align: left;
  74. }
  75. :last-child {
  76. text-align: right;
  77. }
  78. }
  79. .item-view-up {
  80. border-bottom: 1px solid #ddd;
  81. padding-bottom: 5px;
  82. }
  83. }