/* ================================
|
全局样式重置
|
================================ */
|
* {
|
margin: 0;
|
padding: 0;
|
box-sizing: border-box;
|
}
|
|
html {
|
font-size: 16px;
|
line-height: 1.5;
|
-webkit-text-size-adjust: 100%;
|
-webkit-font-smoothing: antialiased;
|
-moz-osx-font-smoothing: grayscale;
|
}
|
|
body {
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
sans-serif;
|
font-size: 1rem;
|
line-height: 1.5;
|
color: #333;
|
background-color: #fff;
|
width: 100%;
|
height: 100%;
|
overflow-x: hidden;
|
}
|
|
.main-content {
|
width: 100%;
|
max-width: 1280px;
|
padding: 0 40px;
|
margin: 0 auto;
|
}
|
|
/* ================================
|
根容器样式
|
================================ */
|
#app {
|
width: 100vw;
|
height: 100vh;
|
position: relative;
|
overflow: hidden;
|
}
|
|
/* ================================
|
滚动条样式
|
================================ */
|
::-webkit-scrollbar {
|
width: 6px;
|
height: 6px;
|
}
|
|
::-webkit-scrollbar-track {
|
background: #f1f1f1;
|
border-radius: 3px;
|
}
|
|
::-webkit-scrollbar-thumb {
|
background: #c1c1c1;
|
border-radius: 3px;
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
background: #a8a8a8;
|
}
|
|
/* ================================
|
间距工具类
|
================================ */
|
.m-0 { margin: 0; }
|
.m-1 { margin: 4px; }
|
.m-2 { margin: 8px; }
|
.m-3 { margin: 12px; }
|
.m-4 { margin: 16px; }
|
.m-5 { margin: 20px; }
|
.m-6 { margin: 24px; }
|
.m-7 { margin: 28px; }
|
|
.mx-0 { margin-left: 0; margin-right: 0; }
|
.mx-1 { margin-left: 4px; margin-right: 4px; }
|
.mx-2 { margin-left: 8px; margin-right: 8px; }
|
.mx-3 { margin-left: 12px; margin-right: 12px; }
|
.mx-4 { margin-left: 16px; margin-right: 16px; }
|
.mx-5 { margin-left: 20px; margin-right: 20px; }
|
.mx-6 { margin-left: 24px; margin-right: 24px; }
|
.mx-7 { margin-left: 28px; margin-right: 28px; }
|
|
.my-0 { margin-top: 0; margin-bottom: 0;}
|
.my-1 { margin-top: 4px; margin-bottom: 4px;}
|
.my-2 { margin-top: 8px; margin-bottom: 8px;}
|
.my-3 { margin-top: 12px; margin-bottom: 12px; }
|
.my-4 { margin-top: 16px; margin-bottom: 16px; }
|
.my-5 { margin-top: 20px; margin-bottom: 20px; }
|
.my-6 { margin-top: 24px; margin-bottom: 24px; }
|
.my-7 { margin-top: 28px; margin-bottom: 28px; }
|
|
.mt-0 { margin-top: 0; }
|
.mt-1 { margin-top: 4px; }
|
.mt-2 { margin-top: 8px; }
|
.mt-3 { margin-top: 12px; }
|
.mt-4 { margin-top: 16px; }
|
.mt-5 { margin-top: 20px; }
|
.mt-6 { margin-top: 24px; }
|
.mt-7 { margin-top: 28px; }
|
|
.mb-0 { margin-bottom: 0; }
|
.mb-1 { margin-bottom: 4px; }
|
.mb-2 { margin-bottom: 8px; }
|
.mb-3 { margin-bottom: 12px; }
|
.mb-4 { margin-bottom: 16px; }
|
.mb-5 { margin-bottom: 20px; }
|
.mb-6 { margin-bottom: 24px; }
|
.mb-7 { margin-bottom: 28px; }
|
|
.ml-0 { margin-left: 0; }
|
.ml-1 { margin-left: 4px; }
|
.ml-2 { margin-left: 8px; }
|
.ml-3 { margin-left: 12px; }
|
.ml-4 { margin-left: 16px; }
|
.ml-5 { margin-left: 20px; }
|
.ml-6 { margin-left: 24px; }
|
.ml-7 { margin-left: 28px; }
|
|
.mr-0 { margin-right: 0; }
|
.mr-1 { margin-right: 4px; }
|
.mr-2 { margin-right: 8px; }
|
.mr-3 { margin-right: 12px; }
|
.mr-4 { margin-right: 16px; }
|
.mr-5 { margin-right: 20px; }
|
.mr-6 { margin-right: 24px; }
|
.mr-7 { margin-right: 28px; }
|
|
.p-0 { padding: 0; }
|
.p-1 { padding: 4px; }
|
.p-2 { padding: 8px; }
|
.p-3 { padding: 12px; }
|
.p-4 { padding: 16px; }
|
.p-5 { padding: 20px; }
|
.p-6 { padding: 24px; }
|
.p-7 { padding: 28px; }
|
|
.px-0 { padding-left: 0; padding-right: 0; }
|
.px-1 { padding-left: 4px; padding-right: 4px; }
|
.px-2 { padding-left: 8px; padding-right: 8px; }
|
.px-3 { padding-left: 12px; padding-right: 12px; }
|
.px-4 { padding-left: 16px; padding-right: 16px; }
|
.px-5 { padding-left: 20px; padding-right: 20px; }
|
.px-6 { padding-left: 24px; padding-right: 24px; }
|
.px-7 { padding-left: 28px; padding-right: 28px; }
|
|
.py-0 { padding-top: 0; padding-bottom: 0;}
|
.py-1 { padding-top: 4px; padding-bottom: 4px;}
|
.py-2 { padding-top: 8px; padding-bottom: 8px;}
|
.py-3 { padding-top: 12px; padding-bottom: 12px;}
|
.py-4 { padding-top: 16px; padding-bottom: 16px;}
|
.py-5 { padding-top: 20px; padding-bottom: 20px;}
|
.py-6 { padding-top: 24px; padding-bottom: 24px;}
|
.py-7 { padding-top: 28px; padding-bottom: 28px;}
|
|
.pt-0 { padding-top: 0; }
|
.pt-1 { padding-top: 4px; }
|
.pt-2 { padding-top: 8px; }
|
.pt-3 { padding-top: 12px; }
|
.pt-4 { padding-top: 16px; }
|
.pt-5 { padding-top: 20px; }
|
.pt-6 { padding-top: 24px; }
|
.pt-7 { padding-top: 28px; }
|
|
.pb-0 { padding-bottom: 0; }
|
.pb-1 { padding-bottom: 4px; }
|
.pb-2 { padding-bottom: 8px; }
|
.pb-3 { padding-bottom: 12px; }
|
.pb-4 { padding-bottom: 16px; }
|
.pb-5 { padding-bottom: 20px; }
|
.pb-6 { padding-bottom: 24px; }
|
.pb-7 { padding-bottom: 28px; }
|
|
.pl-0 { padding-left: 0; }
|
.pl-1 { padding-left: 4px; }
|
.pl-2 { padding-left: 8px; }
|
.pl-3 { padding-left: 12px; }
|
.pl-4 { padding-left: 16px; }
|
.pl-5 { padding-left: 20px; }
|
.pl-6 { padding-left: 24px; }
|
.pl-7 { padding-left: 28px; }
|
|
.pr-0 { padding-right: 0; }
|
.pr-1 { padding-right: 4px; }
|
.pr-2 { padding-right: 8px; }
|
.pr-3 { padding-right: 12px; }
|
.pr-4 { padding-right: 16px; }
|
.pr-5 { padding-right: 20px; }
|
.pr-6 { padding-right: 24px; }
|
.pr-7 { padding-right: 28px; }
|
|
/* ================================
|
文本工具类
|
================================ */
|
.text-center { text-align: center; }
|
.text-left { text-align: left; }
|
.text-right { text-align: right; }
|
|
.text-xs { font-size: 12px; }
|
.text-sm { font-size: 13px; }
|
.text-base { font-size: 14px; }
|
.text-lg { font-size: 16px; }
|
.text-xl { font-size: 18px; }
|
.text-2xl { font-size: 20px; }
|
.text-3xl { font-size: 22px; }
|
|
.font-normal { font-weight: 400; }
|
.font-medium { font-weight: 500; }
|
.font-semibold { font-weight: 600; }
|
.font-bold { font-weight: 700; }
|
|
.text-primary { color: #007AFF; }
|
.text-success { color: #67c23a; }
|
.text-warning { color: #e6a23c; }
|
.text-danger { color: #f56c6c; }
|
.text-info { color: #909399; }
|
.text-white { color: #fff; }
|
.text-note { color: #333 }
|
.text-black { color: #000; }
|
.text-red {color: #FF0000 }
|
|
.flex-1 {
|
flex: 1;
|
}
|
|
/* .el-button:hover,
|
.el-button:focus{
|
outline: none !important;
|
}
|
*/
|
.cursor-p {
|
cursor: pointer;;
|
}
|
|
.el-tooltip__trigger:focus-visible {
|
outline: unset !important;
|
}
|
|
.el-tabs__header {
|
margin: 0px;
|
}
|
/* el-tabs ui */
|
/* .el-tabs__header.is-top {
|
height: 50px;
|
} */
|
|
.el-tabs__active-bar {
|
/* margin-bottom: -3px !important; */
|
/* margin-top: -3px !important; */
|
}
|
|
/* el-card ui */
|
.el-card__header {
|
padding: 6px 12px;
|
}
|
|
.el-card__body {
|
padding: 0px;
|
padding-bottom: 12px;
|
}
|
|
.el-upload__tip {
|
display: inline;
|
margin-left: 8px;
|
}
|
|
.el-card__body {
|
padding-bottom: 0;
|
}
|
