explain.css 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  1. body, html {
  2. margin: 0;
  3. padding: 0;
  4. background:linear-gradient(-90deg,rgba(85,170,255,1),rgba(35,186,255,1));;
  5. }
  6. .section {
  7. width: 100%;
  8. }
  9. .section-title {
  10. position:absolute;
  11. top:0;
  12. left:0;
  13. width:100%;
  14. height:100%;
  15. padding:0;
  16. margin: 0;
  17. z-index: 1;
  18. }
  19. .section-title img {
  20. width: 100%;
  21. }
  22. .section-li {
  23. text-align: center;
  24. /* position: relative;
  25. top: 0;
  26. left: 0;
  27. z-index: 1000; */
  28. }
  29. .section-li-header{
  30. position: relative;
  31. z-index: 1000;
  32. }
  33. .section-li-one{
  34. font-size: 1.1rem;
  35. color: #fff;
  36. /* margin: 0.4rem 0; */
  37. }
  38. .section-li-two{
  39. font-size: 1.2rem;
  40. color: #fff;
  41. margin: 0.5rem 20%;
  42. font-weight: bold;
  43. }
  44. .section-li-three{
  45. margin-bottom: 1rem;
  46. margin-top: 1.8rem;
  47. }
  48. .section-li-three img{
  49. width:20rem;
  50. height:9.6rem;
  51. margin-left: 1%;
  52. }
  53. .section-form{
  54. position: relative;
  55. bottom: 2.5rem;
  56. background:rgba(255,255,255,1);
  57. border-radius:1rem;
  58. margin: 1rem;
  59. padding: 2rem 0 1rem 0;
  60. z-index: 100;
  61. }
  62. .section-form-item {
  63. text-align: left;
  64. background:rgba(245,245,245,1);
  65. border-radius:1.5rem;
  66. padding: 0.5rem 0.8rem;
  67. margin: 0.8rem 1rem;
  68. }
  69. .section-form-item img {
  70. width: 0.8rem;
  71. height: 0.8rem;
  72. margin: auto 0;
  73. }
  74. .address-img{
  75. width: 0.8rem !important;
  76. height: 1rem !important;
  77. }
  78. .section-form-item span {
  79. -webkit-flex: 1;
  80. flex: 1;
  81. color: #515467;
  82. font-size: 0.8rem;
  83. font-weight: 600;
  84. margin: 0 .4rem;
  85. }
  86. ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  87. color: #A1A1B3;
  88. font-size: 0.7rem;
  89. }
  90. ::-moz-placeholder { /* Firefox 19+ */
  91. color: #A1A1B3;
  92. font-size: 0.7rem;
  93. }
  94. :-ms-input-placeholder { /* IE 10+ */
  95. color: #A1A1B3;
  96. font-size: 0.7rem;
  97. }
  98. :-moz-placeholder { /* Firefox 18- */
  99. color: #A1A1B3;
  100. font-size: 0.7rem;
  101. }
  102. .section-form-item input {
  103. border: none;
  104. height: 1.5rem;
  105. /* line-height: 1.5rem; */
  106. background: #F5F5F5;
  107. font-size: 0.8rem;
  108. outline: none;
  109. /*width: 70%;*/
  110. }
  111. .section-form-btn{
  112. width:11rem;
  113. height:2.8rem;
  114. background:linear-gradient(-90deg,rgba(0,183,255,1),rgba(50,142,255,1));
  115. box-shadow:0rem 0rem 1rem 0rem rgba(36, 163, 104, 0.35);
  116. border-radius:3rem;
  117. margin: 0rem auto;
  118. color: #FFFFFF;
  119. text-align: center;
  120. line-height:2.8rem;
  121. font-size: 1rem;
  122. }
  123. /* 弹框 */
  124. .showMedeol {
  125. z-index: 9999;
  126. position: fixed;
  127. top: 0;
  128. right: 0;
  129. bottom: 0;
  130. left: 0;
  131. background: rgba(0, 0, 0, 0.5);
  132. display: none;
  133. }
  134. .show {
  135. min-height: 9rem;
  136. width: 13rem;
  137. background: #fff;
  138. border-radius: 0.5rem;
  139. position: absolute;
  140. top: 50%;
  141. left: 50%;
  142. transform: translate(-50%, -50%);
  143. }
  144. .model-title{
  145. font-size: 1.2rem;
  146. color: #41414C;
  147. font-weight: 500;
  148. margin: 1rem auto;
  149. text-align: center;
  150. }
  151. .model-content{
  152. font-size: 0.8rem;
  153. color: #6C6C80;
  154. margin: 0 2rem;
  155. line-height: 1.2rem;
  156. }
  157. .model-img{
  158. height: 2rem;
  159. width:2rem;
  160. position: absolute;
  161. top: 64%;
  162. left: 46.5%;
  163. }
  164. .active{
  165. display: block;
  166. }