info.wxss 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. .content {
  2. display: flex;
  3. flex-direction: column;
  4. box-sizing: border-box;
  5. width: 100vw;
  6. height: 100vh;
  7. }
  8. .content {
  9. font-family: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;
  10. }
  11. .content .info {
  12. display: flex;
  13. flex-direction: column;
  14. position: relative;
  15. flex-grow: 1;
  16. background-color: #f1f1f1;
  17. }
  18. .content .info .one {
  19. height: 10vh;
  20. background-color: #FF7800;
  21. color: #ffffff;
  22. padding: 4vw 2vw;
  23. font-size: 18px;
  24. }
  25. .content .info .two {
  26. width: 92vw;
  27. padding: 0 4vw;
  28. position: absolute;
  29. top: 16vw;
  30. }
  31. .content .info .two .two_1 {
  32. display: flex;
  33. justify-content: space-between;
  34. align-items: center;
  35. background-color: #ffffff;
  36. border-radius: 3vw;
  37. padding: 4vw 2vw;
  38. }
  39. .content .info .two .two_1 .left {
  40. font-size: 16px;
  41. font-weight: 600;
  42. }
  43. .content .info .two .two_1 .right {
  44. font-size: 14px;
  45. }
  46. .content .info .two .two_2 {
  47. margin: 2vw 0;
  48. padding: 2vw;
  49. background-color: #ffffff;
  50. border-radius: 4vw;
  51. }
  52. .content .info .two .two_2 .two_2_1 {
  53. padding: 2vw 0;
  54. font-size: 16px;
  55. font-weight: 600;
  56. }
  57. .content .info .two .two_2 .two_2_2 {
  58. position: relative;
  59. display: flex;
  60. flex-direction: column;
  61. height: 32vh;
  62. }
  63. .content .info .two .two_2 .two_2_2 .list {
  64. display: flex;
  65. width: 84vw;
  66. margin: 0 0 2vw 0;
  67. padding: 2vw;
  68. box-shadow: 0 0 5px #f1f1f1;
  69. border-radius: 5px;
  70. }
  71. .content .info .two .two_2 .two_2_2 .list .img {
  72. width: 25vw;
  73. }
  74. .content .info .two .two_2 .two_2_2 .list .img .image {
  75. width: 25vw;
  76. height: 20vw;
  77. border-radius: 5px;
  78. }
  79. .content .info .two .two_2 .two_2_2 .list .infoList {
  80. width: 35vw;
  81. padding: 0 0 0 2vw;
  82. }
  83. .content .info .two .two_2 .two_2_2 .list .infoList .name {
  84. font-size: 16px;
  85. }
  86. .content .info .two .two_2 .two_2_2 .list .infoList .spec {
  87. font-size: 12px;
  88. color: #858585;
  89. }
  90. .content .info .two .two_2 .two_2_2 .list .money {
  91. display: flex;
  92. flex-direction: column;
  93. align-items: flex-end;
  94. width: 20vw;
  95. font-size: 14px;
  96. }
  97. .content .info .two .two_2 .two_2_2 .list .money text:first-child {
  98. color: #FF8C00;
  99. }
  100. .content .info .two .two_2 .two_2_3 .two_2_3_1 {
  101. display: flex;
  102. justify-content: space-between;
  103. align-items: center;
  104. font-size: 14px;
  105. padding: 2vw 3vw;
  106. }
  107. .content .info .two .two_2 .two_2_3 .two_2_3_1 .left text {
  108. color: #858585;
  109. font-size: 12px;
  110. margin: 0 2vw;
  111. }
  112. .content .info .two .two_2 .two_2_3 .two_2_3_1 .right {
  113. color: #FF7800;
  114. }
  115. .content .info .two .two_2 .two_2_3 .two_2_3_2 {
  116. padding: 3vw;
  117. text-align: right;
  118. font-size: 14px;
  119. color: #858585;
  120. border-top: 1px solid #f1f1f1;
  121. }
  122. .content .info .two .two_2 .two_2_3 .two_2_3_2 text:first-child {
  123. color: #FF7800;
  124. }
  125. .content .info .two .two_2 .two_2_3 .two_2_3_2 text:last-child {
  126. color: #FF7800;
  127. font-size: 18px;
  128. }
  129. .content .info .two .two_3 {
  130. margin: 2vw 0;
  131. padding: 2vw;
  132. background-color: #ffffff;
  133. border-radius: 4vw;
  134. }
  135. .content .info .two .two_3 .two_3_1 {
  136. display: flex;
  137. justify-content: space-between;
  138. padding: 2vw;
  139. font-size: 14px;
  140. border-bottom: 1px solid #f1f1f1;
  141. }
  142. .content .foot {
  143. display: flex;
  144. justify-content: space-around;
  145. align-items: center;
  146. padding: 2vw 3vw;
  147. background-color: #ffffff;
  148. border-top: 1px solid #f1f1f1;
  149. }
  150. .content .foot .foot_1 .button {
  151. background-color: #ffffff;
  152. color: #FF8C00;
  153. border: 1px solid #FF8C00;
  154. border-radius: 5vw;
  155. padding: 0 15vw;
  156. font-size: 16px;
  157. }
  158. .content .foot .foot_2 .button {
  159. background-color: #FF8C00;
  160. color: #ffffff;
  161. border-radius: 5vw;
  162. padding: 0 15vw;
  163. font-size: 16px;
  164. }
  165. .scroll-view {
  166. position: absolute;
  167. top: 0;
  168. left: 0;
  169. right: 0;
  170. bottom: 0;
  171. }
  172. .scroll-view .list-scroll-view {
  173. display: flex;
  174. flex-direction: column;
  175. }