Accueil Explorer Aide
S'inscrire Connexion
zmcoding
/
data_view
Suivre 1
Voter 0
Fork 0
Fichiers Tickets 0 Pull Requests 0 Wiki
Branche: master
Branches Tags
data_view
/
gitee-datav
/
智慧交通
/
高速交通大数据分析平台
/
css
/
visual.css

visual.css 7.2 KB
Lien permanent Historique Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130 
  1. a,p,h1,h2,h3,h4,h5,h6,body,span,label,div{padding:0;margin:0;font-family:'瀵邦喛钂嬮梿鍛寸拨';}
    2. 

  2. div{font-family:'瀵邦喛钂嬮梿鍛寸拨';}
    3. 

  3. ul{padding:0;margin:0;}
    4. 

  4. a{text-decoration:none !important;}
    5. 

  5. .clear{clear:both;}
    6. 

  6. html, body, form{overflow-y:auto;height:100%;}
    7. 

  7. /* 滚动条样式 */
    8. 

  8. ::-webkit-scrollbar {width:1px;height:4px;}
    9. 

  9. ::-webkit-scrollbar-track {-webkit-box-shadow:inset 0 0 6px rgba(255,255,255,0.9);border-radius: 10px;}
    10. 

  10. ::-webkit-scrollbar-thumb {border-radius:5px; background: rgba(66,66,66,1);-webkit-box-shadow:inset 0 0 6px rgba(227,227,227,87.5);}
    11. 

  11. ::-webkit-scrollbar-thumb:window-inactive {background: rgba(227,227,227,0.5);}
    12. 

  12. 

  13. @font-face{
    14. 

  14. 	font-family: yjsz;
    15. 

  15. 	src:url('../fonts/yjsz.TTF'),
    16. 

  16. 		url('../fonts/yjsz.eot'); /* IE9+,可以是具体的实际链接 */
    17. 

  17. 	}
    18. 

  18. 

  19. 

  20. .ksh{height:100%;padding:15px;background:url(../images/data08.png) no-repeat #061537;background-size:cover;overflow:hidden;position:relative;z-index:-2;}
    21. 

  21. 

  22. /* 加载旋转动画 */
    23. 

  23. #load{width:100%;height:100%;position:absolute;background:url(../images/data08.png) no-repeat #061537;background-size:cover;top:0;left:0;z-index:999}
    24. 

  24. #load .load_img{position:absolute;left:calc(50% - 182px);top:calc(50% - 182px);}
    25. 

  25. .load_img img{position:absolute;left:0;top:0;}
    26. 

  26. .load_img .jzxz1{animation:xz1 8s infinite linear;}
    27. 

  27. 	@keyframes xz1 {
    28. 

  28. 	  from {
    29. 

  29. 	  transform:rotate(0deg);
    30. 

  30. 	  }
    31. 

  31. 	  50% {
    32. 

  32. 	    transform:rotate(180deg);
    33. 

  33. 	  }
    34. 

  34. 	  to{
    35. 

  35. 	  	transform:rotate(360deg);
    36. 

  36. 	  }
    37. 

  37. 	}	
    38. 

  38. .load_img .jzxz2{animation:xz2 7s infinite linear;}
    39. 

  39. 	@keyframes xz2 {
    40. 

  40. 	  from {
    41. 

  41. 	  transform:rotate(0deg);
    42. 

  42. 	  }
    43. 

  43. 	  50% {
    44. 

  44. 	    transform:rotate(-180deg);
    45. 

  45. 	  }
    46. 

  46. 	  to{
    47. 

  47. 	  	transform:rotate(-360deg);
    48. 

  48. 	  }
    49. 

  49. 	}	
    50. 

  50. 

  51. .head_top{position:relative;}
    52. 

  52. .head_top img{width:90%;margin:auto;}
    53. 

  53. .head_top p{width:100%;text-align:center;color:#55bfff;position:absolute;bottom: -18px;left: -10px;}
    54. 

  54. .head_top p span{font-family:'yjsz';font-size:20px;}
    55. 

  55. 

  56. .visual{height:calc(100% - 33px);padding-top:10px;}
    57. 

  57. 

  58. .visual_box{height:33.3%;}
    59. 

  59. .visual_box .visual_title{position:relative;height:35px;margin:5px 0;}
    60. 

  60. .visual_box .visual_title span{color:#fff;font-size:18px;line-height:35px;}
    61. 

  61. .visual_box .visual_title img{width:100%;position:absolute;left:0;bottom:0;}
    62. 

  62. .visual_box .visual_chart{height:calc(100% - 35px);}
    63. 

  63. 

  64. .visual_left{width:25%;height:100%;float:left;}
    65. 

  65. .visual_left .sfzcll{position:relative;}
    66. 

  66. .visual_left .sfzcll a{width:32%;text-align:center;line-height:25px;color:#fff;display:inline-block;}
    67. 

  67. .visual_left .sfzcll .sfzcll_pos_box{width:100%;height:calc(100% - 30px);}
    68. 

  68. .visual_left .sfzcll .sfzcll_box{width:100%;height:calc(33% - 15px);line-height:5;background:rgba(15,47,72,0.8);border:1px solid #1380bd;position:relative;margin-bottom:15px;}
    69. 

  69. .visual_left .sfzcll .sfzcll_box:last-of-type{margin:0;}
    70. 

  70. .visual_left .sfzcll .sfzcll_box .sfzcll_bkJk{position:absolute;}
    71. 

  71. .visual_left .sfzcll .sfzcll_box .sfzcll_bkJk:first-of-type{top:-2px;left:-2px;}
    72. 

  72. .visual_left .sfzcll .sfzcll_box .sfzcll_bkJk:nth-child(2){top:-2px;right:-2px;}
    73. 

  73. .visual_left .sfzcll .sfzcll_box .sfzcll_bkJk:nth-child(3){bottom:-2px;right:-2px;}
    74. 

  74. .visual_left .sfzcll .sfzcll_box .sfzcll_bkJk:nth-child(4){bottom:-2px;left:-2px;}
    75. 

  75. .visual_left .sfzcll .sfzcll_box label{width:33%;color:#fff;text-align:center;float:left;}
    76. 

  76. .visual_left .sfzcll .sfzcll_box label img{width:23px;height:23px;margin-right:5px;margin-top:-2px;}
    77. 

  77. .visual_left .sfzcll .sfzcll_box .sfzcll_smallBk{width:33%;height:100%;float:left;padding:2px 5px;}
    78. 

  78. .visual_left .sfzcll .sfzcll_box .sfzcll_smallBk>div{height:100%;background:url(../images/ksh38.png) no-repeat;background-size:100% 100%;text-align: center;line-height:1.5em;}
    79. 

  79. .visual_left .sfzcll .sfzcll_box .sfzcll_smallBk .ygl{color:#00ffc6;}
    80. 

  80. .visual_left .sfzcll .sfzcll_box .sfzcll_smallBk .ygh{color:#ffe400;}
    81. 

  81. 

  82. .visual_con{width:50%;height:100%;float:left;padding:25px 20px 0 20px;}
    83. 

  83. .visual_con .visual_conTop{height:130px;margin-bottom:10px;}
    84. 

  84. .visual_con .visual_conTop .visual_conTop_box{height:100%;padding:0 3px;}
    85. 

  85. .visual_con .visual_conTop .visual_conTop1{width:20%;height:100%;float:left;}
    86. 

  86. .visual_con .visual_conTop .visual_conTop1>div{background:url(../images/ksh40.png) no-repeat;background-size:100% 100%;}
    87. 

  87. .visual_con .visual_conTop .visual_conTop2{width:30%;height:100%;float:left;}
    88. 

  88. .visual_con .visual_conTop .visual_conTop2>div{background:url(../images/ksh39.png) no-repeat;background-size:100% 100%;}
    89. 

  89. .visual_right{width:25%;height:100%;float:right;}
    90. 

  90. .visual_con .visual_conTop .visual_conTop_box>div{height:100%;}
    91. 

  91. .visual_con .visual_conTop .visual_conTop_box>div h3{color:#fff;font-size:16px;padding:16px 0 0 20px;}
    92. 

  92. .visual_con .visual_conTop .visual_conTop_box>div p{width:33%;float:left;line-height:85px;color:#20dbfd;text-shadow:0 0 25px #00d8ff;font-size:46px;font-family: 'yjsz';text-align:right;}
    93. 

  93. .visual_con .visual_conTop .visual_conTop_box>div .conTop_smil{width:67%;height:60px;float:left;padding-top:23px;}
    94. 

  94. .visual_con .visual_conTop .visual_conTop_box>div .conTop_smil a{display:block;line-height:20px;text-align: left;color:#fff;padding-left:9px;}
    95. 

  95. .visual_con .visual_conTop .visual_conTop_box>div .conTop_smil span{width:32px;display:inline-block;margin-left:3px;}
    96. 

  96. .visual_con .visual_conTop .visual_conTop_box>div .conTop_smil a.sz{color:#fe3e12;}
    97. 

  97. .visual_con .visual_conTop .visual_conTop_box>div .conTop_smil a.xd{color:#12fe81;}
    98. 

  98. .visual_con .visual_conTop .visual_conTop_box>div .conTop_smil a.null{visibility:hidden;}
    99. 

  99. 

  100. .visual_con .visual_conBot{height:calc(100% - 136px);background:url(../images/ksh41.png) no-repeat;background-size:100% 100%;position:relative;}
    101. 

  101. .visual_con .visual_conBot>img{position:absolute;width:25px;height:25px;}
    102. 

  102. .visual_con .visual_conBot .visual_conBot_l{position:absolute;left:0;top:0;}
    103. 

  103. .visual_con .visual_conBot .visual_conBot_2{position:absolute;right:0;top:0;}
    104. 

  104. .visual_con .visual_conBot .visual_conBot_3{position:absolute;right:0;bottom:0;}
    105. 

  105. .visual_con .visual_conBot .visual_conBot_4{position:absolute;left:0;bottom:0;}
    106. 

  106. .visual_con .visual_conBot .visual_chart{width:100%;height:100%;position:absolute;}
    107. 

  107. .visual_con .visual_conBot .visual_chart_text{color:#fff;position:absolute;top:15px;left:15px;z-index: 99;}
    108. 

  108. .visual_con .visual_conBot .visual_chart_text h1{font-size:26px;margin-bottom:6px;}
    109. 

  109. .visual_con .visual_conBot .visual_chart_text h2{font-size:20px;}
    110. 

  110. .visual_con .visual_conBot .visual_conBot_bot{width:calc(100% - 8px);height:180px;background:rgba(16,54,87,0.5);border:1px solid #345f92;position:absolute;bottom:4px;left:4px;z-index:99;}
    111. 

  111. 

  112. .visualSssf_left{width:40%;float:left;color:#fff;padding:10px 20px 0 20px;}
    113. 

  113. .visualSssf_left h3{color:#fff;font-size:20px;font-weight:600;margin-bottom:10px;}
    114. 

  114. .visualSssf_left a{width:32%;color:#fff;display:inline-block;margin-bottom:10px;cursor:pointer;}
    115. 

  115. .visualSssf_left a.active{color:#01f0ff;}
    116. 

  116. .visualSssf_right{width:60%;height:100%;float:left;}
    117. 

  117. .visualSssf_right .visualSssf_right_box{width:33%;float:left;height:100%;}
    118. 

  118. 

  119. .visualSfzsfl{position:relative;}
    120. 

  120. .visualSfzsfl .visual_chart{opacity:0.6}
    121. 

  121. .visualSfzsfl .visual_table{width:60%;position:absolute;z-index: 99;top:40px;left:0;}
    122. 

  122. .visualSfzsfl .visual_table table{width:100%;color:#fff;text-align:center;}
    123. 

  123. .visualSfzsfl .visual_table table tr{border-bottom: 1px dashed #ddd;}
    124. 

  124. .visualSfzsfl .visual_table table tr:first-child{color:#01c0ff;}
    125. 

  125. .visualSfzsfl .visual_table table tr:last-child{border-bottom: 1px solid #ddd;}
    126. 

  126. 

  127. 

  128. 

  129. 

  130.