You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

716 lines
12 KiB

1 year ago
  1. .nav .new,
  2. .wapnava .new,
  3. .nava.bbs {
  4. display: flex;
  5. align-items: center;
  6. }
  7. .nava.bbs .icon {
  8. width: 20px;
  9. height: 20px;
  10. margin-right: 6px;
  11. background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAg1JREFUWEftlz9IG1Ecx7+/d63dOwqV6GhXm1i6mM1SyB+sYCfzZ5WCg1BxMF26OHQodGoucXATw6WC2eKYswiC6NAqdhBxFLpU7L1fueKFmF4uL3eSZMiDW+5+fz7v+37v/d4Rejyox/nRfwDPtjNj2o0cCarMb+DgIFm8ahenrkDEyM6B+TUIM+2cFL//AiFvxvRFL/s6QNjI7BAwrRhc2YykjNaSxd1WDg0KZFg5ageGDOT24vr7AYBfBU5AfK6sOFMIgP3Uh/8lIN43Y4UJ5eQAJkupEAtx5gYQLqffCIseWUOy8u1V8dKx8SxCBjYA/FCFEMBTBmbdACLldBVMUwB+gmjNjOU/23Zd2wXPK9nHfM0vJfCRiI/MWCHaVQBHFUcJM67/m7yHAnRELLO1RMF0W4Lb9a42F12zbXMRdgAAEOEtLHnoBsCaNg7mFQDDXjUSCEC1+AYAAwU8FLgC8wszUTj2sQ2DlSATfRUWb9WSerExkvI2ZKBkSWtpP7l+GgzlrrcSgFsHsw8eKcS8HxgBnNTiut1X0BqgnK4yiydgXtpL6KXmRGEjs0pAzg/Arc+m9vDBO+vPzRe7Kf13FKsEniyl7G7W8WBNzIORAnAB4u++ATrO3OAQMdIfAFp2XvlSIAiA7Rs2sgsE/mTfCcy4PnqnGwYNrurvLKNzVe+/XzPVmdyXXc8V+Av1tCwwyQQB+wAAAABJRU5ErkJggg==');
  12. background-position: center;
  13. background-repeat: no-repeat;
  14. background-size: cover;
  15. border-radius: 2px;
  16. image-rendering: -webkit-optimize-contrast;
  17. display: none;
  18. }
  19. .wapnava .new .icon,
  20. .nav .new .icon {
  21. width: 28px;
  22. height: 28px;
  23. margin-right: 4px;
  24. image-rendering: -webkit-optimize-contrast;
  25. }
  26. .head_pc {
  27. background-color: #fff;
  28. position: relative;
  29. z-index: 2;
  30. }
  31. canvas {
  32. height: 100%;
  33. width: 100%;
  34. position: absolute;
  35. top: 0;
  36. z-index: 0;
  37. opacity: 0.5;
  38. }
  39. .top-tips {
  40. z-index: 1;
  41. }
  42. .wrap {
  43. padding: 0;
  44. }
  45. .d1 {
  46. background: linear-gradient(0deg, #fff, #d8efdb, #edf7ef);
  47. padding-bottom: 60px;
  48. position: relative;
  49. }
  50. .d1 .wrap {
  51. padding-top: 60px;
  52. position: relative;
  53. z-index: 1;
  54. }
  55. .d2 .wrap,
  56. .d3 .wrap,
  57. .d4 .wrap {
  58. padding: 70px 0;
  59. }
  60. .install-box {
  61. position: relative;
  62. top: 0;
  63. display: flex;
  64. align-items: center;
  65. width: 24%;
  66. padding: 30px 10px 16px 20px;
  67. border-radius: 8px;
  68. background-color: #fff;
  69. box-shadow: 0 4px 8px 0 rgb(0 0 0 / 30%);
  70. transition: all 0.3s;
  71. }
  72. .install-box:hover {
  73. box-shadow: 0 6px 16px 0 rgb(0 0 0 / 50%);
  74. top: -10px;
  75. }
  76. .install-box.linux,
  77. .install-box.windows {
  78. align-items: center;
  79. width: 41.5%;
  80. }
  81. .install-box + .install-box {
  82. margin-left: 2%;
  83. }
  84. .install-box::before {
  85. content: '';
  86. position: absolute;
  87. top: 20px;
  88. right: 0;
  89. bottom: 0;
  90. width: 100%;
  91. background-repeat: no-repeat;
  92. background-position: right bottom;
  93. background-size: auto 100%;
  94. z-index: 10;
  95. transition: all 0.25s;
  96. opacity: 0.3;
  97. }
  98. .install-box.linux::before {
  99. background-image: url(../images/downico1_01.png);
  100. }
  101. .install-box.windows::before {
  102. background-image: url(../images/downico2_01.png);
  103. }
  104. .install-box.cloud::before {
  105. background-image: url(../images/downico3_01.png);
  106. }
  107. .install-box.ssh::before {
  108. background-image: url(../images/downico4_01.png);
  109. }
  110. .install-box.app::before {
  111. background-image: url(../images/downico5_01.png);
  112. }
  113. .install-box .img {
  114. position: relative;
  115. flex: 0 0 44%;
  116. z-index: 12;
  117. }
  118. .install-box .img img {
  119. display: block;
  120. width: 100%;
  121. }
  122. .install-box .cont {
  123. flex: 1;
  124. position: relative;
  125. display: flex;
  126. flex-direction: column;
  127. justify-content: space-between;
  128. margin-left: 5%;
  129. padding-bottom: 12px;
  130. z-index: 12;
  131. }
  132. .install-box.linux .cont,
  133. .install-box.windows .cont {
  134. padding-bottom: 10px;
  135. }
  136. .install-box .bottom {
  137. display: flex;
  138. margin: 0 auto;
  139. }
  140. .install-box .title {
  141. margin-bottom: 14px;
  142. line-height: 1;
  143. font-size: 20px;
  144. font-weight: bold;
  145. transition: color 0.25s;
  146. }
  147. .install-box.linux .title,
  148. .install-box.windows .title {
  149. font-size: 28px;
  150. }
  151. .install-box .desc {
  152. margin-bottom: 14px;
  153. font-size: 12px;
  154. color: #777;
  155. transition: color 0.25s;
  156. }
  157. .install-box.linux .desc,
  158. .install-box.windows .desc {
  159. font-size: 14px;
  160. }
  161. .install-box .mark {
  162. margin-bottom: 20px;
  163. height: 22px;
  164. overflow: hidden;
  165. }
  166. .install-box .mark span {
  167. margin-right: 10px;
  168. line-height: 22px;
  169. height: 22px;
  170. padding: 0 6px;
  171. font-size: 12px;
  172. border-radius: 2px;
  173. display: inline-block;
  174. }
  175. .install-box .mark span:nth-child(1) {
  176. border: #6bdc6b 1px solid;
  177. color: #fff;
  178. background-color: #6bdc6b;
  179. }
  180. .install-box .mark span:nth-child(2) {
  181. border: #ffa565 1px solid;
  182. color: #fff;
  183. background-color: #ffa565;
  184. }
  185. .install-box .mark span:nth-child(3) {
  186. border: #65a7ff 1px solid;
  187. color: #fff;
  188. background-color: #65a7ff;
  189. }
  190. .install-box .mark span:last-child {
  191. margin-right: 0;
  192. }
  193. .install-box .btn {
  194. display: flex;
  195. align-items: center;
  196. justify-content: center;
  197. height: 34px;
  198. padding: 0 16px;
  199. background-image: linear-gradient(#54b891, #22a53d);
  200. border-radius: 6px;
  201. color: #fff;
  202. font-size: 14px;
  203. font-weight: 700;
  204. line-height: 1;
  205. border: none;
  206. }
  207. .install-box .btn.default {
  208. margin-left: 10px;
  209. background: none;
  210. border: 1px solid #777;
  211. color: #777;
  212. }
  213. .install-box .btn:hover {
  214. filter: brightness(120%);
  215. -webkit-filter: brightness(120%);
  216. }
  217. .install-box:hover {
  218. background-image: linear-gradient(#e5f5e5, #fff);
  219. }
  220. .wrap-title {
  221. display: flex;
  222. flex-wrap: wrap;
  223. align-items: center;
  224. margin-bottom: 50px;
  225. }
  226. .wrap-title::before {
  227. content: '';
  228. display: block;
  229. width: 6px;
  230. height: 36px;
  231. margin-right: 20px;
  232. background-color: #20a53a;
  233. }
  234. .wrap-title .text {
  235. margin-right: 20px;
  236. line-height: 36px;
  237. font-size: 36px;
  238. font-weight: bold;
  239. }
  240. .wrap-title a {
  241. font-size: 16px;
  242. }
  243. .d2 .desc,
  244. .d2 .tips,
  245. .d4 .tips {
  246. line-height: 30px;
  247. }
  248. .d2 .desc {
  249. margin-bottom: 16px;
  250. }
  251. .d2 .tips,
  252. .d4 .tips {
  253. margin-top: 16px;
  254. /* color: #20a53a; */
  255. }
  256. .install-code {
  257. display: flex;
  258. flex-wrap: wrap;
  259. align-items: center;
  260. line-height: 30px;
  261. }
  262. .install-code .osname {
  263. display: inline-block;
  264. width: 160px;
  265. font-weight: 700;
  266. }
  267. .install-code + .install-code {
  268. margin-top: 16px;
  269. }
  270. .install-code .code-cont {
  271. display: flex;
  272. align-items: center;
  273. }
  274. .install-code .command {
  275. position: relative;
  276. display: flex;
  277. margin-left: 12px;
  278. margin-right: 15px;
  279. padding: 7px 10px;
  280. border-radius: 3px;
  281. background-color: #20202f;
  282. box-shadow: 0 0 5px #ececec;
  283. font-size: 16px;
  284. color: #fff;
  285. font-family: SimSun;
  286. width: 950px;
  287. }
  288. .install-code .ico-copy {
  289. display: block;
  290. width: 26px;
  291. height: 30px;
  292. background: url(../images/ico-copy.png) no-repeat left center;
  293. cursor: pointer;
  294. width: 65px;
  295. text-indent: 2.4em;
  296. font-weight: bold;
  297. color: #20a53a;
  298. }
  299. .d4 .desc {
  300. margin-bottom: 16px;
  301. line-height: 30px;
  302. }
  303. .bird {
  304. width: 25px;
  305. height: 5px;
  306. display: inline-block;
  307. position: absolute;
  308. transform: skew(20deg, 20deg);
  309. animation: wave 2.5s ease-in-out infinite;
  310. z-index: 0;
  311. }
  312. .bird:before,
  313. .bird:after {
  314. content: '';
  315. width: 100%;
  316. height: 100%;
  317. background-color: #1aa837;
  318. position: absolute;
  319. border-radius: 20%;
  320. opacity: 0.1;
  321. }
  322. .bird:before {
  323. right: 49%;
  324. transform-origin: right;
  325. transform: rotate(-40deg);
  326. animation: flap-left 0.75s ease-in-out infinite;
  327. }
  328. .bird:after {
  329. left: 49%;
  330. transform-origin: left;
  331. transform: rotate(40deg);
  332. animation: flap-right 0.75s linear infinite;
  333. }
  334. /* ��װ�ű� */
  335. .layui-layer .install-code {
  336. display: flex;
  337. flex-wrap: wrap;
  338. line-height: 30px;
  339. }
  340. .layui-layer .install-code .osname {
  341. display: inline-block;
  342. width: 160px;
  343. font-weight: 700;
  344. margin: 20px auto;
  345. font-size: 18px;
  346. }
  347. .layui-layer .install-code + .install-code {
  348. margin-top: 16px;
  349. }
  350. .layui-layer .install-code .code-cont {
  351. display: flex;
  352. align-items: center;
  353. }
  354. .layui-layer .install-code .command {
  355. position: relative;
  356. display: flex;
  357. margin-right: 15px;
  358. padding: 7px 10px;
  359. border-radius: 3px;
  360. background-color: #20202f;
  361. box-shadow: 0 0 5px #ececec;
  362. color: #fff;
  363. font-family: SimSun;
  364. width: 950px;
  365. }
  366. .layui-layer .install-code .ico-copy {
  367. display: block;
  368. width: 26px;
  369. height: 30px;
  370. background: url(../images/ico-copy.png) no-repeat left center;
  371. cursor: pointer;
  372. width: 65px;
  373. text-indent: 2.4em;
  374. font-weight: bold;
  375. color: #20a53a;
  376. }
  377. .layui-layer .install-code {
  378. flex-direction: column;
  379. align-items: flex-start;
  380. }
  381. .layui-layer .install-code .code-cont {
  382. width: 100%;
  383. }
  384. .layui-layer .install-code .command {
  385. flex: 1;
  386. width: 0;
  387. margin-left: 0;
  388. line-height: 30px;
  389. font-size: 12px;
  390. word-break: break-all;
  391. }
  392. @keyframes wave {
  393. 40% {
  394. transform: translateY(40px) skew(20deg, 20deg);
  395. }
  396. 50% {
  397. transform: translateY(50px) skew(20deg, 20deg);
  398. }
  399. 60% {
  400. transform: translateY(40px) skew(20deg, 20deg);
  401. }
  402. 100% {
  403. transform: translateY(0) skew(20deg, 20deg);
  404. }
  405. }
  406. @keyframes flap-left {
  407. 60% {
  408. transform: rotate(10deg);
  409. }
  410. 75% {
  411. transform: rotate(20deg);
  412. }
  413. 100% {
  414. transform: rotate(-40deg);
  415. }
  416. }
  417. @keyframes flap-right {
  418. 60% {
  419. transform: rotate(-10deg);
  420. }
  421. 75% {
  422. transform: rotate(-20deg);
  423. }
  424. 100% {
  425. transform: rotate(40deg);
  426. }
  427. }
  428. @media screen and (max-width: 1440px) {
  429. .wrap {
  430. width: 97%;
  431. }
  432. }
  433. @media only screen and (max-width: 1299px) {
  434. .d2 .wrap,
  435. .d3 .wrap,
  436. .d4 .wrap {
  437. padding: 60px 0;
  438. }
  439. }
  440. @media only screen and (max-width: 980px) {
  441. .install-code {
  442. flex-direction: column;
  443. align-items: flex-start;
  444. }
  445. .install-code .code-cont {
  446. width: 100%;
  447. }
  448. .install-code .command {
  449. flex: 1;
  450. width: 0;
  451. margin-left: 0;
  452. line-height: 18px;
  453. font-size: 12px;
  454. word-break: break-all;
  455. }
  456. .d2 .desc,
  457. .d2 .tips {
  458. line-height: 24px;
  459. }
  460. }
  461. @media only screen and (max-width: 768px) {
  462. .d2 .wrap,
  463. .d3 .wrap,
  464. .d4 .wrap {
  465. padding: 40px 0;
  466. }
  467. .d1 .wrap {
  468. padding-top: 40px;
  469. }
  470. .wrap-title {
  471. margin-bottom: 20px;
  472. }
  473. .wrap-title::before {
  474. width: 3px;
  475. height: 20px;
  476. margin-right: 10px;
  477. }
  478. .wrap-title .text {
  479. font-size: 20px;
  480. margin-right: 10px;
  481. }
  482. .wrap-title a {
  483. font-size: 12px;
  484. }
  485. }
  486. @media screen and (max-width: 1440px) {
  487. .wrap {
  488. width: 97%;
  489. }
  490. }
  491. @media only screen and (max-width: 1299px) {
  492. .d2 .wrap,
  493. .d3 .wrap,
  494. .d4 .wrap {
  495. padding: 60px 0;
  496. }
  497. .install-box {
  498. padding: 24px 20px 10px;
  499. padding-right: 0;
  500. }
  501. .install-box.linux .title,
  502. .install-box.windows .title,
  503. .install-box .title {
  504. margin-bottom: 10px;
  505. font-size: 20px;
  506. }
  507. .install-box .img {
  508. flex: 0 0 40%;
  509. }
  510. .install-box.linux .title,
  511. .install-box.windows .title {
  512. margin-bottom: 16px;
  513. }
  514. .install-box .desc {
  515. font-size: 13px;
  516. }
  517. .install-box .btn {
  518. padding: 0 12px;
  519. height: 30px;
  520. border-radius: 8px;
  521. font-size: 12px;
  522. }
  523. }
  524. @media only screen and (max-width: 1200px) {
  525. .install-box .title {
  526. font-size: 16px;
  527. }
  528. .install-box .desc {
  529. font-size: 12px;
  530. }
  531. }
  532. @media only screen and (max-width: 980px) {
  533. .install-list {
  534. justify-content: flex-start;
  535. flex-wrap: wrap;
  536. }
  537. .install-box,
  538. .install-box.linux,
  539. .install-box.windows {
  540. width: 48%;
  541. padding: 15px;
  542. align-items: center;
  543. }
  544. .install-box:nth-child(2n) {
  545. margin-left: 4%;
  546. }
  547. .install-box.app {
  548. margin-top: 30px;
  549. margin-left: 0;
  550. }
  551. .install-box.monitor {
  552. margin-top: 30px;
  553. }
  554. .install-box.linux .title,
  555. .install-box.windows .title,
  556. .install-box .title {
  557. font-size: 16px;
  558. }
  559. .install-box .btn {
  560. height: 24px;
  561. padding: 0 10px;
  562. border-radius: 6px;
  563. font-weight: normal;
  564. }
  565. .install-box .btn + .btn {
  566. margin-left: 5px;
  567. }
  568. .install-code {
  569. flex-direction: column;
  570. align-items: flex-start;
  571. }
  572. .install-code .code-cont {
  573. width: 100%;
  574. }
  575. .install-code .command {
  576. flex: 1;
  577. width: 0;
  578. margin-left: 0;
  579. line-height: 18px;
  580. font-size: 12px;
  581. word-break: break-all;
  582. }
  583. .online-install-cont {
  584. flex-direction: column;
  585. }
  586. .online-install-cont .form {
  587. margin-bottom: 20px;
  588. }
  589. .online-install-cont .pr-70 {
  590. padding-right: 0;
  591. }
  592. .online-install-cont .pl-10 {
  593. padding-left: 0;
  594. }
  595. .online-install-cont .first-line {
  596. flex-wrap: wrap;
  597. }
  598. .online-install-cont .server-line {
  599. width: 100%;
  600. flex: none;
  601. }
  602. .online-install-cont .port-line {
  603. flex: none;
  604. margin-top: 20px;
  605. width: 100%;
  606. }
  607. .d2 .desc,
  608. .d2 .tips {
  609. line-height: 24px;
  610. }
  611. }
  612. @media only screen and (max-width: 768px) {
  613. .d2 .wrap,
  614. .d3 .wrap,
  615. .d4 .wrap {
  616. padding: 40px 0;
  617. }
  618. .d1 .wrap {
  619. padding-top: 40px;
  620. }
  621. .install-box {
  622. flex-wrap: wrap;
  623. }
  624. .install-box .img,
  625. .install-box .cont {
  626. flex: 0 0 100%;
  627. }
  628. .install-box .cont {
  629. margin-top: 10px;
  630. margin-left: 0;
  631. padding: 0;
  632. }
  633. .install-box .title,
  634. .install-box.linux .title,
  635. .install-box.windows .title {
  636. margin-bottom: 10px;
  637. }
  638. .install-box .desc {
  639. margin-bottom: 10px;
  640. }
  641. .wrap-title {
  642. margin-bottom: 20px;
  643. }
  644. .wrap-title::before {
  645. width: 3px;
  646. height: 20px;
  647. margin-right: 10px;
  648. }
  649. .wrap-title .text {
  650. font-size: 20px;
  651. margin-right: 10px;
  652. }
  653. .wrap-title a {
  654. font-size: 12px;
  655. }
  656. }