body, html, div, ul, li, h1, h2, h3, p { margin: 0; padding: 0; } * { box-sizing: border-box; } html, body, #app { width: 100%; height: 100%; overflow: hidden; font-family: 'Medium'; } @keyframes loading { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes opacity-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes z-index-10to-1 { 0% { z-index: 10; } 100% { z-index: -1; } } .flex { display: flex; } .flex-center { justify-content: center; align-items: center; } .flex-1 { flex: 1; } .flex-col { flex-direction: column; } .align-center { align-items: center; } .space-between { justify-content: space-between; } .justify-center { justify-content: center; } .relative { position: relative; } .el-overlay { --el-color-primary: #ff7a51; // 主橙红色 --el-color-primary-light-3: #ffa785; // 较浅的橙红(混合20%白) --el-color-primary-light-5: #ffc2aa; // 更浅的橙红(混合33%白) --el-color-primary-light-7: #ffddcf; // 浅橙红(混合47%白) --el-color-primary-light-8: #ffe8df; // 很浅的橙红(混合53%白) --el-color-primary-light-9: #fff2ec; // 极浅的橙红(混合60%白) --el-color-primary-dark-2: #cc6241; // 深橙红(加深20%) } .el-select, .el-popper{ --el-color-primary: #6c6c6c; /* 主灰色 */ --el-color-primary-light-3: #8a8a8a; /* 较浅的灰色(混合20%白) */ --el-color-primary-light-5: #a8a8a8; /* 更浅的灰色(混合33%白) */ --el-color-primary-light-7: #c6c6c6; /* 浅灰色(混合47%白) */ --el-color-primary-light-8: #d4d4d4; /* 很浅的灰色(混合53%白) */ --el-color-primary-light-9: #e3e3e3; /* 极浅的灰色(混合60%白) */ --el-color-primary-dark-2: #565656; /* 深灰色(加深20%) */ } // 迷你滚动条 .mini-scrollbar { &::-webkit-scrollbar { width: 0.4rem; } &::-webkit-scrollbar-thumb { border-radius: 0.4rem; background: rgba(0, 0, 0, 0.2); } } .mosaic-bg{ --mosaic-bg-size: 1rem; --mosaic-bg-color1: #efefef; --mosaic-bg-color2: #fff; background-image: repeating-conic-gradient(var(--mosaic-bg-color1) 0% 25%, var(--mosaic-bg-color2) 0% 50%); background-repeat: repeat; background-position: 50% 50%; background-size: var(--mosaic-bg-size) var(--mosaic-bg-size); }