haiwei-ui 1.0.0

package/packages/styles/_theme.scss

@@ -0,0 +1,82 @@
+/***********进度条 nprogress************/
+#nprogress {
+  .bar {
+    background: $nprogress-bar-background-color !important;
+  }
+
+  .peg {
+    box-shadow: $nprogress-peg-box-shadow !important;
+  }
+}
+
+/***********盒子 box************/
+#{$prefix}box {
+  border-color: $box-border-color;
+
+  > #{$prefix}box-header {
+    background-color: $box-header-background-color;
+  }
+
+  #{$prefix}box-content {
+    background-color: $box-content-background-color;
+  }
+
+  #{$prefix}box-footer {
+    background-color: $box-content-background-color;
+  }
+}
+
+/***********对话框 dialog************/
+#{$prefix}dialog {
+  > .el-dialog {
+    > .el-dialog__header {
+      background-color: $dialog-header-background-color;
+    }
+  }
+}
+
+/***********抽屉 drawer************/
+#{$prefix}drawer {
+  > #{$prefix}drawer-dialog {
+    > #{$prefix}drawer-header {
+      background-color: $drawer-header-background-color;
+    }
+  }
+}
+
+/***********列表页 list************/
+#{$prefix}list {
+  &-header {
+    background-color: $list-header-background-color;
+  }
+
+  &-body {
+    &-table {
+      &-header {
+        color: $list-table-header-color;
+      }
+    }
+  }
+}
+
+/***********分割窗口 split************/
+#{$prefix}split-wrapper {
+  #{$prefix}split-trigger {
+    border-color: $split-trigger-background-color;
+  }
+
+  #{$prefix}split-trigger-vertical,
+  #{$prefix}split-trigger-horizontal {
+    background: $split-trigger-background-color;
+  }
+}
+
+/***********标签导航 tabnav************/
+#{$prefix}tabnav {
+  &-control {
+    &-btn {
+      border-left-color: $tabnav-control-btn-border-color;
+      border-bottom-color: $tabnav-control-btn-border-color;
+    }
+  }
+}

package/packages/styles/_variables.scss

@@ -0,0 +1,69 @@
+/*前缀*/
+$prefix: '.nm-';
+
+/***************************颜色 Start*********************/
+$color: #333;
+$color-info: #909399;
+$color-primary: #409eff;
+$color-success: #67c23a;
+$color-warning: #e6a23c;
+$color-danger: #f56c6c;
+/***************************颜色 End*********************/
+
+/***************************文本颜色 Start*********************/
+$text-color1: #303133;
+$text-color2: #606266;
+$text-color3: #909399;
+$text-color4: #c0c4cc;
+/***************************边框颜色 End*********************/
+
+/***************************边框颜色 Start*********************/
+$border-color1: #dcdfe6;
+$border-color2: #e4e7ed;
+$border-color3: #ebeef5;
+$border-color4: #f2f6fc;
+/***************************边框颜色 End*********************/
+
+/***************************z-index*************************/
+/*盒子全屏时坐标*/
+$z-index-box-fullscreen: 1800;
+
+/*抽屉坐标*/
+$z-index-drawer-modal: 1802;
+$z-index-drawer-dialog: 1804;
+
+/*列表页坐标*/
+$z-index-query-box: 1806;
+$z-index-query-advanced: 1808;
+$z-index-query-fullscreen: 1810;
+
+/*阴影*/
+$box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+
+/*进度条*/
+$nprogress-bar-background-color: $color-warning;
+$nprogress-peg-box-shadow: 0 0 10px $color-warning, 0 0 5px $color-warning;
+
+/**************************组件*************************/
+
+/*盒子 box*/
+$box-border-color: $border-color2;
+$box-header-background-color: #f8f8f8;
+$box-content-background-color: #fff;
+
+/*对话框 dialog*/
+$dialog-header-background-color: #f8f8f8;
+$box-dialog-background-color: $box-header-background-color;
+
+/*抽屉 drawer*/
+$drawer-header-background-color: $dialog-header-background-color;
+
+/*列表页 list*/
+$list-header-background-color: $dialog-header-background-color;
+$list-table-header-color: rgb(3, 2, 2);
+
+/*分割窗口 split*/
+$split-trigger-background-color: #f0f0f0;
+
+/*标签导航 tabnav*/
+$tabnav-control-btn-border-color: #e4e7ed;

package/packages/styles/animation/_index.scss

@@ -0,0 +1,37 @@
+@mixin motion-common() {
+    animation-duration: .3s;
+    animation-fill-mode: both;
+}
+
+@mixin make-motion($className, $keyframeName) {
+
+    .#{$className}-enter-active,
+    .#{$className}-appear {
+        @include motion-common();
+        animation-play-state: paused;
+    }
+
+    .#{$className}-leave-active {
+        @include motion-common();
+        animation-play-state: paused;
+    }
+
+    .#{$className}-enter-active,
+    .#{$className}-appear {
+        animation-name: $keyframeName + "In";
+        animation-play-state: running;
+    }
+
+    .#{$className}-leave-active {
+        animation-name: $keyframeName + "Out";
+        animation-play-state: running;
+    }
+}
+
+@import './move.scss';
+@import './fade.scss';
+@import './breadcrumb.scss';
+
+.flip-list-move {
+    transition: transform 0.4s;
+}

package/packages/styles/animation/breadcrumb.scss

@@ -0,0 +1,18 @@
+.breadcrumb-enter-active,
+.breadcrumb-leave-active {
+    transition: all .5s;
+}
+
+.breadcrumb-enter,
+.breadcrumb-leave-active {
+    opacity: 0;
+    transform: translateX(20px);
+}
+
+.breadcrumb-move {
+    transition: all .5s;
+}
+
+.breadcrumb-leave-active {
+    position: absolute;
+}

package/packages/styles/animation/fade.scss

@@ -0,0 +1,30 @@
+.fade-transverse-leave-active,
+.fade-transverse-enter-active {
+    transition: all .5s;
+}
+
+.fade-transverse-enter {
+    opacity: 0;
+    transform: translateX(-30px);
+}
+
+.fade-transverse-leave-to {
+    opacity: 0;
+    transform: translateX(30px);
+}
+
+// 过渡动画 缩放渐变
+.fade-scale-leave-active,
+.fade-scale-enter-active {
+    transition: all .5s;
+}
+
+.fade-scale-enter {
+    opacity: 0;
+    transform: scale(1.2);
+}
+
+.fade-scale-leave-to {
+    opacity: 0;
+    transform: scale(0.8);
+}

package/packages/styles/animation/move.scss

@@ -0,0 +1,130 @@
+@mixin move-motion($className, $keyframeName) {
+    @include make-motion($className, $keyframeName);
+
+    .#{$className}-enter-active,
+    .#{$className}-appear {
+        opacity: 0;
+        animation-timing-function: ease-in-out;
+    }
+
+    .#{$className}-leave-active {
+        animation-timing-function: ease-in-out;
+    }
+}
+
+@include move-motion(move-up, MoveUp);
+@include move-motion(move-down, MoveDown);
+@include move-motion(move-left, MoveLeft);
+@include move-motion(move-right, MoveRight);
+
+@keyframes MoveDownIn {
+    0% {
+        transform-origin: 0 0;
+        transform: translateY(100%);
+        opacity: 0;
+    }
+
+    100% {
+        transform-origin: 0 0;
+        transform: translateY(0%);
+        opacity: 1;
+    }
+}
+
+@keyframes MoveDownOut {
+    0% {
+        transform-origin: 0 0;
+        transform: translateY(0%);
+        opacity: 1;
+    }
+
+    100% {
+        transform-origin: 0 0;
+        transform: translateY(100%);
+        opacity: 0;
+    }
+}
+
+@keyframes MoveLeftIn {
+    0% {
+        transform-origin: 0 0;
+        transform: translateX(-100%);
+        opacity: 0;
+    }
+
+    100% {
+        transform-origin: 0 0;
+        transform: translateX(0%);
+        opacity: 1;
+    }
+}
+
+@keyframes MoveLeftOut {
+    0% {
+        transform-origin: 0 0;
+        transform: translateX(0%);
+        opacity: 1;
+    }
+
+    100% {
+        transform-origin: 0 0;
+        transform: translateX(-100%);
+        opacity: 0;
+    }
+}
+
+@keyframes MoveRightIn {
+    0% {
+        opacity: 0;
+        transform-origin: 0 0;
+        transform: translateX(100%);
+    }
+
+    100% {
+        opacity: 1;
+        transform-origin: 0 0;
+        transform: translateX(0%);
+    }
+}
+
+@keyframes MoveRightOut {
+    0% {
+        transform-origin: 0 0;
+        transform: translateX(0%);
+        opacity: 1;
+    }
+
+    100% {
+        transform-origin: 0 0;
+        transform: translateX(100%);
+        opacity: 0;
+    }
+}
+
+@keyframes MoveUpIn {
+    0% {
+        transform-origin: 0 0;
+        transform: translateY(-100%);
+        opacity: 0;
+    }
+
+    100% {
+        transform-origin: 0 0;
+        transform: translateY(0%);
+        opacity: 1;
+    }
+}
+
+@keyframes MoveUpOut {
+    0% {
+        transform-origin: 0 0;
+        transform: translateY(0%);
+        opacity: 1;
+    }
+
+    100% {
+        transform-origin: 0 0;
+        transform: translateY(-100%);
+        opacity: 0;
+    }
+}

package/packages/styles/app.scss

@@ -0,0 +1,101 @@
+//变量
+@import './variables';
+//混合
+@import './mixins';
+//动画
+@import './animation/index';
+//帮助类
+@import './helper/index';
+//覆盖element样式
+@import './element';
+
+/*********************组件 Begin***************************/
+
+//盒子
+@import './components/box/index';
+//盒子行
+@import './components/box-row/index';
+//小盒子
+@import './components/box-small/index';
+//按钮
+@import './components/button/index';
+//Checkbox
+@import './components/checkbox-group/index';
+//颜色选择器
+@import './components/color-picker/index';
+//容器
+@import './components/container/index';
+//容器
+@import './components/date-range-picker/index';
+//详情页
+@import './components/details/index';
+//详情页对话框
+@import './components/details-dialog/index';
+//对话框
+@import './components/dialog/index';
+//拖拽排序
+@import './components/drag-sort/index';
+//拖拽排序对话框
+@import './components/drag-sort-dialog/index';
+//抽屉
+@import './components/drawer/index';
+//flex
+@import './components/flex/index';
+//表单
+@import './components/form/index';
+//对话框表单
+@import './components/form-dialog/index';
+//对话框表单
+@import './components/form-page/index';
+//图标
+@import './components/icon/index';
+//图标选择器
+@import './components/icon-picker/index';
+//标签
+@import './components/label/index';
+//列表
+@import './components/list/index';
+//列表框
+@import './components/listbox/index';
+//登录页
+@import './components/login/index';
+//登录组件Default
+@import './components/login-default/index';
+//登录组件Neon
+@import './components/login-neon/index';
+//滚动条
+@import './components/scrollbar/index';
+//选择框
+@import './components/select/index';
+//窗口分割
+@import './components/split/index';
+//标签导航
+@import './components/tabnav/index';
+//标签页
+@import './components/tabs/index';
+//树
+@import './components/tree/index';
+//树形选择器
+@import './components/tree-select/index';
+//文本
+@import './components/txt/index';
+//工具栏
+@import './components/toolbar/index';
+//多文件上传
+@import './components/upload-multiple/index';
+//单文件上传
+@import './components/upload-single/index';
+//文件上传对话框模式
+@import './components/upload-dialog/index';
+//地图
+@import './components/map/index';
+//地图搜索
+@import './components/map-search-box/index';
+//地图坐标拾取
+@import './components/map-coord-picking/index';
+
+/*********************组件 End*******************************/
+
+/*********************主题 Begin*****************************/
+@import './theme';
+/*********************主题 End*******************************/

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

@@ -0,0 +1,212 @@
+#{$prefix}box {
+  box-shadow: $box-shadow;
+  @include flex-column();
+  box-sizing: border-box;
+  border-radius: 3px;
+  overflow: hidden;
+  border-width: 0 1px;
+  border-style: solid;
+  border-top: 1px solid $border-color2;
+
+  > #{$prefix}box-header {
+    padding: 0 5px;
+    display: flex;
+    align-items: stretch;
+    flex-shrink: 0;
+    @include vertical-center(46px);
+    border-bottom: 1px solid $border-color3;
+    box-sizing: border-box;
+
+    #{$prefix}box-header-icon {
+      padding: 0 8px 0 3px;
+      font-size: 1.5rem;
+      text-align: center;
+      flex-shrink: 0;
+
+      #{$prefix}icon {
+        margin-top: 6px;
+        font-size: 18px;
+        padding: 7px;
+        border-radius: 17px;
+      }
+    }
+
+    #{$prefix}box-header-title {
+      flex-grow: 1;
+      font-size: 16px;
+      font-weight: 400;
+    }
+
+    #{$prefix}box-header-toolbar-before {
+      flex-grow: 1;
+    }
+
+    #{$prefix}box-header-toolbar {
+      position: relative;
+      flex-shrink: 0;
+
+      #{$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;
+
+        &.is-disabled {
+          cursor: not-allowed;
+          span {
+            color: #c0c4cc;
+          }
+        }
+        &:not(.is-disabled):hover {
+          color: $text-color1;
+          transform: scale(1.2);
+        }
+      }
+    }
+  }
+
+  > #{$prefix}box-dialog {
+    position: relative;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+    @include flex-column();
+    flex-grow: 1;
+
+    > #{$prefix}box-content {
+      position: relative;
+      padding: 10px;
+      flex-grow: 1;
+      box-sizing: border-box;
+    }
+
+    > #{$prefix}box-footer {
+      padding: 0 10px;
+      flex-shrink: 0;
+      flex-grow: 0;
+      height: 42px;
+      line-height: 41px;
+      border-top: 1px solid $border-color3;
+      text-align: right;
+      box-sizing: border-box;
+
+      &.left {
+        text-align: left;
+      }
+
+      &.center {
+        text-align: center;
+      }
+
+      &.right {
+        text-align: right;
+      }
+    }
+  }
+
+  &.has-height {
+    > #{$prefix}box-dialog {
+      > #{$prefix}box-content {
+        position: absolute;
+        padding-left: 0;
+        padding-right: 0;
+        width: 100%;
+        height: 100%;
+
+        #{$prefix}box-wrapper {
+          height: 100%;
+
+          > &-scrollbar {
+            > .el-scrollbar__wrap {
+              padding-left: 10px;
+              padding-right: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &.fullscreen {
+    position: fixed;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 100%;
+    z-index: $z-index-box-fullscreen;
+  }
+
+  &.page {
+    height: 100%;
+
+    > #{$prefix}box-dialog {
+      padding: 0;
+
+      > #{$prefix}box-content {
+        padding: 0;
+
+        > #{$prefix}box-wrapper {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+
+          .el-scrollbar__view {
+            padding: 10px;
+          }
+        }
+      }
+    }
+  }
+
+  &.no-padding {
+    > #{$prefix}box-dialog {
+      > #{$prefix}box-content {
+        padding: 0 !important;
+
+        > #{$prefix}box-wrapper {
+          .el-scrollbar__view {
+            padding: 0 !important;
+          }
+        }
+      }
+    }
+  }
+
+  &.border {
+    border-top-width: 2px;
+
+    &.success {
+      border-top-color: $color-success;
+    }
+
+    &.info {
+      border-top-color: $color-info;
+    }
+
+    &.primary {
+      border-top-color: $color-primary;
+    }
+
+    &.warning {
+      border-top-color: $color-warning;
+    }
+
+    &.danger {
+      border-top-color: $color-danger;
+    }
+  }
+
+  &.title-bold {
+    #{$prefix}box-header-title {
+      font-weight: 600;
+    }
+  }
+}