index.css 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161
  1. html,
  2. body {
  3. width: 7680px;
  4. min-height: 2120px;
  5. height: 100%;
  6. font-size: 20px;
  7. color: #fff;
  8. font-family: "Microsoft YaHei";
  9. overflow-y: hidden;
  10. }
  11. * {
  12. -webkit-user-select: none;
  13. -moz-user-select: none;
  14. -ms-user-select: none;
  15. user-select: none;
  16. }
  17. img *,
  18. *,
  19. *:before,
  20. *:after {
  21. padding: 0;
  22. margin: 0;
  23. box-sizing: border-box;
  24. }
  25. a {
  26. text-decoration: none;
  27. cursor: pointer;
  28. }
  29. [v-cloak] {
  30. display: none;
  31. }
  32. #app {
  33. background: url("../img/page-bg.png") center center no-repeat;
  34. background-size: 100% 100%;
  35. }
  36. .top {
  37. height: 180px;
  38. width: 100%;
  39. display: grid;
  40. grid-template-columns: repeat(3, 1fr);
  41. gap: 10px;
  42. }
  43. .top > div {
  44. display: flex;
  45. justify-content: center;
  46. align-items: center;
  47. flex-direction: column;
  48. font-size: 48px;
  49. font-weight: bold;
  50. letter-spacing: 5px;
  51. }
  52. .top .title > span:before {
  53. content: "";
  54. display: inline-block;
  55. width: 66px; /*图标宽度*/
  56. height: 42px; /*图标高度*/
  57. background: url("../img/title-left.png") no-repeat center center; /*图标路径*/
  58. background-size: contain; /*图标大小适应*/
  59. margin-right: 20px; /*图标与文字的间距*/
  60. }
  61. .top .title > div {
  62. height: 30px;
  63. width: 40%;
  64. background: url("../img/title-light.png") center bottom no-repeat;
  65. background-size: 100% 100%;
  66. }
  67. .top .title > span:after {
  68. content: "";
  69. display: inline-block;
  70. width: 66px; /*图标宽度*/
  71. height: 42px; /*图标高度*/
  72. background: url("../img/title-right.png") no-repeat center center; /*图标路径*/
  73. background-size: contain; /*图标大小适应*/
  74. margin-left: 20px; /*图标与文字的间距*/
  75. }
  76. .top .mainTitle {
  77. height: 70%;
  78. font-size: 80px;
  79. font-style: oblique;
  80. text-shadow: 2px 3px 1px black;
  81. letter-spacing: 5px;
  82. }
  83. .bottom {
  84. height: calc(100% - 180px);
  85. width: 100%;
  86. display: grid;
  87. grid-template-columns: repeat(3, 1fr);
  88. gap: 10px;
  89. padding: 0 1% 1% 1%;
  90. align-items: end;
  91. position: relative;
  92. }
  93. .left,
  94. .right {
  95. display: grid;
  96. grid-template-columns: repeat(2, 1fr);
  97. grid-template-rows: repeat(3, 1fr);
  98. gap: 10px;
  99. height: 100%;
  100. width: 100%;
  101. overflow: hidden;
  102. }
  103. .left > div,
  104. .center > div,
  105. .right > div {
  106. width: 100%;
  107. height: 100%;
  108. overflow: hidden;
  109. }
  110. .left .title,
  111. .center .title {
  112. width: 100%;
  113. /* height: calc(100% / 7); */
  114. height: 100px;
  115. overflow: hidden;
  116. background: url("../img/small-title.png") no-repeat center bottom; /*图标路径*/
  117. background-size: 100% 50%;
  118. display: flex;
  119. align-items: center;
  120. padding-left: 7%;
  121. font-size: 36px;
  122. font-style: oblique;
  123. text-shadow: 2px 3px 1px black;
  124. letter-spacing: 5px;
  125. }
  126. .left .child > div:nth-child(1):before {
  127. content: "●";
  128. margin-right: 10px;
  129. color: #40a9ff;
  130. }
  131. .left .content,
  132. .center .content {
  133. width: 100%;
  134. height: calc(100% - 100px);
  135. overflow: hidden;
  136. padding: 1%;
  137. }
  138. .left1 {
  139. display: grid;
  140. grid-template-rows: 1fr 1.6fr;
  141. }
  142. .left1 > div:first-child {
  143. display: flex;
  144. align-items: center;
  145. justify-content: space-around;
  146. }
  147. .left1 .child {
  148. width: 47%;
  149. height: 100%;
  150. background: url("../img/left1.png") no-repeat center center; /*图标路径*/
  151. background-size: 100% 100%;
  152. display: grid;
  153. grid-template-columns: repeat(2, 1fr);
  154. grid-template-rows: repeat(3, 1fr);
  155. padding: 1% 3%;
  156. align-items: center;
  157. }
  158. .left1B {
  159. display: grid;
  160. grid-template-columns: 4fr 6fr;
  161. overflow: hidden;
  162. }
  163. .left1B > div:nth-child(1) {
  164. overflow: hidden;
  165. /* background: url("../img/disk.png") no-repeat center center; */
  166. background-size: 100% 100%;
  167. padding-bottom:10% ;
  168. }
  169. .left1C {
  170. display: grid;
  171. grid-template-rows: 1fr 2fr 2fr;
  172. overflow: hidden;
  173. }
  174. .left1C-child {
  175. padding: 1%;
  176. }
  177. .checkBg {
  178. background: url("../img/disk.png") no-repeat center center; /*图标路径*/
  179. background-size: 100% 100%;
  180. }
  181. .left .industryProportion1,
  182. .left2 .industryProportion1 {
  183. background: url("../img/industryProportion.png") no-repeat center center; /*图标路径*/
  184. background-size: 100% 100%;
  185. }
  186. .left .industryProportion2 {
  187. background-color: #1f3152;
  188. }
  189. .left2 .industryProportion2 {
  190. background-color: #264580;
  191. }
  192. .left2 {
  193. display: grid;
  194. grid-template-rows: 3fr 17fr;
  195. }
  196. .left3 {
  197. display: grid;
  198. grid-template-columns: 9fr 11fr;
  199. }
  200. .left4 {
  201. width: 100%;
  202. height: 100%;
  203. overflow: hidden;
  204. position: relative;
  205. display: grid;
  206. grid-template-columns: repeat(2, 1fr);
  207. }
  208. .left4A {
  209. width: 100%;
  210. height: 100%;
  211. overflow: hidden;
  212. position: absolute;
  213. }
  214. .left4A > div,
  215. .bubble {
  216. position: absolute;
  217. animation: moveUpDown 4s infinite;
  218. }
  219. @keyframes moveUpDown {
  220. 0% {
  221. transform: translateY(0);
  222. }
  223. 50% {
  224. transform: translateY(-10px);
  225. }
  226. 100% {
  227. transform: translateY(0);
  228. }
  229. }
  230. .center {
  231. display: grid;
  232. grid-template-columns: 33fr 50fr 33fr;
  233. height: 95%;
  234. width: 100%;
  235. overflow: hidden;
  236. gap: 10px;
  237. position: relative;
  238. }
  239. .center > div:nth-child(1),
  240. .center > div:nth-child(3) {
  241. display: grid;
  242. grid-template-rows: repeat(3, 1fr);
  243. overflow: hidden;
  244. }
  245. .center1 {
  246. display: grid;
  247. grid-template-rows: 7fr 13fr;
  248. overflow: hidden;
  249. }
  250. .center1 > div:nth-child(2) {
  251. background: url("../img/bubbleBg.png") no-repeat center center; /*图标路径*/
  252. background-size: 100% 100%;
  253. }
  254. .center1 > div:nth-child(3) {
  255. background: url("../img/blueBig.png") no-repeat center center; /*图标路径*/
  256. background-size: 100% 100%;
  257. }
  258. .center1 > div:nth-child(4) {
  259. background: url("../img/blueSmall.png") no-repeat center center; /*图标路径*/
  260. background-size: 100% 100%;
  261. }
  262. .center1 > div:nth-child(5) {
  263. background: url("../img/greenSmall.png") no-repeat center center; /*图标路径*/
  264. background-size: 100% 100%;
  265. }
  266. .center1 > div:nth-child(6) {
  267. background: url("../img/greenBig.png") no-repeat center center; /*图标路径*/
  268. background-size: 100% 100%;
  269. }
  270. .center2 {
  271. display: grid;
  272. grid-template-rows: 1fr 6fr;
  273. overflow: hidden;
  274. }
  275. .center2 > div:nth-child(1) > div {
  276. width: 100%;
  277. height: 100%;
  278. overflow: hidden;
  279. }
  280. .center2 > div:nth-child(1) {
  281. display: grid;
  282. grid-template-rows: repeat(2, 1fr);
  283. grid-template-columns: repeat(2, 1fr);
  284. gap: 10px;
  285. overflow: hidden;
  286. }
  287. .center2 > div:nth-child(1) > div{
  288. margin-left: 10%;
  289. background-size: 100% 100%;
  290. overflow: hidden;
  291. padding-left: 40%;
  292. }
  293. .center2 > div:nth-child(1) > div:nth-child(1) {
  294. background: url("../img/centerTop1.png") no-repeat center left; /*图标路径*/
  295. }
  296. .center2 > div:nth-child(1) > div:nth-child(2) {
  297. background: url("../img/centerTop2.png") no-repeat center left; /*图标路径*/
  298. }
  299. .center2 > div:nth-child(1) > div:nth-child(3) {
  300. background: url("../img/centerTop3.png") no-repeat center left; /*图标路径*/
  301. }
  302. .center2 > div:nth-child(1) > div:nth-child(4) {
  303. background: url("../img/centerTop4.png") no-repeat center left; /*图标路径*/
  304. }
  305. .center3{
  306. position: absolute !important;
  307. overflow: hidden;
  308. width: 100%;
  309. height: 100%;
  310. z-index: 1;
  311. top: 0;
  312. left: 0;
  313. opacity: 0.4;
  314. /* display: none; */
  315. }
  316. .bgTooltip {
  317. overflow: hidden;
  318. padding: 10% 15% !important;
  319. margin: 0 !important;
  320. width: 450px;
  321. height: 250px;
  322. color: #fff;
  323. display: grid;
  324. grid-template-rows: repeat(3, 1fr);
  325. }
  326. .custom-tooltip-box {
  327. padding: 0 !important;
  328. border: none !important;
  329. background-color: transparent !important;
  330. }
  331. .blueIcon {
  332. font-size: 32px !important;
  333. }
  334. .blueIcon::before {
  335. content: "●";
  336. margin-right: 10px;
  337. color: #40a9ff;
  338. }
  339. .bottom-tip{
  340. background: url("../img/center-bottonm.png") no-repeat center left; /*图标路径*/
  341. background-size: 100% 100%;
  342. width: 1600px;
  343. height: 120px;
  344. position: absolute;
  345. bottom: 0;
  346. left: calc( 50% - 800px);
  347. }
  348. .svg_box {
  349. transform: rotateX(78deg);
  350. position: absolute;
  351. top: 22.5%;
  352. left: 2.4%;
  353. }
  354. /* 公共css */
  355. /* 宽高纵横比 */
  356. .font28 {
  357. font-size: 28px;
  358. }
  359. .fb {
  360. font-weight: bold !important;
  361. }
  362. .fn {
  363. font-weight: normal !important;
  364. }
  365. .pointer {
  366. cursor: pointer;
  367. }
  368. i {
  369. font-style: normal !important;
  370. }
  371. .aspect-auto {
  372. aspect-ratio: auto;
  373. }
  374. .aspect-square {
  375. aspect-ratio: 1 / 1;
  376. }
  377. .aspect-video {
  378. aspect-ratio: 16 / 9;
  379. }
  380. /* aspect-[4/3] */
  381. /* 居中 */
  382. .mx-auto {
  383. margin: 0 auto;
  384. }
  385. /* 设置容器内的列数/每列距离 */
  386. .columns-1 {
  387. columns: 1;
  388. }
  389. /* columns-[20px] */
  390. /* 盒子模型 */
  391. .box-border {
  392. box-sizing: border-box;
  393. }
  394. .box-content {
  395. box-sizing: content-box;
  396. }
  397. /* 消失 */
  398. .hidden {
  399. display: none;
  400. }
  401. /* 块级元素 */
  402. .block {
  403. display: block;
  404. }
  405. /* 行内块 */
  406. .inline-block {
  407. display: inline-block;
  408. }
  409. /* 行内元素 */
  410. .inline {
  411. display: inline;
  412. }
  413. /* 弹性布局 */
  414. .flex {
  415. display: flex;
  416. }
  417. /* 主轴起点在左边 */
  418. .flex-row {
  419. flex-direction: row;
  420. }
  421. /* 主轴起点在右边 */
  422. .flex-row-reverse {
  423. flex-direction: row-reverse;
  424. }
  425. /* 主轴竖向排列,在上面 */
  426. .flex-col {
  427. flex-direction: column;
  428. }
  429. /* 主轴竖向排列,在下面 */
  430. .flex-col-reverse {
  431. flex-direction: column-reverse;
  432. }
  433. /* 自动换行 */
  434. .flex-wrap {
  435. flex-wrap: wrap;
  436. }
  437. /* 自动换行下起点 */
  438. .flex-wrap-reverse {
  439. flex-wrap: wrap-reverse;
  440. }
  441. /* 不换行 */
  442. .flex-nowrap {
  443. flex-wrap: nowrap;
  444. }
  445. /* 弹性成长 */
  446. .grow {
  447. flex-grow: 1;
  448. }
  449. /* 不允许弹性成长 */
  450. .grow-0 {
  451. flex-grow: 0;
  452. }
  453. /* 主轴从左开始 */
  454. .justify-start {
  455. justify-content: flex-start;
  456. }
  457. /* 主轴从右开始 */
  458. .justify-end {
  459. justify-content: flex-end;
  460. }
  461. /* 主轴剧中 */
  462. .justify-center {
  463. justify-content: center;
  464. }
  465. /* 主轴两端无间隔 */
  466. .justify-between {
  467. justify-content: space-between;
  468. }
  469. /* 主轴两端有间隔 */
  470. .justify-around {
  471. justify-content: space-around;
  472. }
  473. /* 所有间隔相等 */
  474. .justify-evenly {
  475. justify-content: space-evenly;
  476. }
  477. /* 纵向起点最上方 */
  478. .items-start {
  479. align-items: flex-start;
  480. }
  481. /* 纵向起点最下方 */
  482. .items-end {
  483. align-items: flex-end;
  484. }
  485. .items-center {
  486. align-items: center;
  487. }
  488. /* 网格布局 */
  489. .grid {
  490. display: grid;
  491. }
  492. /* 有几列 */
  493. .grid-cols-4 {
  494. grid-template-columns: repeat(4, minmax(0, 1fr));
  495. grid-template-columns: repeat(4, 1fr);
  496. }
  497. /* 有几行 */
  498. .grid-rows-3 {
  499. grid-template-rows: repeat(3, minmax(0, 1fr));
  500. grid-template-rows: repeat(3, 1fr);
  501. }
  502. /* 容器中的内容上下布局 */
  503. .grid-center {
  504. align-items: center;
  505. }
  506. /* 间距 */
  507. .gap-7 {
  508. gap: 1.75rem;
  509. }
  510. /* 允许弹性成长 */
  511. .shrink {
  512. flex-shrink: 1;
  513. }
  514. /* 不允许弹性成长 */
  515. .shrink-0 {
  516. flex-shrink: 0;
  517. }
  518. /* 不允许成长也不允许收缩 */
  519. .flex-none {
  520. flex: none;
  521. }
  522. /* 浮动布局 */
  523. .float-right {
  524. float: right;
  525. }
  526. .float-left {
  527. float: left;
  528. }
  529. .clear-both {
  530. clear: both;
  531. }
  532. /* 溢出 */
  533. .overflow-auto {
  534. overflow: auto;
  535. }
  536. .overflow-hidden {
  537. overflow: hidden;
  538. }
  539. .overflow-scroll {
  540. overflow: scroll;
  541. }
  542. .overflow-x-auto {
  543. overflow-x: auto;
  544. }
  545. .overflow-y-auto {
  546. overflow-y: auto;
  547. }
  548. /* 定位 */
  549. .fixed {
  550. position: fixed;
  551. }
  552. .absolute {
  553. position: absolute;
  554. }
  555. .relative {
  556. position: relative;
  557. }
  558. .top-0 {
  559. top: 0px;
  560. }
  561. .right-0 {
  562. right: 0px;
  563. }
  564. .bottom-0 {
  565. bottom: 0px;
  566. }
  567. .left-0 {
  568. left: 0px;
  569. }
  570. /* top-[3px] */
  571. /* z-[100] */
  572. /* 显示隐藏未脱离文档流 */
  573. .visible {
  574. visibility: visible;
  575. }
  576. .invisible {
  577. visibility: hidden;
  578. }
  579. /* 内边距 */
  580. .p-0 {
  581. padding: 0px;
  582. }
  583. .px-0 {
  584. padding-left: 0px;
  585. padding-right: 0px;
  586. }
  587. .py-0 {
  588. padding-top: 0px;
  589. padding-bottom: 0px;
  590. }
  591. .pt-0 {
  592. padding-top: 0px;
  593. }
  594. .pr-0 {
  595. padding-right: 0px;
  596. }
  597. .pb-0 {
  598. padding-bottom: 0px;
  599. }
  600. .pl-0 {
  601. padding-left: 0px;
  602. }
  603. /* p-[5px] */
  604. /* 外边距 */
  605. .m-0 {
  606. margin: 0px;
  607. }
  608. .mx-0 {
  609. margin-left: 0px;
  610. margin-right: 0px;
  611. }
  612. .my-0 {
  613. margin-top: 0px;
  614. margin-bottom: 0px;
  615. }
  616. .mt-0 {
  617. margin-top: 0px;
  618. }
  619. .mr-0 {
  620. margin-right: 0px;
  621. }
  622. .mb-0 {
  623. margin-bottom: 0px;
  624. }
  625. .ml-0 {
  626. margin-left: 0px;
  627. }
  628. /* m-[5px] */
  629. /* 宽度 */
  630. .w-full {
  631. width: 100%;
  632. }
  633. .w-screen {
  634. width: 100vw;
  635. }
  636. /* w-[32rem] */
  637. /* min-w-[50%] */
  638. /* max-w-[50%] */
  639. /* 高度 */
  640. .h-full {
  641. height: 100%;
  642. }
  643. .h-screen {
  644. height: 100vh;
  645. }
  646. /* h-[32rem] */
  647. /* min-h-[50%] */
  648. /* max-h-[32rem] */
  649. /* 字体 */
  650. .text-xs {
  651. font-size: 0.75rem; /* 12px */
  652. line-height: 1rem; /* 16px */
  653. }
  654. .text-sm {
  655. font-size: 0.875rem; /* 14px */
  656. line-height: 1.25rem; /* 20px */
  657. }
  658. .text-base {
  659. font-size: 1rem; /* 16px */
  660. line-height: 1.5rem; /* 24px */
  661. }
  662. .text-lg {
  663. font-size: 1.125rem; /* 18px */
  664. line-height: 1.75rem; /* 28px */
  665. }
  666. .text-xl {
  667. font-size: 1.25rem; /* 20px */
  668. line-height: 1.75rem; /* 28px */
  669. }
  670. .text-2xl {
  671. font-size: 1.5rem; /* 24px */
  672. line-height: 2rem; /* 32px */
  673. }
  674. .text-3xl {
  675. font-size: 1.875rem; /* 30px */
  676. line-height: 2.25rem; /* 36px */
  677. }
  678. .text-4xl {
  679. font-size: 2.25rem; /* 36px */
  680. line-height: 2.5rem; /* 40px */
  681. }
  682. .text-5xl {
  683. font-size: 3rem; /* 48px */
  684. line-height: 1;
  685. }
  686. .text-6xl {
  687. font-size: 3.75rem; /* 60px */
  688. line-height: 1;
  689. }
  690. .text-7xl {
  691. font-size: 4.5rem; /* 72px */
  692. line-height: 1;
  693. }
  694. .text-8xl {
  695. font-size: 6rem; /* 96px */
  696. line-height: 1;
  697. }
  698. .text-9xl {
  699. font-size: 8rem; /* 128px */
  700. line-height: 1;
  701. }
  702. /* text-[14px] */
  703. /* 字体粗细font-weight */
  704. /* font-[1100] */
  705. /* https://tailwindcss.com/docs/font-weight */
  706. /* 字体间距letter-spacing */
  707. /* tracking-[.25em] */
  708. /* 行高line-height */
  709. /* leading-[3rem] */
  710. /* 无列表样式 */
  711. .list-none {
  712. list-style-type: none;
  713. }
  714. /* 小圆点 */
  715. .list-disc {
  716. list-style-type: disc;
  717. }
  718. /* 数字列表 */
  719. .list-decimal {
  720. list-style-type: decimal;
  721. }
  722. .text-left {
  723. text-align: left;
  724. }
  725. .text-center {
  726. text-align: center;
  727. }
  728. .text-right {
  729. text-align: right;
  730. }
  731. /* 所有文本头尾对齐 */
  732. .text-justify {
  733. text-align: justify;
  734. }
  735. /* 文本颜色 */
  736. /* text-[#50d71e] */
  737. /* https://tailwindcss.com/docs/text-color */
  738. /* 下划线 */
  739. .underline {
  740. text-decoration-line: underline;
  741. }
  742. /* 上划线 */
  743. .overline {
  744. text-decoration-line: overline;
  745. }
  746. /* 中划线 */
  747. .line-through {
  748. text-decoration-line: line-through;
  749. }
  750. /* 无划线 */
  751. .no-underline {
  752. text-decoration-line: none;
  753. }
  754. /* 全小写 */
  755. .lowercase {
  756. text-transform: lowercase;
  757. }
  758. /* 全大写 */
  759. .uppercase {
  760. text-transform: uppercase;
  761. }
  762. /* 首字母大写 */
  763. .capitalize {
  764. text-transform: capitalize;
  765. }
  766. /* right css start */
  767. .right {
  768. display: grid;
  769. grid-template-rows: 20% 34% 1fr;
  770. gap: 10px;
  771. }
  772. .right .means {
  773. grid-column: 1 / 3;
  774. display: flex;
  775. }
  776. .wrapMeansItem {
  777. display: flex;
  778. justify-content: space-around;
  779. align-items: center;
  780. flex: 1;
  781. }
  782. .meansHead {
  783. font-size: 2rem;
  784. font-family: Source Han Sans CN;
  785. font-weight: 500;
  786. color: #ffffff;
  787. display: flex;
  788. align-items: center;
  789. }
  790. .meansHead img {
  791. width: 3rem;
  792. height: 2.5rem;
  793. margin-right: 1.25rem;
  794. }
  795. .meansWrap {
  796. width: 80%;
  797. display: flex;
  798. flex-direction: column;
  799. }
  800. .itemWid {
  801. width: calc(100% / 8);
  802. height: 100%;
  803. display: flex;
  804. align-items: flex-end;
  805. position: relative;
  806. }
  807. .itemWid img {
  808. position: absolute;
  809. right: -95px;
  810. bottom: 15px;
  811. width: 100px;
  812. }
  813. .itemBac {
  814. background: url(../img/3.png) no-repeat;
  815. background-size: 100% 100%;
  816. font-size: 1.75rem;
  817. font-family: Source Han Sans CN;
  818. font-weight: 400;
  819. color: #ffffff;
  820. height: calc(100% - 1.75rem);
  821. width: 100%;
  822. position: relative;
  823. }
  824. .itemBac div {
  825. font-size: 72px;
  826. line-height: 60px;
  827. font-family: Helvetica Neue Extra Black Cond;
  828. font-weight: 400;
  829. color: #68bdff;
  830. position: absolute;
  831. top: 75px;
  832. left: 110px;
  833. display: flex;
  834. align-items: flex-end;
  835. }
  836. .itemBac div p {
  837. font-size: 28px;
  838. line-height: 28px;
  839. margin-left: 10px;
  840. }
  841. .itemBac span {
  842. position: absolute;
  843. bottom: 0;
  844. left: 0;
  845. width: 100%;
  846. text-align: center;
  847. }
  848. .active .itemBac {
  849. background: url(../img/5.png) no-repeat;
  850. background-size: 100% 100%;
  851. }
  852. .active .itemBac span,
  853. .active .itemBac div {
  854. color: #ebde27;
  855. }
  856. .publicTitle {
  857. width: 100%;
  858. height: calc(100% / 7);
  859. overflow: hidden;
  860. background: url("../img/small-title.png") no-repeat center bottom; /*图标路径*/
  861. background-size: 100% 50%;
  862. display: flex;
  863. align-items: center;
  864. padding-left: 7%;
  865. font-size: 36px;
  866. font-style: oblique;
  867. text-shadow: 2px 3px 1px black;
  868. letter-spacing: 5px;
  869. }
  870. .progressCost {
  871. display: flex;
  872. justify-content: space-between;
  873. align-items: center;
  874. width: 100%;
  875. height: calc(100% - 100% / 7);
  876. overflow: hidden;
  877. padding: 1%;
  878. }
  879. .progressCost .costItem {
  880. width: 30%;
  881. height: 100%;
  882. }
  883. .progressCost .costItem .itemTop {
  884. background: url(../img/70.png) no-repeat;
  885. background-size: 100% 100%;
  886. height: 76%;
  887. display: flex;
  888. flex-direction: column;
  889. justify-content: center;
  890. align-items: center;
  891. }
  892. .itemTop p {
  893. font-size: 1.75rem;
  894. font-family: Source Han Sans CN;
  895. font-weight: 400;
  896. color: #ffffff;
  897. position: relative;
  898. }
  899. .itemTop p::after {
  900. content: "";
  901. width: 0.75rem;
  902. height: 0.75rem;
  903. background: linear-gradient(0deg, #014198, #93ceff);
  904. border-radius: 50%;
  905. position: absolute;
  906. left: -1.25rem;
  907. top: 50%;
  908. transform: translateY(-50%);
  909. }
  910. .itemTop .topDiv {
  911. padding-left: 1.25rem;
  912. min-width: 220px;
  913. }
  914. .costNum {
  915. font-family: Helvetica Neue Extra Black Cond;
  916. font-weight: 400;
  917. color: #68bdff;
  918. display: flex;
  919. align-items: flex-end;
  920. margin-top: 1rem;
  921. font-size: 60px;
  922. line-height: 48px;
  923. font-weight: bold;
  924. color: #68bdff;
  925. }
  926. .costNum span {
  927. font-size: 28px;
  928. line-height: 28px;
  929. margin-left: 0.625rem;
  930. }
  931. .progressCost .costItem .itemBottom {
  932. background: url(../img/71.png) no-repeat;
  933. background-size: 100% 100%;
  934. height: 24%;
  935. display: flex;
  936. align-items: center;
  937. justify-content: space-around;
  938. }
  939. .progressCost .costItem .itemBottom div {
  940. font-size: 2rem;
  941. font-family: Source Han Sans CN;
  942. font-weight: 500;
  943. color: #ffffff;
  944. }
  945. .costItem .itemBottom img {
  946. width: 2rem;
  947. height: 1.625rem;
  948. position: relative;
  949. }
  950. .aniLeft {
  951. animation: identifierl 1s infinite;
  952. }
  953. .aniRight {
  954. animation: identifierr 1s infinite;
  955. }
  956. @keyframes identifierl {
  957. 0% {
  958. left: 0;
  959. }
  960. 50% {
  961. left: 1.25rem;
  962. }
  963. 100% {
  964. left: 0;
  965. }
  966. }
  967. @keyframes identifierr {
  968. 0% {
  969. left: 0;
  970. }
  971. 50% {
  972. left: -1.25rem;
  973. }
  974. 100% {
  975. left: 0;
  976. }
  977. }
  978. .invest {
  979. display: flex;
  980. justify-content: space-around;
  981. align-items: center;
  982. height: calc(100% - 100% / 7);
  983. }
  984. .invest .lp {
  985. width: 53%;
  986. height: calc(100% - 2rem);
  987. display: flex;
  988. align-items: center;
  989. position: relative;
  990. background: url(../img/10.png) no-repeat;
  991. background-size: contain;
  992. background-position: center;
  993. margin: 1rem 0;
  994. }
  995. .lp img {
  996. position: absolute;
  997. width: 100px;
  998. height: 100px;
  999. top: 50%;
  1000. left: 50%;
  1001. transform: translate(-50%, -50%);
  1002. }
  1003. .quan {
  1004. width: 150px;
  1005. height: 150px;
  1006. border: 1px dashed #66bbfc;
  1007. border-radius: 50%;
  1008. position: absolute;
  1009. left: 50%;
  1010. top: 50%;
  1011. transform: translate(-50%, -50%);
  1012. }
  1013. .bigq {
  1014. width: 420px;
  1015. height: 420px;
  1016. border: 1px dashed #66bbfc;
  1017. border-radius: 50%;
  1018. position: absolute;
  1019. left: 50%;
  1020. top: 50%;
  1021. transform: translate(-50%, -50%);
  1022. }
  1023. .invest .lp .plItem {
  1024. position: absolute;
  1025. top: 0;
  1026. width: 100%;
  1027. height: 100%;
  1028. font-size: 28px;
  1029. line-height: 28px;
  1030. font-family: Source Han Sans CN;
  1031. font-weight: bold;
  1032. color: #68bdff;
  1033. transform-origin: center center;
  1034. background: url(../img/11.png) no-repeat;
  1035. background-size: contain;
  1036. background-position: center;
  1037. transition: 0.5s;
  1038. }
  1039. .plItem .active {
  1040. color: #ebde27;
  1041. }
  1042. .invest .lp .plItem div {
  1043. position: absolute;
  1044. left: 130px;
  1045. top: 50%;
  1046. transform-origin: 200px 50%;
  1047. cursor: pointer;
  1048. }
  1049. .investInfoWrap {
  1050. display: flex;
  1051. flex-direction: column;
  1052. justify-content: space-around;
  1053. padding: 2.375rem 0;
  1054. height: 100%;
  1055. }
  1056. .investInfoWrap .investInfo {
  1057. font-size: 28px;
  1058. line-height: 28px;
  1059. font-family: Source Han Sans CN;
  1060. font-weight: 400;
  1061. color: #ffffff;
  1062. display: flex;
  1063. align-items: flex-end;
  1064. position: relative;
  1065. padding-left: 20px;
  1066. }
  1067. .investInfoWrap .investInfo::after {
  1068. content: "";
  1069. width: 20px;
  1070. height: 20px;
  1071. border: 4px solid #68bdff;
  1072. border-radius: 50%;
  1073. position: absolute;
  1074. top: 50%;
  1075. transform: translateY(-50%);
  1076. left: -10px;
  1077. }
  1078. .investInfoWrap .investInfo span {
  1079. font-size: 40px;
  1080. line-height: 31px;
  1081. display: inline-block;
  1082. font-family: Helvetica Neue Extra Black Cond;
  1083. font-weight: 400;
  1084. color: #68bdff;
  1085. margin: 0 16px;
  1086. }
  1087. .echartsWrap {
  1088. height: calc(100% - 100% / 7);
  1089. }
  1090. .projectRisk {
  1091. display: grid;
  1092. grid-template-columns: repeat(2, 1fr);
  1093. grid-template-rows: repeat(2, 1fr);
  1094. gap: 10px;
  1095. width: 100%;
  1096. height: calc(100% - 100% / 7);
  1097. }
  1098. .projectRisk .riskWrap {
  1099. height: 100%;
  1100. width: 100%;
  1101. }
  1102. .projectRisk .longRisk {
  1103. grid-column: 1 / 3;
  1104. }
  1105. /* right css end */