gy-webcode2 1.0.0

package/css/modules/tabs.scss

@@ -0,0 +1,54 @@
+.tabs{
+    height: 55px;
+    background: #fff;
+    border-bottom: 1px solid #d9d9d9;
+    display: flex;
+    padding: 0 10px;
+    // padding: 0 16px;
+    .item{
+        margin: 0 10px;
+        position: relative;
+        display: flex;
+        font-size: 14px;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        color: #000;
+        padding-top: 22px;
+        min-width: 60px;
+        text-align: center;
+        justify-content: center;
+        // border: 1px solid #000;
+        &:hover{
+            @include themeColor('color','hover');
+        }
+        &:active{
+            @include themeColor('color','active');
+        }
+        &.active{
+            @include themeColor('color','active');
+            &::before{
+                content: "";    
+                display: block;
+                position: absolute;
+                bottom: -1px;
+                // left: 6px;
+                // right: 6px;
+                left: 0;
+                right: 0;
+                width: 60px;
+                height: 2px;
+                margin: auto;
+                @include themeColor('background-color','active');
+            }
+        }
+        
+    }
+    .other{
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        // padding-right: 10px;
+        flex: 1;
+        
+    }
+}

package/css/modules/tags.scss

@@ -0,0 +1,149 @@
+.tags{
+    background: #000;
+    color: #fff;
+    border-radius: 3px;
+    padding: 2px  ;
+    font-size: 12px;
+    border:1px solid #000;
+    display: inline-block;
+    line-height: 1;
+
+    &.wide{
+        padding: 4px 8px ;
+    }
+
+    &.hui{
+        background: #f5f5f5;
+        border-color: hsl(0, 0%, 96%);
+        color: #262626;
+        &.plain{
+            background: #f5f5f5;
+            border-color: #d9d9d9; 
+        }
+        &.plain2{
+            background: #fff;
+            border-color: #d9d9d9; 
+        }
+        &.plain3{
+            background: #fff;
+            border-color: #d9d9d9; 
+            border-style: dashed;
+        }
+    }
+
+    &.hong{
+        background: #ff4d50;
+        border-color: #ff4d50;
+        &.plain{
+            background: #fff1f1;
+            border-color: #ffa49f; 
+            color: #f5212d;
+        }
+    }
+    &.lan{
+        background: #1890ff;
+        border-color: #1890ff;
+        color: #fff;
+        &.plain{
+            background: #e6f7ff;
+            border-color: #91d5fc; 
+            color: #1690fd;
+        }
+    }
+    &.lan2{
+        background: #e6f7ff;
+        border-color: #e6f7ff;
+        color: #1690fd;
+        &.plain{
+            border-color: #90d5ff; 
+        }
+        &.plain2{
+            border-color: #1791fe; 
+            color: #1791ff;
+            background: #fff;
+        }
+    }
+    
+    &.lan3{
+        background: #353688;
+        border-color: #353688;
+    }
+
+    &.lan4{
+        background: #155bd5;
+        border-color: #155bd5;
+    }
+
+    &.lv{
+        background: #4fc519;
+        border-color: #4fc519;
+        &.plain{
+            background: #f8ffed;
+            border-color: #b8eb8e; 
+            color: #51c51a;
+        }
+    }
+    &.lv2{
+        border-color: #f8ffed;
+        background: #f8ffed;
+        color: #51c51a;
+        &.plain{
+            border-color: #b9ea8f; 
+        }
+    }
+
+    &.huang{
+        background: #fbad15;
+        border-color: #fbad15;
+        &.plain{
+            background: #fefbe8;
+            border-color: #ffe58e; 
+            color: #ffa83f;
+        }
+    }
+
+    &.cheng{
+        background: #eb6a0c;
+        border-color: #eb6a0c;
+    }
+    &.cheng2{
+        background: #fff4f1;
+        border-color: #fff4f1; 
+        color: #ed6a0f;
+        &.plain{
+            border-color: #f8ba93; 
+        }
+    }
+
+    &.zi{
+        background: #8a40d5;
+        border-color: #8a40d5;
+        &.plain{
+            background: #f8f3fa;
+            border-color: #c7a7ea; 
+            color: #883ed3;
+        }
+    }
+
+    &.fen{
+        background: #d42a8d;
+        border-color: #d42a8d;
+        &.plain{
+            background: #fff0fa;
+            border-color: #ea9ecd; 
+            color: #d5298b;
+        }
+    }
+
+    
+
+
+
+
+    &.myHover{
+        cursor: pointer;
+        &:hover{
+            opacity: 0.8;
+        }
+    }
+}

package/css/modules/tree.scss

@@ -0,0 +1,120 @@
+.treeHeader{
+    display: flex;
+    overflow: hidden;
+    padding: 12px 16px;
+    align-items: center;
+    .removeBtn{
+        border: 1px solid #ccc;
+    }
+}
+.treeBox{
+    position: absolute;
+    left: 2px;
+    right: 2px;
+    bottom: 0;
+    top: 0;
+    overflow: auto;
+    padding: 0 12px 0 12px;
+    .el-tree{
+        color: #000;
+    }
+    .el-tree-node__content{
+        height: 30px;
+        line-height: 30px;
+        &:hover{
+            border-radius: 6px;
+        }
+    }
+    .el-tree--highlight-current .el-tree-node.is-current:focus>.el-tree-node__content{
+        @include themeColor('background-color','active',0.1);
+        @include themeColor('color','active');
+        
+
+    }
+    .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
+        // background: #f5f7fa !important;
+        // color:#13939e !important;
+        @include themeColor('background-color','active',0.1);
+        @include themeColor('color','active');
+        border-radius: 6px;
+        .iconBox{
+            opacity: 1 
+        }
+    }
+    .el-tree>.el-tree-node{
+        min-width:100%;
+        display: inline-block;
+    }
+    .tree_content{
+        
+        .icon{
+            color:#aaa;
+            &.icon_lan{
+                color:#4867af;
+            }
+            &.icon_huang{
+                color: #ffcf2a;
+            }
+        }
+    }
+}
+
+.edit_treeBox{
+   
+    .el-tree>.el-tree-node{
+        
+        min-width:initial;
+        display:initial;
+    }
+    .el-tree-node__content{
+        position: relative;
+    }
+    //  .el-tree-node__content .el-tree-node__expand-icon.is-leaf{
+    //     display:none;
+    // }
+    .tree_content{
+        // flex: 1;
+        width: 100%;
+        display: flex;
+        overflow: hidden;
+        .tree_title{
+            flex: 1;
+            // width: 90%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            padding-right: 10px;
+        }
+    
+        .iconBox{
+            // position: absolute;
+            // right: 10px;
+            // top: 0;
+            opacity: 0.5;
+            font-size: 12px;
+            margin-right: 5px;
+            // display:none;
+        }
+
+        &:hover{
+            .tree_title{
+                // width:60%;
+                // width: calc(100% - 70px)
+            }
+            .iconBox{
+                opacity: 1;
+                // display:block;
+            }
+        }
+
+        &.noEdit{
+            &:hover{
+                .tree_title{
+                width: 100%;
+                }
+            }
+        }
+    }
+   
+}
+

package/css/modules/tree_check.scss

@@ -0,0 +1,53 @@
+.zyBox{
+    background: #f3f3f3;
+    padding: 10px;
+    display:flex;
+    >div{
+        width: 50%;
+        background: #fff;
+        height: 245px;
+    }
+    .left{
+        margin-right: 10px;
+        position: relative;
+        .searchBox{
+            padding:5px;
+        }
+        .treeBox{
+            top: 40px;
+            bottom: 0;
+            overflow: auto;
+            position: absolute;
+            left: 0;
+            right: 0;
+        }
+    }
+    .right{
+        overflow: auto;
+    }
+        ul{
+            padding:10px;
+            li{
+                height: 25px;
+                margin-bottom: 5px;
+                display: flex;
+                font-size: 14px;
+                line-height: 25px;
+                div:nth-of-type(1){
+                    border: 1px solid #efefef;
+                    flex: 1;
+                    color:#666666;
+                    padding-left: 10px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                }
+                div:nth-of-type(2){
+                    width: 30px;
+                    text-align:center;
+                    color:#a5becf;
+                    cursor: pointer;
+                }
+            }
+        }
+}

package/css/theme/colors/cheng.scss

@@ -0,0 +1,17 @@
+
+
+$themeColor_cheng:(
+    color:#fb551b,
+    hover:#ff855b,
+    down:#ef480e,
+    active:#fb551b,
+    // 一级菜单选中颜色
+    sidebar_menu1_activeColor:#fb551b,
+    // 二级菜单选中颜色
+    sidebar_menu2_activeColor:#fb551b,
+    // 二级菜单选中背景颜色
+    sidebar_menu2_activeBgColor:rgba($color: #fb551b, $alpha: 0.2),
+    // 二级菜单移入背景颜色
+    sidebar_menu2_hoverColor:#fb551b,
+    button_activeImg:url("~gy-webcode2/img/btnActive/3.png")
+);

package/css/theme/colors/default.scss

@@ -0,0 +1,19 @@
+
+$themeColor_default:(
+    color:#1890ff,
+    hover:#60abff,
+    down:#096dd9,
+    active:#1890ff,
+
+    
+    // 一级菜单选中颜色
+    sidebar_menu1_activeColor:#1f90ff,
+    // 二级菜单选中颜色
+    sidebar_menu2_activeColor:#1f90ff,
+    // 二级菜单选中背景颜色
+    sidebar_menu2_activeBgColor:rgba($color: #1f90ff, $alpha: 0.2),
+    // 二级菜单移入字体颜色
+    sidebar_menu2_hoverColor:#1890ff,
+
+    button_activeImg:url("~gy-webcode2/img/btnActive/1.png")
+);

package/css/theme/colors/hong.scss

@@ -0,0 +1,17 @@
+
+
+$themeColor_hong:(
+    color:#f5222d,
+    hover:#ff5e66,
+    down:#cf1322,
+    active:#f5222d,
+    // 一级菜单选中颜色
+    sidebar_menu1_activeColor:#f5222d,
+    // 二级菜单选中颜色
+    sidebar_menu2_activeColor:#f5222d,
+    // 二级菜单选中背景颜色
+    sidebar_menu2_activeBgColor:rgba($color: #f5222d, $alpha: 0.2),
+    // 二级菜单移入背景颜色
+    sidebar_menu2_hoverColor:#ff5e66,
+    button_activeImg:url("~gy-webcode2/img/btnActive/2.png")
+);

package/css/theme/colors/huang.scss

@@ -0,0 +1,17 @@
+
+
+$themeColor_huang:(
+    color:#fa8c16,
+    hover:#ffb361,
+    down:#e17706,
+    active:#fa8c16,
+    // 一级菜单选中颜色
+    sidebar_menu1_activeColor:#fa8c16,
+    // 二级菜单选中颜色
+    sidebar_menu2_activeColor:#fa8c16,
+    // 二级菜单选中背景颜色
+    sidebar_menu2_activeBgColor:rgba($color: #fa8c16, $alpha: 0.2),
+    // 二级菜单移入背景颜色
+    sidebar_menu2_hoverColor:#fa8c16,
+    button_activeImg:url("~gy-webcode2/img/btnActive/4.png")
+);

package/css/theme/colors/lv.scss

@@ -0,0 +1,17 @@
+
+
+$themeColor_lv:(
+    color:#52c41a,
+    hover:#95de64,
+    down:#389e0d,
+    active:#52c41a,
+    // 一级菜单选中颜色
+    sidebar_menu1_activeColor:#52c41a,
+    // 二级菜单选中颜色
+    sidebar_menu2_activeColor:#52c41a,
+    // 二级菜单选中背景颜色
+    sidebar_menu2_activeBgColor:rgba($color: #52c41a, $alpha: 0.2),
+    // 二级菜单移入背景颜色
+    sidebar_menu2_hoverColor:#52c41a,
+    button_activeImg:url("~gy-webcode2/img/btnActive/6.png")
+);

package/css/theme/colors/qing.scss

@@ -0,0 +1,17 @@
+
+
+$themeColor_qing:(
+    color:#15c3c1,
+    hover:#5cdbd3,
+    down:#13a8a8,
+    active:#15c3c1,
+    // 一级菜单选中颜色
+    sidebar_menu1_activeColor:#15c3c1,
+    // 二级菜单选中颜色
+    sidebar_menu2_activeColor:#15c3c1,
+    // 二级菜单选中背景颜色
+    sidebar_menu2_activeBgColor:rgba($color: #15c3c1, $alpha: 0.2),
+    // 二级菜单移入背景颜色
+    sidebar_menu2_hoverColor:#15c3c1,
+    button_activeImg:url("~gy-webcode2/img/btnActive/5.png")
+);

package/css/theme/colors/shenaln.scss

@@ -0,0 +1,17 @@
+
+
+$themeColor_shenaln:(
+    color:#2f54eb,
+    hover:#597ef7,
+    down:#1d39c4,
+    active:#2f54eb,
+    // 一级菜单选中颜色
+    sidebar_menu1_activeColor:#2f54eb,
+    // 二级菜单选中颜色
+    sidebar_menu2_activeColor:#2f54eb,
+    // 二级菜单选中背景颜色
+    sidebar_menu2_activeBgColor:rgba($color: #2f54eb, $alpha: 0.2),
+    // 二级菜单移入背景颜色
+    sidebar_menu2_hoverColor:#2f54eb,
+    button_activeImg:url("~gy-webcode2/img/btnActive/7.png")
+);

package/css/theme/colors/zi.scss

@@ -0,0 +1,18 @@
+
+
+$themeColor_zi:(
+    color:#722ed1,
+    hover:#9254de,
+    down:#531dab,
+    active:#722ed1,
+    // 一级菜单选中颜色
+    sidebar_menu1_activeColor:#9e6ae6,
+    // 二级菜单选中颜色
+    sidebar_menu2_activeColor:#9e6ae6,
+    // 二级菜单选中背景颜色
+    sidebar_menu2_activeBgColor:rgba($color: #722ed1, $alpha: 0.2),
+    // 二级菜单移入背景颜色
+    sidebar_menu2_hoverColor:#9e6ae6,
+    sidebar_menu2_hoverBgColor:rgba($color: #722ed1, $alpha: 0.2),
+    button_activeImg:url("~gy-webcode2/img/btnActive/8.png")
+);

package/css/theme/global.scss

@@ -0,0 +1,8 @@
+$color:#262626;
+$color1:#000;
+$color2:#595959;
+$color3:#8c8c8c;
+// $color3:rgba($color:#8c8c8c,$alpha:0.65);
+$color4:#bfbfbf;
+
+$borderColor:#d9d9d9;

package/css/theme/styles/default.scss

@@ -0,0 +1,11 @@
+$theme_default : (
+    // 头部背景背景颜色
+    header_bgColor:#0a1225,
+    // 左侧菜单
+    // 背景
+    sidebar_bgColor:#1d2131,
+    // 字体颜色
+    sidebar_color:#acb5ce,
+    // 子菜单背景
+    sidebar_children_bgColor:#21263a
+);

package/css/theme/styles/hailan.scss

@@ -0,0 +1,11 @@
+$theme_hailan : (
+    // 头部背景背景颜色
+    header_bgColor:#003a8c,
+    // 左侧菜单
+    // 背景
+    sidebar_bgColor:#ffffff,
+    // 字体颜色
+    sidebar_color:#262626,
+    // 子菜单背景
+    sidebar_children_bgColor:#fff,
+);

package/css/theme/styles/shenlan.scss

@@ -0,0 +1,11 @@
+$theme_shenlan : (
+    // 头部背景背景颜色
+    header_bgColor:#0a1225,
+    // 左侧菜单
+    // 背景
+    sidebar_bgColor:#ffffff,
+    // 字体颜色
+    sidebar_color:#262626,
+    // 子菜单背景
+    sidebar_children_bgColor:#fff,
+);

package/css/theme/theme.scss

@@ -0,0 +1,78 @@
+@import  "./global.scss";
+@import  "./styles/default.scss";
+@import "./styles/shenlan.scss";
+@import "./styles/hailan.scss";
+
+@import "./colors/default.scss";
+@import "./colors/hong.scss";
+@import "./colors/cheng.scss";
+@import "./colors/huang.scss";
+@import "./colors/qing.scss";
+@import "./colors/lv.scss";
+@import "./colors/shenaln.scss";
+@import "./colors/zi.scss";
+
+
+
+
+$themes:(
+    default:$theme_default,
+    shenlan:$theme_shenlan,
+    hailan:$theme_hailan
+);
+$themeColors:(
+    lan:$themeColor_default,
+    hong:$themeColor_hong,
+    cheng:$themeColor_cheng,
+    huang:$themeColor_huang,
+    qing:$themeColor_qing,
+    lv:$themeColor_lv,
+    shenaln:$themeColor_shenaln,
+    zi:$themeColor_zi
+
+);
+@mixin themeMixin {
+    @each $theme-name, $theme-map in $themes {
+        //!global 把局部变量强升为全局变量
+        $theme-map: $theme-map !global;
+        [data-theme="#{$theme-name}"] & { 
+            @content;
+        }
+    }
+}
+
+
+@mixin themeColorMixin {
+    @each $theme-name, $theme-map in $themeColors {
+        //!global 把局部变量强升为全局变量
+        $theme-map: $theme-map !global;
+        [data-theme-color="#{$theme-name}"] & { 
+            @content;
+        }
+    }
+}
+
+
+//根据Key获取颜色的function
+@function themed($key) {
+    @return map-get($theme-map, $key);
+}
+
+@mixin theme($key, $colorName: $key) {
+    @include themeMixin {
+        // #{$key}: #{$key};
+        #{$key}: themed($colorName);
+    }
+}
+
+@mixin themeColor($key, $colorName: $key,$opacity:null) {
+    @include themeColorMixin {
+        // #{$key}: #{$key};
+        @if($opacity == null){
+            #{$key}: themed($colorName);
+        }
+        @else {
+            #{$key}: rgba(themed($colorName),$opacity);
+        }
+    }
+}