index.less 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. .top-view {
  2. position: sticky;
  3. top: 0px;
  4. z-index: 999;
  5. .title-view {
  6. margin: 10px;
  7. background-color: #f0f0f0;
  8. height: 70px;
  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-dwn {
  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. }
  33. .item-view {
  34. margin: 10px;
  35. border-radius: 10px;
  36. display: flex;
  37. align-items: center;
  38. align-content: center;
  39. flex-direction: column;
  40. padding: 5px 10px;
  41. border: 1px solid #ddd;
  42. .item-view-up, .item-view-dwn {
  43. display: flex;
  44. flex-direction: row;
  45. justify-content: space-between;
  46. align-items: center;
  47. height: 50%;
  48. width: 100%;
  49. align-content: center;
  50. height: 25px;
  51. text {
  52. color: #333;
  53. font-size: 13px;
  54. /*超出隐藏*/
  55. overflow: hidden;
  56. /*溢出不换行*/
  57. white-space: nowrap;
  58. /*溢出显示用省略号*/
  59. text-overflow: ellipsis;
  60. text-align: center;
  61. }
  62. :first-child {
  63. text-align: left;
  64. }
  65. :last-child {
  66. text-align: right;
  67. }
  68. }
  69. .item-view-up {
  70. border-bottom: 1px solid #ddd;
  71. padding-bottom: 5px;
  72. text {
  73. width: 25%;
  74. }
  75. }
  76. }