haiwei-ui 1.0.0

package/packages/styles/components/label/_index.scss

@@ -0,0 +1,289 @@
+#{$prefix}label {
+    display: inline-block;
+    text-align: center;
+    white-space: nowrap;
+    color: #fff;
+    margin-right: 5px;
+    padding: 2px 10px;
+    font-size: 17px;
+    @include vertical-center(32px);
+
+    &.arrowed,
+    &.arrowed-in {
+        position: relative;
+        margin-left: 10px;
+
+        &::before {
+            content: "";
+            display: inline-block;
+            position: absolute;
+            top: 0;
+            border: 1px solid transparent;
+            border-width: 18px 8px;
+        }
+    }
+
+    &.arrowed {
+        padding-left: 8px;
+
+        &::before {
+            left: -16px;
+        }
+    }
+
+    &.arrowed-in {
+        padding-left: 8px;
+
+        &::before {
+            left: -9px;
+        }
+    }
+
+    &.arrowed-right,
+    &.arrowed-right-in {
+        position: relative;
+        margin-right: 12px;
+
+        &::after {
+            content: "";
+            display: inline-block;
+            position: absolute;
+            top: 0;
+            border: 1px solid transparent;
+            border-width: 18px 8px;
+        }
+    }
+
+    &.arrowed-right {
+        padding-right: 5px;
+
+        &::after {
+            right: -16px;
+        }
+    }
+
+    &.arrowed-right-in {
+        padding-right: 5px;
+
+        &::after {
+            right: -9px;
+        }
+    }
+
+    @mixin label-type($color) {
+        background: $color;
+
+        &.arrowed {
+            &::before {
+                border-right-color: $color;
+            }
+        }
+
+        &.arrowed-in {
+            &::before {
+                border-color: $color $color $color transparent;
+            }
+        }
+
+        &.arrowed-right {
+            &::after {
+                border-left-color: $color;
+            }
+        }
+
+        &.arrowed-right-in {
+            &::after {
+                border-color: $color transparent $color $color;
+            }
+        }
+    }
+
+    @include label-type($color-info);
+
+    &-success {
+        @include label-type($color-success);
+    }
+
+    &-primary {
+        @include label-type($color-primary);
+    }
+
+    &-warning {
+        @include label-type($color-warning);
+    }
+
+    &-danger {
+        @include label-type($color-danger);
+    }
+
+    &.medium {
+        margin-right: 5px;
+        padding: 2px 10px;
+        font-size: 16px;
+        @include vertical-center(28px);
+
+        &.arrowed,
+        &.arrowed-in {
+            margin-left: 10px;
+
+            &::before {
+                border-width: 16px 8px;
+            }
+        }
+
+        &.arrowed {
+            padding-left: 8px;
+
+            &::before {
+                left: -16px;
+            }
+        }
+
+        &.arrowed-in {
+            padding-left: 8px;
+
+            &::before {
+                left: -9px;
+            }
+        }
+
+        &.arrowed-right,
+        &.arrowed-right-in {
+            margin-right: 12px;
+
+            &::after {
+                border-width: 16px 8px;
+            }
+        }
+
+        &.arrowed-right {
+            padding-right: 5px;
+
+            &::after {
+                right: -16px;
+            }
+        }
+
+        &.arrowed-right-in {
+            padding-right: 5px;
+
+            &::after {
+                right: -9px;
+            }
+        }
+    }
+
+    &.small {
+        margin-right: 5px;
+        padding: 2px 10px;
+        font-size: 14px;
+        @include vertical-center(24px);
+
+        &.arrowed,
+        &.arrowed-in {
+            margin-left: 10px;
+
+            &::before {
+                border-width: 14px 6px;
+            }
+        }
+
+        &.arrowed {
+            padding-left: 8px;
+
+            &::before {
+                left: -12px;
+            }
+        }
+
+        &.arrowed-in {
+            padding-left: 5px;
+
+            &::before {
+                left: -9px;
+            }
+        }
+
+        &.arrowed-right,
+        &.arrowed-right-in {
+            margin-right: 12px;
+
+            &::after {
+                border-width: 14px 6px;
+            }
+        }
+
+        &.arrowed-right {
+            padding-right: 5px;
+
+            &::after {
+                right: -12px;
+            }
+        }
+
+        &.arrowed-right-in {
+            padding-right: 5px;
+
+            &::after {
+                right: -9px;
+            }
+        }
+    }
+
+    &.mini {
+        margin-right: 5px;
+        padding: 2px 7px;
+        font-size: 12px;
+        @include vertical-center(20px);
+
+        &.arrowed,
+        &.arrowed-in {
+            margin-left: 10px;
+
+            &::before {
+                border-width: 12px 5px;
+            }
+        }
+
+        &.arrowed {
+            padding-left: 3px;
+
+            &::before {
+                left: -10px
+            }
+        }
+
+        &.arrowed-in {
+            padding-left: 3px;
+
+            &::before {
+                left: -9px;
+            }
+        }
+
+        &.arrowed-right,
+        &.arrowed-right-in {
+            margin-right: 12px;
+
+            &::after {
+                border-width: 12px 5px;
+            }
+        }
+
+        &.arrowed-right {
+            padding-right: 5px;
+
+            &::after {
+                right: -10px;
+            }
+        }
+
+        &.arrowed-right-in {
+            padding-right: 5px;
+
+            &::after {
+                right: -9px;
+            }
+        }
+    }
+}

package/packages/styles/components/list/_index.scss

@@ -0,0 +1,270 @@
+#{$prefix}list {
+  box-shadow: $box-shadow;
+  @include flex-column();
+  box-sizing: border-box;
+  border-radius: 3px;
+  overflow: hidden;
+  height: 100%;
+  background-color: #fff;
+  border: 1px solid $border-color2;
+
+  //头部
+  &-header {
+    padding: 0 5px;
+    display: flex;
+    align-items: stretch;
+    flex-shrink: 0;
+    @include vertical-center(45px);
+    box-sizing: border-box;
+    border-bottom: 1px solid $border-color3;
+
+    //工具栏
+    &-toolbar {
+      position: relative;
+      flex-shrink: 0;
+      margin-left: 15px;
+
+      #{$prefix}button {
+        margin-left: 0;
+        padding: 0;
+        border: none;
+        background-color: transparent;
+        cursor: pointer;
+        padding: 10px 7px;
+        color: $text-color3;
+        user-select: none;
+        outline: none;
+        transition: all 0.2s ease-in-out;
+        font-size: 16px;
+        width: 30px;
+        height: 30px;
+
+        &:hover {
+          color: $text-color1;
+          transform: scale(1.2);
+        }
+      }
+    }
+
+    &-button {
+      padding-left: 10px;
+
+      #{$prefix}button {
+        padding: 7px 10px;
+      }
+    }
+  }
+
+  //图标
+  &-icon {
+    padding: 0 8px 0 3px;
+    width: 30px;
+    font-size: 1.5rem;
+    text-align: center;
+    flex-shrink: 0;
+
+    #{$prefix}icon {
+      margin-top: 6px;
+      font-size: 18px;
+      padding: 7px;
+      border-radius: 17px;
+    }
+  }
+
+  //标题
+  &-title {
+    flex-grow: 1;
+    font-size: 16px;
+    font-weight: 400;
+  }
+
+  &-querybar {
+    padding-top: 8px;
+    > .el-form {
+      padding: 10px;
+      padding-bottom: 0 !important;
+    }
+
+    &-normal {
+      .el-form-item__label {
+        padding: 0 !important;
+        width: auto !important;
+      }
+    }
+
+    .el-dropdown + .el-button {
+      margin-left: 10px;
+    }
+  }
+
+  &-querybar-advanced {
+    position: fixed;
+    background: #fff;
+    box-shadow: 0 0 5px #2ebcfc;
+    border-color: #03a9f4;
+    border-radius: 3px;
+    z-index: $z-index-query-advanced;
+
+    .el-scrollbar__view {
+      padding-top: 18px !important;
+      padding-bottom: 0 !important;
+
+      #{$prefix}form {
+        padding: 0 !important;
+      }
+    }
+
+    .advanced-arrow {
+      position: absolute;
+      display: block;
+      top: -20px;
+      width: 0;
+      height: 0;
+      border-color: transparent;
+      border-style: solid;
+      border-top-width: 0;
+      border-bottom-color: rgba(46, 188, 252, 0.7);
+      border-width: 10px;
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 1px;
+        left: -10px;
+        display: block;
+        width: 0;
+        height: 0;
+        border-color: transparent;
+        border-style: solid;
+        border-width: 10px;
+        border-bottom-color: #fff;
+        border-top-width: 0;
+      }
+    }
+  }
+
+  &-body {
+    position: relative;
+    flex-grow: 1;
+
+    &-table {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+
+      &-header {
+        font-weight: 700;
+        color: $list-table-header-color;
+      }
+
+      .el-table {
+        border-left: 0;
+        border-right: 0;
+      }
+    }
+  }
+
+  &-footer {
+    padding: 0 5px;
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    @include vertical-center(40px);
+
+    &-left {
+      flex-grow: 1;
+      text-align: left;
+    }
+
+    &-right {
+      flex-shrink: 0;
+
+      .el-pagination {
+        margin-top: 4px;
+        display: inline-block;
+      }
+    }
+
+    &.reverse {
+      #{$prefix}list-footer-left {
+        order: 1;
+        text-align: right;
+      }
+    }
+  }
+
+  &.fullscreen {
+    position: fixed;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 100%;
+    z-index: $z-index-query-fullscreen;
+  }
+
+  //选择列按钮样式
+  &-select-column {
+    margin-left: 10px;
+    top: -6px;
+    cursor: pointer;
+
+    > span {
+      display: inline-block;
+      padding: 0 15px;
+      border: 1px solid $border-color1;
+      border-radius: 4px;
+      color: $color;
+      font-size: 13px;
+      @include vertical-center(28px);
+      box-sizing: border-box;
+
+      &:focus {
+        border-color: $color-primary;
+      }
+    }
+  }
+
+  //操作列
+  &-operation {
+    .el-button--text:not(.is-disabled) {
+      &:hover {
+        color: $color-warning;
+      }
+    }
+
+    .el-dropdown {
+      color: #409eff;
+      cursor: pointer;
+
+      &:hover {
+        color: $color-warning;
+      }
+    }
+  }
+
+  &-operation-dropdown {
+    .el-dropdown-menu__item {
+      padding: 0;
+    }
+
+    .el-button {
+      padding: 12px 20px;
+      width: 100%;
+      text-align: left;
+    }
+  }
+
+  &-small {
+    #{$prefix}list-toolbar {
+      height: 40px;
+      line-height: 37.8px;
+    }
+  }
+
+  &-mini {
+    #{$prefix}list-toolbar {
+      height: 35px;
+      line-height: 32.8px;
+    }
+  }
+}

package/packages/styles/components/listbox/_index.scss

@@ -0,0 +1,57 @@
+//列表
+#{$prefix}listbox {
+    #{$prefix}box-body {
+        padding: 0 !important;
+    }
+
+    .el-scrollbar__view {
+        padding: 0 !important;
+    }
+
+    &-count {
+        position: absolute;
+        right: 5px;
+        color: $text-color3;
+    }
+
+    &-item {
+        position: relative;
+        padding: 0 10px;
+        box-sizing: border-box;
+        @include vertical-center(40px);
+        border-bottom: 1px dashed $border-color4;
+        font-size: 14px;
+        cursor: pointer;
+        user-select: none;
+        border-left: 2px solid $color-primary;
+        text-align: right;
+
+        &-text {
+            display: inline-block;
+            padding-right: 20px;
+            text-align: left;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            box-sizing: border-box;
+        }
+
+        &:hover {
+            background-color: rgba(200, 200, 200, 0.2);
+        }
+
+        #{$prefix}button {
+            position: absolute;
+            right: 5px;
+            top: 6px;
+            padding: 6px !important;
+        }
+    }
+
+    .no-data {
+        text-align: center;
+        padding: 30px 0;
+    }
+}

package/packages/styles/components/login/_index.scss

@@ -0,0 +1,6 @@
+#{$prefix}login-container {
+  position: absolute;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+}

package/packages/styles/components/login-default/_index.scss

@@ -0,0 +1,94 @@
+#{$prefix}login-default {
+  #{$prefix}login-bg {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    opacity: 0.55;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    background-size: cover;
+    z-index: -1;
+  }
+
+  #{$prefix}login-box {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin: -160px 0 0 -190px;
+    padding: 5px 15px;
+    border-radius: 5px;
+    text-align: center;
+    width: 350px;
+    background: rgba(255, 255, 255, 0.7);
+  }
+
+  #{$prefix}login-content {
+    .verifycode {
+      display: flex;
+      flex-direction: row;
+      align-items: stretch;
+
+      &-input {
+        padding-right: 10px;
+        flex-grow: 1;
+      }
+
+      &-img {
+        flex-shrink: 0;
+        img {
+          margin-top: 1px;
+          height: 38px;
+          cursor: pointer;
+        }
+      }
+    }
+    .btn-login {
+      width: 100%;
+      cursor: pointer;
+    }
+  }
+
+  #{$prefix}login-logo {
+    position: relative;
+    padding: 10px 0 10px 85px;
+
+    &-img {
+      position: absolute;
+      left: 2px;
+      top: 14px;
+      padding: 5px;
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+      height: 75px;
+      float: left;
+    }
+
+    &-title {
+      margin: 0;
+      padding: 0;
+      height: 80px;
+      line-height: 80px;
+      font-size: 33px;
+      text-align: left;
+    }
+  }
+
+  #{$prefix}icon {
+    font-size: 2em;
+  }
+  .el-input__inner {
+    padding-left: 35px !important;
+  }
+
+  .copyright {
+    position: absolute;
+    bottom: 22px;
+    width: 100%;
+    text-align: center;
+    color: #b4783b;
+    font-size: 13px;
+  }
+}