网站
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

356 line
6.3 KiB

  1. /*公共主题参数*/
  2. :root{
  3. --color:'';
  4. --icon:'';
  5. --logo:'';
  6. /*--color:#e8041f;*/
  7. }
  8. #page{
  9. height: 100vh;
  10. overflow: hidden;
  11. background: url("../images/page_bg.jpg") no-repeat center;
  12. background-size: 100% 100%;
  13. }
  14. .header{
  15. text-align: center;
  16. height: 15vh;
  17. width: 90%;
  18. margin: 0 auto;
  19. }
  20. .header p{
  21. color: #b6c8ff;
  22. margin-top: 5px;
  23. }
  24. .header i{
  25. display: block;
  26. width: 2.7vh;
  27. height: 2.7vh;
  28. margin: 0 auto;
  29. position: relative;
  30. top: 50%;
  31. transform: translateY(-50%);
  32. transition: all 0.4s ease-in-out;
  33. }
  34. #titContent{
  35. font-size: 4vh;
  36. font-weight: bold;
  37. color: #ffffff;
  38. font-style: italic;
  39. }
  40. .active .i1{
  41. background: url("../images/nav_5.png") no-repeat center;
  42. background-size: 100% 100%;
  43. }
  44. .active .i2{
  45. background: url("../images/nav_6.png") no-repeat center;
  46. background-size: 100% 100%;
  47. }
  48. .active .i3{
  49. background: url("../images/nav_7.png") no-repeat center;
  50. background-size: 100% 100%;
  51. }
  52. .active .i4{
  53. background: url("../images/nav_8.png") no-repeat center;
  54. background-size: 100% 100%;
  55. }
  56. .header .active{
  57. position: relative;
  58. }
  59. .header .header_nav div{
  60. width: 5vh;
  61. height: 5vh;
  62. margin: 0 auto;
  63. position: relative;
  64. }
  65. .header .header_nav:hover .i1{
  66. background: url("../images/nav_5.png") no-repeat center;
  67. background-size: 100% 100%;
  68. transition: all 0.4s ease-in-out;
  69. }
  70. .header .header_nav:hover .i2{
  71. background: url("../images/nav_6.png") no-repeat center;
  72. background-size: 100% 100%;
  73. transition: all 0.4s ease-in-out;
  74. }
  75. .header .header_nav:hover .i3{
  76. background: url("../images/nav_7.png") no-repeat center;
  77. background-size: 100% 100%;
  78. transition: all 0.4s ease-in-out;
  79. }
  80. .header .header_nav:hover .i4{
  81. background: url("../images/nav_8.png") no-repeat center;
  82. background-size: 100% 100%;
  83. transition: all 0.4s ease-in-out;
  84. }
  85. .header .header_nav{
  86. cursor: pointer;
  87. }
  88. .header .header_nav:hover p{
  89. color: #46cdf3;
  90. transition: all 0.4s ease-in-out;
  91. }
  92. .header .header_nav p{
  93. transition: all 0.4s ease-in-out;
  94. }
  95. .header .header_nav .i_bg{
  96. cursor: pointer;
  97. display: none;
  98. transition: all 0.4s ease-in-out;
  99. width: 5vh;
  100. height: 5vh;
  101. }
  102. .header .active .i_bg{
  103. display: block!important;
  104. position: absolute;
  105. top: 0;
  106. }
  107. .header .active p{
  108. color: #46cdf3;
  109. }
  110. .i1{
  111. background: url("../images/nav_1.png") no-repeat center;
  112. background-size: 100% 100%;
  113. }
  114. .i2{
  115. background: url("../images/nav_2.png") no-repeat center;
  116. background-size: 100% 100%;
  117. }
  118. .i3{
  119. background: url("../images/nav_3.png") no-repeat center;
  120. background-size: 100% 100%;
  121. }
  122. .i4{
  123. background: url("../images/nav_4.png") no-repeat center;
  124. background-size: 100% 100%;
  125. }
  126. .search{
  127. /*background-color: #e1e4ef;*/
  128. width: 75%;
  129. margin: 0 auto;
  130. }
  131. .search input[type="search"]{
  132. padding: 2vh 20px 2vh 4%;
  133. width: 40%;
  134. border-radius: 15px;
  135. font-size: 16px;
  136. background: #e1e4ef url("../images/search_icon.png") no-repeat left;
  137. background-position-x: 4%;
  138. }
  139. .new{
  140. width: 75%;
  141. margin: 0 auto;
  142. background: rgba(225,228,238,0.9);
  143. height: 50vh;
  144. margin-top: 3vh;
  145. border-radius: 15px;
  146. padding: 3vh;
  147. display: flex;
  148. /*align-items: center;*/
  149. }
  150. .personalTit-banner {
  151. width: 45%;
  152. height: 100%;
  153. border-radius: 15px;
  154. overflow: hidden;
  155. }
  156. .new_list{
  157. margin-left: 2%;
  158. width: 53%;
  159. padding: 1vh 0;
  160. }
  161. .new_list_tit{
  162. display: flex;
  163. justify-content: space-between;
  164. align-items: center;
  165. }
  166. .new_list_tit p:first-child{
  167. font-size: 18px;
  168. color: #1663ff;
  169. border-left: 3px solid #1663ff;
  170. padding-left: 10px;
  171. font-weight: bold;
  172. line-height: 1;
  173. }
  174. .new_list_tit p:last-child{
  175. color: #848484;
  176. padding-left: 20px;
  177. line-height: 1;
  178. background: url("../images/date.png") no-repeat left;
  179. }
  180. .new_list_li{
  181. display: flex;
  182. justify-content: space-between;
  183. align-items: center;
  184. margin-top: 2.5vh;
  185. cursor: pointer;
  186. }
  187. .new_list_li:hover p{
  188. color: #1663ff!important;
  189. transition: all 0.4s ease-in-out;
  190. }
  191. .new_list_li:hover a{
  192. color: #1663ff!important;
  193. transition: all 0.4s ease-in-out;
  194. }
  195. .new_list_li p{
  196. transition: all 0.4s ease-in-out;
  197. }
  198. .new_list_li a{
  199. font-size: 16px;
  200. display: -webkit-box;
  201. -webkit-box-orient: vertical;
  202. -webkit-line-clamp: 1;
  203. word-break: break-all;
  204. overflow: hidden;
  205. transition: all 0.4s ease-in-out;
  206. }
  207. .new_list_li p:last-child{
  208. color: #848484;
  209. flex-shrink: 0;
  210. }
  211. .footer{
  212. height: 20vh;
  213. background: #e1e4ef;
  214. margin-top: 6.3vh;
  215. display: flex;
  216. flex-direction: column;
  217. justify-content: space-between;
  218. padding: 4vh 2%;
  219. }
  220. .footer_link_tit{
  221. background: url("../images/footer_icon_1.png") no-repeat left;
  222. padding-left: 18px;
  223. color: #939393;
  224. font-size: 16px;
  225. }
  226. .footer_link{
  227. display: flex;
  228. align-items: center;
  229. }
  230. .footer_link a{
  231. color: #6d6d6d;
  232. font-size: 16px;
  233. margin-left: 20px;
  234. }
  235. .footer_link_filings{
  236. display: flex;
  237. }
  238. .footer_link_filings_left{
  239. display: flex;
  240. }
  241. .footer_link_filings_right{
  242. display: flex;
  243. margin-left: 40px;
  244. }
  245. .footer_link_filings_left p{
  246. background: url("../images/footer_filings.png") no-repeat left;
  247. padding-left: 25px;
  248. }
  249. .footer_link_filings p{
  250. color: #939393;
  251. font-size: 16px;
  252. }
  253. .footer_link_filings a{
  254. color: #6d6d6d;
  255. font-size: 16px;
  256. margin-left: 20px;
  257. }
  258. .footer_link_company{
  259. display: flex;
  260. align-items: center;
  261. }
  262. .footer_link_company div{
  263. display: flex;
  264. align-items: center;
  265. margin-right: 40px;
  266. }
  267. .footer_link_company p{
  268. color: #939393;
  269. font-size: 16px;
  270. }
  271. .footer_link_company a{
  272. color: #6d6d6d;
  273. font-size: 16px;
  274. margin-left: 20px;
  275. }
  276. .xuanzhuan {
  277. -webkit-transition-property: -webkit-transform;
  278. -webkit-transition-duration: 1s;
  279. -moz-transition-property: -moz-transform;
  280. -moz-transition-duration: 1s;
  281. -webkit-animation: opacity2 2s linear infinite;
  282. -moz-animation: opacity2 2s linear infinite;
  283. -o-animation: opacity2 2s linear infinite;
  284. animation: opacity2 2s linear infinite;
  285. }
  286. @-webkit-keyframes rotate {
  287. from {
  288. -webkit-transform: rotate(0deg)
  289. }
  290. to {
  291. -webkit-transform: rotate(360deg)
  292. }
  293. }
  294. @-moz-keyframes rotate {
  295. from {
  296. -moz-transform: rotate(0deg)
  297. }
  298. to {
  299. -moz-transform: rotate(359deg)
  300. }
  301. }
  302. @-o-keyframes rotate {
  303. from {
  304. -o-transform: rotate(0deg)
  305. }
  306. to {
  307. -o-transform: rotate(359deg)
  308. }
  309. }
  310. @keyframes rotate {
  311. from {
  312. transform: rotate(0deg)
  313. }
  314. to {
  315. transform: rotate(359deg)
  316. }
  317. }
  318. @keyframes opacity2 {
  319. 0% {
  320. opacity: 1;
  321. }
  322. 50% {
  323. opacity: 0.5;
  324. }
  325. 100% {
  326. opacity: 1;
  327. }
  328. }