初始化
This commit is contained in:
砂糖
337
frontend/packages/assets/style/common/index.scss
Normal file
337
frontend/packages/assets/style/common/index.scss
Normal file
@@ -0,0 +1,337 @@
|
||||
$--font-path: "~element-ui/lib/theme-chalk/fonts";
|
||||
@import "~element-ui/packages/theme-chalk/src/index";
|
||||
|
||||
@import './reset.scss';
|
||||
// 布局样式
|
||||
.bs-container {
|
||||
position: relative;
|
||||
height: calc(100vh - 108px)!important;
|
||||
// width: 100%;
|
||||
// position: absolute;
|
||||
box-sizing: border-box;
|
||||
// padding: 16px;
|
||||
background-color: var(--bs-background-1);
|
||||
.inner-container {
|
||||
height: 100% !important;
|
||||
background-color: var(--bs-background-2) !important;
|
||||
|
||||
.filter-container {
|
||||
padding: 16px 16px 6px;
|
||||
|
||||
.filter-item:not(:last-child) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.el-input {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.el-select {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// page页样式
|
||||
.bs-pagination {
|
||||
// position: absolute;
|
||||
// right: 0;
|
||||
// bottom: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
//输入框样式
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.el-input__icon {
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.el-form {
|
||||
.el-input__inner {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.el-select {
|
||||
.el-input__inner {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//时间选择器样式
|
||||
.el-date-editor .el-range-input {
|
||||
height: 94%;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.el-date-editor .el-range__icon {
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
.el-date-editor .el-range-separator {
|
||||
line-height: 26px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
//表格样式
|
||||
|
||||
.bs-table-box {
|
||||
padding: 0 16px;
|
||||
// height: calc(100vh - 340px);
|
||||
// margin-bottom: 16px;
|
||||
.el-table {
|
||||
// height: 100%;
|
||||
overflow-y: auto !important;
|
||||
background-color: transparent !important;
|
||||
border: 1px solid #e4e4e4 !important;
|
||||
|
||||
th > .cell {
|
||||
padding-left: 14px !important;
|
||||
}
|
||||
|
||||
th.gutter {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
tr td {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
tr:last-child td {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
::v-deep .el-table::before {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.el-table thead {
|
||||
color: #36474f !important;
|
||||
}
|
||||
|
||||
.el-table td {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
.el-table--enable-row-hover .el-table__body tr:hover > td {
|
||||
background-color: #e6f6ff;
|
||||
}
|
||||
|
||||
.el-table .cell {
|
||||
line-height: 24px !important;
|
||||
}
|
||||
|
||||
.gc-table--grey th.is-leaf {
|
||||
border: none !important;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.el-table th,
|
||||
.el-table td {
|
||||
padding: 8px 0 !important;
|
||||
}
|
||||
|
||||
// th.is-leaf {
|
||||
// border-bottom: 2px solid var(--bs-el-color-primary) !important;
|
||||
// }
|
||||
|
||||
/* 滚动条样式设置*/
|
||||
.el-table__body-wrapper::-webkit-scrollbar {
|
||||
width: 6px !important;
|
||||
height: 6px !important;
|
||||
}
|
||||
|
||||
.el-table__body-wrapper::-webkit-scrollbar-corner {
|
||||
background: #444851 !important;
|
||||
}
|
||||
|
||||
.el-table__body-wrapper::-webkit-scrollbar-track {
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
|
||||
.el-table__body-wrapper::-webkit-scrollbar-thumb {
|
||||
min-height: 20px !important;
|
||||
background-clip: content-box !important;
|
||||
border: 1px solid #444851 !important;
|
||||
border-radius: 6px !important;
|
||||
background: #444851 !important;
|
||||
}
|
||||
|
||||
.el-table__fixed::before,
|
||||
.el-table__fixed-right::before {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 全局表格内部button行样式
|
||||
|
||||
.el-table .cell {
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.cell .el-button {
|
||||
padding: 5px 8px !important;
|
||||
}
|
||||
}
|
||||
//分页样式
|
||||
.bs-pagination {
|
||||
.el-pagination .el-select .el-input{
|
||||
margin: 0 10px;
|
||||
}
|
||||
.el-pagination.is-background .btn-prev,
|
||||
.el-pagination.is-background .btn-next,
|
||||
.el-pagination.is-background .el-pager li {
|
||||
color: #bfbfbf;
|
||||
background-color: var(--bs-el-background-2);
|
||||
|
||||
&:hover {
|
||||
color: var(--bs-el-text);
|
||||
background-color: var(--bs-el-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.el-pagination.is-background .btn-prev:disabled,
|
||||
.el-pagination.is-background .btn-next:disabled {
|
||||
color: #bfbfbf;
|
||||
background-color: var(--bs-el-background-2);
|
||||
}
|
||||
|
||||
.el-pagination__total {
|
||||
color: #bfbfbf;
|
||||
}
|
||||
|
||||
.el-pagination .el-select .el-input .el-input__inner {
|
||||
color: #bfbfbf;
|
||||
|
||||
&:hover {
|
||||
color: var(--bs-el-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.el-pagination {
|
||||
padding: 0 !important;
|
||||
text-align: right !important;
|
||||
font-weight: normal !important;
|
||||
.el-pagination__sizes{
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-pager li {
|
||||
padding: 0 !important;
|
||||
min-width: 32px !important;
|
||||
height: 32px !important;
|
||||
line-height: 32px !important;
|
||||
border-radius: 2px !important;
|
||||
}
|
||||
|
||||
.el-pager li:not(.disabled).active {
|
||||
background-color: var(--bs-el-color-primary) !important;
|
||||
}
|
||||
|
||||
.el-pagination span:not([class*="suffix"]),
|
||||
.el-pagination button {
|
||||
font-size: 14px !important;
|
||||
min-width: 0 !important;
|
||||
height: 32px !important;
|
||||
line-height: 32px !important;
|
||||
}
|
||||
|
||||
.el-pagination .el-input--mini .el-input__inner {
|
||||
height: 32px !important;
|
||||
line-height: 32px !important;
|
||||
}
|
||||
|
||||
.el-pagination__editor.el-input .el-input__inner {
|
||||
height: 32px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*解决el-scroll底部出现空白滚动条*/
|
||||
.el-scrollbar__wrap {
|
||||
overflow-x: hidden !important;
|
||||
}
|
||||
|
||||
// dialog设置
|
||||
.bs-dialog-wrap {
|
||||
.el-select {
|
||||
display: inline-block !important;
|
||||
position: relative !important;
|
||||
width: auto !important;
|
||||
}
|
||||
.el-dialog {
|
||||
margin-top: 13vh !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
.el-dialog__wrapper {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 16px !important;
|
||||
max-height: calc(90vh - 150px) !important;
|
||||
min-height: 200px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
// dialog头部
|
||||
.el-dialog__header {
|
||||
background: #f5f5f5;
|
||||
background-color: #f5f5f5;
|
||||
padding: 0 !important;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
|
||||
.el-dialog__headerbtn {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 20px;
|
||||
padding: 0;
|
||||
background: 0 0;
|
||||
border: none;
|
||||
outline: 0;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__title {
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
padding-left: 20px;
|
||||
border-left: none !important;
|
||||
}
|
||||
|
||||
.el-dialog__title::before {
|
||||
content: "" !important;
|
||||
height: 16px !important;
|
||||
position: absolute !important;
|
||||
left: 0 !important;
|
||||
top: 50% !important;
|
||||
transform: translateY(-50%) !important;
|
||||
border-left: 4px solid var(--bs-el-color-primary) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-scrollbar__thumb {
|
||||
background: rgba(144, 147, 153, 0.3) !important;
|
||||
background-color: rgba(144, 147, 153, 0.3) !important;
|
||||
}
|
||||
|
||||
.el-dialog__footer{
|
||||
padding: 12px 16px !important;
|
||||
}
|
||||
184
frontend/packages/assets/style/common/reset.scss
Normal file
184
frontend/packages/assets/style/common/reset.scss
Normal file
@@ -0,0 +1,184 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
body,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
hr,
|
||||
p,
|
||||
blockquote,
|
||||
/* structural elements 结构元素 */
|
||||
dl,
|
||||
dt,
|
||||
dd,
|
||||
ul,
|
||||
ol,
|
||||
li,
|
||||
/* list elements 列表元素 */
|
||||
pre,
|
||||
/* text formatting elements 文本格式元素 */
|
||||
fieldset,
|
||||
lengend,
|
||||
button,
|
||||
input,
|
||||
textarea,
|
||||
/* form elements 表单元素 */
|
||||
th,
|
||||
td {
|
||||
/* search elements 表格元素 */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* 设置默认字体 */
|
||||
body,
|
||||
html {
|
||||
font-size: 14px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto, helvetica neue, Arial, noto sans, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 18px;
|
||||
/* 18px / 12px = 1.5 */
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
address,
|
||||
cite,
|
||||
dfn,
|
||||
em,
|
||||
var {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* 将斜体扶正 */
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp,
|
||||
tt {
|
||||
font-family: "Courier New", Courier, monospace;
|
||||
}
|
||||
|
||||
/* 统一等宽字体 */
|
||||
small {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* 小于 12px 的中文很难阅读，让 small 正常化 */
|
||||
|
||||
/* 重置列表元素 */
|
||||
ul,
|
||||
ol {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* 重置文本格式元素 */
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
abbr[title],
|
||||
acronym[title] {
|
||||
/* 注：1.ie6 不支持 abbr; 2.这里用了属性选择符，ie6 下无效果 */
|
||||
border-bottom: 1px dotted;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
q:before,
|
||||
q:after {
|
||||
content: '';
|
||||
}
|
||||
|
||||
/* 重置表单元素 */
|
||||
legend {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/* for ie6 */
|
||||
fieldset,
|
||||
img {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* img 搭车：让链接里的 img 无边框 */
|
||||
/* 注：optgroup 无法扶正 */
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-size: 100%;
|
||||
/* 使得表单元素在 ie 下能继承字体大小 */
|
||||
}
|
||||
|
||||
/* 重置表格元素 */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
/* 重置 hr */
|
||||
hr {
|
||||
border: none;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
a:focus,
|
||||
a:active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
a,
|
||||
a:focus,
|
||||
a:hover {
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
div:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.f-l {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.f-r {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
visibility: hidden;
|
||||
display: block;
|
||||
font-size: 0;
|
||||
content: '';
|
||||
clear: both;
|
||||
height: 0;
|
||||
}
|
||||
Reference in New Issue
Block a user