Inicio Explorar Axuda
Iniciar sesión
zyy
/
ziqim
1
0
Fork 0
Ficheiros Incidencias 0 Pull Requests 0 Wiki
Rama: master
Ramas Etiquetas
ziqim
/
zhiqim_ui
/
zinc
/
www
/
main.css

main.css 14 KB
Permalink Histórico Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273 
  1. /**************************************************************************************/
    2. 

  2. /* 布局（全局、导航、脚注） */
    3. 

  3. /**************************************************************************************/
    4. 

  4. 

  5. /* [全局定义] */
    6. 

  6. html{overflow-x:hidden;}
    7. 

  7. body,table,td,div{font-size:14px;line-height:120%;}
    8. 

  8. a,a:visited{color:#333;text-decoration:none;cursor:pointer;}
    9. 

  9. a:active,a:hover{color:#008bd2;text-decoration:none;}
    10. 

  10. a.blue,a.blue:visited{color:#0066cc;text-decoration:none;cursor:pointer;}
    11. 

  11. a.blue:active,a.blue:hover{color:#0066cc;text-decoration:underline;}
    12. 

  12. 

  13. /* [顶导航] */
    14. 

  14. .topnav {position:fixed;top:0;left:0;width:100%;min-width:1250px;color: #fff;background-color:#00a2eb;height:55px;z-index:99;}
    15. 

  15. .topnav .logo {float:left;width:60px;height:55px;line-height:55px;background-color:#008bd2;}
    16. 

  16. .topnav .logoname {float:left;font-size:28px;width:240px;height:55px;line-height:52px;background-color:#00a2eb;color:#fff;padding-left:10px;border-right:1px solid #008bd2;}
    17. 

  17. 

  18. .topnav .topnavleft {float:left;height:55px;line-height:55px;}
    19. 

  19. .topnav .topnavleft .nav {float:left;width:96px;height:55px;line-height:55px;font-size:16px;margin-right:5px;text-align:center;letter-spacing:2px;cursor:pointer;}
    20. 

  20. .topnav .topnavleft .nav:hover{color:#fff;background-color:#008bd2;border-left:1px solid #0583cc;border-right:1px solid #0583cc;}
    21. 

  21. .topnav .topnavleft .nav.active{color:#fff;background-color:#008bd2;border-left:1px solid #0583cc;border-right:1px solid #0583cc;}
    22. 

  22. 

  23. .topnav .topnavright {float:right;height:55px;}
    24. 

  24. .topnav .topnavright .nav {float:left;height:55px;line-height:55px;font-size:14px;border-left:1px solid #008bd2;}
    25. 

  25. .topnav .topnavright .nav:hover {background-color:#01a7f2; color:#fff;}
    26. 

  26. .topnav .topnavright .query{float:left;width:300px;margin-right:15px;height:55px;line-height:50px;text-align:center;}
    27. 

  27. .topnav .topnavright .query input{width:85%;color:#ffffff;border-bottom:1px solid #f5f5f5;border-top:0px;border-left:0px;border-right:0px; -webkit-box-shadow:none;-moz-box-shadow:none;  box-shadow:none;background-color:transparent;}
    28. 

  28. @media screen and (max-width:1430px){.topnav .topnavleft .nav {width:93px;}.topnav .topnavright .query{width:250px;}}
    29. 

  29. @media screen and (max-width:1360px){.topnav .topnavleft .nav {width:88px;}.topnav .topnavright .query{width:200px;}}
    30. 

  30. 

  31. .topnav .topnavright .navcray {float:left;height:55px;line-height:55px;font-size:14px;border-left:1px solid #008bd2;background-color:#08c2c0;}
    32. 

  32. .topnav .topnavright .navcray:hover {background-color:#1fcdcb; color:#fff;}
    33. 

  33. 

  34. /* [顶导航固定55px] */
    35. 

  35. .topnav-margin{position:relative;width:100%;height:55px;}
    36. 

  36. 

  37. /* [顶导航通知] */
    38. 

  38. .noticenum{position:absolute;top:0;right:8px;padding:0 2px;border-radius:50px;box-shadow:0 0 0 2px #ffffff;min-width:20px;line-height:20px;font-style:normal;background-color:#ff0000;color:#fff;font-size:12px;}
    39. 

  39. 

  40. /**************************************************************************************/
    41. 

  41. /* 首页分屏 */
    42. 

  42. /**************************************************************************************/
    43. 

  43. 

  44. .sectiontitle{font-size:30px;margin-bottom:10px;font-weight:bold;}
    45. 

  45. 

  46. /* 区域 */
    47. 

  47. .section{position:relative;width:100%;height:600px;background-color:#f8f8f8;}
    48. 

  48. .section .first,
    49. 

  49. .section .second,
    50. 

  50. .section .third,
    51. 

  51. .section .fourth,
    52. 

  52. .section .fifth,
    53. 

  53. .section .sixth{position:absolute;margin:auto;top:0;left:0;bottom:0;right:0;width:100%;max-width:1250px;}
    54. 

  54. 

  55. /* 首屏 */
    56. 

  56. .section .first{height:550px;width:100%}
    57. 

  57. .section .first .title{position:relative;margin:20px auto 0 auto;width:706px;height:84px;text-align:center;}
    58. 

  58. .section .first .intro{padding:0 50px; display: -webkit-flex; /* Safari */ display: flex; flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:center;margin:80px auto 0 auto;color:#fff;}
    59. 

  59. .section .first .intro button{border:1px solid #fff;background-color:transparent;border-radius:4px;color:#fff;font-size:16px;}
    60. 

  60. .section .first .count{margin-top:50px;padding-right:40px;text-align:right;font-size:24px;color:#fff;}
    61. 

  61. 

  62. /* 第二屏 */
    63. 

  63. .section .second{height:550px;}
    64. 

  64. .section .second .brief{margin-top:90px;padding-left:20px;}
    65. 

  65. .section .second .brief a{color:#1e7eec;}
    66. 

  66. 

  67. /* 第三屏 */
    68. 

  68. .section .third{height:460px;}
    69. 

  69. .section .third .producttitle{font-size:40px;margin-bottom:10px;font-weight:bold;}
    70. 

  70. .section .third .productfont{font-size:18px;color:#555;}
    71. 

  71. .section .third .productfont ul{margin-top:15px;}
    72. 

  72. .section .third .productfont li{color:#555;line-height:38px;list-style:none;list-style-image: url(images/disc.png);list-style-position: inside;}
    73. 

  73. 

  74. .fadeInDown .z-float-left{
    75. 

  75. display : block !important;
    76. 

  76. animation:fadeInDown 1s;
    77. 

  77. /* Firefox: */
    78. 

  78. -moz-animation:fadeInDown 1s;
    79. 

  79. /* Safari and Chrome: */
    80. 

  80. -webkit-animation:fadeInDown 1s;
    81. 

  81. /* Opera: */
    82. 

  82. -o-animation:fadeInDown 1s;}
    83. 

  83. @keyframes fadeInDown
    84. 

  84. {
    85. 

  85. 0% {opacity: 0;-webkit-transform: translate3d(0,-600px,0);transform: translate3d(0,-600px,0);}
    86. 

  86. 100% {opacity: 1;-webkit-transform: none;transform: none;}
    87. 

  87. }
    88. 

  88. 

  89. @-moz-keyframes fadeInDown /* Firefox */
    90. 

  90. {
    91. 

  91. 0% {opacity: 0;-webkit-transform: translate3d(0,-600px,0);transform: translate3d(0,-600px,0);}
    92. 

  92. 100% {opacity: 1;-webkit-transform: none;transform: none;}
    93. 

  93. }
    94. 

  94. 

  95. @-webkit-keyframes fadeInDown /* Safari and Chrome */
    96. 

  96. {
    97. 

  97. 0% {opacity: 0;-webkit-transform: translate3d(0,-600px,0);transform: translate3d(0,-600px,0);}
    98. 

  98. 100% {opacity: 1;-webkit-transform: none;transform: none;}
    99. 

  99. }
    100. 

  100. 

  101. @-o-keyframes fadeInDown /* Opera */
    102. 

  102. {
    103. 

  103. 0% {opacity: 0;-webkit-transform: translate3d(0,-600px,0);transform: translate3d(0,-600px,0);}
    104. 

  104. 100% {opacity: 1;-webkit-transform: none;transform: none;}
    105. 

  105. }
    106. 

  106. 

  107. /* 第四屏 */
    108. 

  108. .section .fourth{height:460px;}
    109. 

  109. .section .fourth .brief{margin-top:90px;padding-left:20px;}
    110. 

  110. .section .fourth .brief a{color:#1e7eec;}
    111. 

  111. .section .fourth .brief .corporate{font-size:30px;margin-bottom:10px;font-weight:bold;}
    112. 

  112. 

  113. /* 第五屏 */
    114. 

  114. .section .fifth{height:460px;}
    115. 

  115. .section .fifth .brief{margin-top:110px;}
    116. 

  116. .section .fifth .brief a{color:#1e7eec;}
    117. 

  117. 

  118. /* 第六屏 */
    119. 

  119. .section .sixth{height:460px;}
    120. 

  120. .section .sixth .brief{margin-top:90px;}
    121. 

  121. .section .sixth .brief a{color:#1e7eec;}
    122. 

  122. 

  123. /**************************************************************************************/
    124. 

  124. /* 容器内容 */
    125. 

  125. /**************************************************************************************/
    126. 

  126. 

  127. /** [容器定义] */
    128. 

  128. .container {display: flex;width:100%;min-width:1250px;height:100%;min-height:1000px;overflow:hidden;background-color:#fff;}
    129. 

  129. 

  130. /* [左导航] */
    131. 

  131. .sidebar-top{position:relative;float:left;width:60px;height:100%;overflow:hidden; background-color:#333;z-index:20;padding-bottom: 9999px;margin-bottom: -9999px;}
    132. 

  132. .sidebar-top li{position:relative;float:left;width:60px;height:70px;display:inline-block;text-align:center;color:#fff;padding:13px 0;line-height:22px;}
    133. 

  133. .sidebar-top li:hover{background-color:#414750;cursor:pointer;}
    134. 

  134. .sidebar-top li.active{background-color:#5c5c5c;}
    135. 

  135. .sidebar-top li i{font-size:22px;}
    136. 

  136. .sidebar-top .avatar{text-align:center;padding:16px 5px;cursor:pointer;}
    137. 

  137. 

  138. .sidebar-child{position:relative;margin-left:60px;width:240px;height:100%;overflow:hidden; background-color:#f2f2f2;border-right:1px solid #d8dce5;z-index:20;padding-bottom: 9999px;margin-bottom: -9999px;}
    139. 

  139. .sidebar-child p{position:relative;float:left;width:240px; height:40px;line-height:40px;color:#333; padding-left:25px; background-color:#f2f2f2;cursor:pointer;}
    140. 

  140. .sidebar-child p a{color:#333;}
    141. 

  141. .sidebar-child p .f-arrow>span{border-color:#eff6fc transparent transparent;}
    142. 

  142. .sidebar-child p:hover{background-color:#f2f1ed;color:#008bd2;}
    143. 

  143. .sidebar-child p.active{background-color:#e4e3df;color:#008bd2;}
    144. 

  144. .sidebar-child p:hover>.f-arrow>span{border-color:#333 transparent transparent;}
    145. 

  145. .sidebar-child p.active>.f-arrow>span{border-color:#333 transparent transparent;}
    146. 

  146. 

  147. .sidebar-child ul{position:relative;width:240px;height:auto;overflow:hidden;}
    148. 

  148. .sidebar-child ul li{float:left;width:240px;height:40px;color:#666;line-height:40px;padding-left:40px;cursor:pointer;}
    149. 

  149. .sidebar-child ul li a{color:#666;}
    150. 

  150. .sidebar-child ul li:hover{background-color:#f2f1ed; color:#008bd2;}
    151. 

  151. .sidebar-child ul li.active{background-color:#e4e3df; color:#008bd2;}
    152. 

  152. 

  153. .sidebar-child .info{position:relative;width:100%;padding:25px;}
    154. 

  154. 

  155. .sidebar-child .coursenav{position:relative;width:100%;padding:20px;}
    156. 

  156. .sidebar-child .coursenav a{width:95px;line-height:30px;display:inline-block;}
    157. 

  157. .sidebar-child .coursenav a.active{color:#008bd2;display:inline-block;}
    158. 

  158. 

  159. .ueseroperate{position:relative;width:100%;overflow:hidden;padding-top:15px;min-height:200px; padding-left:25px;border-top:1px solid #e5e5e5;}
    160. 

  160. .ueseroperate .operatemenu{position:relative;cursor: pointer;color: #999;height:40px;line-height:40px;}
    161. 

  161. .ueseroperate .operatemenu:hover{color:#333;}
    162. 

  162. 

  163. /* 边导航用户信息 */
    164. 

  164. .sidebar-child .userinfo{position:relative;width:100%;padding:5px 20px 5px 20px;}
    165. 

  165. .sidebar-child .recommend{position:relative;width:100%;padding:20px 20px 20px 20px;margin-top:20px;}
    166. 

  166. 

  167. /* [主体部分] */
    168. 

  168. .mainbody{position:relative;width:100%;}
    169. 

  169. .mainbody .content{position:relative;float:left;width:100%;padding:25px;}
    170. 

  170. .mainbody.componentBody{margin-left:60px;}
    171. 

  171. 

  172. /* 当前位置 */
    173. 

  173. .breadcrumb{position:relative;float:left;width:100%;padding-left:25px;}
    174. 

  174. 

  175. .scrolltotop{position:fixed;right:20px;bottom:20px;display:none;z-index:99999;border:1px solid #d3d3d3;padding:10px;cursor:pointer;}
    176. 

  176. .scrolltotop:hover{background-color:#333;}
    177. 

  177. 

  178. /* 产品 */
    179. 

  179. .productwarp{position:relative;width:100%;padding-bottom:20px;border-bottom:1px dashed #ccc;margin-bottom:30px;overflow: hidden;}
    180. 

  180. .productwarp .twoellipsis{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-all;}
    181. 

  181. 

  182. .productlist{position:relative;width:100%;padding:20px;margin-bottom:20px;border:1px solid #d8dce5;background-color:#fff;overflow: hidden;box-shadow:0px 0px 2px 2px #ebebeb;}
    183. 

  183. .productlist:hover{box-shadow:0px 0px 3px 3px #ebebeb;}
    184. 

  184. .projectlist-right{width:100%;padding-left:240px;margin-left:-200px;text-align:left;}
    185. 

  185. 

  186. /* 产品优势 */
    187. 

  187. .advantagelist{float:left;width:50%;padding:15px 10px;margin-bottom:20px;height:150px;}
    188. 

  188. .advantagelist:nth-child(odd){padding-right:50px;}
    189. 

  189. .advantagelist:nth-child(even){padding-left:50px;}
    190. 

  190. .advantagelist .advantagelist-right{width:100%;padding-left:140px;margin-left:-140px;margin-top:25px;}
    191. 

  191. 

  192. .advantage{font-size:18px;color:#555;margin-top:40px;}
    193. 

  193. .advantage li{color:#555;line-height:45px;list-style:none;list-style-image: url(images/disc.png);list-style-position: inside;}
    194. 

  194. 

  195. .dktitle{font-size:30px;margin-bottom:20px;}
    196. 

  196. .dkadvantage{font-size:18px;color:#555;margin-top:40px;}
    197. 

  197. .dkadvantage ul{margin-top:15px;}
    198. 

  198. .dkadvantage li{color:#555;line-height:38px;list-style:none;list-style-image: url(images/disc.png);list-style-position: inside;}
    199. 

  199. 

  200. .twoellipsis{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-all;}
    201. 

  201. 

  202. /* [脚注] */
    203. 

  203. .footer {position:relative;width:100%;min-width:1250px;z-index:0;display:block;border-top:1px solid #e6e6e6;overflow:hidden;}
    204. 

  204. .footer-wrap {margin:10px auto;height:160px;width:1250px;text-align:center;color:#333;font-size:14px;}
    205. 

  205. .footer li {float:left;height:130px;margin:10px 20px 10px 0;text-align:left;line-height:30px;color:#888;}
    206. 

  206. .footer li a {margin:10px;color:#888;}
    207. 

  207. .footer li a:hover {color:#1e7eec;}
    208. 

  208. .footer li.fproduct{width:180px;margin-left:30px;}
    209. 

  209. .footer li.fhelp{width:222px;}
    210. 

  210. .footer li.fabout{width:190px;}
    211. 

  211. .footer li.abountus {width:300px;}
    212. 

  212. .footer li.fproduct,.footer li.fhelp,.footer li.fabout{border-right:1px dashed #ccc;}
    213. 

  213. 

  214. @media screen and (max-width: 1071px) {
    215. 

  215.     .footer li.fproduct{width:140px;}
    216. 

  216.     .footer li.fhelp{width:180px;}
    217. 

  217.     .footer li.fabout{width:150px;}
    218. 

  218.     .footer li.abountus {width:280px;}
    219. 

  219. }
    220. 

  220. 

  221. .footer-cp {position:relative;width:100%;min-width:1250px;height:85px;line-height:85px;background-color:#eee;overflow:hidden;}
    222. 

  222. .footer-cp-wrap{position:relative;margin:0 auto;width:1250px;height:85px;z-index:0;display:block;overflow:hidden;}
    223. 

  223. .footer-cp .footer-text{width:1250px;height:85px;line-height:85px;text-align:center;}
    224. 

  224. @media screen and (max-width: 1071px) {
    225. 

  225.     .footer-cp-wrap{width:1000px;}
    226. 

  226.     .footer-cp .footer-text{width:1000px;margin-left:-100px;}
    227. 

  227. }
    228. 

  228. 

  229. /* 指南标题 */
    230. 

  230. .tutorial.title {position:relative;float:left;font-size:20px;font-weight:bold;color:#555;width:100%;height:45px;margin-top:30px;margin-bottom:30px;line-height:45px;border-bottom:1px solid #e7e7e7;}
    231. 

  231. .tutorial.title .right{float:right;}
    232. 

  232. 

  233. /* 指南内部标题 */
    234. 

  234. .tutorial.ctitle {position:relative;float:left;font-size:18px !important; color:#444;width:100%;height:25px;line-height:40px;}
    235. 

  235. .tutorial.ctitle .right{float:right;}
    236. 

  236. /* 指南内部内容 */
    237. 

  237. .tutorial.csamp{display:table-cell; background-color:#f8f8f8; font-size:13px !important; padding:6px !important; line-height:1.42857143 !important;}
    238. 

  238. .tutorial.ccontent{position:relative;font-size:18px !important; color:#555;width:100%;line-height:25px; margin-top:40px;}
    239. 

  239. 

  240. /* 功能列表 */
    241. 

  241. .tutorial header {font-size:28px;font-weight:700;line-height:200%;}
    242. 

  242. .tutorial li {list-style-type:disc;line-height:180%;margin-left:25px;margin-bottom:10px;}
    243. 

  243. .tutorial.decimal li {list-style-type:decimal;}
    244. 

  244. 

  245. /* 功能链接 */
    246. 

  246. .tutorial.feature {font-size:16px;}
    247. 

  247. .tutorial.feature a{color:#08c;text-decoration:none;}
    248. 

  248. .tutorial.feature a:hover{text-decoration:underline;}
    249. 

  249. 

  250. /* 右边浮动图标 */
    251. 

  251. .fixedright{position:fixed;top:120px;right:25px;width:60px;background-color:#fff;border:1px solid #d5d5d5;border-bottom:0;}
    252. 

  252. .fixedright li{background-color:#fff;text-align:center;padding:10px 0;border-bottom:1px solid #d5d5d5;cursor:pointer;color:#999;}
    253. 

  253. .fixedright li:hover{background-color:#f8f8f8;color:#00a2eb;}
    254. 

  254. 

  255. /** 定义右边浮动图标 */
    256. 

  256. .fixedicon{display:inline-block;width:24px;height:24px;vertical-align: middle;background-image:url(/zinc/www/images/fixicon.png);background-repeat: no-repeat;}
    257. 

  257. .collection{background-position:0 0;} /* 收藏 */
    258. 

  258. .consultant{background-position:0 -24px;} /* 客服咨询 */
    259. 

  259. .wechat{background-position:0 -48px;} /* 微信 */
    260. 

  260. .microblog{background-position:0 -72px;} /* 微博 */
    261. 

  261. .qq{background-position:0 -96px;} /* qq */
    262. 

  262. .praise{background-position:0 -120px;} /* 点赞 */
    263. 

  263. .copy{background-position:0 -144px;} /* 复制 */
    264. 

  264. .follow{background-position:0 -168px;} /* 关注 */
    265. 

  265. 

  266. li:hover .collection{background-position:-24px 0;} /* 收藏 */
    267. 

  267. li:hover .consultant{background-position:-24px -24px;} /* 客服咨询 */
    268. 

  268. li:hover .wechat{background-position:-24px -48px;} /* 微信 */
    269. 

  269. li:hover .microblog{background-position:-24px -72px;} /* 微博 */
    270. 

  270. li:hover .qq{background-position:-24px -96px;} /* qq */
    271. 

  271. li:hover .praise{background-position:-24px -120px;} /* 点赞 */
    272. 

  272. li:hover .copy{background-position:-24px -144px;} /* 复制 */
    273. 

  273. li:hover .follow{background-position:-24px -168px;} /* 关注 */
    274.