@leevan/jtui 1.2.7 → 2.0.1

package/examples/scss/main-style/_handle.scss

@@ -0,0 +1,217 @@
+@import "./_themes.scss";
+//遍历主题map
+@mixin themeify {
+    @each $theme-name, $theme-map in $themes {
+        //!global 把局部变量强升为全局变量
+        $theme-map: $theme-map !global;
+        //判断html的data-theme的属性值  #{}是sass的插值表达式
+        //& sass嵌套里的父容器标识   @content是混合器插槽，像vue的slot
+        [color-theme="#{$theme-name}"] & {
+            @content;
+        }
+    }
+}
+
+//声明一个根据Key获取颜色的function
+@function themed($key) {
+    @return map-get($theme-map, $key);
+}
+
+//获取主框架背景颜色
+@mixin bg($color) {
+    @include themeify {
+        background-color: themed($color);
+    }
+}
+
+@mixin _bg($color) {
+    @include themeify {
+        background-color: themed($color) !important;
+    }
+}
+
+//获取主框架背景颜色
+@mixin bgl($color) {
+    @include themeify {
+        background-image: themed($color);
+    }
+}
+
+@mixin _bgl($color) {
+    @include themeify {
+        background-image: themed($color) !important;
+    }
+}
+
+//获取主框架背景颜色
+@mixin bgi($path) {
+    @include themeify {
+        background-image: themed($path);
+    }
+}
+
+//获取主框架字体颜色
+@mixin txt($color) {
+    @include themeify {
+        color: themed($color);
+    }
+}
+
+@mixin _txt($color) {
+    @include themeify {
+        color: themed($color) !important;
+    }
+}
+
+//获取主框架边框颜色
+@mixin bd($color,$p:null) {
+    @include themeify {
+        @if $p==null {
+            border-color: themed($color);
+        }
+        @if $p=='l' {
+            border-left-color: themed($color);
+        }
+        @if $p=='r' {
+            border-right-color: themed($color);
+        }
+        @if $p=='t' {
+            border-top-color: themed($color);
+        }
+        @if $p=='b' {
+            border-bottom-color: themed($color);
+        }
+    }
+}
+
+//获取主框架边框颜色
+@mixin _bd($color,$p:null) {
+    @include themeify {
+        @if $p==null {
+            border-color: themed($color) !important;
+        }
+        @if $p=='l' {
+            border-left-color: themed($color) !important;
+        }
+        @if $p=='r' {
+            border-right-color: themed($color) !important;
+        }
+        @if $p=='t' {
+            border-top-color: themed($color) !important;
+        }
+        @if $p=='b' {
+            border-bottom-color: themed($color) !important;
+        }
+    }
+}
+//设置outline
+@mixin ol($color) {
+    @include themeify {
+        outline:1px solid themed($color);
+    }
+}
+//设置表格的边线
+@mixin linear($color){
+    @include themeify {
+        background-image: linear-gradient(themed($color),themed($color)),linear-gradient(themed($color),themed($color));
+    }
+}
+@import './style1.scss';
+@import './style2.scss';
+@import './style3.scss';
+
+//菜单1
+.menu-one{
+    .mune-base ul{
+        background-color: #f2f2f2 !important;
+        .el-submenu__title,
+        .el-menu-item{
+            height:42px;
+            line-height: 41px;
+            i{
+                @include txt("textColor1");
+            }
+            span{
+                @include txt("textColor1");
+            }
+        }
+    }
+    >ul{
+        text-align: left;
+        .el-submenu__title,
+        .el-menu-item{
+            height:42px;
+            line-height: 41px;
+            i{
+                @include txt("iconColor");
+            }
+            span{
+                @include txt("textColor");
+            }
+        }
+        .el-submenu__title{
+            border:none !important;
+            padding-left: 10px;
+            padding-right: 0;
+            span{
+                @include size(150px,auto,$dp:inline-block,$ag:left);
+                @extend .text-oneline;
+                padding-right:15px;
+            }
+        }
+        .el-menu-item {
+            padding-left: 10px;
+            padding-right: 10px;
+            span{
+                @include size(220px,auto,$dp:inline-block,$ag:left);
+                @extend .text-oneline;
+            }
+        }
+        .el-menu--collapse>.el-submenu>.el-submenu__title .el-submenu__icon-arrow{
+            display: inline-block;
+            right:10px !important;
+        }
+    }
+    .el-menu.el-menu--horizontal{
+        border:none;
+    }
+    .el-menu-item.is-active{
+        @include _bg('bgColor6');
+        span,i{
+            @include _txt('textColor');
+        }
+    }
+}
+//菜单移入效果
+.el-menu-item:hover,
+.el-submenu__title:hover{
+    @include _bg('bgColor6');
+    span,i{
+        @include _txt('textColor');
+    }
+}
+//加载条颜色
+#nprogress .bar {
+    background: rgb(175, 111, 28) !important; //自定义颜色
+}
+//文字提示容器取消outline
+.el-tooltip{
+    outline: none;
+}
+
+@for $i from 0 through 4 {
+    .level#{$i}{
+        font-size: (15px - $i);
+        margin-left:6px;
+    }
+}
+
+@mixin theme(){
+    [data-theme="primary1"]{
+    };
+    [data-theme="primary2"]{
+    };
+    [data-theme="primary3"]{
+        @extend .breadcrumb-jt;
+    };
+}

package/examples/scss/main-style/_themes.scss

@@ -0,0 +1,95 @@
+$themes: (
+    blue: (   
+        //字体
+        textColor: #fff,
+        textColor1:#333,
+        textColor2:#33B0FE,
+        //移入或选中字体颜色
+        _textColor:#eeda22,
+        //图标颜色
+        iconColor:#fff,
+        iconColor1:#0f6cb3,
+        //背景
+        bgColor1:#ffffff27,
+        bgColor2:#1479b1,
+        bgColor3-1:#e8eefcD9,
+        bgColor3-2:#4251baD9,
+        bgColor3-3:#1581a0D9,
+        bgColor5:#4683c4,
+        bgColor6:#2790c9,
+        bgColor7:#279ee2B3,
+        //渐变
+        linear1:linear-gradient(to right,#287ddfB3,#287ddfB3), //70%透明度
+        linear2:linear-gradient(to right,#dbe8f6,#dbe8f6),
+        linear3:linear-gradient(to right,#dbe8f6D9,#dbe8f6D9),
+        linear4:linear-gradient(to right,#295ab3,#236ebc),
+        //边框
+        bdColor: #789ddd,
+        bdColor1:#333,
+        bdColor2:#60e5f8,
+        bdColor3:#dbe8f6,
+        bdColor4:#b7cadb
+    ),
+    black: (
+        //字体
+        textColor:#fff,
+        textColor1:#333,
+        textColor2:#dadada,
+        //移入或选中字体颜色
+        _textColor:#57f857,
+        //图标颜色
+        iconColor:#fff,
+        iconColor1:#787d81,
+        //背景
+        bgColor1:#2c2f36,
+        bgColor2:#094860,
+        bgColor3-1:#f0f0f0D9,
+        bgColor3-2:#161f30D9,
+        bgColor3-3:#07506cD9,
+        bgColor5:#787a80,
+        bgColor6:#989aa0,
+        bgColor7:#989aa0B3,
+        //渐变
+        linear1:linear-gradient(to right,#6f7071B3,#05040eB3), //70%透明度
+        linear2:linear-gradient(to right,#dddddd,#dddddd),
+        linear3:linear-gradient(to right,#ddddddD9,#ddddddD9),
+        linear4:linear-gradient(to right,#5b5f68,#5d5e62),
+        //边框
+        bdColor: #a0a08e,
+        bdColor1:#333,
+        bdColor2:#d1cfd0,
+        bdColor3:#dddddd,
+        bdColor4:#d0d3d6
+    ),
+    purple: (
+        //字体
+        textColor:#fff,
+        textColor1:#333,
+        textColor2:#ca92f1,
+        //移入或选中字体颜色
+        _textColor:#57f857,
+        //图标颜色
+        iconColor:#fff,
+        iconColor1:#ab5fbe,
+        //背景
+        bgColor1:#552782,
+        bgColor2:#98298a,
+        bgColor3-1:#ffeff6D9,
+        bgColor3-2:#90377aD9,
+        bgColor3-3:#5375b9D9,
+        bgColor5:#733da3,
+        bgColor6:#9a52da,
+        bgColor7:#9a52daB3,
+        //渐变
+        linear1:linear-gradient(to right,#8351c2B3,#bd2e77B3), //70%透明度
+        linear2:linear-gradient(to right,#e6deeb,#e6deeb),
+        linear3:linear-gradient(to right,#e6deebD9,#e6deebD9),
+        linear4:linear-gradient(to right,#774ab8,#6c31a8),
+        //边框
+        bdColor: #ecc5e0,
+        bdColor1:#333,
+        bdColor2:#b379e7,
+        bdColor3:#e6deeb,
+        bdColor4:#d0d3d6
+    )
+);

package/examples/scss/main-style/style2.scss

@@ -0,0 +1,12 @@
+
+//菜单1
+.nav-mune-box{
+    .menu-one{
+        .el-menu-item span{
+            @include size(auto,auto,$dp:inline-block);
+            width:220px !important;
+            @extend .text-oneline;
+        }
+    }
+}
+

package/examples/scss/main-style/style3.scss

@@ -0,0 +1,16 @@
+.breadcrumb-jt{
+    .breadcrumb-box{
+        .breadcrumb-txt{
+            // @include _txt('textColor');
+            color:#333 !important;
+        }
+        .breadcrumb-label{
+            color:#333 !important;
+            // @include _txt('textColor');
+        }
+        .el-icon-arrow-right{
+            color:#333 !important;
+            // @include _txt('textColor');
+        }
+    }
+}

package/examples/scss/pub.scss

@@ -0,0 +1,142 @@
+//设置容器
+@mixin size($width:auto,$height:auto,$bg:null,$lh:false,$rd:null,$ag:null,$dp:null,$bd:null,$cp:false,$of:null) {
+    width:$width;
+    height:$height;
+    @if $bg{
+        background-color:$bg;
+    }
+    @if $lh{
+        line-height: $height;
+    }
+    @if $rd{
+        border-radius: $rd;
+    }
+    @if $ag{
+        text-align: $ag;
+    }
+    @if $dp{
+        display: $dp;
+    }
+    @if $bd{
+        border:$bd;
+    }
+    @if $cp{
+        cursor: pointer;
+    }
+    @if $of{
+        overflow: $of;
+    }
+}
+//设置字体
+@mixin font($color:#fff,$size:14px,$sp:null,$dc:null,$ws:false,$cp:false,$ff:null){
+    color:$color;
+    font-size:$size;
+    @if $sp {
+        letter-spacing:$sp;
+    }
+    @if $dc {
+        text-decoration: $dc;
+    }
+    @if $ws{
+        white-space:nowrap;
+    }
+    @if $cp{
+        cursor: pointer;
+    }
+    @if $ff{
+        font-family: $ff;
+    }
+}
+//绝对定位撑满容器
+@mixin absolute-full($top:0,$right:0,$bottom:0,$left:0,$zi:null){
+    position: absolute;
+    top:$top;
+    right:$right;
+    bottom:$bottom;
+    left:$left;
+    @if $zi{
+        z-index:$zi
+    }
+}
+//绝对定位 top left
+@mixin absolute-top-left($top:0,$left:0){
+    position: absolute;
+    top:$top;
+    left:$left;
+}
+//绝对定位 top right
+@mixin absolute-top-right($top:0,$right:0){
+    position: absolute;
+    top:$top;
+    right:$right;
+}
+//绝对定位 bottom left
+@mixin absolute-bottom-left($bottom:0,$left:0){
+    position: absolute;
+    bottom:$bottom;
+    left:$left;
+}
+//绝对定位 bottom right
+@mixin absolute-bottom-right($bottom:0,$right:0){
+    position: absolute;
+    bottom:$bottom;
+    right:$right;
+}
+//设置背景
+@mixin background($type:'color',$val:#fff){
+    @if $type == 'color' {
+        background-color: $val;
+    }@else if $type == 'img' {
+        background-image: $val;
+        background-size: 100%;
+    }
+}
+// 文字省略：单行
+.text-oneline {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+//不知宽高的元素绝对居中
+.el-center {
+    @include absolute-top-left(50%,50%);
+    transform: translate(-50%,-50%);
+}
+//相对定位
+.relative{
+    position: relative;
+}
+//相对定位垂直居中
+.middle{
+    position: relative;
+    top:50%;
+    transform: translateY(-50%);
+}
+//滚动条样式
+@mixin scrollBarStyle($w:2px,$h:2px,$c:#989ba380) {
+    &::-webkit-scrollbar {
+        width: $w;
+        height: $h;
+        display: none;
+    }
+    &:hover::-webkit-scrollbar{
+        display: block;
+    }
+    &::-webkit-scrollbar-thumb {
+        border-radius: 10px;
+        background:$c;
+    }
+}
+
+//滚动条样式
+@mixin scrollBarStyle1($w:2px,$h:2px,$c:#989ba380) {
+    &::-webkit-scrollbar {
+        width: $w;
+        height: $h;
+    }
+    &::-webkit-scrollbar-thumb {
+        border-radius: 10px;
+        background:$c;
+    }
+}