| | |
| | | --info-color: #909399; |
| | | } |
| | | |
| | | html, body { |
| | | html, |
| | | body { |
| | | margin: 0; |
| | | padding: 0; |
| | | height: 100%; |
| | | width: 100%; |
| | | } |
| | | div, |
| | | span, |
| | | iframe, |
| | | h1, |
| | | h2, |
| | | h3, |
| | | h4, |
| | | h5, |
| | | h6, |
| | | p, |
| | | a, |
| | | img, |
| | | strong, |
| | | sub, |
| | | sup, |
| | | ol, |
| | | ul, |
| | | li, |
| | | form, |
| | | label, |
| | | table, |
| | | tbody, |
| | | tfoot, |
| | | thead, |
| | | tr, |
| | | th, |
| | | td, |
| | | canvas, |
| | | audio, |
| | | video { |
| | | margin: 0; |
| | | padding: 0; |
| | | border: 0; |
| | | font-size: 100%; |
| | | font: inherit; |
| | | /* vertical-align: baseline; */ |
| | | } |
| | | |
| | | // 混入 |
| | |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | } |
| | | } |
| | | |
| | | |
| | | @import 'element-plus/dist/index.css'; |
| | | |
| | | :root { |
| | | font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; |
| | | line-height: 1.5; |
| | | font-weight: 400; |
| | | |
| | | color-scheme: light dark; |
| | | color: rgba(255, 255, 255, 0.87); |
| | | background-color: #242424; |
| | | |
| | | font-synthesis: none; |
| | | text-rendering: optimizeLegibility; |
| | | -webkit-font-smoothing: antialiased; |
| | | -moz-osx-font-smoothing: grayscale; |
| | | } |
| | | |
| | | a { |
| | | font-weight: 500; |
| | | color: #646cff; |
| | | text-decoration: inherit; |
| | | } |
| | | |
| | | a:hover { |
| | | color: #535bf2; |
| | | } |
| | | |
| | | h1 { |
| | | font-size: 3.2em; |
| | | line-height: 1.1; |
| | | margin:0; |
| | | } |
| | | |
| | | button { |
| | | border-radius: 8px; |
| | | border: 1px solid transparent; |
| | | padding: 0.6em 1.2em; |
| | | font-size: 1em; |
| | | font-weight: 500; |
| | | font-family: inherit; |
| | | background-color: #1a1a1a; |
| | | cursor: pointer; |
| | | transition: border-color 0.25s; |
| | | } |
| | | |
| | | button:hover { |
| | | border-color: #646cff; |
| | | } |
| | | |
| | | button:focus, |
| | | button:focus-visible { |
| | | outline: 4px auto -webkit-focus-ring-color; |
| | | } |
| | | |
| | | .card { |
| | | padding: 2em; |
| | | } |
| | | |
| | | #app { |
| | | width: 100%; |
| | | height: 100%; |
| | | margin: 0 auto; |
| | | // text-align: center; |
| | | } |
| | | |
| | | |
| | | /* 引入 Element Plus 的基础样式 */ |
| | | |
| | | .common-layout { |
| | | width: 100%; |
| | | height: 100% |
| | | } |
| | | |
| | | .common-layout .el-container { |
| | | height: 100%; |
| | | } |
| | | |
| | | .el-header { |
| | | background-color: #fff; |
| | | color: #333; |
| | | line-height: 60px; |
| | | border-bottom: 1px solid #ebeef5; |
| | | } |
| | | |
| | | .el-main { |
| | | background-color: #E9EEF3; |
| | | color: #333; |
| | | padding: 0 !important; |
| | | box-sizing: border-box; |
| | | flex: auto; |
| | | |
| | | } |
| | | .pageContainer{ |
| | | display: flex; |
| | | width: 100%; |
| | | height: 100%; |
| | | // background-color: #fff; |
| | | padding-top: 10px; |
| | | box-sizing: border-box; |
| | | } |
| | | .menuBox{ |
| | | box-sizing: border-box; |
| | | |
| | | } |
| | | .contentBox{ |
| | | flex:1 1; |
| | | box-sizing: border-box; |
| | | overflow: hidden; |
| | | padding:10px; |
| | | background-color: #fff; |
| | | } |
| | | |
| | | .el-table__header{ |
| | | thead .el-table__cell{ |
| | | background:#f1f1f1; |
| | | } |
| | | } |
| | | |
| | | |
| | | .mb-4 { |
| | | margin-bottom: 16px; |
| | | } |
| | | |
| | | button { |
| | | outline: none !important; |
| | | } |
| | | |
| | | |
| | | @media (prefers-color-scheme: light) { |
| | | :root { |
| | | color: #213547; |
| | | background-color: #ffffff; |
| | | } |
| | | |
| | | a:hover { |
| | | color: #747bff; |
| | | } |
| | | |
| | | button { |
| | | background-color: #f9f9f9; |
| | | } |
| | | } |
| | | |
| | | //自定义 |
| | | ul { |
| | | list-style: none; |
| | | margin:0 |
| | | } |
| | | |
| | | .flex{ |
| | | display: flex; |
| | | } |
| | | /* 垂直居中 */ |
| | | .ai-c { |
| | | align-items: center; |
| | | } |
| | | |
| | | /* 两边对齐 */ |
| | | .jc-sb { |
| | | justify-content: space-between; |
| | | } |
| | | .hover{ |
| | | cursor: pointer; |
| | | |
| | | } |
| | | |
| | | ::-webkit-scrollbar { |
| | | width: 10px; |
| | | height: 10px; |
| | | } |
| | | |
| | | ::-webkit-scrollbar-track-piece { |
| | | background-color: rgba(0, 0, 0, 0.2); |
| | | -webkit-border-radius: 6px; |
| | | } |
| | | |
| | | ::-webkit-scrollbar-thumb:vertical { |
| | | height: 5px; |
| | | background-color: rgba(125, 125, 125, 0.7); |
| | | -webkit-border-radius: 6px; |
| | | } |
| | | |
| | | ::-webkit-scrollbar-thumb:horizontal { |
| | | width: 5px; |
| | | background-color: rgba(125, 125, 125, 0.7); |
| | | -webkit-border-radius: 6px; |
| | | } |
| | | |