install.css 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746
  1. /*
  2. ===================
  3. 初始化【请勿修改】
  4. ===================
  5. */
  6. html,body,
  7. div, dl, dt, dd, ul, p, th, td,
  8. h1, h2, h3, h4, h5, h6,
  9. pre, code, form,
  10. fieldset, legend{
  11. margin: 0;
  12. padding: 0;
  13. }
  14. cite,
  15. em,
  16. strong,
  17. th {
  18. font-style: normal;
  19. }
  20. td,
  21. th,
  22. div {
  23. word-break:break-all;
  24. word-wrap:break-word;
  25. }
  26. form{
  27. display:inline;
  28. }
  29. table {
  30. border-collapse: collapse;
  31. border-spacing:0;
  32. }
  33. th {
  34. text-align: left;
  35. font-weight:100;
  36. }
  37. ol li {
  38. list-style: decimal outside;
  39. }
  40. ol{
  41. padding:0 0 0 18px;
  42. margin:0;
  43. }
  44. li {
  45. list-style:none;
  46. }
  47. img {
  48. border: 0;
  49. }
  50. html {
  51. -webkit-text-size-adjust:none;
  52. overflow-y:scroll;
  53. }
  54. /*
  55. ===================
  56. html5标签
  57. ===================
  58. */
  59. article,
  60. aside,
  61. details,
  62. figcaption,
  63. figure,
  64. footer,
  65. header,
  66. hgroup,
  67. nav,
  68. section {
  69. display: block;
  70. }
  71. /*
  72. ===================
  73. 清除浮动【请勿修改】
  74. >> cc 作用于父模型
  75. >> c 作用于浮动模型后,父模型区域里
  76. ===================
  77. */
  78. .cc{
  79. zoom:1;
  80. }
  81. .cc:after{
  82. content:'\20';
  83. display:block;
  84. height:0;
  85. clear:both;
  86. visibility: hidden;
  87. }
  88. .c{
  89. clear:both;
  90. height:0;
  91. font:0/0 Arial;
  92. overflow:hidden;
  93. width:0;
  94. }
  95. /*
  96. ===================
  97. 基础样式
  98. >> b 加粗
  99. >> u 下划线
  100. >> i 斜体
  101. >> w 文本不换行
  102. >> tal 文本靠左显示
  103. >> tac 文本居中显示
  104. >> tar 文本靠右显示
  105. >> fl 左浮动
  106. >> fr 右浮动
  107. >> pr 相对定位
  108. >> cp 鼠标点击手势
  109. >> vt 表格内容靠上显示
  110. ===================
  111. */
  112. .b{
  113. font-weight:700 !important;
  114. }
  115. .u{
  116. text-decoration:underline !important;
  117. }
  118. .i{
  119. font-style:italic !important;
  120. }
  121. .w{
  122. white-space:nowrap;
  123. }
  124. .tal{
  125. text-align:left !important;
  126. }
  127. .tac{
  128. text-align:center !important;
  129. }
  130. .tar{
  131. text-align:right !important;
  132. }
  133. .fl{
  134. float:left !important;
  135. }
  136. .fr{
  137. float:right !important;
  138. }
  139. .pr{
  140. position:relative;
  141. }
  142. .cp{
  143. cursor:pointer;
  144. }
  145. .vt{
  146. vertical-align:top;
  147. }
  148. .dn{
  149. display:none;
  150. }
  151. /*
  152. ===================
  153. 字体
  154. >> f10 小字体
  155. >> f12 正常字
  156. >> f14 大字
  157. >> f16 更大
  158. >> f24 标题类
  159. >> fn 文本去粗
  160. ===================
  161. */
  162. .f10{
  163. font-size:10px;
  164. }
  165. .f12{
  166. font-size:12px !important;
  167. }
  168. .f14{
  169. font-size:14px;
  170. }
  171. .f16{
  172. font-size:16px;
  173. }
  174. .f24{
  175. font-size:24px;
  176. font-family:Arial, "Microsoft Yahei", Simsun;
  177. }
  178. .fn{
  179. font-weight:normal !important;
  180. }
  181. .s1{
  182. color:#ff0000;
  183. }
  184. /*
  185. ===================
  186. 全局
  187. ===================
  188. */
  189. body{
  190. display: flex;
  191. align-items: center;
  192. flex-direction: column;
  193. justify-content: center;
  194. height: 100vh;
  195. font:12px/1.5 Arial,Microsoft Yahei,Simsun;
  196. color:#333;
  197. background:url(../images/install/bg.png);
  198. }
  199. a{
  200. text-decoration:none;
  201. }
  202. a:link{
  203. text-decoration:none;
  204. }
  205. a:hover{
  206. text-decoration:none;
  207. }
  208. .p8{
  209. color: rgba(255,255,255,0.8)
  210. }
  211. .df{
  212. display: flex;
  213. align-items: center;
  214. }
  215. .mid{
  216. display: flex;
  217. justify-content: center;
  218. align-items: center;
  219. }
  220. /*
  221. ===================
  222. 包裹
  223. ===================
  224. */
  225. .wrap{
  226. width:800px;
  227. height: 640px;
  228. margin:0px auto 0;
  229. background: linear-gradient(180deg, #134392 0%, #363A8A 100%);
  230. box-shadow: 0px 6px 20px 10px rgba(48,114,229,0.15);
  231. border-radius: 36px 36px 36px 36px;
  232. font-family: PingFang SC, serif;
  233. position: relative;
  234. }
  235. /*
  236. ===================
  237. 头部
  238. ===================
  239. */
  240. .header{
  241. height:80px;
  242. box-shadow:0 3px 3px #ddd;
  243. position:relative;
  244. color:#fff;
  245. background:#246fa6 url(../images/install/header.png) 0 0 repeat-x;
  246. }
  247. .wrap > .title{
  248. text-align: center;
  249. padding: 23px 0 52px 0;
  250. color: rgba(255,255,255,0.8);
  251. font-size: 14px;
  252. }
  253. /*
  254. ===================
  255. 主体
  256. ===================
  257. */
  258. .main{
  259. display: flex;
  260. flex-direction: column;
  261. justify-content: center;
  262. align-items: center;
  263. }
  264. /*
  265. ===================
  266. 底部
  267. ===================
  268. */
  269. .footer{
  270. text-align:center;
  271. /*padding:15px 0 50px;*/
  272. color:#999999;
  273. margin-top: calc(100vh - 50px);
  274. position: absolute;
  275. }
  276. .footer a{
  277. color:#999!important;
  278. text-decoration:none;
  279. }
  280. input[type=checkbox] {
  281. position: relative;
  282. cursor: pointer;
  283. }
  284. input[type=checkbox]:after {
  285. display: inline-block;
  286. content: "";
  287. width: 14px;
  288. height: 14px;
  289. border-radius: 3px;
  290. background: #fff;
  291. border: 1px solid #fff;
  292. }
  293. input[type=checkbox]:checked:after {
  294. content: "✓";
  295. font-size: 12px;
  296. font-weight: bold;
  297. color: #fff;
  298. background-color: #37CA71;
  299. border: 1px solid #37CA71;
  300. text-align: center;
  301. }
  302. /*
  303. ===================
  304. 协议
  305. ===================
  306. */
  307. .pact::-webkit-scrollbar { width: 0 !important }
  308. /*IE 10+*/
  309. .pact { -ms-overflow-style: none; }
  310. /*Firefox*/
  311. .pact { overflow: -moz-scrollbars-none; }
  312. .pact{
  313. width:700px;
  314. height:480px;
  315. overflow:hidden;
  316. display:block;
  317. overflow-y:scroll;
  318. padding: 20px 50px;
  319. margin:30px auto 10px auto;
  320. font-size:12px;
  321. line-height:1.5;
  322. outline:none;
  323. color: #EEEEEE;
  324. }
  325. pre{
  326. white-space: pre-wrap;
  327. white-space: -moz-pre-wrap;
  328. white-space: -pre-wrap;
  329. white-space: -o-pre-wrap;
  330. word-wrap: break-word;
  331. word-break : normal;
  332. }
  333. .section .title{
  334. margin-bottom: 27px;
  335. text-align: center;
  336. }
  337. /*step1*/
  338. #step1 .title{
  339. display: flex;
  340. flex-direction: column;
  341. align-items: center;
  342. }
  343. .title h1{
  344. color: #FFFFFF;
  345. font-size: 32px;
  346. letter-spacing:1px;
  347. }
  348. .title .radio{
  349. font-size: 14px;
  350. font-weight: normal;
  351. color: rgba(255,255,255,0.8);
  352. margin: 15px 0;
  353. line-height: 16px;
  354. }
  355. .el-radio{
  356. line-height: 16px;
  357. margin-right: 4px;
  358. }
  359. .el-radio__input.is-checked+.el-radio__label{
  360. color: rgba(255,255,255,0.8) !important;
  361. }
  362. /* step2 */
  363. /*
  364. ===================
  365. 版本号
  366. ===================
  367. */
  368. .version{
  369. float:right;
  370. margin:50px 25px 0 0;
  371. }
  372. /*
  373. ===================
  374. LOGO
  375. ===================
  376. */
  377. /*.logo{*/
  378. /* float:left;*/
  379. /* width:230px;*/
  380. /* height:80px;*/
  381. /* background:url(../images/install/logo.png) no-repeat center;*/
  382. /* overflow:hidden;*/
  383. /* text-indent:-2000em;*/
  384. /*}*/
  385. .upload{
  386. width: 12px;
  387. height: 10px;
  388. }
  389. .yes{
  390. width: 13px;
  391. height: 11px;
  392. margin-right: 5px;
  393. }
  394. .no{
  395. width: 14px;
  396. height: 14px;
  397. margin-right: 5px;
  398. }
  399. .ls-td{
  400. display: flex;
  401. align-items: center;
  402. }
  403. /*
  404. ===================
  405. 安装类型文案
  406. ===================
  407. */
  408. .icon_install,
  409. .icon_update{
  410. float:left;
  411. margin-top:35px;
  412. width:90px;
  413. height:30px;
  414. overflow:hidden;
  415. text-indent:-2000em;
  416. }
  417. .icon_install{
  418. background:url(../images/install/icon_install.png) no-repeat;
  419. }
  420. .icon_update{
  421. background:url(../images/install/icon_update.png) no-repeat;
  422. }
  423. /*
  424. ===================
  425. 按钮
  426. ===================
  427. */
  428. /*
  429. ===================
  430. 步骤
  431. ===================
  432. */
  433. .step,
  434. .step li em,
  435. .step li{
  436. background:url(../images/install/step.png) repeat-x;
  437. }
  438. .step{
  439. border-bottom:1px solid #dce1e5;
  440. height:60px;
  441. background-color:#fff;
  442. }
  443. .step li{
  444. float:left;
  445. height:60px;
  446. line-height:60px;
  447. width:33%;
  448. text-align:center;
  449. font-size:14px;
  450. color:#6f7885;
  451. font-weight:700;
  452. }
  453. .step li em{
  454. width:32px;
  455. height:32px;
  456. text-align:center;
  457. line-height:32px;
  458. display:inline-block;
  459. background-position:0 -70px;
  460. font-size:20px;
  461. color:#fff;
  462. font-family:Microsoft Yahei;
  463. margin-right:10px;
  464. vertical-align:0;
  465. }
  466. .step li.current{
  467. background-position:right -106px;
  468. background-repeat:no-repeat;
  469. color:#246ea5;
  470. }
  471. .step li.current em{
  472. background-position:-35px -70px;
  473. }
  474. .step li.on{
  475. background-position:0 -176px;
  476. }
  477. .step li.on em{
  478. background-position:-70px -70px;
  479. }
  480. /*
  481. ===================
  482. 数据表写入
  483. ===================
  484. */
  485. /*.install{*/
  486. /* box-shadow:5px 5px 5px #f7f7f7 inset;*/
  487. /* border:1px solid #bdbcbc;*/
  488. /* width:670px;*/
  489. /* height:350px;*/
  490. /* padding:10px;*/
  491. /* overflow:hidden;*/
  492. /* display:block;*/
  493. /* overflow-y:scroll;*/
  494. /* margin:25px auto;*/
  495. /* font-size:12px;*/
  496. /* margin-bottom:22px;*/
  497. /* outline:none;*/
  498. /*}*/
  499. /*.install ul{*/
  500. /* line-height:1.8;*/
  501. /*}*/
  502. /*
  503. ===================
  504. 成功提示
  505. ===================
  506. */
  507. .success_tip{
  508. /*border:1px solid #e0e9f0;*/
  509. background:#fff url(../images/install/complete.png) 210px center no-repeat;
  510. padding:50px 80px 50px 300px;
  511. line-height:2;
  512. }
  513. .success_tip a,.s4{
  514. color:#0166a5;
  515. text-decoration:none;
  516. }
  517. .error_tip{
  518. background:url(../images/install/ignore.png) 130px 45px no-repeat;
  519. padding:50px 80px 60px 230px;
  520. }
  521. /*founder login*/
  522. .login{
  523. border:1px solid #e0e9f0;
  524. background:#fff;
  525. margin:30px 120px 130px;
  526. }
  527. /*
  528. ===================
  529. 操作提示
  530. >> tips 普通
  531. >> tips_error 错误
  532. >> tips_success 正确
  533. >> tips_loading 加载中
  534. 使用方法
  535. 可独立样式使用,亦可与tips组装,例:
  536. <div class="tips"><span class="tips_error">错误内容</span></div>
  537. 可在外出包裹 tips_block 对错误提示进行块级效果展示
  538. ===================
  539. */
  540. .tips,
  541. .tips_block span{
  542. line-height:25px;
  543. padding:0 6px;
  544. }
  545. .tips{
  546. border:1px solid #faebd2;
  547. background:#ffffe9;
  548. color:#666;
  549. }
  550. .tips_error,
  551. .tips_success{
  552. font-size: 12px;
  553. padding-left:16px;
  554. display:inline-block;
  555. line-height:18px;
  556. }
  557. .tips_error{
  558. background:url(../images/install/warring.png) 0px 3px no-repeat;
  559. color: #fff;
  560. background-size: 12px 12px;
  561. }
  562. .tips_success{
  563. color: #37CA71;
  564. background:url(../images/install/success.png) 0px 3px no-repeat;
  565. background-size: 12px 12px;
  566. }
  567. .tips_loading{
  568. color:#37CA71;
  569. display:inline-block;
  570. line-height:20px;
  571. }
  572. /*
  573. ===================
  574. loading
  575. ===================
  576. */
  577. .loading{
  578. border-radius: 16px;
  579. width: 100px;
  580. height: 30px;
  581. line-height: 30px;
  582. text-align: center;
  583. background:#000;
  584. background-color: rgba(0, 0, 0, 0.5);
  585. color: white;
  586. position: fixed;
  587. _position:absolute;
  588. left: 50%;
  589. margin-left: -50px;
  590. top: 50%;
  591. margin-top:-15px;
  592. }
  593. .loading span{
  594. background:url(../images/install/pop_loading.gif) 0 center no-repeat;
  595. padding-left:24px;
  596. }
  597. /*
  598. ===================
  599. 升级类型选择
  600. ===================
  601. */
  602. .updata_type{
  603. padding:20px 30px 40px;
  604. }
  605. .updata_type .hd{
  606. font-size:16px;
  607. }
  608. /*切换选择*/
  609. .updata_type .tab{
  610. padding-top:10px;
  611. }
  612. .updata_type .tab li{
  613. float:left;
  614. width:50%;
  615. display:inline;
  616. }
  617. .updata_type .tab li a{
  618. display:block;
  619. text-decoration:none;
  620. border:1px solid #ccc;
  621. text-align:center;
  622. height:60px;
  623. line-height:60px;
  624. font-weight:700;
  625. background:#fff url(../images/install/tab.png);
  626. color:#246EA5;
  627. font-size:22px;
  628. font-weight:100;
  629. }
  630. .updata_type .tab li a.fen{
  631. line-height:50px;
  632. border-right:0;
  633. }
  634. .updata_type .tab li a span{
  635. display:block;
  636. font-size:12px;
  637. color:#999;
  638. line-height:18px;
  639. margin-top:-12px;
  640. font-weight:100;
  641. }
  642. .updata_type .tab li.current a{
  643. background:#fdfdfd;
  644. color:#6F7885;
  645. border-bottom:1px solid #fdfdfd;
  646. }
  647. .updata_type .tab_cont{
  648. border:1px solid #ccc;
  649. border-top:0 none;
  650. padding:30px;
  651. background:#fdfdfd;
  652. box-shadow:1px 1px 1px #fff inset,-1px -1px 1px #fff inset;
  653. }
  654. .updata_type .tab_cont h3{
  655. font-size:16px;
  656. margin-bottom:15px;
  657. }
  658. .updata_type .tab_cont h3 span{
  659. font-size:12px;
  660. font-weight:100;
  661. color:#666;
  662. }
  663. .updata_type .tab_cont h4{
  664. font-size:14px;
  665. }
  666. .updata_type .tab_cont h4 span{
  667. padding-left:10px;
  668. font-size:12px;
  669. font-weight:100;
  670. color:#f60;
  671. }
  672. .updata_type .tab_cont ol li{
  673. margin-bottom:10px;
  674. }
  675. .updata_type .tab_cont div{
  676. color:#666;
  677. padding-left:20px;
  678. }
  679. .updata_type .tab_cont ul li{
  680. margin:0;
  681. padding-left:50px;
  682. list-style:none;
  683. color:#666;
  684. }
  685. /*立即升级*/
  686. .once_updata{
  687. text-align:center;
  688. padding:100px 0;
  689. }
  690. .once_updata button{
  691. font-size:32px;
  692. font-weight:700;
  693. background:#186196 url(../images/install/header.png) repeat-x;
  694. color:#fff;
  695. padding:30px 80px;
  696. font-weight:100;
  697. font-family:"Microsoft Yahei";
  698. border:1px solid #186196;
  699. cursor:pointer;
  700. letter-spacing:2px;
  701. }
  702. .bottom{
  703. width: 110px;
  704. height: 32px;
  705. background: #FFFFFF;
  706. border-radius: 137px 137px 137px 137px;
  707. font-size: 14px;
  708. line-height: 32px;
  709. margin: 0 auto;
  710. margin-top: 20px;
  711. cursor: pointer;
  712. text-align: center;
  713. }