177 lines
3.3 KiB
SCSS
177 lines
3.3 KiB
SCSS
@import './common.scss';
|
||
@import './lib.scss';
|
||
@import './base.scss';
|
||
/**
|
||
* 响应式布局容器固定宽度
|
||
*
|
||
* 大屏（>=1200px）
|
||
* 中屏（>=992px）
|
||
* 小屏（>=768px）
|
||
*/
|
||
|
||
#app {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
html {
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
height: 100%;
|
||
text-size-adjust: 100%;
|
||
font-size: 62.5%;
|
||
}
|
||
|
||
body {
|
||
width: 100%;
|
||
height: 100%;
|
||
margin: 0;
|
||
font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
|
||
line-height: inherit;
|
||
font-size: 14px;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
-webkit-font-smoothing: antialiased;
|
||
text-rendering: optimizelegibility;
|
||
}
|
||
|
||
a {
|
||
color: inherit;
|
||
text-decoration: inherit;
|
||
}
|
||
|
||
img {
|
||
display: inline-block;
|
||
}
|
||
|
||
ul,
|
||
li {
|
||
padding: 0;
|
||
margin: 0;
|
||
list-style: none;
|
||
}
|
||
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
box-sizing: inherit;
|
||
}
|
||
|
||
a,
|
||
a:focus,
|
||
a:hover {
|
||
color: inherit;
|
||
text-decoration: none;
|
||
cursor: pointer;
|
||
}
|
||
|
||
a:focus,
|
||
a:active,
|
||
div:focus {
|
||
outline: none;
|
||
}
|
||
|
||
// 全局form表单样式
|
||
:root {
|
||
--el-font-size-base: 12px;
|
||
}
|
||
.el-form {
|
||
--el-form-label-font-size: var(--el-font-size-base);
|
||
--el-form-inline-content-width: 220px;
|
||
}
|
||
|
||
// 取色器样式调整
|
||
.el-color-picker__trigger {
|
||
width: 7rem;
|
||
justify-content: space-between;
|
||
.el-color-picker__color {
|
||
width: 2.2rem;
|
||
border: 0;
|
||
.el-color-picker__color-inner {
|
||
border-radius: 0.2rem;
|
||
.el-icon {
|
||
position: absolute;
|
||
right: -3.6rem;
|
||
color: #ccc;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// numberbox 数字输入框样式调整
|
||
.el-input-number {
|
||
&__decrease {
|
||
background-color: #fff;
|
||
transition: all 0.3s ease-in-out;
|
||
opacity: 0;
|
||
}
|
||
&__increase {
|
||
background-color: #fff;
|
||
transition: all 0.3s ease-in-out;
|
||
opacity: 0;
|
||
}
|
||
&:hover &__decrease {
|
||
opacity: 1;
|
||
}
|
||
&:hover &__increase {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
// dialog弹窗样式调整
|
||
.el-dialog__header {
|
||
position: relative;
|
||
&::before {
|
||
content: '';
|
||
width: calc(100% + 3.2rem);
|
||
height: 0.1rem;
|
||
background-color: #eee;
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: -1.6rem;
|
||
right: -1.6rem;
|
||
}
|
||
.el-dialog__headerbtn {
|
||
font-size: 2.4rem;
|
||
width: 3.4rem;
|
||
height: 3.4rem;
|
||
}
|
||
.title {
|
||
height: 3.8rem;
|
||
display: flex;
|
||
align-items: center;
|
||
&.center {
|
||
justify-content: center;
|
||
}
|
||
.el-radio-group {
|
||
background-color: #f4f4f4;
|
||
border-radius: 5rem;
|
||
.el-radio-button {
|
||
overflow: hidden;
|
||
border-radius: 5rem;
|
||
.el-radio-button__inner {
|
||
--el-fill-color-blank: #f4f4f4;
|
||
border: 0;
|
||
font-size: 1.4rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.el-dialog__footer {
|
||
position: relative;
|
||
&::before {
|
||
content: '';
|
||
width: calc(100% + 3.2rem);
|
||
height: 0.1rem;
|
||
background-color: #eee;
|
||
position: absolute;
|
||
top: 0;
|
||
left: -1.6rem;
|
||
right: -1.6rem;
|
||
}
|
||
}
|
||
|
||
.el-popover.el-popper {
|
||
min-width: 5rem;
|
||
}
|