newtv-ui-3.0 0.0.1

package/theme/pool_style.scss

@@ -0,0 +1,598 @@
+@import './skyStyle/config.scss';
+$w20: 8rem;
+$mx1: 0.25rem;
+.w-20 {
+  width: $w20;
+}
+.mx-1 {
+  margin-left: $mx1;
+}
+.ml-1 {
+  margin-left: $mx1;
+  margin-bottom: $mx1 + 0.05;
+  vertical-align: middle;
+}
+.ml-2 {
+  margin-left: $mx1 * 2;
+}
+
+// button样式
+.el-button.is-text:not(.is-disabled):active,
+.el-button.is-text:not(.is-disabled):focus,
+.el-button.is-text:not(.is-disabled):hover {
+  background-color: transparent;
+}
+.el-button--default .iconfont,
+.el-button .iconfont {
+  padding-right: 5px;
+  font-size: 14px;
+}
+
+// tag组件样式
+.fg-tag {
+  .el-button,
+  .el-tag {
+    border-style: dashed;
+  }
+}
+
+.fg-avatar-picture-card {
+  span.actions {
+    display: inline-flex;
+    justify-content: flex-end;
+    align-items: baseline;
+    span {
+      margin: 12px 0 0 10px;
+      &:last-child {
+        margin-right: 10px;
+      }
+    }
+  }
+}
+
+// dialog
+.preview-dialog .el-dialog__header {
+  border: 0;
+}
+.el-dialog__header {
+  border-bottom: 1px solid #E6E6E6;
+}
+.el-dialog__headerbtn .el-dialog__close {
+  padding: 2px;
+  background: #A3AEC1;
+  color: #fff;
+  border-radius: 50%;
+  font-size: 12px;
+}
+
+.el-dialog__headerbtn:focus .el-dialog__close,
+.el-dialog__headerbtn:hover .el-dialog__close {
+  color: #fff;
+}
+
+.dialog__info {
+  .el-dialog__header {
+    border: 0
+  }
+}
+.el-dialog__footer {
+  text-align: center;
+  .el-button {
+    padding: 8px 30px;
+  }
+}
+
+// 左侧导航
+.fg-menu {
+  .el-menu {
+    background: transparent;
+  }
+  .el-menu-item,
+  .el-sub-menu__title {
+    color: #fff;
+    border-left: 3px solid transparent;
+  }
+  .el-sub-menu__title:hover,
+  .el-menu-item:hover {
+    background: rgba(255, 255, 255, 0.3);
+    border-left: 3px solid #fff;
+  }
+  .el-menu-item.is-active {
+    background: #082f8c;
+  }
+
+  // 菜单合上时样式
+  .el-menu--collapse {
+    .el-sub-menu.is-active {
+      background: #082f8c;
+    }
+    .el-sub-menu.is-active .el-sub-menu__title {
+      color: #fff;
+    }
+  }
+}
+
+
+// table 样式
+$tableBottom: 60px;
+.fg-table-body {
+  position: relative;
+  background: #fff;
+  height: 100%;
+  //padding-bottom: $tableBottom;
+  box-sizing: border-box;
+  .footer-pagination {
+    padding-top: 15px;
+  }
+  .el-pagination {
+    justify-content: flex-end;
+  }
+  /*.el-table--border td {
+    border-right: 0;
+  }
+  .el-table__header th {
+    border-color: transparent;
+    position: relative;
+    z-index: 1;
+    &:hover {
+      &::after {
+        display: block;
+      }
+    }
+    &::after {
+      content: '';
+      width: 3px;
+      height: 18px;
+      background: #eee;
+      position: absolute;
+      top: 50%;
+      right: 1px;
+      transform: translate(0, -50%);
+      z-index: 0;
+      display: none;
+    }
+  }
+  .el-table__header .el-table-column--selection, .el-table__header th:last-child {
+    border-right: 0;
+    &:hover {
+      &::after {
+        display: none;
+      }
+    }
+  }*/
+  .el-table--border .el-table__cell:last-child {
+    border-right: none;
+  }
+  .el-table--border:before, .el-table--border:after, .el-table__border-left-patch {
+    display: none;
+  }
+
+}
+
+// table 表头着色
+$headColorBottom: 56px;
+.head_color {
+  padding-bottom: $headColorBottom;
+  >.el-table {
+    height: 100%;
+    overflow: auto;
+  }
+
+  .el-table__inner-wrapper::before {
+    display: none;
+  }
+
+  .footer-pagination {
+    position: absolute;
+    width: 100%;
+    height: $headColorBottom;
+    bottom: 0;
+    padding-right: 10px;
+    box-sizing: border-box;
+    z-index: 10;
+  }
+  .el-table__header th {
+    background: #F9FAFC;
+    color: #74767A;
+  }
+  .el-table__expand-column {
+    border: 0;
+    .el-table__expand-icon {
+      &::before {
+        content: '展开';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        color: #3B8BF6;
+        font-size: 11px;
+        width: 30px;
+      }
+      .el-icon {
+        display: none;
+      }
+    }
+    .el-table__expand-icon--expanded {
+      transform: rotate(0deg);
+      &::before {
+        content: '收起';
+      }
+    }
+  }
+
+  .el-table.is-scrolling-none th.el-table-fixed-column--left,
+  .el-table.is-scrolling-none th.el-table-fixed-column--right {
+    background-color: #F9FAFC;
+  }
+}
+
+
+
+// 分页器阴影样式
+.foot_shadow {
+  padding-bottom: $tableBottom;
+  >.el-table {
+    height: 100%;
+    overflow: auto;
+  }
+  .el-table__inner-wrapper::before {
+    display: none;
+  }
+  .footer-pagination {
+    position: absolute;
+    width: 100%;
+    height: $tableBottom;
+    //height: ($tableBottom + 28);
+    bottom: 0;
+
+    //padding-top: 28px;
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
+    padding-right: 10px;
+    box-sizing: border-box;
+    z-index: 10;
+  }
+
+  .el-table__body-wrapper {
+    //margin-bottom: 30px;
+  }
+}
+
+.el-col:nth-of-type(1) .form_split {
+  margin-top: 0;
+}
+
+// form 分隔线样式
+$splitHeight: 22px;
+.form_split {
+  position: relative;
+  line-height: $splitHeight;
+  font-size: 14px;
+  padding: 15px 10px;
+  font-weight: 500;
+  color: #74767a;
+  &::before {
+    content: '';
+    position: absolute;
+    line-height: $splitHeight;
+    width: 4px;
+    height: $splitHeight;
+    background-color: var(--el-color-primary);
+    border-radius: 4px;
+    top: 50%;
+    left: 0;
+    transform: translate(0, -50%);
+  }
+}
+
+.form_border {
+  border-bottom: 1px solid #E6E6E6;
+}
+
+.el-button:not(.is-text, .is-link, .el-button--text):focus {
+  background-color: var(--el-button-bg-color);
+  border-color: var(--el-button-border-color);
+  color: var(--el-button-text-color);
+}
+
+.el-table .el-table__cell {
+  z-index: auto;
+}
+
+.table-right-btnGroup {
+  .el-button {
+    background: transparent;
+    border: 0;
+    padding: 2px;
+  }
+  .el-button:not(.is-text, .is-link, .el-button--text):focus {
+    background: transparent;
+    border: 0;
+  }
+  .el-dropdown {
+    margin-top: 2px;
+    .el-button {
+      background: transparent;
+      color: #3e89fa;
+      border-radius: 100%;
+      padding: 0;
+      border-width: 2px;
+      height: 20px;
+      width: 20px;
+      position: relative;
+      box-sizing: border-box;
+      span {
+        font-weight: 700;
+        position: absolute;
+        top: 30%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+    }
+  }
+
+}
+
+// form表单样式
+.el-input-group__append,
+.el-input-group__prepend {
+  background: none;
+}
+
+.el-input.is-disabled {
+  .el-input-group__append,
+  .el-input-group__prepend {
+    background-color: var(--el-disabled-bg-color);
+  }
+}
+
+
+
+.el-input-group__append .el-input__inner {
+  color: var(--el-color-primary)
+}
+
+// 搜索卡内部from表单样式
+.search-card {
+  .is-disabled {
+    .el-input-group__prepend {
+        &::before,
+        &::after {
+          background-color: var(--el-disabled-bg-color);
+        }
+    }
+  }
+  .el-input-group__prepend {
+      &::before {
+        content: '';
+        width: 1px;
+        height: 5px;
+        background-color: #fff;
+        position: absolute;
+        top: 1px;
+        right: -1px;
+        z-index: 20;
+      }
+  
+      &::after {
+        content: '';
+        width: 1px;
+        height: 5px;
+        background-color: #fff;
+        position: absolute;
+        bottom: 1px;
+        right: -1px;
+        z-index: 20;
+      }
+    }
+
+    .el-input__wrapper.is-focus,
+    .el-select .el-input.is-focus .el-input__wrapper,
+    .el-input__wrapper:hover {
+      box-shadow: 0 0 0 1px var(--el-input-border-color) inset!important;
+    }
+
+    .el-input-group--prepend .el-input-group__prepend {
+      .el-select:hover:not(.el-select--disabled) .el-input__wrapper {
+        box-shadow: none !important;
+      }
+      .el-select .el-input.is-focus .el-input__wrapper,
+      .el-input__wrapper.is-focus {
+        box-shadow: 1px 0 0 0 var(--el-input-border-color) inset,
+          0 1px 0 0 var(--el-input-border-color) inset,
+          0 -1px 0 0 var(--el-input-border-color) inset !important;
+      }
+    }
+
+    .el-input-group--append .el-input-group__append {
+      .el-select:hover:not(.el-select--disabled) .el-input__wrapper {
+        box-shadow: none !important;
+      }
+      .el-select .el-input.is-focus .el-input__wrapper,
+      .el-input__wrapper.is-focus {
+        box-shadow: -1px 0 0 0 var(--el-input-border-color) inset,
+            0 1px 0 0 var(--el-input-border-color) inset,
+            0 -1px 0 0 var(--el-input-border-color) inset !important;
+      }
+    }
+
+  .el-input__suffix-inner>:first-child {
+    margin-left: 2px;
+  }
+
+}
+
+// 表单统一样式
+.input-style {
+  .is-disabled {
+    .el-input-group__prepend {
+
+      &::before,
+      &::after {
+        background-color: var(--el-disabled-bg-color);
+      }
+    }
+  }
+
+  .el-input-group__prepend {
+    &::before {
+      content: '';
+      width: 1px;
+      height: 5px;
+      background-color: #fff;
+      position: absolute;
+      top: 1px;
+      right: -1px;
+      z-index: 20;
+    }
+
+    &::after {
+      content: '';
+      width: 1px;
+      height: 5px;
+      background-color: #fff;
+      position: absolute;
+      bottom: 1px;
+      right: -1px;
+      z-index: 20;
+    }
+  }
+
+  .el-input__wrapper.is-focus,
+  .el-select .el-input.is-focus .el-input__wrapper,
+  .el-input__wrapper:hover {
+    box-shadow: 0 0 0 1px var(--el-input-border-color) inset !important;
+  }
+
+  .el-input-group--prepend .el-input-group__prepend {
+    .el-select:hover:not(.el-select--disabled) .el-input__wrapper {
+      box-shadow: none !important;
+    }
+
+    .el-select .el-input.is-focus .el-input__wrapper,
+    .el-input__wrapper.is-focus {
+      box-shadow: 1px 0 0 0 var(--el-input-border-color) inset,
+        0 1px 0 0 var(--el-input-border-color) inset,
+        0 -1px 0 0 var(--el-input-border-color) inset !important;
+    }
+  }
+
+  .el-input-group--append .el-input-group__append {
+    .el-select:hover:not(.el-select--disabled) .el-input__wrapper {
+      box-shadow: none !important;
+    }
+
+    .el-select .el-input.is-focus .el-input__wrapper,
+    .el-input__wrapper.is-focus {
+      box-shadow: -1px 0 0 0 var(--el-input-border-color) inset,
+        0 1px 0 0 var(--el-input-border-color) inset,
+        0 -1px 0 0 var(--el-input-border-color) inset !important;
+    }
+  }
+
+  .el-input__suffix-inner>:first-child {
+    margin-left: 2px;
+  }
+
+}
+
+
+// tab切换样式
+$tabSwitchHeight: 30px;
+.tab-switch {
+  display: inline-block;
+  vertical-align: middle;
+  &.el-tabs--card>.el-tabs__header {
+    border: 0;
+    height: $tabSwitchHeight + 2;
+  }
+  &.el-tabs--card>.el-tabs__header .el-tabs__nav {
+    border: 1px solid var(--el-color-primary);
+    border-radius: 4px;
+  }
+  &.el-tabs--card>.el-tabs__header .el-tabs__item {
+    border-left: 1px solid var(--el-color-primary);
+    color: var(--el-color-primary);
+    height: $tabSwitchHeight;
+    line-height: $tabSwitchHeight;
+    transition: none;
+  }
+  &.el-tabs--card>.el-tabs__header .el-tabs__item:first-child {
+    border-left: 0;
+  }
+  &.el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
+    background: var(--el-color-primary);
+    color: #fff;
+    border-color: var(--el-color-primary);
+    transition: none;
+  }
+}
+
+.line-searchform {
+  .el-col.right-col {
+    text-align: right;
+  }
+
+  .date-picker {
+    margin: 0 10px;
+  }
+
+  .el-date-editor.el-input__wrapper,
+  .el-select .el-input__wrapper,
+  .el-select .el-input.is-focus .el-input__wrapper {
+    box-shadow: none !important;
+    /* width: 318px; */
+    border-radius: 0;
+    border-bottom: 1px solid #a3aec0;
+    padding: 0 2px;
+    vertical-align: bottom;
+  }
+
+  .el-date-editor.el-input__wrapper {
+    width: 200px;
+  }
+
+  .el-select .el-input__wrapper {
+    width: 90px;
+  }
+
+  .el-range__close-icon--hidden {
+    display: none;
+  }
+
+  .el-date-editor .el-range-input {
+    width: 46%;
+  }
+
+  .el-icon {
+    padding-right: 5px;
+  }
+}
+
+.split-h6 {
+  font-size: 20px;
+  color: #253654;
+  padding: 20px 0;
+  .split-small {
+    margin-left: 20px;
+    position: relative;
+    font-size: 16px;
+    color: #A3AEC0;
+    padding-left: 20px;
+    &::before {
+      content: '';
+      height: 12px;
+      width: 2px;
+      background-color: #A3AEC0;
+      position: absolute;
+      top: 50%;
+      left: 0;
+      transform: translate(0, -50%);
+    }
+  }
+}
+
+.fg-form .highLightTag {
+  label {
+    color: var(--el-color-warning);
+  }
+}

package/theme/skyStyle/config.scss

@@ -0,0 +1,19 @@
+$primary: #3e89fa;
+$success: #13bd38;
+$warning: #fa983e;
+$danger: #ff5757;
+$info: #a3aec1;
+
+:root {
+  --el-color-primary: #3E89FA;
+  --el-color-success: #13BD38;
+  --el-color-warning: #FA983E;
+  --el-color-danger: #FF5757;
+  --el-color-info: #A3AEC1;
+  --el-text-color-primary: #74767A;
+  --el-color-disabled: #253555;
+}
+
+.el-button {
+  background-color: var(--el-button-bg-color);
+}