Trang chủ Khám phá Trợ giúp
Đăng nhập
caimei365
/
caimei365-www
3
0
Fork 0
Các tập tin Các vấn đề 0 Yêu cầu khéo về 0 Wiki
Tree: ab9bd92af6
Branches Tags
caimei365-www
/
src
/
main
/
resources
/
static
/
css
/
supplier-center
/
encyclopedia
/
charts.css

charts.css 13 KB
Lịch sử Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156 
  1. /*PC端**/
    2. 

  2.  @media screen and (min-width:768px) {
    3. 

  3.   body{background-color: #F5F5F5;}
    4. 

  4.   header{box-shadow: none;position: fixed;width: 100%;z-index: 99;}
    5. 

  5.   table, td, th{border: none;}
    6. 

  6.   .chartHeadCenter{ width: 100%;height: 100px;background: #FFFFFF;box-sizing: border-box;padding: 25px 0 10px 0; }
    7. 

  7.   .chartHeadCenter.account .header-logo{ width: 33.33%;float: left;}
    8. 

  8.   .chartHeadCenter .logo{ width: auto;height: 52px; margin-right: 20px;border-right: 1px solid #e1e1e1;box-sizing: border-box;padding-right:16px;float: left;}
    9. 

  9.   .chartHeadCenter .logo.none{border-right: none;}
    10. 

  10.   .chartHeadCenter .logo.none img{width: auto;height: 52px;display: block;}
    11. 

  11.   .header-title{width: 33.33%;float: left;}
    12. 

  12.   .header-title p{line-height: 24px;font-size: 24px;color: #333333;font-weight: bold;text-align: center;}
    13. 

  13.   .header-title p.small{line-height: 30px;font-size: 16px;color: #666666;font-weight: normal;text-align: center}
    14. 

  14.   .header-time{width: 33.33%;height:100%;float: right;box-sizing: border-box;text-align: right; }
    15. 

  15.   .chart-content{width: 1200px;margin: 0 auto;padding-top: 100px;min-height: 600px;}
    16. 

  16.   .chart-content-empty{ width: 100%;height: 600px; box-sizing: border-box;padding: 100px 0;margin-top:30px;text-align: center;color: #4A4F58;line-height: 30px;font-size: 16px;background: #FFF; }
    17. 

  17.   .chart-content-empty img{ width: 260px;height: 200px; }
    18. 

  18.   .chart-content-empty p{color: #999999; }
    19. 

  19.   .chart-content .chart-title{ width: 100%;float: left; line-height: 80px;font-size: 24px;color: #333333;font-weight: bold;}
    20. 

  20.   .chart-content .chart-title span{line-height: 80px;font-size: 16px;color: #333333;font-weight: normal;}
    21. 

  21.   .chart-content-text{ min-height: 100px;width: 100%;box-sizing: border-box;padding: 24px;background: #FFFFFF;float: left;margin-bottom: 16px; }
    22. 

  22.   .chart-content-text h1,.chart-content-text p{font-size: 14px;color: #666666;line-height: 28px;}
    23. 

  23.   .chart-content-main{width: 100%;height: auto;float: left;margin-bottom: 16px;}
    24. 

  24.   .chart-main-top{width: 100%;height: 520px; margin-top: 16px;box-sizing: border-box;padding: 57px;background: #FFFFFF;}
    25. 

  25.   .chart-main-top-title{ width: 100%;line-height: 40px;font-size: 24px;font-weight: bold;color: #333333;text-align: center;margin-bottom:30px;}
    26. 

  26.   .chart-main-top-main{ width: 100%;height: 324px; }
    27. 

  27.   .chart-main-top-left{width: 340px;height: 100%; float: left;}
    28. 

  28.   .chart-main-top-left-li{ width: 100%;height: 63px;float: left;box-sizing: border-box;border-left: 3px solid #FFFFFF;margin-bottom: 2px;}
    29. 

  29.   .chart-main-top-left-li .li-title{ float: left;line-height: 63px;font-size: 18px;font-weight: bold;color: #333333;box-sizing: border-box;padding: 0 10px;margin-right: 14px;text-align: center;}
    30. 

  30.   .chart-main-top-left-li .li-texts{ width: 240px;box-sizing: border-box;height: 63px;padding: 10px 0;float: left;}
    31. 

  31.   .chart-main-top-left-li .li-texts.min{width: 182px;}
    32. 

  32.   .chart-main-top-left-li .li-texts.none p{line-height: 43px;}
    33. 

  33.   .chart-main-top-left-li .li-texts p{ line-height: 22px;font-size: 14px;color: #666666;}
    34. 

  34.   .chart-main-top-left-li.a{border-color: #73C0DE;background: linear-gradient(89deg, #E1F6FE 0%, #FFFFFF 100%);}
    35. 

  35.   .chart-main-top-left-li.b{border-color: #EE6666;background: linear-gradient(88deg, #FFECEC 0%, #FFFFFF 100%);}
    36. 

  36.   .chart-main-top-left-li.c{border-color: #5470C6;background: linear-gradient(87deg, #E6ECFF 0%, #FFFFFF 100%);}
    37. 

  37.   .chart-main-top-left-li.d{border-color: #91CC75;background: linear-gradient(87deg, #EEFEE7 0%, #FFFFFF 100%);}
    38. 

  38.   .chart-main-top-left-li.e{border-color: #FAC858;background: linear-gradient(88deg, #FFF5DF 0%, #FFFFFF 100%);}
    39. 

  39.   .chart-main-top-mids{width: 400px;height: 100%;float: left; }
    40. 

  40.   .chart-main-top-mids-li{width: 100%;height: 64px;margin-bottom: 2px;}
    41. 

  41.   .chart-main-top-mids-ch{margin: 0 auto; height: 100%;line-height: 64px;display: block;font-size: 16px;color: #ffffff;text-align: center;position: relative;transition:all 0.5s;}
    42. 

  42.   .chart-main-top-mids-li:hover .chart-main-top-mids-ch{transform: scale(1.1);-ms-transform: scale(1.1);-webkit-transform: scale(1.1);color: #FFFFFF;}
    43. 

  43.   .chart-main-top-mids-ch.a{ background: url("/img/encyclopedia/chart/chart_a@2x.png");}
    44. 

  44.   .chart-main-top-mids-ch.b{width: 320px; background: url("/img/encyclopedia/chart/chart_b@2x.png");}
    45. 

  45.   .chart-main-top-mids-ch.c{width: 240px; background: url("/img/encyclopedia/chart/chart_c@2x.png");}
    46. 

  46.   .chart-main-top-mids-ch.d{width: 160px; background: url("/img/encyclopedia/chart/chart_d@2x.png");}
    47. 

  47.   .chart-main-top-mids-ch.e{width: 80px; background: url("/img/encyclopedia/chart/chart_e@2x.png");}
    48. 

  48.   .chart-main-top-right{width: 312px;height: 100%;float: left;margin-left: 34px; }
    49. 

  49.   .chart-main-top-right-li{ width: 100%; height: 110px;box-sizing: border-box;padding: 22px 0 14px 0;border-bottom: 1px solid #E1E1E1; float: left;}
    50. 

  50.   .chart-main-top-right-tips {width: 100%;height: 36px;margin-bottom: 10px; }
    51. 

  51.   .chart-main-top-right-tips .tips{ display: inline-block;border-radius: 4px; box-sizing: border-box;padding: 0 10px;font-size: 18px;line-height: 36px;color: #333333;text-align: center;font-weight: bold;}
    52. 

  52.   .chart-main-top-right-tips .tips.a{ background: #73C0DE; }
    53. 

  53.   .chart-main-top-right-tips .tips.b{ background: #5470C6; }
    54. 

  54.   .chart-main-top-right-tips .tips.c{ background: #91CC75; }
    55. 

  55.   .chart-main-top-right-li p{ font-size: 14px;line-height: 22px;color: #666666; }
    56. 

  56. 

  57.   .chart-main-bot{width: 100%;height: auto;box-sizing: border-box;padding: 20px 0;background: #FFFFFF;}
    58. 

  58.   .chart-main-top img{width: 100%;height: auto;}
    59. 

  59.   .chart-main-bot img{width: 792px;height: 203px;display: block;margin: 0 auto; }
    60. 

  60.   .chart-main-box{width: 592px;height: 420px;background: #FFFFFF;box-sizing: border-box;padding: 24px;}
    61. 

  61.   .chart-main-box.le{float: left;}
    62. 

  62.   .chart-main-box.ri{float: right;}
    63. 

  63.   .chart-main-min{width: 592px;height: 320px;background: #FFFFFF;box-sizing: border-box;padding: 24px;}
    64. 

  64.   .chart-main-min-title{width: 100%;line-height: 28px;font-size: 18px;font-weight: bold;color: #666666;margin-bottom: 20px;}
    65. 

  65.   .chart-main-max{width: 100%;min-height: 485px;background: #FFFFFF;box-sizing: border-box;padding: 24px;}
    66. 

  66.   .chart-main-max.table{min-height: 620px;}
    67. 

  67.   .chart-main-max.min{min-height: 480px;}
    68. 

  68.   .chart-main-max.mins{min-height: 255px;}
    69. 

  69.   .chart-main-min.le{float: left;}
    70. 

  70.   .chart-main-min.ri{float: right;}
    71. 

  71.   .chart-main-468{width: 468px;height: 360px;background: #FFFFFF;box-sizing: border-box;padding: 24px;float: left;}
    72. 

  72.   .chart-main-568{width: 568px;height: 360px;background: #FFFFFF;box-sizing: border-box;padding: 24px;float: left;}
    73. 

  73.   .chart-main-568 img{width: 100%;height: 100%;display: block;}
    74. 

  74.   .chart-main-300{width: 300px;height: 360px;background: #FFFFFF;box-sizing: border-box;padding: 24px;float: right;margin-left: 16px;}
    75. 

  75.   .chart-main-400{width: 400px;height: 360px;background: #FFFFFF;box-sizing: border-box;padding: 24px;float: right;margin-left: 16px;}
    76. 

  76.   .chart-main-390{width: 390px;height: 360px;background: #FFFFFF;box-sizing: border-box;padding: 24px;float: left;margin-right: 15px;}
    77. 

  77.   .chart-main-390.none{margin-right: 0;}
    78. 

  78.   footer{width: 100%;float: left;}
    79. 

  79.   #scrollTop .item .phone{ display: none; }
    80. 

  80.   #scrollTop .item .Iphone{ display: none; }
    81. 

  81. 

  82. }
    83. 

  83. 

  84. /*移动端**/
    85. 

  85.  @media screen and (max-width:768px){
    86. 

  86.   body{background-color: #F5F5F5;}
    87. 

  87.   header{box-shadow: none;width: 100%;z-index: 99;}
    88. 

  88.   footer{display: none;}
    89. 

  89.   table, td, th{border: none;}
    90. 

  90.   .chartHeadCenter{ width: 100%;height: auto;background: #FFFFFF;box-sizing: border-box;padding: 2vw; }
    91. 

  91.   .chartHeadCenter.account .wrap{}
    92. 

  92.   .chartHeadCenter .logo{ width: 24vw;height: auto; margin-right: 4vw;border-right: 1px solid #e1e1e1;box-sizing: border-box;padding-right:4vw;float: left;}
    93. 

  93.   .chartHeadCenter .logo.none{border-right: none;}
    94. 

  94.   .chartHeadCenter .logo.none img{width: auto;height: 12vw;display: block;}
    95. 

  95.   .header-logo{float: left;width: 100%;margin-bottom: 3vw;}
    96. 

  96.   .header-title{float: left;width: 100%;height: 10vw;}
    97. 

  97.   .header-title p{line-height: 10vw;font-size: 4vw;color: #333333;font-weight: bold;float: left;}
    98. 

  98.   .header-title p.small{font-size: 3.4vw;color: #666666;font-weight: normal;}
    99. 

  99.   .header-time{width: 100%;height:100%;float: left;box-sizing: border-box; }
    100. 

  100.   .chart-content{width: 100%;margin: 0 auto;margin-top: 4vw;}
    101. 

  101.   .chart-content-empty{ width: 100%;height: 190vw; box-sizing: border-box;padding: 50vw 0;text-align: center;color: #4A4F58;background: #FFF; }
    102. 

  102.   .chart-content-empty img{ width: 40vw;height: auto; }
    103. 

  103.   .chart-content-empty p{color: #999999; line-height: 10vw;font-size:3.2vw;}
    104. 

  104.   .chart-title{ width: 100%;float: left; line-height: 8vw;font-size: 4.6vw;color: #333333;font-weight: bold;box-sizing: border-box;padding: 0 3vw;background: #FFFFFF;}
    105. 

  105.   .chart-title span{line-height: 8vw;font-size: 3.4vw;color: #333333;font-weight: normal;}
    106. 

  106.   .chart-content-text{ min-height: 60vw;width: 100%;box-sizing: border-box;padding: 3vw;background: #FFFFFF;float: left;margin-bottom: 4vw; }
    107. 

  107.   .chart-content-text h1,.chart-content-text p{font-size: 3.4vw;color: #666666;line-height: 6vw;}
    108. 

  108.   .chart-content-main{width: 100%;height: auto;float: left;margin-bottom: 3vw;}
    109. 

  109.   .chart-main-top{width: 100%;height: auto; margin-top: 3vw;box-sizing: border-box;padding:0 3vw 3vw 3vw;background: #FFFFFF;}
    110. 

  110.   .chart-main-top-title{ width: 100%;line-height: 10vw;font-size: 4vw;font-weight: bold;color: #333333;text-align: center;margin-bottom:3vw;}
    111. 

  111.   .chart-main-top-main{ width: 100%;height: auto;  display: flex;flex-direction: column; }
    112. 

  112.   .chart-main-top-left{width: 100%;height: auto; float: left;margin-bottom: 5vw;}
    113. 

  113.   .chart-main-top-left-li{ width: 100%;height: 14vw;float: left;box-sizing: border-box;border-left: 3px solid #FFFFFF;margin-bottom: 2px;}
    114. 

  114.   .chart-main-top-left-li .li-title{ float: left;line-height: 14vw;font-size: 3.6vw;font-weight: bold;color: #333333;box-sizing: border-box;padding: 0 10px;margin-right: 3vw;text-align: center;}
    115. 

  115.   .chart-main-top-left-li .li-texts{ width: 70vw;box-sizing: border-box;height: 14vw;padding: 2vw 0;float: left;}
    116. 

  116.   .chart-main-top-left-li .li-texts.min{width: 58vw;}
    117. 

  117.   .chart-main-top-left-li .li-texts.none p{line-height: 43px;}
    118. 

  118.   .chart-main-top-left-li .li-texts p{ line-height: 22px;font-size: 14px;color: #666666;}
    119. 

  119.   .chart-main-top-left-li.a{border-color: #73C0DE;background: linear-gradient(89deg, #E1F6FE 0%, #FFFFFF 100%);}
    120. 

  120.   .chart-main-top-left-li.b{border-color: #EE6666;background: linear-gradient(88deg, #FFECEC 0%, #FFFFFF 100%);}
    121. 

  121.   .chart-main-top-left-li.c{border-color: #5470C6;background: linear-gradient(87deg, #E6ECFF 0%, #FFFFFF 100%);}
    122. 

  122.   .chart-main-top-left-li.d{border-color: #91CC75;background: linear-gradient(87deg, #EEFEE7 0%, #FFFFFF 100%);}
    123. 

  123.   .chart-main-top-left-li.e{border-color: #FAC858;background: linear-gradient(88deg, #FFF5DF 0%, #FFFFFF 100%);}
    124. 

  124.   .chart-main-top-mids{width: 100%;height: auto;order: -1; margin-bottom: 4vw;}
    125. 

  125.   .chart-main-top-mids-li{width: 100%;height: 12.6vw;margin-bottom: 2px;}
    126. 

  126.   .chart-main-top-mids-ch{margin: 0 auto; height: 100%;line-height: 12.6vw;display: block;font-size: 3.4vw;color: #ffffff;text-align: center;position: relative;transition:all 0.5s;}
    127. 

  127.   .chart-main-top-mids-li:hover .chart-main-top-mids-ch{transform: scale(1.1);-ms-transform: scale(1.1);-webkit-transform: scale(1.1);color: #FFFFFF;}
    128. 

  128.   .chart-main-top-mids-ch.a{width: 81.6vw;background: url("/img/encyclopedia/chart/chart_h5_a@2x.png");background-size: cover;}
    129. 

  129.   .chart-main-top-mids-ch.b{width: 64vw; background: url("/img/encyclopedia/chart/chart_h5_b@2x.png");background-size: cover;}
    130. 

  130.   .chart-main-top-mids-ch.c{width: 47.5vw; background: url("/img/encyclopedia/chart/chart_h5_c@2x.png");background-size: cover;}
    131. 

  131.   .chart-main-top-mids-ch.d{width: 31.4vw; background: url("/img/encyclopedia/chart/chart_h5_d@2x.png");background-size: cover;}
    132. 

  132.   .chart-main-top-mids-ch.e{width: 15.6vw; background: url("/img/encyclopedia/chart/chart_h5_e@2x.png");background-size: cover;}
    133. 

  133.   .chart-main-top-right{width: 100%;height: auto;float: left;}
    134. 

  134.   .chart-main-top-right-li{ width: 100%; height: auto;box-sizing: border-box;padding: 3vw 0 2vw 0;border-bottom: 1px solid #E1E1E1; float: left;}
    135. 

  135.   .chart-main-top-right-tips {width: 100%;height: 7.2vw;margin-bottom: 3vw; }
    136. 

  136.   .chart-main-top-right-tips .tips{ display: inline-block;border-radius: 1vw; box-sizing: border-box;padding: 0 2vw;font-size: 4.2vw;line-height:7.2vw;color: #333333;text-align: center;font-weight: bold;}
    137. 

  137.   .chart-main-top-right-tips .tips.a{ background: #73C0DE; }
    138. 

  138.   .chart-main-top-right-tips .tips.b{ background: #5470C6; }
    139. 

  139.   .chart-main-top-right-tips .tips.c{ background: #91CC75; }
    140. 

  140.   .chart-main-top-right-li p{ font-size: 3.4vw;line-height: 4vw;color: #666666; }
    141. 

  141. 

  142.   .chart-main-bot{width: 100%;height: auto;box-sizing: border-box;padding: 3vw ;background: #FFFFFF;}
    143. 

  143.   .chart-main-top img{width: 100%;height: auto;}
    144. 

  144.   .chart-main-bot img{width: 100%;height: auto;display: block;}
    145. 

  145.   .chart-main-box{width: 100%;height: 86vw;background: #FFFFFF;box-sizing: border-box;padding: 3vw;}
    146. 

  146.   .chart-main-box.le{float: left;margin-bottom: 16px;}
    147. 

  147.   .chart-main-box.ri{float: left;}
    148. 

  148.   .chart-main-min{width: 100%;height: 42vw;background: #FFFFFF;box-sizing: border-box;padding: 3vw;}
    149. 

  149.   .chart-main-max{width: 100%;min-height: 54vw;background: #FFFFFF;box-sizing: border-box;padding: 3vw;}
    150. 

  150.   .chart-main-min.le{float: left;margin-bottom: 16px;}
    151. 

  151.   .chart-main-min.ri{float: left;}
    152. 

  152.   .chart-main-568{width: 100%;height: 86vw;background: #FFFFFF;box-sizing: border-box;padding: 3vw;float: left;margin-bottom: 16px;}
    153. 

  153.   .chart-main-468{width: 100%;height: 86vw;background: #FFFFFF;box-sizing: border-box;padding: 3vw;float: left;margin-bottom: 16px;}
    154. 

  154.   .chart-main-400{width: 100%;height: 86vw;background: #FFFFFF;box-sizing: border-box;padding: 3vw;float: left;margin-bottom: 16px;}
    155. 

  155.   .chart-main-300{width: 100%;height: 60vw;background: #FFFFFF;box-sizing: border-box;padding: 3vw;float: left;margin-bottom: 16px;}
    156. 

  156. }
    157.