index.less 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. .top-view {
  2. position: sticky;
  3. top: 0px;
  4. z-index: 999;
  5. .title-view {
  6. margin: 10px;
  7. background-color: #f0f0f0;
  8. border-radius: 10px;
  9. display: flex;
  10. align-items: center;
  11. align-content: center;
  12. flex-direction: column;
  13. padding: 5px 10px;
  14. .title-view-up, .title-view-mid, .title-view-dwn {
  15. display: flex;
  16. flex-direction: row;
  17. justify-content: space-between;
  18. align-items: center;
  19. width: 100%;
  20. align-content: center;
  21. height: 25px;
  22. text {
  23. color: #aaa;
  24. font-size: 13px;
  25. text-align: center;
  26. }
  27. :first-child {
  28. text-align: left;
  29. }
  30. :last-child {
  31. text-align: right;
  32. }
  33. }
  34. .title-view-up {
  35. border-bottom: 1px solid #ddd;
  36. padding-bottom: 5px;
  37. }
  38. .title-view-mid {
  39. padding: 5px 0px;
  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 #C6DFFF;
  52. .item-view-up, .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: #4D565D;
  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 #C6DFFF;
  81. padding-bottom: 5px;
  82. text {
  83. width: 25%;
  84. }
  85. }
  86. }
  87. /* 选中时添加这个 样式 */
  88. .active {
  89. background: #E6F1FF;
  90. }
  91. .van-swipe-cell__right {
  92. height: inherit;
  93. color: white;
  94. display: flex;
  95. .item {
  96. width: 50px;
  97. text-align: center;
  98. display: flex;
  99. justify-content: center;
  100. align-items: center;
  101. font-size: 12px;
  102. }
  103. }
  104. .buttom_view {
  105. position: fixed;
  106. bottom: 10px;
  107. z-index: 999;
  108. display: flex;
  109. flex-direction: column;
  110. justify-content: space-between;
  111. margin-top: 20px;
  112. align-items: center;
  113. align-content: center;
  114. width: 100%;
  115. }