haiwei-ui 1.0.0

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

@@ -0,0 +1,129 @@
+#{$prefix}login-neon {
+  background-color: #303641;
+  height: 100%;
+
+  #particles {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+  .login-header {
+    position: relative;
+    background: #373e4ab0;
+    padding: 80px 0;
+    text-align: center;
+
+    &::after {
+      position: absolute;
+      content: '';
+      left: 50%;
+      bottom: 0;
+      margin-left: -12.5px;
+      width: 0px;
+      height: 0px;
+      border-style: solid;
+      border-width: 13px 12.5px 0 12.5px;
+      border-color: #373e4a transparent transparent transparent;
+      bottom: -13px;
+      -moz-transition: all 550ms ease-in-out;
+      -webkit-transition: all 550ms ease-in-out;
+      -o-transition: all 550ms ease-in-out;
+      transition: all 550ms ease-in-out;
+    }
+  }
+
+  .login-logo {
+    img {
+      height: 100px;
+    }
+  }
+
+  .login-title {
+    padding: 10px;
+    font-size: 27px;
+    color: #fff;
+  }
+
+  .login-form {
+    padding-top: 100px;
+    margin: 0 auto;
+    width: 320px;
+    .el-input__inner {
+      padding-left: 45px;
+      background: #373e4a;
+      border: 1px solid #373e4a;
+      box-shadow: 0 0 0px 1000px #373e4a inset;
+      color: #fff;
+      -webkit-text-fill-color: #fff;
+      border-radius: 0;
+      transition: all 0.3s ease-in;
+    }
+
+    .el-input__prefix {
+      padding: 0 5px;
+
+      #{$prefix}icon {
+        font-size: 18px;
+      }
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: 11px;
+        right: -5px;
+        height: 20px;
+        width: 1px;
+        background-color: #454a54;
+      }
+    }
+
+    .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;
+        }
+      }
+    }
+
+    .login-btn {
+      border: 1px solid #454a54;
+      text-align: left;
+      padding: 15px 20px;
+      font-size: 14px;
+      background: #303641;
+      color: #fff;
+      width: 100%;
+      transition: all 0.3s ease-in;
+
+      #{$prefix}icon {
+        float: right;
+      }
+
+      &:hover,
+      &:active {
+        background: #373e4a;
+      }
+    }
+  }
+
+  .copyright {
+    color: #909399;
+    position: absolute;
+    bottom: 20px;
+    width: 100%;
+    text-align: center;
+    font-size: 13px;
+  }
+}

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

@@ -0,0 +1,5 @@
+.nm-map {
+  .anchorBL {
+    display: none;
+  }
+}

package/packages/styles/components/map-coord-picking/_index.scss

@@ -0,0 +1,50 @@
+.nm-map-coord-picking {
+  &-input {
+    .el-icon-coordinate {
+      cursor: pointer;
+      &:hover {
+        color: #000;
+      }
+    }
+  }
+
+  &-box {
+    height: 100%;
+
+    .left {
+      padding: 3px;
+      box-sizing: border-box;
+      height: 100%;
+    }
+
+    .right {
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      padding: 3px;
+      height: 100%;
+      box-sizing: border-box;
+    }
+  }
+
+  &-search {
+    position: relative;
+    flex-grow: 1;
+    box-sizing: border-box;
+    overflow: hidden;
+    .nm-map-search-box {
+      position: absolute;
+      height: 100%;
+      width: 100%;
+    }
+  }
+
+  &-buttons {
+    flex-shrink: 0;
+
+    .el-button {
+      width: 48%;
+      margin: 5px 1% 0 1%;
+    }
+  }
+}

package/packages/styles/components/map-search-box/_index.scss

@@ -0,0 +1,83 @@
+.nm-map-search {
+  &-box {
+    position: relative;
+  }
+
+  &-input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+  }
+
+  &-list {
+    padding-top: 35px;
+    height: 100%;
+    width: 100%;
+    box-sizing: border-box;
+    .el-scrollbar {
+      height: 100%;
+      .el-scrollbar__wrap {
+        overflow-x: hidden;
+      }
+    }
+
+    &-box {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+      list-style: none;
+    }
+
+    &-item {
+      padding: 7px 10px;
+      cursor: pointer;
+      border-bottom: 1px dashed #e4e7ed;
+      transition: all 0.3s ease-in-out;
+
+      .title {
+        margin-bottom: 5px;
+        padding: 0;
+        font-size: 14px;
+        font-weight: 600;
+        .el-icon-location-information {
+          color: #f56c6c;
+          font-size: 17px;
+        }
+      }
+      .address,
+      .point {
+        position: relative;
+        margin-bottom: 5px;
+        padding-left: 35px;
+        box-sizing: border-box;
+        font-size: 12px;
+        color: #909399;
+
+        &::before {
+          position: absolute;
+          left: 0;
+          top: 0;
+          color: #303133;
+        }
+      }
+      .address::before {
+        content: '地址：';
+      }
+
+      .point::before {
+        content: '坐标：';
+      }
+
+      &:hover,
+      &.active {
+        background-color: #ebeef5;
+      }
+    }
+
+    .no-data {
+      margin-top: 20px;
+      text-align: center;
+    }
+  }
+}

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

@@ -0,0 +1,16 @@
+#{$prefix}scrollbar {
+  height: 100%;
+  .el-scrollbar__wrap {
+    overflow-x: hidden;
+  }
+
+  .el-scrollbar__bar.is-horizontal {
+    display: none;
+  }
+
+  &.is-horizontal {
+    .el-scrollbar__bar.is-horizontal {
+      display: block;
+    }
+  }
+}

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

@@ -0,0 +1,25 @@
+#{$prefix}select {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  width: 100%;
+
+  &-input {
+    flex-grow: 1;
+    .el-select {
+      width: 100%;
+    }
+  }
+  &-button {
+    flex-shrink: 0;
+    padding-left: 3px;
+    #{$prefix}button {
+      padding-left: 10px;
+      padding-right: 10px;
+
+      #{$prefix}icon {
+        padding: 0;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,119 @@
+#{$prefix}split-wrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    #{$prefix}split-pane {
+        position: absolute;
+
+        &.left-pane,
+        &.right-pane {
+            top: 0;
+            bottom: 0;
+            box-sizing: border-box;
+        }
+
+        &.left-pane {
+            left: 0;
+        }
+
+        &.right-pane {
+            padding-left: 6px;
+            right: 0;
+        }
+
+        &.top-pane,
+        &.bottom-pane {
+            left: 0;
+            right: 0;
+            box-sizing: border-box;
+        }
+
+        &.top-pane {
+            top: 0;
+        }
+
+        &.bottom-pane {
+            padding-top: 6px;
+            bottom: 0;
+        }
+    }
+
+    #{$prefix}split-trigger-con {
+        position: absolute;
+        transform: translate(-50%, -50%);
+        z-index: 10;
+    }
+
+    #{$prefix}split-horizontal {
+        #{$prefix}split-trigger-con {
+            top: 50%;
+            height: 100%;
+            width: 0;
+        }
+    }
+
+    #{$prefix}split-vertical {
+        #{$prefix}split-trigger-con {
+            left: 50%;
+            height: 0;
+            width: 100%;
+        }
+    }
+
+    #{$prefix}split-trigger {
+        border: 1px solid;
+        box-sizing: border-box;
+
+        #{$prefix}split-trigger-bar-con {
+            position: absolute;
+            overflow: hidden;
+        }
+    }
+
+    #{$prefix}split-trigger-vertical {
+        width: 6px;
+        height: 100%;
+        border-top: none;
+        border-bottom: none;
+        cursor: col-resize;
+
+        #{$prefix}split-trigger-bar-con {
+            left: 1px;
+            top: 50%;
+            height: 32px;
+            transform: translateY(-50%);
+        }
+
+        #{$prefix}split-trigger-bar {
+            width: 4px;
+            height: 1px;
+            background: rgba(23, 35, 61, 0.25);
+            float: left;
+            margin-top: 3px;
+        }
+    }
+
+    #{$prefix}split-trigger-horizontal {
+        height: 6px;
+        width: 100%;
+        border-left: none;
+        border-right: none;
+        cursor: row-resize;
+
+        #{$prefix}split-trigger-bar-con {
+            left: 50%;
+            top: 1px;
+            width: 32px;
+            transform: translate(-50%);
+        }
+
+        #{$prefix}split-trigger-bar {
+            height: 4px;
+            width: 1px;
+            background: rgba(23, 35, 61, 0.25);
+            float: left;
+            margin-right: 3px;
+        }
+    }
+}

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

@@ -0,0 +1,194 @@
+#{$prefix}tabnav {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+
+  &-tabs {
+    overflow-y: hidden;
+    overflow-x: auto;
+    flex-grow: 1;
+    background: #ebf1f6;
+
+    .el-tabs__nav-next,
+    .el-tabs__nav-prev {
+      font-size: 20px;
+      width: 30px;
+      text-align: center;
+    }
+
+    .el-tabs__nav-wrap.is-scrollable {
+      padding: 0 30px;
+    }
+
+    .el-tabs__header {
+      margin: 0;
+      border-bottom: 1px solid $border-color1;
+
+      .el-tabs__nav {
+        padding: 0;
+        border: none;
+        border-radius: 0 !important;
+
+        .el-tabs__item {
+          position: relative;
+          padding: 0 20px !important;
+          margin: 5px 2px;
+          user-select: none;
+          border-left: none;
+          background-color: #fff;
+          border-radius: 2px;
+          color: $text-color3;
+
+          .el-icon-close {
+            display: none;
+            position: absolute;
+          }
+
+          &:hover {
+            padding-right: 25px !important;
+            color: #03a9f4;
+
+            .el-icon-close {
+              display: inline-block;
+            }
+          }
+
+          &.is-active {
+            padding-left: 25px !important;
+            color: #03a9f4;
+
+            &::before {
+              content: ' ';
+              position: absolute;
+              left: 9px;
+              display: inline-block;
+              width: 10px;
+              height: 10px;
+              border-radius: 5px;
+              background-color: #03a9f4;
+            }
+          }
+
+          &:focus {
+            box-shadow: none !important;
+          }
+
+          &:first-child {
+            padding-right: 20px !important;
+
+            .el-icon-close {
+              display: none !important;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &-control {
+    flex-shrink: 0;
+
+    &-btn {
+      display: inline-block;
+      width: 30px;
+      text-align: center;
+      @include vertical-center(40px);
+      cursor: pointer;
+      border-left: 1px solid;
+      border-bottom: 1px solid;
+      font-size: 16px;
+      box-sizing: border-box;
+    }
+
+    &-icon {
+      margin-right: 10px;
+      font-weight: bold;
+    }
+  }
+
+  &-contextmenu {
+    position: fixed;
+    padding: 5px 0;
+    background-color: #fff;
+    border: 1px solid #ebeef5;
+    border-radius: 4px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    z-index: 9999;
+
+    li {
+      list-style: none;
+      line-height: 30px;
+      padding: 0 15px;
+      margin: 0;
+      font-size: 13px;
+      color: #606266;
+      cursor: pointer;
+      outline: none;
+
+      &:first-child {
+        border-bottom: 1px solid #ebeef5;
+      }
+
+      #{$prefix}icon {
+        margin-right: 7px;
+        font-size: 17px;
+      }
+
+      &:hover {
+        background-color: #ecf5ff;
+        color: #66b1ff;
+      }
+    }
+  }
+
+  @mixin tabnav-size($height, $fontSize, $beforeTop) {
+    #{$prefix}tabnav {
+      &-tabs {
+        height: $height + 10;
+
+        .el-tabs__header {
+          .el-tabs__nav {
+            .el-tabs__item {
+              @include vertical-center($height);
+              font-size: $fontSize;
+
+              .el-icon-close {
+                top: ($height - 14) / 2;
+                right: 7px;
+              }
+
+              &::before {
+                top: $beforeTop;
+              }
+            }
+          }
+
+          .el-tabs__nav-prev,
+          .el-tabs__nav-next {
+            line-height: $height + 15px;
+          }
+        }
+      }
+
+      &-control {
+        &-btn {
+          @include vertical-center($height + 10);
+        }
+      }
+    }
+  }
+
+  &.mini {
+    @include tabnav-size(25px, 12px, 8px);
+  }
+
+  &.small {
+    @include tabnav-size(30px, 12px, 10px);
+  }
+
+  &.medium {
+    @include tabnav-size(35px, 14px, 12px);
+  }
+
+  @include tabnav-size(40px, 15px, 15px);
+}

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

@@ -0,0 +1,79 @@
+#{$prefix}tabs {
+  position: relative;
+  height: 100%;
+  background-color: #fff;
+
+  &-toolbar {
+    position: absolute;
+    top: 0;
+    right: 5px;
+    height: 40px;
+    z-index: 1;
+
+    #{$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: 40px;
+      height: 40px;
+
+      &:hover {
+        color: $text-color1;
+        transform: scale(1.2);
+      }
+    }
+  }
+
+  > .el-tabs {
+    @include flex-column();
+    height: 100%;
+    box-shadow: $box-shadow;
+    box-sizing: border-box;
+    border-radius: 3px;
+
+    &.el-tabs--border-card {
+      border-bottom: none;
+    }
+
+    > .el-tabs__header {
+      margin: 0;
+
+      > .el-tabs__nav-wrap {
+        padding: 0 5px;
+      }
+    }
+
+    .el-tabs__content {
+      padding: 0;
+      height: 100%;
+      flex-grow: 1;
+
+      .el-tab-pane {
+        height: 100%;
+
+        > #{$prefix}list,
+        > #{$prefix}box {
+          border: 0;
+          border-radius: 0;
+        }
+      }
+    }
+  }
+
+  &.fullscreen {
+    position: fixed;
+    top: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 9999;
+  }
+}