index.less 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
  1. .container {
  2. display: flex;
  3. flex-direction: column;
  4. width: 100%;
  5. .top-view {
  6. display: flex;
  7. flex-direction: column;
  8. width: 100%;
  9. position: sticky;
  10. top: 0;
  11. z-index: 999;
  12. .tmp_view {
  13. &__step {
  14. display: flex;
  15. flex-direction: row;
  16. justify-content: start;
  17. align-items: center;
  18. align-content: center;
  19. margin-left: 10px;
  20. &__item {
  21. display: flex;
  22. flex-direction: column;
  23. align-items: center;
  24. align-content: center;
  25. padding-top: 10px;
  26. text {
  27. font-size: 12px;
  28. padding: 2.5px 5px;
  29. text-align: center;
  30. }
  31. }
  32. }
  33. }
  34. .tmp_view {
  35. &__step {
  36. display: flex;
  37. flex-direction: row;
  38. justify-content: start;
  39. align-items: center;
  40. align-content: center;
  41. width: 100%;
  42. margin-left: 15px;
  43. &__item {
  44. display: flex;
  45. flex-direction: column;
  46. align-items: center;
  47. align-content: center;
  48. padding-top: 10px;
  49. margin-bottom: 5px;
  50. text {
  51. font-size: 12px;
  52. padding: 2.5px 5px;
  53. text-align: center;
  54. }
  55. }
  56. }
  57. }
  58. .title-view {
  59. margin: 10px;
  60. background-color: #f0f0f0;
  61. border-radius: 10px;
  62. display: flex;
  63. align-items: center;
  64. align-content: center;
  65. flex-direction: column;
  66. padding: 5px 10px;
  67. .title-view-up, .title-view-dwn {
  68. display: flex;
  69. flex-direction: row;
  70. justify-content: space-between;
  71. align-items: center;
  72. width: 100%;
  73. align-content: center;
  74. height: 25px;
  75. text {
  76. color: #666;
  77. font-size: 13px;
  78. text-align: center;
  79. }
  80. :first-child {
  81. text-align: left;
  82. }
  83. :last-child {
  84. text-align: right;
  85. }
  86. }
  87. .title-view-up {
  88. border-bottom: 1px solid #ddd;
  89. padding-bottom: 5px;
  90. }
  91. .title-view-mid {
  92. padding: 5px 0px;
  93. }
  94. }
  95. }
  96. .item-view {
  97. margin: 10px;
  98. border-radius: 10px;
  99. display: flex;
  100. align-items: center;
  101. align-content: center;
  102. flex-direction: column;
  103. padding: 5px 10px;
  104. border: 1px solid #ddd;
  105. .item-view-up, .item-view-mid, .item-view-dwn {
  106. display: flex;
  107. flex-direction: row;
  108. justify-content: space-between;
  109. align-items: center;
  110. height: 50%;
  111. width: 100%;
  112. align-content: center;
  113. height: 25px;
  114. text {
  115. color: #333;
  116. font-size: 13px;
  117. /*超出隐藏*/
  118. overflow: hidden;
  119. /*溢出不换行*/
  120. white-space: nowrap;
  121. /*溢出显示用省略号*/
  122. text-overflow: ellipsis;
  123. text-align: center;
  124. }
  125. :first-child {
  126. text-align: left;
  127. }
  128. :last-child {
  129. text-align: right;
  130. }
  131. }
  132. .item-view-up {
  133. border-bottom: 1px solid #ddd;
  134. padding-bottom: 5px;
  135. text {
  136. width: 25%;
  137. }
  138. }
  139. .item-view-mid {
  140. padding: 5px 0px;
  141. :last-child {
  142. width: 30%;
  143. }
  144. }
  145. }
  146. /* 选中时添加这个 样式 */
  147. .active {
  148. background: #E6F1FF;
  149. }
  150. .button-view {
  151. display: flex;
  152. justify-content: space-between;
  153. margin: 10px;
  154. justify-content: center;
  155. justify-items: center;
  156. width: 100%;
  157. van-button {
  158. height: 40px;
  159. width: 80%;
  160. }
  161. }
  162. }