常见baseStyle/* 初始化样式 ------------------------------- */ * { margin: 0; padding: 0; box-sizing: border-box; outline: none !important; } :root { --startdt-color-white: #ffffff; --startdt-bg-main-color: #f8f8f8; --startdt-bg-color: #f5f5ff; --startdt-border-color-light: #f1f2f3; --startdt-color-primary-lighter: #ecf5ff; --startdt-color-success-lighter: #f0f9eb; --startdt-color-warning-lighter: #fdf6ec; --startdt-color-danger-lighter: #fef0f0; --startdt-color-dark-hover: #0000001a; --startdt-color-menu-hover: rgba(0, 0, 0, 0.2); --startdt-color-user-hover: rgba(0, 0, 0, 0.04); --startdt-color-seting-main: #e9eef3; --startdt-color-seting-aside: #d3dce6; --startdt-color-seting-header: #b3c0d1; } html, body, #app { margin: 0; padding: 0; width: 100%; height: 100%; font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; background-color: var(--startdt-bg-main-color); font-size: 14px; overflow: hidden; position: relative; } /* nprogress 进度条跟随主题颜色 ------------------------------- */ #nprogress { .bar { background: var(--el-color-primary) !important; z-index: 9999999 !important; } } /* 主布局样式 ------------------------------- */ .layout-container { width: 100%; height: 100%; min-width: 1080px; flex-direction: column; .layout-aside { background-color: #545c64; color: #fff; box-shadow: 2px 0 6px rgb(0 21 41 / 1%); height: inherit; position: relative; z-index: 1; display: flex; flex-direction: column; overflow-x: hidden !important; transition: width 0.3s ease; .el-scrollbar__view { overflow: hidden; } } .layout-header { background-color: var(--startdt-color-white, #fff); box-shadow: 0 1px 5px 0 rgb(57 57 57 / 12%); padding: 0 !important; } .layout-backtop { display: flex; flex-direction: column; width: 100%; overflow: hidden; } .layout-main { padding: 0 !important; overflow: hidden; width: 100%; background-color: var(--startdt-bg-main-color); } .el-scrollbar { width: 100%; } .layout-scrollbar { width: 100%; padding: 16px; box-sizing: border-box; & > .el-scrollbar__wrap { .el-scrollbar__view { height: 100% !important; } } } .layout-main-height-50 { height: calc(100vh - 50px); } } /* cursor 鼠标形状 ------------------------------- */ // 默认 .cursor-default { cursor: default !important; } // 帮助 .cursor-help { cursor: help !important; } // 手指 .cursor-pointer { cursor: pointer !important; } // 移动 .cursor-move { cursor: move !important; } /* 宽高 100% ------------------------------- */ .w100 { width: 100% !important; } .h100 { height: 100% !important; } .vh100 { height: 100vh !important; } .max100vh { max-height: 100vh !important; } .min100vh { min-height: 100vh !important; } /* 颜色值 ------------------------------- */ .color-primary { color: var(--el-color-primary); } .color-success { color: var(--el-color-success); } .color-warning { color: var(--el-color-warning); } .color-danger { color: var(--el-color-danger); } .color-info { color: var(--el-color-info); } /** 基础盒模型css 1px-36px 之间 */ .bmp(@i) { .mt@{i} { margin-top: unit(@i, px) !important; } .mr@{i} { margin-right: unit(@i, px) !important; } .mb@{i} { margin-bottom: unit(@i, px) !important; } .ml@{i} { margin-left: unit(@i, px) !important; } .pt@{i} { padding-top: unit(@i, px) !important; } .pr@{i} { padding-right: unit(@i, px) !important; } .pb@{i} { padding-bottom: unit(@i, px) !important; } .pl@{i} { padding-left: unit(@i, px) !important; } } .generateBmp(@n) when (@n < 36) { .bmp(@n); .generateBmp(@n + 1); } .generateBmp(1); /* keyframes */ @keyframes opacity-animation { 0% { opacity: 0; } 100% { opacity: 1; } } 京东方式/ 把我们所有标签的内外边距清零 /{ margin: 0; padding: 0; / css3盒子模型 / box-sizing: border-box;}/ em 和 i 斜体的文字不倾斜 /em,i { font-style: normal}/ 去掉li 的小圆点 /li { list-style: none}img {/* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */ border: 0; /* 取消图片底侧有空白缝隙的问题 */ vertical-align: middle}button {/* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */ cursor: pointer}a {color: #666; text-decoration: none}a:hover {color: #c81623}button,input {/* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */ font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif; /* 默认有灰色边框我们需要手动去掉 */ border: 0; outline: none;}body {/* CSS3 抗锯齿形 让文字显示的更加清晰 */ -webkit-font-smoothing: antialiased; background-color: #fff; font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif; color: #666}.hide,.none {display: none}/ 清除浮动 /.clearfix:after {visibility: hidden; clear: both; display: block; content: "."; height: 0}.clearfix {*zoom: 1}淘宝方式/ 去除常见标签默认的 margin 和 padding /body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,input { margin: 0; padding: 0;}/ 自减盒子模型 /{box-sizing: border-box;}/ 设置网页统一的字体大小、行高、字体系列相关属性 /body { font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei","Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;color: #333;}/ 去除列表默认样式 /ul,ol { list-style: none;}/ 去除默认的倾斜效果 /em,i { font-style: normal;}/ 去除a标签默认下划线，并设置默认文字颜色 /a { text-decoration: none; color: #333;}/ 设置img的垂直对齐方式为居中对齐，去除img默认下间隙 /img { vertical-align: middle;}/ 去除input默认样式 /input { border: none; outline: none; color: #333;}/ 左浮动 /.fl { float: left;}/ 右浮动 /.fr { float: right;}/ 双伪元素清除法 /.clearfix::before,.clearfix::after { content: ""; display: table;}.clearfix::after { clear: both;}