/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 14px; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } * { box-sizing: border-box; } a { text-decoration: unset; } html, body { background-color: #060B2E; height: 100%; width: 100%; min-width: 1920px; min-height: 1080px; } .header-wrapper { display: flex; justify-content: center; background-color: #08133D; position: relative; } .header-wrapper:hover .nav-bar { top: 0px; } .header-wrapper .title { text-align: center; line-height: 80px; font-size: 2.6em; color: #69F8FE; position: relative; width: 623px } .header-wrapper .title svg { position: absolute; left: -140px; top: -2px; } .header-wrapper .title:after { content: ''; width: 100%; height: 2px; background-color: #fff; position: absolute; bottom: -10px; left: 0px; } .nav-bar { position: absolute; left: 0; top: -90px; height: 90px; background-color: #0E1E51; transition: top 0.75s; display: flex; align-items: center; padding: 0 16px; width: 100%; } .login-content { position: absolute; right: 50px; top: 0; height: 100%; display: flex; align-items: center; } .login-content .login-href { color: #fff; cursor: pointer; margin-right: 30px; } .login-content .logout-href { color: #fff; cursor: pointer; margin-right: 30px; } .login-content .select-input { min-width: 80px; max-width: 300px; height: 32px; position: relative; vertical-align: middle; padding: 2px; background-color: #001346; color: #fff; text-shadow: none; border-radius: 4px; transition: box-shadow 0.25s ease; border: 1px solid #0b52e0; z-index: 2; display: flex; align-items: center; padding-right: 20px; } .login-content .select-input:before { content: ""; position: absolute; width: 0; height: 0; border: 6px solid transparent; border-top-color: #fff; top: 12px; right: 4px; cursor: pointer; z-index: -2; } .login-content .select-input .muchang-list { position: absolute; left: 0px; top: 100%; width: 100%; display: none; background-color: #001346; border-radius: 0 0 6px 6px; 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); } .login-content .select-input .muchang-list li { text-align: center; height: 30px; line-height: 30px; cursor: pointer; padding: 0 10px; } .login-content .select-input .muchang-list li:hover { background-color: #528DFF } .login-content .select-input .muchang-title { width: 100%; height: 100%; padding-left: 10px; color: #fff; display: flex; align-items: center; font-size: 0.9em; cursor: pointer; } .nav-bar .item { cursor: pointer; padding: 10px 30px; color: #ffffff; font-size: 22px; border-right: 2px solid transparent; border-image: linear-gradient(0, #0A214A, #6DDFE9, #0A214A) 1; } .nav-bar .item:last-child { border-right: 0; } .nav-bar .item.active { /*color: #6DDFE9; */ background: linear-gradient(to top, #69F8FE, #f4f4f4); -webkit-background-clip: text; color: transparent; font-weight: bold; } body::-webkit-scrollbar { /*滚动条整体样式*/ width: 10px; /*高宽分别对应横竖滚动条的尺寸*/ height: 10px; scrollbar-arrow-color: #00f; } body::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 6px; -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: rgba(6,11,46, 1); scrollbar-arrow-color: red; } body::-webkit-scrollbar-track { /*滚动条里面轨道*/ -webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.8); border-radius: 0; background: rgba(255, 255, 255, 0.8); }