whhIndex.css 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. * {
  2. margin: 0;
  3. padding: 0;
  4. list-style: none; }
  5. html, body {
  6. margin: 0;
  7. height: 100%;
  8. display: flex;
  9. flex-direction: column; }
  10. body {
  11. background: #fff;
  12. font: normal 12px/22px; }
  13. .header {
  14. color: #fff;
  15. background-color: #30B9EF;
  16. display: flex;
  17. height: 45px;
  18. align-items: center;
  19. z-index:999; }
  20. .header .m1 {
  21. width: 15%;
  22. text-align: center;
  23. font-size: 23px;}
  24. .header .m2 {
  25. flex: 1;
  26. display: flex;
  27. justify-content: center;
  28. font-size: 0.3rem;
  29. color: #fff;
  30. font-weight: bold;
  31. }
  32. .header .m3 {
  33. width: 15%; }
  34. .bars {
  35. left: 0;
  36. right: 0;
  37. bottom: 0;
  38. position: absolute;
  39. background-color: #47a080;
  40. height: 60px;
  41. display: flex;
  42. align-items: center;
  43. justify-content: center; }
  44. .bars .bar {
  45. font-size: 14px;
  46. color: #ffffff;
  47. display: flex;
  48. flex-direction: column;
  49. align-items: center;
  50. flex: 1;
  51. text-align: center; }
  52. .bars .bar img {
  53. width: 50px;
  54. height: 50px; }
  55. .bars .bar span {
  56. margin-top: -15px; }
  57. .bars .select {
  58. color: #436b84; }
  59. .wrapper {
  60. background-color: #ffffff;
  61. flex: 1;
  62. overflow: scroll; }
  63. #contant{
  64. display: flex;
  65. flex-direction: column;
  66. }
  67. section {
  68. color: #444;
  69. padding: 20px 10px 0 16px; }
  70. section .headline {
  71. font-size: 18px;
  72. margin-bottom: 20px;
  73. background-color: whitesmoke; }
  74. section .cont-wrapper {
  75. width: 100%; }
  76. section .cont-wrapper .line {
  77. display: flex;
  78. width: 100%;
  79. height: 26px;
  80. }
  81. section .cont-wrapper .line img {
  82. width: 20px;
  83. height: 20px; }
  84. section .cont-wrapper .line .title {
  85. width: 80px;
  86. text-align: justify; }
  87. section .cont-wrapper .line .title span {
  88. display: inline-block;
  89. /* Opera */
  90. padding-left: 100%; }
  91. section .cont-wrapper .line .cont {
  92. flex: 1;
  93. color: #999999; }
  94. section .cont-wrapper .line .btn {
  95. font-size: 14px;
  96. background-color: #2fb390;
  97. height: 26px;
  98. width: 60px;
  99. display: flex;
  100. align-items: center;
  101. justify-content: center;
  102. color: #ffffff;
  103. border-radius: 13px; }
  104. .input-wrapper {
  105. padding: 10px 16px 16px;
  106. display: flex;
  107. align-items: center; }
  108. .input-wrapper .input {
  109. flex: 1;
  110. background-color: #f1f2f3;
  111. height: 30px;
  112. border-radius: 15px;
  113. margin-right: 15px;
  114. overflow: hidden;
  115. padding-left: 15px; }
  116. .input-wrapper .input input {
  117. color: #333333;
  118. font-size: 16px;
  119. background-color: #f1f2f3;
  120. border: 0;
  121. flex: 1;
  122. width: 100%;
  123. height: 30px; }
  124. .selector {
  125. margin: 10px 16px 0;
  126. display: flex;
  127. align-items: center;
  128. height: 30px;
  129. -webkit-border-radius: 15px;
  130. -moz-border-radius: 15px;
  131. border-radius: 15px;
  132. overflow: hidden;
  133. border: 1px #f06759 solid; }
  134. .selector div {
  135. height: 100%;
  136. flex: 1;
  137. display: flex;
  138. align-items: center;
  139. justify-content: center;
  140. color: rgba(243, 98, 85, 0.68);
  141. border-right: 1px #f06759 solid; }
  142. .selector div:last-child {
  143. border-right: 0; }
  144. .selector .selected {
  145. background-color: #f06759;
  146. color: #ffffff; }
  147. .m3 {
  148. font-size: 44px; }
  149. /*# sourceMappingURL=index.css.map */