123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
  1. * {
  2. margin: 0;
  3. padding: 0;
  4. box-sizing: border-box;
  5. }
  6. html, body {
  7. font-size: 14px;
  8. color: #111;
  9. background-color: #f2f2f2;
  10. font-family: 微软雅黑,Microsoft Yahei,LiHei Pro,Hiragino Sans,GBHelvetica Neue,Helvetica,Arial,PingFang SC,WenQuanYi Micro Hei,sans-serif;
  11. }
  12. body {
  13. background-image: url('../img/bg.png');
  14. background-size: 100% 100%;
  15. background-repeat: no-repeat;
  16. }
  17. li {
  18. list-style: none;
  19. }
  20. /* header */
  21. .header {
  22. width: 100%;
  23. height: 90px;
  24. background-color: white;
  25. box-shadow: 0 0 8px rgba(0, 0, 0, .2);
  26. }
  27. .header .header-content {
  28. position: relative;
  29. width: 1300px;
  30. height: 90px;
  31. margin: 0 auto;
  32. overflow: hidden;
  33. }
  34. .header .header-content .logo {
  35. width: 210px;
  36. margin: 23px 0;
  37. float: left;
  38. }
  39. .header .header-content .logo .pic {
  40. width: 160px;
  41. }
  42. .header .header-content .title {
  43. position: absolute;
  44. top: 25px;
  45. left: 50%;
  46. width: 500px;
  47. height: 40px;
  48. font-size: 22px;
  49. line-height: 40px;
  50. font-weight: 600;
  51. text-align: center;
  52. margin-left: -250px;
  53. }
  54. .header .header-content .concat-us {
  55. height: 40px;
  56. font-size: 15px;
  57. margin: 25px 0;
  58. float: right;
  59. }
  60. .header .header-content .concat-us .icon {
  61. width: 20px;
  62. height: 20px;
  63. margin: 10px 5px;
  64. float: left;
  65. }
  66. .header .header-content .concat-us .desc {
  67. margin: 10px 0;
  68. float: left;
  69. }
  70. /* top */
  71. .top {
  72. width: 790px;
  73. height: 65px;
  74. margin:40px auto 20px auto;
  75. border: 1px solid white;
  76. border-radius: 5px ;
  77. background-color: #fff ;
  78. }
  79. /* container */
  80. .container {
  81. width: 790px;
  82. min-height: 493px;
  83. background-color: white;
  84. border: 1px solid #e1e1e1;
  85. border-radius:5px;
  86. margin: 0 auto;
  87. }
  88. /* footer */
  89. .footer {
  90. width: 100%;
  91. height: 120px;
  92. }
  93. .footer .content {
  94. width: 820px;
  95. text-align: center;
  96. font-size: 15px;
  97. color: #fff;
  98. line-height: 30px;
  99. margin: 0 auto;
  100. padding: 30px 0;
  101. }
  102. /* step */
  103. .step-group {
  104. width: 66%;
  105. margin: 0 auto;
  106. overflow: hidden;
  107. }
  108. .step {
  109. width: 24%;
  110. height: 25px;
  111. text-align: center;
  112. margin: 20px 0;
  113. float: left;
  114. display: flex;
  115. align-items: center;
  116. justify-content: center;
  117. }
  118. .step.line {
  119. width: 10%;
  120. height: 2px;
  121. background-color: #d1d1d1;
  122. margin: 31px 2%;
  123. }
  124. .step .sort {
  125. width: 25px;
  126. height: 25px;
  127. color: #8c8c8c;
  128. line-height: 25px;
  129. text-align: center;
  130. font-size: 14px;
  131. border-radius: 50%;
  132. /* background-color: #d1d1d1; */
  133. margin-right: 5px;
  134. display: inline-block;
  135. }
  136. .step .desc {
  137. height: 25px;
  138. line-height: 25px;
  139. display: inline-block;
  140. color: #d8d8d8;
  141. }
  142. .step.active .sort {
  143. background-color: #fff;
  144. }
  145. .step.active .desc {
  146. color: black;
  147. }
  148. .step.active.line {
  149. /* background-color: #fff; */
  150. }
  151. .btn {
  152. width: 120px;
  153. height: 40px;
  154. text-align: center;
  155. line-height: 40px;
  156. font-size: 16px;
  157. color: #3e84e9;
  158. border-radius: 5px;
  159. background-color: white;
  160. border: 1px solid #3e84e9;
  161. display: inline-block;
  162. cursor: pointer;
  163. }
  164. .btn.primary {
  165. background-color: #3e84e9;
  166. color: white;
  167. }
  168. .base-top {
  169. width: 100%;
  170. height: 54px;
  171. line-height: 54px;
  172. /* background-color: #f7f7f7; */
  173. padding: 0 26px;
  174. /* border-bottom: 1px solid #e1e1e1; */
  175. font-weight: 600;
  176. }
  177. .base-top .title {
  178. /* color: #8c8c8c; */
  179. font-size: 16px;
  180. }
  181. .base-top .version {
  182. font-size: 13px;
  183. color: #8c8c8c;
  184. float: right;
  185. }
  186. .base-des {
  187. margin: 0 auto;
  188. line-height: 35px;
  189. width: 790px;
  190. background-color: #fff;
  191. padding: 0 40px;
  192. margin-bottom: 20px;
  193. color: #8c8c8c;
  194. }
  195. .base-a{
  196. cursor: pointer;
  197. user-select: none;
  198. text-decoration: none;
  199. color: #3e84e9;
  200. }
  201. #cover{
  202. position:absolute;left:0px;top:0px;
  203. background:rgba(0, 0, 0, 0.4);
  204. width:100%; /*宽度设置为100%,这样才能使隐藏背景层覆盖原页面*/
  205. height:100%;
  206. opacity:0.6; /*非IE浏览器下设置透明度为60%*/
  207. display:none;
  208. z-Index:99;
  209. }