repair.css 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. html,
  2. body {
  3. height: 100%;
  4. background-color: #f5f5f5;
  5. font-family: PingFangSC-Regular;
  6. color: #333333;
  7. overflow-x: hidden;
  8. }
  9. .tab {
  10. box-sizing: border-box;
  11. width: 100%;
  12. padding: 28rpx 120rpx 0;
  13. background: #ffffff;
  14. font-size: 32rpx;
  15. color: #666666;
  16. text-align: center;
  17. position: fixed;
  18. z-index: 900;
  19. }
  20. .tab > view{
  21. display: flex;
  22. justify-content: space-between;
  23. }
  24. .tab > view>view {
  25. padding: 0 22rpx 28rpx;
  26. }
  27. .tab .line {
  28. padding: 0;
  29. width: 140rpx;
  30. height: 4rpx;
  31. background: #3296FB;
  32. position: absolute;
  33. left: 120rpx;
  34. bottom: 0;
  35. }
  36. .tab .selected {
  37. color: #3296FB;
  38. }
  39. .contentNull {
  40. width: 100%;
  41. height: 100%;
  42. background: #ffffff;
  43. position: relative;
  44. }
  45. .contentNull > view {
  46. position: absolute;
  47. top: 332rpx;
  48. left: 222rpx;
  49. display: flex;
  50. flex-direction: column;
  51. }
  52. .contentNull > view > image {
  53. width: 308rpx;
  54. height: 308rpx;
  55. }
  56. .contentNull > view > text {
  57. font-size: 28rpx;
  58. color: #9197a3;
  59. text-align: center;
  60. }
  61. .content {
  62. width: 200%;
  63. height: 100%;
  64. display: flex;
  65. box-sizing: border-box;
  66. padding-top: 100rpx;
  67. }
  68. .content >scroll-view {
  69. width: 750rpx;
  70. height: 100%;
  71. background: #f5f5f5;
  72. }
  73. .content .item {
  74. background: #ffffff;
  75. box-sizing: border-box;
  76. padding: 32rpx 32rpx 0;
  77. display: flex;
  78. flex-direction: column;
  79. margin: 20rpx 20rpx 0;
  80. }
  81. .content .item > .header {
  82. display: flex;
  83. justify-content: space-between;
  84. align-items: center;
  85. margin-bottom: 18rpx;
  86. }
  87. .content .item > .header > .left {
  88. display: flex;
  89. align-items: center;
  90. font-size: 32rpx;
  91. }
  92. .content .item > .header > .left > image {
  93. width: 52rpx;
  94. height: 52rpx;
  95. margin-right: 20rpx;
  96. border-radius: 50%;
  97. }
  98. .content .header > .right {
  99. font-size: 30rpx;
  100. color: #ff801a;
  101. }
  102. .content .sItem:nth-child(2) .header > .right {
  103. color: #3AB261;
  104. }
  105. .content .sItem:nth-child(2) .footer {
  106. justify-content: flex-end;
  107. }
  108. .content .item > .detail {
  109. width: 100%;
  110. background: #fafafa;
  111. font-size: 28rpx;
  112. color: #666666;
  113. line-height: 26px;
  114. box-sizing: border-box;
  115. padding: 18rpx 28rpx;
  116. margin-bottom: 28rpx;
  117. }
  118. .content .item > .detail > view {
  119. display: flex;
  120. justify-content: space-between;
  121. align-items: center;
  122. }
  123. .content .item>.detail>view>text:last-child{
  124. display: block;
  125. width: 400rpx;
  126. text-align: right;
  127. white-space: nowrap;
  128. text-overflow: ellipsis;
  129. overflow: hidden;
  130. }
  131. .content .item > .money {
  132. text-align: right;
  133. font-size: 28rpx;
  134. line-height: 26px;
  135. margin-bottom: 32rpx;
  136. }
  137. .content .item > .money > text {
  138. font-family: PingFangSC-Medium;
  139. font-size: 32rpx;
  140. }
  141. .content .item > .line {
  142. height: 2rpx;
  143. transform: scaleY(0.5);
  144. background: #eeeeee;
  145. margin-bottom: 18rpx;
  146. }
  147. .content .item > .footer {
  148. display: flex;
  149. align-items: center;
  150. padding-bottom: 20rpx;
  151. }
  152. .content .item > .footer .btn {
  153. border: 1rpx solid #cccccc;
  154. border-radius: 30rpx;
  155. padding: 12rpx 24rpx;
  156. font-size: 26rpx;
  157. color: #666666;
  158. }
  159. .content .item > .footer > .pay {
  160. background: #3296fb;
  161. color: #ffffff;
  162. border: none;
  163. }