jkfx.css 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944
  1. .grid-wrapper {
  2. color: #ffffff;
  3. padding: 23px 16px 16px;
  4. height: calc(100% - 80px);
  5. display: grid;
  6. grid-gap: 8px;
  7. grid-template-columns: repeat(4, 1fr);
  8. grid-template-rows: repeat(3, 1fr);
  9. grid-template-areas: "left1 center center right" "left2 center center right" "bottom1 bottom1 bottom1 bottom1";
  10. }
  11. .grid-wrapper > div .wrapper {
  12. border-radius: 6px;
  13. height: 100%;
  14. background-color: #001346;
  15. overflow: hidden;
  16. }
  17. .grid-wrapper .wrapper-content{
  18. position:relative;
  19. height:calc(100% - 40px);
  20. }
  21. .grid-wrapper .wide-border{
  22. height:calc(100% + 1px);
  23. width:100%;
  24. position:absolute;
  25. top:-3px;
  26. left:0px;
  27. border:1px solid #53BAFD;
  28. }
  29. .wide-border-line1{
  30. position:absolute;
  31. left:0px;
  32. top:-26px;
  33. background-color:#0f215c
  34. }
  35. .wide-border-line2{
  36. position:absolute;
  37. right:0px;
  38. top:-26px;
  39. background-color:#0f215c
  40. }
  41. .wide-border-line3{
  42. position:absolute;
  43. left:0px;
  44. bottom:0;
  45. background-color:#001346;
  46. }
  47. .wide-border-line4{
  48. position:absolute;
  49. right:0px;
  50. bottom:0;
  51. background-color:#001346;
  52. }
  53. .grid-wrapper .chart-tab-t{
  54. padding-left: 82px;
  55. height: 40px;
  56. line-height: 40px;
  57. background-color: #0f215c;
  58. }
  59. .grid-wrapper .chart-tab-t .chart-tab-title{
  60. font-size: 1em;
  61. position: relative;
  62. }
  63. .grid-wrapper .chart-tab-t .chart-tab-title:before{
  64. content:'';
  65. width:14px;
  66. height:14px;
  67. border-radius:50%;
  68. position:absolute;
  69. left:-20px;
  70. top:50%;
  71. background-color:#fff;
  72. transform:translateY(-50%);
  73. -ms-transform:translateY(-50%); /* IE 9 */
  74. -moz-transform:translateY(-50%); /* Firefox */
  75. -webkit-transform:translateY(-50%); /* Safari 和 Chrome */
  76. -o-transform:translateY(-50%); /* Opera */
  77. }
  78. .grid-wrapper .left1 {
  79. grid-area: left1;
  80. }
  81. #chart-stztzfb,#chart-styyfx{
  82. height:100%;
  83. }
  84. .grid-wrapper .left2 {
  85. grid-area: left2;
  86. }
  87. .grid-wrapper .center {
  88. grid-area: center;
  89. }
  90. .grid-wrapper .center .line1 {
  91. font-size: 1.4em;
  92. height: 66px;
  93. display: flex;
  94. align-items: center;
  95. }
  96. .grid-wrapper .center .line1 .division {
  97. flex: 1;
  98. height: 2px;
  99. background-color:#528DFF;
  100. }
  101. .grid-wrapper .center .line1 .cont {
  102. margin: 1px 20px;
  103. }
  104. .line1 .video-controller{
  105. position:relative;
  106. display:flex;
  107. margin: 1px 20px;
  108. }
  109. .line1 .video-controller .watch-videos{
  110. margin-right:30px;
  111. }
  112. .line1 .video-controller .watch-videos,.line1 .video-controller .change-direction{
  113. flex:1;
  114. }
  115. .line1 .video-controller .choose-videoBox{
  116. width:446px;
  117. position:absolute;
  118. top:50px;
  119. left:50%;
  120. transform:translateX(-50%);
  121. -ms-transform:translateX(-50%); /* IE 9 */
  122. -moz-transform:translateX(-50%); /* Firefox */
  123. -webkit-transform:translateX(-50%); /* Safari 和 Chrome */
  124. -o-transform:translateX(-50%); /* Opera */
  125. z-index:100;
  126. background-color: #001346;
  127. border-radius:6px;
  128. box-shadow:0px -5px 5px 0px rgba(255,255,255,0.1),-5px 0px 5px 0px rgba(255,255,255,0.1),5px 0px 5px 0px rgba(255,255,255,0.1),0px 5px 5px 0px rgba(255,255,255,0.1);
  129. }
  130. .choose-videoBox .tab-videocontrol{
  131. width:100%;
  132. height:100%;
  133. }
  134. .tab-videocontrol .control-box1{
  135. display:none;
  136. }
  137. .control-box1 .tab-video-head {
  138. height:40px;
  139. display: flex;
  140. align-items: center;
  141. justify-content:center;
  142. font-size:0.8em;
  143. color:#53BAFD;
  144. position:relative;
  145. }
  146. .control-box1 .tab-video-body{
  147. height:240px;
  148. padding:10px 50px;
  149. }
  150. .tab-video-foot .tab-foot-top{
  151. height:40px;
  152. display: flex;
  153. align-items: center;
  154. justify-content:center;
  155. font-size:0.8em;
  156. color:#53BAFD;
  157. position:relative;
  158. }
  159. .tab-video-foot .tab-videoes{
  160. height:140px;
  161. padding:10px 50px;
  162. overflow:hidden;
  163. }
  164. .tab-videoes .video-item{
  165. height: 31px;
  166. display: flex;
  167. align-items: center;
  168. flex-wrap: nowrap;
  169. padding: 0 10px;
  170. color: #fff;
  171. border-bottom:1px dashed #a4cfe5;
  172. }
  173. .video-date,.video-time{
  174. font-size:0.6em;
  175. }
  176. .video-item i{
  177. margin-right:15px;
  178. }
  179. .video-item .time-crossline{
  180. margin:0 15px;
  181. }
  182. .tab-video-body .tab-video-content{
  183. display:flex;
  184. align-items: center;
  185. margin-top:20px;
  186. }
  187. .tab-video-content .tab-type{
  188. flex:1;
  189. text-align:center;
  190. font-size:0.8em;
  191. }
  192. .tab-video-content .select{
  193. flex:2;
  194. height:32px;
  195. position: relative;
  196. vertical-align: middle;
  197. padding: 2px;
  198. overflow: hidden;
  199. background-color: #001346;
  200. color: #fff;
  201. text-shadow: none;
  202. border-radius: 4px;
  203. transition: box-shadow 0.25s ease;
  204. border:1px solid #0b52e0;
  205. z-index: 2;
  206. display:flex;
  207. align-items: center;
  208. }
  209. .tab-video-content .datetimePicker{
  210. flex:2;
  211. height:32px;
  212. border-radius: 4px;
  213. transition: box-shadow 0.25s ease;
  214. font-size: 0;
  215. white-space: nowrap;
  216. display:flex;
  217. justify-content: space-between;
  218. }
  219. .tab-video-content .video-find{
  220. flex:2;
  221. }
  222. .tab-video-content .video-find #sub-btn{
  223. width:103px;
  224. height:30px;
  225. font-size:0.7em;
  226. text-align:center;
  227. line-height:30px;
  228. -webkit-border-radius: 16px;
  229. -moz-border-radius: 16px;
  230. border-radius: 16px;
  231. background-color:#ea8c29;
  232. color:#fff;
  233. cursor:pointer;
  234. }
  235. input[type="text"]{
  236. display: inline-block;
  237. height: 20px;
  238. padding: 4px 6px;
  239. margin-bottom: 10px;
  240. font-size: 14px;
  241. line-height: 20px;
  242. color: #555555;
  243. -webkit-border-radius: 4px;
  244. -moz-border-radius: 4px;
  245. border-radius: 4px;
  246. vertical-align: middle;
  247. background-color: #ffffff;
  248. border: 1px solid #cccccc;
  249. -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  250. -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  251. box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  252. -webkit-transition: border linear .2s, box-shadow linear .2s;
  253. -moz-transition: border linear .2s, box-shadow linear .2s;
  254. -o-transition: border linear .2s, box-shadow linear .2s;
  255. transition: border linear .2s, box-shadow linear .2s;
  256. }
  257. .input-append input{
  258. position: relative;
  259. margin-bottom: 0;
  260. vertical-align: top;
  261. -webkit-border-radius: 4px;
  262. -moz-border-radius: 4px;
  263. border-radius: 4px;
  264. background-color: #eeeeee;
  265. outline:none;
  266. border:1px solid #0b52e0;
  267. height: 32px;
  268. color:#fff;
  269. background-color: #001346;
  270. }
  271. input[readonly]{
  272. cursor: not-allowed;
  273. }
  274. .input-append .add-on {
  275. white-space: nowrap;
  276. vertical-align: middle;
  277. display:flex;
  278. align-items: center;
  279. }
  280. [class^="icon-"], [class*=" icon-"]{
  281. display: inline-block;
  282. background-image: url(../img/glyphicons-halflings-white.png);
  283. background-repeat: no-repeat;
  284. cursor: pointer;
  285. width: 14px;
  286. height: 14px;
  287. }
  288. .icon-remove {
  289. background-position: -312px 0;
  290. }
  291. .icon-th {
  292. background-position: -240px 0;
  293. }
  294. table {
  295. max-width: 100%;
  296. background-color: transparent;
  297. border-collapse: collapse;
  298. border-spacing: 0;
  299. }
  300. .table-condensed th i{
  301. background-image: url(../img/glyphicons-halflings.png);
  302. }
  303. .table-condensed th, .table-condensed td {
  304. padding: 4px 5px;
  305. }
  306. .icon-arrow-left {
  307. background-position: -240px -96px;
  308. }
  309. .icon-arrow-right {
  310. background-position: -264px -96px;
  311. }
  312. .dropdown-menu {
  313. position: absolute;
  314. top: 100%;
  315. left: 0;
  316. z-index: 1000;
  317. display: none;
  318. float: left;
  319. min-width: 160px;
  320. padding: 5px 0;
  321. margin: 2px 0 0;
  322. list-style: none;
  323. background-color: #fff;
  324. border: 1px solid #ccc;
  325. border: 1px solid rgba(0,0,0,0.2);
  326. *border-right-width: 2px;
  327. *border-bottom-width: 2px;
  328. -webkit-border-radius: 6px;
  329. -moz-border-radius: 6px;
  330. border-radius: 6px;
  331. -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  332. -moz-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  333. box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  334. -webkit-background-clip: padding-box;
  335. -moz-background-clip: padding;
  336. background-clip: padding-box;
  337. }
  338. .tab-video-content .select:before {
  339. content: "";
  340. position: absolute;
  341. width: 0;
  342. height: 0;
  343. border: 6px solid transparent;
  344. border-top-color: #fff;
  345. top: 12px;
  346. right: 4px;
  347. cursor: pointer;
  348. z-index: -2;
  349. }
  350. .tab-video-content .select select {
  351. cursor: pointer;
  352. padding: 3px 0px;
  353. width: 100%;
  354. border: none;
  355. background: transparent;
  356. background-image: none;
  357. -webkit-appearance: none;
  358. -moz-appearance: none;
  359. outline:none;
  360. text-align:center;
  361. color: #fff;
  362. padding-left:10px;
  363. font-size:0.7em;
  364. }
  365. .tab-video-content .select option{
  366. background-color:#001346;
  367. }
  368. .tab-video-head:before,.tab-video-foot .tab-foot-top:before{
  369. content: '';
  370. position: absolute;
  371. bottom: 0px;
  372. left: 5%;
  373. height: 2px;
  374. width: 90%;
  375. background: linear-gradient(to right, rgba(11,82,224,0), #0b52e0, rgba(11,82,224,0));
  376. }
  377. .watch-videos img,.change-direction img{
  378. width:30px;
  379. cursor:pointer;
  380. }
  381. .grid-wrapper .line2 .change-pc{
  382. width:100%;
  383. height:50px;
  384. border: 2.5px solid #53BAFD;
  385. position: relative;
  386. }
  387. .change-pc .zhe-block{
  388. width: 15px;
  389. height: 15px;
  390. border-bottom: 3px solid #53BAFD;
  391. position: absolute;
  392. background-color: #001346;
  393. }
  394. .change-pc .item-info-title{
  395. height: 100%;
  396. display: flex;
  397. align-items: center;
  398. justify-content: center;
  399. cursor:pointer;
  400. }
  401. .change-pc .item-info-title .title{
  402. font-size: 1.6em;
  403. padding-right:15px;
  404. margin-right:15px;
  405. border-right:2px solid #53BAFD;
  406. color: #53BAFD;
  407. font-weight: normal;
  408. }
  409. .change-pc .item-info-title .click-check{
  410. font-size:1.2em;
  411. }
  412. .change-pc .arrow-right{
  413. height: 16px;
  414. vertical-align: text-top;
  415. width: 20px;
  416. cursor: pointer;
  417. position: relative;
  418. margin-left:15px;
  419. }
  420. .change-pc .arrow-right:before{
  421. content: '';
  422. left: 3px;
  423. border-left: 10px #53BAFD solid;
  424. }
  425. .arrow-right:before, .arrow-right:after {
  426. width: 0;
  427. height: 0;
  428. display: block;
  429. position: absolute;
  430. left: 0;
  431. top: 0;
  432. border-top: 10px transparent dashed;
  433. border-right: 10px transparent dashed;
  434. border-bottom: 10px transparent dashed;
  435. border-left: 10px #53BAFD solid;
  436. overflow: hidden;
  437. }
  438. .change-pc .arrow-right:after{
  439. content: '';
  440. border-left: 10px #001346 solid;
  441. }
  442. .for-click-show{
  443. position:relative;
  444. width:30%;
  445. }
  446. .for-click-show .choosebox{
  447. display:none;
  448. width:100%;
  449. padding:15px;
  450. position:absolute;
  451. top:46px;
  452. right:0;
  453. border:1px solid #3bb3e0;
  454. background-color:#001346;
  455. z-index:99;
  456. }
  457. .for-click-show .choosebox .box-btns{
  458. display: flex;
  459. flex:1;
  460. justify-content:space-around;
  461. }
  462. .a_demo_two {
  463. background-color:#3bb3e0;
  464. padding:10px 15px;
  465. position:relative;
  466. font-family: 'Open Sans', sans-serif;
  467. font-size:12px;
  468. text-decoration:none;
  469. color:#fff;
  470. background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
  471. background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
  472. background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
  473. background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
  474. background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
  475. background-image: -webkit-gradient(
  476. linear,
  477. left bottom,
  478. left top,
  479. color-stop(0, rgb(44,160,202)),
  480. color-stop(1, rgb(62,184,229))
  481. );
  482. -webkit-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 4px 0px #156785;
  483. -moz-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 4px 0px #156785;
  484. -o-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 4px 0px #156785;
  485. box-shadow: inset 0px 1px 0px #7fd2f1, 0px 4px 0px #156785;
  486. -webkit-border-radius: 5px;
  487. -moz-border-radius: 5px;
  488. -o-border-radius: 5px;
  489. border-radius: 5px;
  490. }
  491. .a_demo_two::before {
  492. background-color:#072239;
  493. content:"";
  494. display:block;
  495. position:absolute;
  496. width:100%;
  497. height:100%;
  498. padding-left:2px;
  499. padding-right:2px;
  500. padding-bottom:4px;
  501. left:-2px;
  502. top:5px;
  503. z-index:-1;
  504. -webkit-border-radius: 6px;
  505. -moz-border-radius: 6px;
  506. -o-border-radius: 6px;
  507. border-radius: 6px;
  508. }
  509. .a_demo_two:active {
  510. color:#156785;
  511. text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
  512. background:rgb(44,160,202);
  513. -webkit-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;
  514. -moz-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;
  515. -o-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;
  516. box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;
  517. top:3px;
  518. }
  519. .a_demo_two:active::before {
  520. top:-2px;
  521. }
  522. .switch-bt-active{
  523. color: #156785;
  524. text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
  525. background: rgb(44,160,202);
  526. -webkit-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;
  527. -moz-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;
  528. -o-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;
  529. box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;
  530. top:3px;
  531. }
  532. .choosebox .tab-areas{
  533. height:130px;
  534. padding-top:20px;
  535. }
  536. #tab-area1,#tab-area2{
  537. height:100%;
  538. }
  539. #tab-area1 .pc-nums{
  540. height:100%;
  541. overflow:hidden;
  542. background-color:#fff;
  543. }
  544. #tab-area1 .pc-nums .item{
  545. overflow:hidden;
  546. height: 28px;
  547. line-height: 28px;
  548. text-overflow:ellipsis;
  549. white-space: nowrap;
  550. color:#333;
  551. padding-left:5px;
  552. cursor:pointer;
  553. }
  554. #tab-area1 .pc-nums .item:hover{
  555. background-color:#9de5f5;
  556. color:#fff
  557. }
  558. .tabshow{
  559. display:none !important;
  560. }
  561. #tab-area2{
  562. display: flex;
  563. flex:1;
  564. justify-content:space-around;
  565. }
  566. #tab-area2 .select{
  567. display: inline-block;
  568. width: 45%;
  569. height:28px;
  570. position: relative;
  571. vertical-align: middle;
  572. padding: 2px;
  573. overflow: hidden;
  574. background-color: #fff;
  575. color: #555;
  576. text-shadow: none;
  577. border-radius: 4px;
  578. transition: box-shadow 0.25s ease;
  579. z-index: 2;
  580. }
  581. #tab-area2 .select-list{
  582. width: 45%;
  583. height:100%;
  584. overflow:hidden;
  585. background-color:#fff;
  586. }
  587. #tab-area2 .select-list .item{
  588. overflow:hidden;
  589. height: 28px;
  590. line-height: 28px;
  591. text-overflow:ellipsis;
  592. white-space: nowrap;
  593. color:#333;
  594. padding-left:5px;
  595. cursor:pointer;
  596. }
  597. #tab-area2 .select-list .item:hover{
  598. background-color:#9de5f5;
  599. color:#fff
  600. }
  601. #tab-area2 .select:hover {
  602. box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  603. }
  604. #tab-area2 .select:before {
  605. content: "";
  606. position: absolute;
  607. width: 0;
  608. height: 0;
  609. border: 3px solid transparent;
  610. border-top-color: #ccc;
  611. top: 12px;
  612. right: 4px;
  613. cursor: pointer;
  614. z-index: -2;
  615. }
  616. #tab-area2 .select select {
  617. cursor: pointer;
  618. padding: 3px 0px;
  619. width: 100%;
  620. border: none;
  621. background: transparent;
  622. background-image: none;
  623. -webkit-appearance: none;
  624. -moz-appearance: none;
  625. }
  626. #tab-area2 .select select:focus {
  627. outline: none;
  628. }
  629. .center .line3{
  630. height:calc(100% - 66px);
  631. display:flex;
  632. align-items:center;
  633. justify-content:center;
  634. }
  635. .zhe-block-rotate1{
  636. transform: rotate(45deg);
  637. top: -8px;
  638. right: -8px;
  639. }
  640. .zhe-block-rotate2{
  641. transform: rotate(315deg);
  642. left: -8px;
  643. top: -8px;
  644. }
  645. .zhe-block-rotate3{
  646. transform: rotate(225deg);
  647. left: -8px;
  648. bottom: -8px;
  649. }
  650. .zhe-block-rotate4{
  651. transform: rotate(135deg);
  652. bottom: -8px;
  653. right: -8px;
  654. }
  655. .grid-wrapper .right {
  656. grid-area: right;
  657. }
  658. .wrapper .msg-tab-head{
  659. background-color:#0E1E51;
  660. width:100%;
  661. padding:10px 40px;
  662. height:100px;
  663. color:#898a90;
  664. display: flex;
  665. flex:1;
  666. justify-content:space-around;
  667. flex-wrap:nowrap;
  668. }
  669. .line3 .msg-tab-body{
  670. height:100%;
  671. width:50%;
  672. }
  673. .line3 .msg-detail{
  674. height:100%;
  675. width:50%;
  676. }
  677. #msg-list-content{
  678. overflow-y:scroll;
  679. }
  680. #msg-list-content::-webkit-scrollbar {
  681. width: 8px;
  682. }
  683. #msg-list-content::-webkit-scrollbar-track {
  684. background-color:transparent;
  685. -webkit-border-radius: 2em;
  686. -moz-border-radius: 2em;
  687. border-radius:2em;
  688. }
  689. #msg-list-content::-webkit-scrollbar-thumb {
  690. background-color:#ccc;
  691. -webkit-border-radius: 2em;
  692. -moz-border-radius: 2em;
  693. border-radius:2em;
  694. }
  695. .msg-tab-body .msg-list-content.active{
  696. display:block;
  697. }
  698. .msg-tab-body .msg-tab-list{
  699. height:80px;
  700. position:relative;
  701. display: flex;
  702. align-items: center;
  703. justify-content: space-around;
  704. flex-wrap:nowrap;
  705. margin:0 40px;
  706. padding:10px;
  707. color:#a4cfe5;
  708. cursor:pointer;
  709. }
  710. .msg-tab-body .msg-tab-list:hover{
  711. background-color: #0f215c;
  712. }
  713. .msg-tab-list.active{
  714. background-color: #0f215c;
  715. }
  716. .msg-tab-body .msg-tab-list .man-dothis{
  717. flex:1;
  718. }
  719. .msg-tab-body .msg-tab-list .man-dothis img{
  720. width:50px;
  721. height:50px;
  722. border-radius:50%;
  723. }
  724. .msg-tab-body .msg-tab-list .this-content{
  725. flex:4;
  726. display: -webkit-box;
  727. -webkit-box-orient: vertical;
  728. -webkit-line-clamp: 2;
  729. overflow: hidden;
  730. line-height:1.2em;
  731. }
  732. .msg-tab-body .msg-tab-list .this-content .finish-time{
  733. margin-right:15px;
  734. }
  735. .msg-tab-body .msg-tab-list:before{
  736. content: '';
  737. position: absolute;
  738. bottom: 0px;
  739. left: 10%;
  740. height: 2px;
  741. width: 80%;
  742. }
  743. .msg-tab-body .msg-tab-list-in:before{
  744. background: linear-gradient(to right, rgba(11,82,224,0), #fb52e0, rgba(11,82,224,0));
  745. }
  746. .msg-tab-body .msg-tab-list-out:before{
  747. background: linear-gradient(to right, rgba(11,82,224,0), #0b52e0, rgba(11,82,224,0));
  748. }
  749. .msg-tab-head .msg-tab1{
  750. display: flex;
  751. flex-direction: column;
  752. cursor:pointer;
  753. }
  754. .msg-tab-head .msg-tab1 img{
  755. width:50px;
  756. }
  757. .msg-tab-head .msg-tab1 span{
  758. line-height:30px;
  759. text-align:center;
  760. font-size:1.2em;
  761. }
  762. .msg-tab-head .msg-tab1.active span{
  763. color:#fff;
  764. }
  765. .jk-img{
  766. height:50%;
  767. text-align:center;
  768. }
  769. .jk-img img{
  770. height:100%;
  771. }
  772. .jk-info-list{
  773. padding:20px 40px;
  774. }
  775. .jk-info-item{
  776. color:#0b52e0;
  777. font-size:20px;
  778. margin:15px;
  779. }
  780. .grid-wrapper .bottom1 {
  781. grid-area: bottom1;
  782. }
  783. .grid-wrapper .wrapper .tab-t {
  784. padding-left: 102px;
  785. height: 40px;
  786. line-height: 40px;
  787. background-color: #0f215c;
  788. }
  789. .grid-wrapper .tab-t>.tab-title {
  790. font-size: 1.5em;
  791. position: relative;
  792. }
  793. .grid-wrapper .tab-t>.tab-title:before {
  794. content: "";
  795. position: absolute;
  796. left: -1.5em;
  797. top: 50%;
  798. width: 0.5em;
  799. height: 0.5em;
  800. border: 2px solid #6DDFE9;
  801. transform: rotate(45deg) translateY(-50%);
  802. -ms-transform: rotate(45deg) translateY(-50%);
  803. -moz-transform: rotate(45deg) translateY(-50%);
  804. -webkit-transform: rotate(45deg) translateY(-50%);
  805. -o-transform: rotate(45deg) translateY(-50%);
  806. }
  807. .grid-wrapper .bottom1 .wrapper .chartBlock {
  808. display: flex;
  809. height: calc(100% - 40px);
  810. justify-content:space-around;
  811. }
  812. #chartBottom1,#chartBottom2,#chartBottom3{
  813. width:30%
  814. }
  815. #chartBottom1 .chartTab-t,#chartBottom2 .chartTab-t,#chartBottom3 .chartTab-t,#chartBottom4 .chartTab-t{
  816. padding-left: 102px;
  817. height: 40px;
  818. line-height: 40px;
  819. }
  820. #chartBottom2 .chartTab-t,#chartBottom4 .chartTab-t{
  821. padding-left: 12px;
  822. }
  823. #chartBottom1 .chartTab-t .chartTab-title,#chartBottom2 .chartTab-t .chartTab-title,#chartBottom3 .chartTab-t .chartTab-title,#chartBottom4 .chartTab-t .chartTab-title{
  824. font-size: 1em;
  825. position: relative;
  826. }
  827. #chartBottom1 .chartTab-t .chartTab-title:before,#chartBottom2 .chartTab-t .chartTab-title:before,#chartBottom3 .chartTab-t .chartTab-title:before,#chartBottom4 .chartTab-t .chartTab-title:before{
  828. content:'';
  829. width:14px;
  830. height:14px;
  831. border-radius:50%;
  832. position:absolute;
  833. left:-20px;
  834. top:50%;
  835. background-color:#fff;
  836. margin-top:-7px;
  837. }
  838. #chart-snwd,#chart-snsd,#chart-myfwtj,#chart-ys{
  839. height:calc(100% - 40px);
  840. }
  841. .grid-wrapper .bottom1 .chartWrapper {
  842. display: flex; }
  843. .grid-wrapper .bottom1 .chartWrapper > div {
  844. width: 50%; }
  845. .grid-wrapper .bottom2 {
  846. grid-area: bottom2; }
  847. .right-tabs {
  848. height: 40px;
  849. display: flex;
  850. justify-content: center;
  851. align-items: center;
  852. }
  853. .right-tabs .log-tab.active,.right-tabs .log-tab.active:before,.right-tabs .log-tab.active:after {
  854. background-color: #53BAFD;
  855. color: #fff;
  856. }
  857. .right-tabs .log-tab.active {
  858. z-index: 3;
  859. }
  860. .right-tabs .log-tab {
  861. border-radius: 8px 8px 0 0;
  862. display: flex;
  863. align-items: center;
  864. justify-content: center;
  865. /* padding: 10px 24px 8px; */
  866. height: 100%;
  867. width: 30%;
  868. background-color: #FFF;
  869. margin-right: 46px;
  870. z-index: 2;
  871. position: relative;
  872. cursor: pointer;
  873. color: #777;
  874. text-transform: uppercase;
  875. font-size: 1.2em;
  876. transition: all 250ms ease;
  877. }
  878. .right-tabs .log-tab:before {
  879. right: -24px;
  880. transform: skew(30deg, 0deg);
  881. box-shadow: rgba(0,0,0,.1) 3px 2px 5px, inset rgba(255,255,255,.09) -1px 0;
  882. border-radius: 0 8px 0 0;
  883. }
  884. .right-tabs .log-tab:after {
  885. left: -24px;
  886. transform: skew(-30deg, 0deg);
  887. box-shadow: rgba(0,0,0,.1) -3px 2px 5px, inset rgba(255,255,255,.09) 1px 0;
  888. border-radius: 8px 0 0 0;
  889. }
  890. .right-tabs .log-tab:before, .right-tabs .log-tab:after {
  891. display: block;
  892. content: " ";
  893. position: absolute;
  894. top: 0;
  895. height: 100%;
  896. width: 44px;
  897. background-color: #FFF;
  898. transition: all 250ms ease;
  899. }
  900. .switch-tab-list{
  901. display:none;
  902. height:calc(100% - 40px);
  903. }
  904. .play-box-content{
  905. width:100%;
  906. height:50%;
  907. }
  908. .play-box-content canvas{
  909. width:466px;
  910. height:299px;
  911. }