cokingCoalD.css 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687
  1. *,
  2. *:before,
  3. *:after {
  4. padding: 0;
  5. margin: 0;
  6. box-sizing: border-box;
  7. }
  8. html,
  9. body {
  10. height: 100%;
  11. font-size: 14px;
  12. background-color: #ecffff;
  13. font-family: 'Microsoft YaHei', 'Helvetica Neue', Helvetica, 'PingFang SC',
  14. 'Hiragino Sans GB', Arial, sans-serif;
  15. }
  16. .flex {
  17. display: flex;
  18. }
  19. .flex1 {
  20. flex: 1;
  21. }
  22. .flex2 {
  23. flex: 2;
  24. }
  25. .flex-around {
  26. display: flex;
  27. justify-content: space-around;
  28. }
  29. .flex-between {
  30. display: flex;
  31. justify-content: space-between;
  32. align-items: center;
  33. }
  34. .flex-end {
  35. display: flex;
  36. justify-content: flex-end;
  37. }
  38. .flex-align-center {
  39. display: flex;
  40. align-items: center;
  41. }
  42. .text-center {
  43. text-align: center;
  44. }
  45. .font12 {
  46. font-size: 12px;
  47. }
  48. .main-color {
  49. color: #0bf1ff;
  50. }
  51. .danger-color {
  52. color: #f15450 !important;
  53. }
  54. .error-color {
  55. color: #ffc704 !important;
  56. }
  57. .btm10 {
  58. margin-bottom: 10px;
  59. }
  60. .btm20 {
  61. margin-bottom: 20px;
  62. }
  63. a {
  64. text-decoration: none;
  65. cursor: pointer;
  66. }
  67. [v-cloak] {
  68. display: none;
  69. }
  70. #app {
  71. background: url('../images/top-back.png') center center no-repeat;
  72. background-size: 100% 100%;
  73. padding-top: 10px;
  74. height: 100vh;
  75. overflow: hidden;
  76. color: #fff;
  77. }
  78. .my-header {
  79. height: 70px;
  80. line-height: 70px;
  81. background: url('../images/title-back.png') center center no-repeat;
  82. background-size: 100% 100%;
  83. color: #0bf1ff;
  84. text-align: center;
  85. font-size: 25px;
  86. font-weight: 600;
  87. }
  88. .my-header span {
  89. background-image: -webkit-linear-gradient(top, #fff, #99eeff);
  90. -webkit-background-clip: text;
  91. -webkit-text-fill-color: transparent;
  92. }
  93. .main {
  94. padding: 15px;
  95. height: calc(100% - 70px);
  96. background-size: 80%;
  97. padding-bottom: 65px;
  98. display: grid;
  99. grid-template-columns: repeat(3, minmax(0, 1fr));
  100. grid-template-rows: repeat(2, minmax(0, 1fr));
  101. gap: 20px;
  102. }
  103. .center-item {
  104. background: url('../images/center-border.png') no-repeat;
  105. background-size: 100% 100%;
  106. }
  107. .center-title {
  108. height: 15%;
  109. width: 90%;
  110. margin-bottom: 4% !important;
  111. }
  112. .arrow {
  113. width: 17px;
  114. height: 34px;
  115. margin-right: 5px;
  116. }
  117. .center1-footer {
  118. width: 90%;
  119. height: 70%;
  120. padding: 0 2%;
  121. }
  122. .footer {
  123. position: fixed;
  124. bottom: 0;
  125. padding: 10px;
  126. display: flex;
  127. background-color: rgba(0, 0, 0, 0.5);
  128. width: 100%;
  129. background: url('../images/foot-back.png') no-repeat center bottom;
  130. background-size: 100% 100%;
  131. }
  132. .footer a {
  133. height: 40px;
  134. line-height: 40px;
  135. text-align: center;
  136. color: #fff;
  137. background: url('../images/footer-item.png') no-repeat;
  138. background-size: 100% 100%;
  139. width: 200px;
  140. }
  141. .footer a:hover {
  142. background: url('../images/footer-item-checked.png') no-repeat;
  143. background-size: 100% 100%;
  144. }
  145. .header-item {
  146. color: #69c0ff;
  147. }
  148. .row-item .ceil:nth-child(2) {
  149. width: 100px !important;
  150. margin-left: 80px;
  151. display: grid;
  152. grid-template-columns: repeat(2, minmax(0, 1fr));
  153. }
  154. .red {
  155. color: #ed3248;
  156. display: flex;
  157. align-items: center;
  158. }
  159. .green {
  160. color: #39f6b2;
  161. display: flex;
  162. align-items: center;
  163. }
  164. .redImg {
  165. display: inline-block;
  166. background: url('../images/up.png') no-repeat;
  167. background-size: 100% 100%;
  168. width: 15px;
  169. height: 14px;
  170. flex-shrink: 0;
  171. margin-left: 10px;
  172. }
  173. .greedImg {
  174. display: inline-block;
  175. background: url('../images/down2.png') no-repeat center;
  176. background-size: 100% 100%;
  177. width: 15px;
  178. height: 14px;
  179. flex-shrink: 0;
  180. margin-left: 10px;
  181. }
  182. .row-item .ceil:nth-child(2):after {
  183. content: '';
  184. background-size: 100% 100%;
  185. width: 15px;
  186. height: 15px;
  187. top: 16px;
  188. left: 10px;
  189. position: relative;
  190. display: inline-block;
  191. }
  192. .listText {
  193. width: 50px;
  194. flex-shrink: 0;
  195. }
  196. .el-progress-bar__outer {
  197. background-color: #102f53;
  198. overflow: visible;
  199. }
  200. .list {
  201. list-style-type: none;
  202. }
  203. .center1-footer > .list {
  204. width: 100%;
  205. padding: 0 5%;
  206. }
  207. .list {
  208. height: 80%;
  209. }
  210. .list-item {
  211. display: flex;
  212. align-items: center;
  213. }
  214. .list-item i.num {
  215. font-size: 20px;
  216. margin-right: 10px;
  217. }
  218. .list > .list-item:nth-child(1) .el-progress-bar__inner,
  219. .list .list-item:first-child .serial {
  220. background: linear-gradient(to right, #092854, #40a8fe);
  221. }
  222. .list > .list-item:nth-child(2) .el-progress-bar__inner,
  223. .list .list-item:nth-child(2) .serial {
  224. background: linear-gradient(to right, #0b2855, #5d78e3);
  225. }
  226. .list > .list-item:nth-child(3) .el-progress-bar__inner,
  227. .list .list-item:nth-child(3) .serial {
  228. background: linear-gradient(to right, #0a2a54, #3fc9c1);
  229. }
  230. .list > .list-item:nth-child(4) .el-progress-bar__inner,
  231. .list .list-item:nth-child(4) .serial {
  232. background: linear-gradient(to right, #0a2a54, #ca8317);
  233. }
  234. .list > .list-item:nth-child(5) .el-progress-bar__inner,
  235. .list .list-item:nth-child(5) .serial {
  236. background: linear-gradient(to right, #0a2a54, #9c1765);
  237. }
  238. .el-progress {
  239. width: 250px;
  240. }
  241. .serial {
  242. width: 40px;
  243. height: 40px;
  244. line-height: 40px;
  245. background-color: #163a5d;
  246. /* color: #69c0ff; */
  247. color: #fff;
  248. font-style: italic;
  249. font-weight: bold;
  250. text-align: center;
  251. margin-right: 10px;
  252. border-radius: 5px;
  253. }
  254. .el-progress__text {
  255. color: #69c0ff;
  256. }
  257. .aiQuality {
  258. width: 90%;
  259. height: 70%;
  260. padding-top: 0.2%;
  261. margin: 0 auto;
  262. }
  263. .top-title1,
  264. .top-title2,
  265. .top-title3 {
  266. width: 270px;
  267. height: 50px;
  268. line-height: 50px;
  269. left: 180px;
  270. top: 65px;
  271. background: url('../images/title.png') no-repeat;
  272. background-size: 100% 100%;
  273. padding-left: 50px;
  274. }
  275. .my-header span.right {
  276. position: absolute;
  277. right: 100px;
  278. bottom: 10px;
  279. font-size: 14px;
  280. }
  281. /* zhb */
  282. /* 宽高纵横比 */
  283. .aspect-auto {
  284. aspect-ratio: auto;
  285. }
  286. .aspect-square {
  287. aspect-ratio: 1 / 1;
  288. }
  289. .aspect-video {
  290. aspect-ratio: 16 / 9;
  291. }
  292. /* aspect-[4/3] */
  293. /* 居中 */
  294. .mx-auto {
  295. margin: 0 auto;
  296. }
  297. /* 设置容器内的列数/每列距离 */
  298. .columns-1 {
  299. columns: 1;
  300. }
  301. /* columns-[20px] */
  302. /* 盒子模型 */
  303. .box-border {
  304. box-sizing: border-box;
  305. }
  306. .box-content {
  307. box-sizing: content-box;
  308. }
  309. /* 消失 */
  310. .hidden {
  311. display: none;
  312. }
  313. /* 块级元素 */
  314. .block {
  315. display: block;
  316. }
  317. /* 行内块 */
  318. .inline-block {
  319. display: inline-block;
  320. }
  321. /* 行内元素 */
  322. .inline {
  323. display: inline;
  324. }
  325. /* 弹性布局 */
  326. .flex {
  327. display: flex;
  328. }
  329. /* 主轴起点在左边 */
  330. .flex-row {
  331. flex-direction: row;
  332. }
  333. /* 主轴起点在右边 */
  334. .flex-row-reverse {
  335. flex-direction: row-reverse;
  336. }
  337. /* 主轴竖向排列,在上面 */
  338. .flex-col {
  339. flex-direction: column;
  340. }
  341. /* 主轴竖向排列,在下面 */
  342. .flex-col-reverse {
  343. flex-direction: column-reverse;
  344. }
  345. /* 自动换行 */
  346. .flex-wrap {
  347. flex-wrap: wrap;
  348. }
  349. /* 自动换行下起点 */
  350. .flex-wrap-reverse {
  351. flex-wrap: wrap-reverse;
  352. }
  353. /* 不换行 */
  354. .flex-nowrap {
  355. flex-wrap: nowrap;
  356. }
  357. /* 弹性成长 */
  358. .grow {
  359. flex-grow: 1;
  360. }
  361. /* 不允许弹性成长 */
  362. .grow-0 {
  363. flex-grow: 0;
  364. }
  365. /* 主轴从左开始 */
  366. .justify-start {
  367. justify-content: flex-start;
  368. }
  369. /* 主轴从右开始 */
  370. .justify-end {
  371. justify-content: flex-end;
  372. }
  373. /* 主轴剧中 */
  374. .justify-center {
  375. justify-content: center;
  376. }
  377. /* 主轴两端无间隔 */
  378. .justify-between {
  379. justify-content: space-between;
  380. }
  381. /* 主轴两端有间隔 */
  382. .justify-around {
  383. justify-content: space-around;
  384. }
  385. /* 所有间隔相等 */
  386. .justify-evenly {
  387. justify-content: space-evenly;
  388. }
  389. /* 纵向起点最上方 */
  390. .items-start {
  391. align-items: flex-start;
  392. }
  393. /* 纵向起点最下方 */
  394. .items-end {
  395. align-items: flex-end;
  396. }
  397. .items-center {
  398. align-items: center;
  399. }
  400. /* 网格布局 */
  401. .grid {
  402. display: grid;
  403. }
  404. /* 有几列 */
  405. .grid-cols-4 {
  406. grid-template-columns: repeat(4, minmax(0, 1fr));
  407. }
  408. /* 有几行 */
  409. .grid-rows-3 {
  410. grid-template-rows: repeat(3, minmax(0, 1fr));
  411. }
  412. /* 间距 */
  413. .gap-7 {
  414. gap: 1.75rem;
  415. }
  416. /* 允许弹性成长 */
  417. .shrink {
  418. flex-shrink: 1;
  419. }
  420. /* 不允许弹性成长 */
  421. .shrink-0 {
  422. flex-shrink: 0;
  423. }
  424. /* 不允许成长也不允许收缩 */
  425. .flex-none {
  426. flex: none;
  427. }
  428. /* 浮动布局 */
  429. .float-right {
  430. float: right;
  431. }
  432. .float-left {
  433. float: left;
  434. }
  435. .clear-both {
  436. clear: both;
  437. }
  438. /* 溢出 */
  439. .overflow-auto {
  440. overflow: auto;
  441. }
  442. .overflow-hidden {
  443. overflow: hidden;
  444. }
  445. .overflow-scroll {
  446. overflow: scroll;
  447. }
  448. .overflow-x-auto {
  449. overflow-x: auto;
  450. }
  451. .overflow-y-auto {
  452. overflow-y: auto;
  453. }
  454. /* 定位 */
  455. .fixed {
  456. position: fixed;
  457. }
  458. .absolute {
  459. position: absolute;
  460. }
  461. .relative {
  462. position: relative;
  463. }
  464. .top-0 {
  465. top: 0px;
  466. }
  467. .right-0 {
  468. right: 0px;
  469. }
  470. .bottom-0 {
  471. bottom: 0px;
  472. }
  473. .left-0 {
  474. left: 0px;
  475. }
  476. /* top-[3px] */
  477. /* z-[100] */
  478. /* 显示隐藏未脱离文档流 */
  479. .visible {
  480. visibility: visible;
  481. }
  482. .invisible {
  483. visibility: hidden;
  484. }
  485. /* 内边距 */
  486. .p-0 {
  487. padding: 0px;
  488. }
  489. .px-0 {
  490. padding-left: 0px;
  491. padding-right: 0px;
  492. }
  493. .py-0 {
  494. padding-top: 0px;
  495. padding-bottom: 0px;
  496. }
  497. .pt-0 {
  498. padding-top: 0px;
  499. }
  500. .pr-0 {
  501. padding-right: 0px;
  502. }
  503. .pb-0 {
  504. padding-bottom: 0px;
  505. }
  506. .pl-0 {
  507. padding-left: 0px;
  508. }
  509. /* p-[5px] */
  510. /* 外边距 */
  511. .m-0 {
  512. margin: 0px;
  513. }
  514. .mx-0 {
  515. margin-left: 0px;
  516. margin-right: 0px;
  517. }
  518. .my-0 {
  519. margin-top: 0px;
  520. margin-bottom: 0px;
  521. }
  522. .mt-0 {
  523. margin-top: 0px;
  524. }
  525. .mr-0 {
  526. margin-right: 0px;
  527. }
  528. .mb-0 {
  529. margin-bottom: 0px;
  530. }
  531. .ml-0 {
  532. margin-left: 0px;
  533. }
  534. /* m-[5px] */
  535. /* 宽度 */
  536. .w-full {
  537. width: 100%;
  538. }
  539. .w-screen {
  540. width: 100vw;
  541. }
  542. /* w-[32rem] */
  543. /* min-w-[50%] */
  544. /* max-w-[50%] */
  545. /* 高度 */
  546. .h-full {
  547. height: 100%;
  548. }
  549. .h-screen {
  550. height: 100vh;
  551. }
  552. /* h-[32rem] */
  553. /* min-h-[50%] */
  554. /* max-h-[32rem] */
  555. /* 字体 */
  556. .text-xs {
  557. font-size: 0.75rem; /* 12px */
  558. line-height: 1rem; /* 16px */
  559. }
  560. .text-sm {
  561. font-size: 0.875rem; /* 14px */
  562. line-height: 1.25rem; /* 20px */
  563. }
  564. .text-base {
  565. font-size: 1rem; /* 16px */
  566. line-height: 1.5rem; /* 24px */
  567. }
  568. .text-lg {
  569. font-size: 1.125rem; /* 18px */
  570. line-height: 1.75rem; /* 28px */
  571. }
  572. .text-xl {
  573. font-size: 1.25rem; /* 20px */
  574. line-height: 1.75rem; /* 28px */
  575. }
  576. .text-2xl {
  577. font-size: 1.5rem; /* 24px */
  578. line-height: 2rem; /* 32px */
  579. }
  580. .text-3xl {
  581. font-size: 1.875rem; /* 30px */
  582. line-height: 2.25rem; /* 36px */
  583. }
  584. .text-4xl {
  585. font-size: 2.25rem; /* 36px */
  586. line-height: 2.5rem; /* 40px */
  587. }
  588. .text-5xl {
  589. font-size: 3rem; /* 48px */
  590. line-height: 1;
  591. }
  592. .text-6xl {
  593. font-size: 3.75rem; /* 60px */
  594. line-height: 1;
  595. }
  596. .text-7xl {
  597. font-size: 4.5rem; /* 72px */
  598. line-height: 1;
  599. }
  600. .text-8xl {
  601. font-size: 6rem; /* 96px */
  602. line-height: 1;
  603. }
  604. .text-9xl {
  605. font-size: 8rem; /* 128px */
  606. line-height: 1;
  607. }
  608. /* text-[14px] */
  609. /* 字体粗细font-weight */
  610. /* font-[1100] */
  611. /* https://tailwindcss.com/docs/font-weight */
  612. /* 字体间距letter-spacing */
  613. /* tracking-[.25em] */
  614. /* 行高line-height */
  615. /* leading-[3rem] */
  616. /* 无列表样式 */
  617. .list-none {
  618. list-style-type: none;
  619. }
  620. /* 小圆点 */
  621. .list-disc {
  622. list-style-type: disc;
  623. }
  624. /* 数字列表 */
  625. .list-decimal {
  626. list-style-type: decimal;
  627. }
  628. .text-left {
  629. text-align: left;
  630. }
  631. .text-center {
  632. text-align: center;
  633. }
  634. .text-right {
  635. text-align: right;
  636. }
  637. /* 所有文本头尾对齐 */
  638. .text-justify {
  639. text-align: justify;
  640. }
  641. /* 文本颜色 */
  642. /* text-[#50d71e] */
  643. /* https://tailwindcss.com/docs/text-color */
  644. /* 下划线 */
  645. .underline {
  646. text-decoration-line: underline;
  647. }
  648. /* 上划线 */
  649. .overline {
  650. text-decoration-line: overline;
  651. }
  652. /* 中划线 */
  653. .line-through {
  654. text-decoration-line: line-through;
  655. }
  656. /* 无划线 */
  657. .no-underline {
  658. text-decoration-line: none;
  659. }
  660. /* 全小写 */
  661. .lowercase {
  662. text-transform: lowercase;
  663. }
  664. /* 全大写 */
  665. .uppercase {
  666. text-transform: uppercase;
  667. }
  668. /* 首字母大写 */
  669. .capitalize {
  670. text-transform: capitalize;
  671. }