|
|
@@ -0,0 +1,444 @@
|
|
|
+/*
|
|
|
+Write your variables here. All available variables can be
|
|
|
+found in element-ui/packages/theme-chalk/src/common/var.scss.
|
|
|
+For example, to overwrite the theme color:
|
|
|
+*/
|
|
|
+$--color-primary: $themeColor;
|
|
|
+
|
|
|
+/* icon font path, required */
|
|
|
+$--font-path: '~element-ui/lib/theme-chalk/fonts';
|
|
|
+
|
|
|
+@import "../../../node_modules/element-ui/packages/theme-chalk/src/index";
|
|
|
+
|
|
|
+// el-dialog
|
|
|
+
|
|
|
+.el-dialog__wrapper {
|
|
|
+ .el-dialog {
|
|
|
+ border-radius: 8px;
|
|
|
+
|
|
|
+ .el-dialog__header {
|
|
|
+ border-bottom: 1px solid rgba(235, 235, 235, 1);
|
|
|
+ padding-top: 15px;
|
|
|
+ padding-bottom: 15px;
|
|
|
+ padding-left: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-dialog__body {
|
|
|
+ .el-form {
|
|
|
+ width: 90%;
|
|
|
+ margin: auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // title 样式设置
|
|
|
+ .dialog-title {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: 'Microsoft YaHei';
|
|
|
+ font-weight: 400;
|
|
|
+ color: #7D7D7D;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ // footer 中按钮的布局样式
|
|
|
+ .dialog-footer {
|
|
|
+ @include flex-center;
|
|
|
+ padding-bottom: 10px;
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ margin-left: 20px;
|
|
|
+
|
|
|
+ &:first-child {
|
|
|
+ margin-left: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.el-button.is-round {
|
|
|
+ border-radius: 18px;
|
|
|
+ padding: 10px 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.el-button.el-button--default {
|
|
|
+ color: #1E1E1E;
|
|
|
+ background: #fff;
|
|
|
+ border: 1px solid #F2F2F5;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+// 弹窗组件样式修改
|
|
|
+.dialog-form {
|
|
|
+ .el-select {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-input__inner {
|
|
|
+ border: 1px solid #EDECF2;
|
|
|
+ border-radius: 3px;
|
|
|
+ height: 32px;
|
|
|
+ line-height: 32px;
|
|
|
+ font-size: 14px;
|
|
|
+
|
|
|
+ &:focus {
|
|
|
+ border-color: $themeColor;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::-webkit-input-placeholder {
|
|
|
+ color: rgba(212, 212, 212, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 日期范围选择(el-date-picker)图标 line-height
|
|
|
+ &.el-date-editor.el-date-editor--daterange, &.el-date-editor.el-date-editor--datetimerange, &.el-date-editor.el-date-editor--timerange {
|
|
|
+ .el-input__icon.el-range__icon {
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-input__icon.el-range__close-icon {
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-range-separator {
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-input__icon {
|
|
|
+ line-height: 32px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-range-input { // 时间范围选取时输入框的字体设置
|
|
|
+ font-size: 14px;
|
|
|
+
|
|
|
+ &::-webkit-input-placeholder {
|
|
|
+ color: rgba(212, 212, 212, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 选择框 focus 和 hover 时边框的颜色
|
|
|
+ .el-select .el-input__inner:focus {
|
|
|
+ border-color: $themeColor;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-select:hover .el-input__inner {
|
|
|
+ border-color: $themeColor;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-textarea {
|
|
|
+ .el-textarea__inner {
|
|
|
+ border: 1px solid #EDECF2;
|
|
|
+ border-radius: 2px;
|
|
|
+
|
|
|
+ &::-webkit-input-placeholder {
|
|
|
+ color: rgba(212, 212, 212, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-radio {
|
|
|
+ color: #1E1E1E;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-input-number__increase, .el-input-number__decrease {
|
|
|
+ background: transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ // el-form-item 中 label 的字体、颜色设置
|
|
|
+ .el-form-item.title-label {
|
|
|
+ //margin-bottom: 12px;
|
|
|
+
|
|
|
+ .el-form-item__label {
|
|
|
+ height: 32px;
|
|
|
+ line-height: 32px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #474747;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-form-item__content {
|
|
|
+ line-height: 32px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // el-cascader 输入框样式
|
|
|
+ .el-cascader.el-cascader--small {
|
|
|
+ line-height: 30px;
|
|
|
+ margin-top: -1px;
|
|
|
+
|
|
|
+ & .el-input__inner:focus {
|
|
|
+ border-color: $themeColor;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:hover .el-input__inner {
|
|
|
+ border-color: #31C37B;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-input__inner {
|
|
|
+ border: 1px solid rgba(220, 223, 230, 1);
|
|
|
+ border-radius: 3px;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ font-size: 14px;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ &::-webkit-input-placeholder {
|
|
|
+ color: rgba(212, 212, 212, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.search-form {
|
|
|
+ .el-input__inner {
|
|
|
+ border: 1px solid #EDECF2;
|
|
|
+ border-radius: 18px;
|
|
|
+
|
|
|
+ &:focus {
|
|
|
+ border-color: $themeColor;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::-webkit-input-placeholder {
|
|
|
+ color: #A8ACB4;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-button {
|
|
|
+ border-radius: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-form-item {
|
|
|
+ position: relative;
|
|
|
+ .el-form-item__label {
|
|
|
+ position: absolute;
|
|
|
+ top: -18px;
|
|
|
+ left: 22px;
|
|
|
+ color: #A8ACB4;
|
|
|
+ font-size: 10px;
|
|
|
+ z-index: 1;
|
|
|
+ background-color: #fff;
|
|
|
+ height: 25px;
|
|
|
+ padding-left: 5px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.round-select {
|
|
|
+ .el-input__inner {
|
|
|
+ border: 1px solid #EDECF2;
|
|
|
+ border-radius: 18px;
|
|
|
+
|
|
|
+ &:focus {
|
|
|
+ border-color: $themeColor;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::-webkit-input-placeholder {
|
|
|
+ color: #A8ACB4;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.operate-box {
|
|
|
+ margin: 19px 0 13px 0;
|
|
|
+
|
|
|
+ .el-button {
|
|
|
+ padding: 10px 8px;
|
|
|
+ font-weight: 400;
|
|
|
+ .el-icon-plus {
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.list-table {
|
|
|
+
|
|
|
+ &::before, .el-table__fixed::before, .el-table__fixed-right::before { // 去掉表格下方的线
|
|
|
+ height: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.el-table th.is-leaf, &.el-table td {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.el-table thead {
|
|
|
+ color: #1E1E1E;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.el-table th {
|
|
|
+ background-color: #FBFAFD;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.el-table th > .cell {
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.el-table--striped .el-table__body tr.el-table__row--striped td {
|
|
|
+ background: #FBFAFD;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 鼠标移上时,当前行背景色(固定了列的 el-table,鼠标移上时,tr 标签上会多一个 .hover-row )
|
|
|
+ .el-table__body tr.el-table__row.hover-row {
|
|
|
+ > td {
|
|
|
+ background-color: #F2F7FF;
|
|
|
+
|
|
|
+ //&:first-child { // 鼠标移上时,在表格最左侧显示一个标记
|
|
|
+ // &::before {
|
|
|
+ // content: '';
|
|
|
+ // position: absolute;
|
|
|
+ // width: 4px;
|
|
|
+ // left: 0;
|
|
|
+ // top: 0;
|
|
|
+ // bottom: 0;
|
|
|
+ // background-color: $themeColor;
|
|
|
+ // z-index: 10;
|
|
|
+ // }
|
|
|
+ //}
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 鼠标移上时,当前行背景色(正常 el-table)
|
|
|
+ &.el-table--enable-row-hover .el-table__body tr.el-table__row {
|
|
|
+ &:hover {
|
|
|
+ > td {
|
|
|
+ background-color: #F2F7FF;
|
|
|
+
|
|
|
+ //&:first-child { // 鼠标移上时,在表格最左侧显示一个标记
|
|
|
+ // &::before {
|
|
|
+ // content: '';
|
|
|
+ // position: absolute;
|
|
|
+ // width: 4px;
|
|
|
+ // left: 0;
|
|
|
+ // top: 0;
|
|
|
+ // bottom: 0;
|
|
|
+ // background-color: $themeColor;
|
|
|
+ // z-index: 10;
|
|
|
+ // }
|
|
|
+ //}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-table__body .cell {
|
|
|
+ color: rgba(71, 71, 71, 0.8);
|
|
|
+ line-height: 25px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-table__header .cell {
|
|
|
+ line-height: 25px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-button {
|
|
|
+ .underline {
|
|
|
+ display: inline-block;
|
|
|
+ border-bottom: solid 1px rgba(40, 66, 200, 0.7);
|
|
|
+ color: rgba(40, 66, 200, 0.7);
|
|
|
+ }
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ .underline {
|
|
|
+ color: $themeColor;
|
|
|
+ border-bottom: solid 1px $themeColor;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.el-table--scrollable-x .el-table__body-wrapper {
|
|
|
+ @include scrollBar;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.el-table--scrollable-y .el-table__body-wrapper {
|
|
|
+ @include scrollBar;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-image__error {
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+// tab panel
|
|
|
+.el-tabs {
|
|
|
+ &.el-tabs--card > .el-tabs__header .el-tabs__nav {
|
|
|
+ border-left-color: transparent;
|
|
|
+ border-right-color: transparent;
|
|
|
+ border-top-color: transparent;
|
|
|
+ border-radius: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.el-tabs--card > .el-tabs__header .el-tabs__item {
|
|
|
+ border-left-color: transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.el-tabs--card > .el-tabs__header {
|
|
|
+ border-bottom: solid 1px #F7F7F7;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-tabs__item {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 300;
|
|
|
+ color: #B0B0B0;
|
|
|
+ transition: all 0.3s;
|
|
|
+ user-select: none;
|
|
|
+ border-right: solid 1px transparent;
|
|
|
+
|
|
|
+ &.is-active {
|
|
|
+ border-top: solid 4px $themeColor;
|
|
|
+ box-sizing: content-box;
|
|
|
+ color: $themeColor;
|
|
|
+ font-weight: 400;
|
|
|
+
|
|
|
+ &:first-child {
|
|
|
+ border-right-color: #F7F7F7;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:not(:first-child) {
|
|
|
+ border-left-color: #F7F7F7;
|
|
|
+ border-right-color: #F7F7F7;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-tabs__content {
|
|
|
+ padding: 0 18px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.noborder-input {
|
|
|
+ .el-input__inner {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.tab-menu-container {
|
|
|
+ padding-left: 20px;
|
|
|
+
|
|
|
+ .el-menu-item {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.el-menu--horizontal > .el-menu-item.is-active {
|
|
|
+ border-width: 4px;
|
|
|
+ color: $themeColor;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &:before {
|
|
|
+ content: '';
|
|
|
+ display: inline-block;
|
|
|
+ width: 6px;
|
|
|
+ height: 6px;
|
|
|
+ background-color: $themeColor;
|
|
|
+ border-radius: 50%;
|
|
|
+ position: absolute;
|
|
|
+ left: 6px;
|
|
|
+ top: 50%;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|