gy-webcode2 1.0.0

package/css/modules/header.scss

@@ -0,0 +1,342 @@
+.wrapper_header{
+    height: 48px;
+    display: flex;
+    @include theme('background-color','header_bgColor');
+    .logo{
+        width: 210px;
+        background-position: center;
+        background-repeat: no-repeat;
+        // background-size: 100% auto;
+        background-size: contain;
+        // border: 1px solid #fff;
+    
+        img{
+            height: 100%;
+        }
+    }
+    .menu{
+        margin-left: 160px;
+        display: flex;
+        height: 100%;
+        position: relative;
+        ul{
+            display: flex;
+
+        }
+        li{
+            height: 100%;
+            font-size: 14px;
+            color: #acb5ce;
+            display: flex;
+            align-items: center;
+            margin: 0 20px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            user-select: none;
+            
+            &:hover{
+                color: #fff;
+            }
+            &.active{
+                color: #ffffff;
+            }
+            &:active{
+                color: #c5cbdd;
+            }
+        }
+        .activeLine{
+            position: absolute;
+            width: 32px;
+            // background: #4172f6;
+            height: 4px;
+            border-radius: 4px;
+            left: 0;
+            display: none;
+            bottom: 6px;
+            transition: all 0.4s ease;
+            @include themeColor('background-color','color')
+        }
+    }
+    .iconBox{
+        color:#acb5ce;
+        display: flex;
+        .iconfontSpan{
+            width: 18px;
+            height: 18px;
+            margin: 0 12px;
+            text-align: center;
+            line-height: 18px;
+            i{
+                cursor: pointer;
+            }
+            &:hover{
+                color: #fff;
+            }
+            &:active{
+                color: #c5cbdd;
+            }
+        }
+        .el-badge__content{
+            background-color: #ff4d4f;
+            border:none;
+            right: 8px;
+        }
+        
+
+        .signout{
+            // margin:0 20px;
+            margin-right: 26px;
+            margin-left: 10px;
+            font-size: 16px;
+            color: #fff;
+            i{
+                cursor: pointer;
+            }
+        }
+    }
+    .userInfo{
+        color:#fff;
+        padding:0 10px;
+        position: relative;
+        transition: all 0.2s ease;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        line-height: 20px;
+        font-size: 14px;
+        margin-right: 10px;
+
+        img{
+            // height: 25px;
+            height: 20px;
+            border-radius: 50%;
+            display: block;
+        }
+        .avator{
+            margin-right: 8px;
+        }
+        .name{
+        }
+        &:hover{
+            // background: #272e40;
+            // @include themeColor('color','sidebar_menu2_hoverColor');
+            @include themeColor('background-color','sidebar_menu2_activeBgColor');
+            .header_el-popover{
+                visibility: visible;
+                opacity: 1;
+            }
+        }
+       
+        .header_el-popover{
+            // display:none;
+            visibility: hidden;
+            opacity: 0;
+            right: 0;
+            transition: all 0.2s ease;
+            top: 50px;
+            padding: 10px;
+            padding-bottom: 20px;
+            .version{
+                position: absolute;
+                right: 0;
+                bottom: 0;
+                text-align: center;
+                font-size: 12px;
+                color: #aaa;
+                background: #ecedf4;
+                padding: 1px 5px;
+                border-radius: 3px;
+            }
+            &.theme_show{
+                width: 285px;
+            }
+            .popper__arrow{
+                top: -6px;
+                // left: 50%;
+                right: 30px;
+                margin-right: 3px;
+                border-top-width: 0;
+                border-bottom-color: #fff;
+
+            }
+        }
+        .theme_menu{
+            width: 115px;
+            float: left;
+            // position: absolute;
+            left: 0;
+            top: 0;
+            border-right: 1px solid #eeeeee;
+            padding-right: 5px;
+            .yuan{
+                width: 16px;
+                height: 16px;
+                border-radius: 50%;
+                background: #000;
+                display: inline-block;
+                vertical-align: text-bottom;
+                margin-right: 10px;
+                &.lan{
+                    background: #2553a6;
+                }
+                &.hui{
+                    background: #919191;
+                }
+                &.qianlan{
+                    background: #b7cff2;
+                }
+            }
+        }
+
+        .userInfo_menu{
+            width: 140px;
+            float: right;
+        }
+        .theme_menu li,.userInfo_menu li{
+            height: 30px;
+            line-height: 30px;
+            text-align:center;
+            font-size: 14px;
+            color:#333333;
+            cursor: pointer;
+            position: relative;
+            a{
+                color:#333333;
+            }
+            i{
+                color:#8e8e8e;
+                font-size: 16px;
+            }
+            &.active,&:hover{
+                background: #f5f7f8;
+            }
+        }
+
+        
+
+        
+    }
+}
+.noticeBox{
+    // position: fixed;
+    // z-index: 100;
+    // right: 20px;
+    // top: 20px;
+    // background: #fff;
+    
+    padding: 0;
+    width: 320px;
+    height: 490px;
+    max-height: 60vh;
+    display: flex;
+    flex-direction: column;
+    .tabs{
+        height: 48px;
+        .item{
+            padding-top: 16px;
+        }
+    }
+    .body{
+        flex: 1;
+        position: relative;
+        .item{
+            // margin: 0 16px;
+            height: 60px;
+            // border: 1px solid #000;
+            display: flex;
+            align-items: center;
+            margin: 8px 16px 0 16px;
+            border-radius: 8px;
+            // margin-top: 0;
+            // margin-bottom: 0;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            .iconBox{
+                width: 32px;
+                height: 32px;
+                background: #000;
+                color: #fff;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                border-radius: 50%;
+                margin-left: 8px;
+                margin-right: 12px;
+            }
+            .info{
+                flex: 1;
+                margin-right: 16px;
+                .row1{
+                    max-height: 36px;
+                    line-height: 18px;
+                    display: -webkit-box;
+                    -webkit-box-orient: vertical;
+                    overflow: hidden;
+                    -webkit-line-clamp: 2; /* 显示3行文本 */
+                }
+                .row2{
+                    color: #8c8c8c;
+                    font-size: 12px;
+                    margin-top: 5px;
+                }
+            }
+            &:nth-of-type(1n){
+                .iconBox{
+                    background: #ec685f;
+                }
+            }
+            &:nth-of-type(2n){
+                .iconBox{
+                    background: #1890ff;
+                }
+            }
+            &:nth-of-type(3n){
+                .iconBox{
+                    background: #fa8c16;
+                }
+            }
+            &:nth-of-type(4n){
+                .iconBox{
+                    background: #52c41a;
+                }
+            }
+            &:nth-of-type(5n){
+                .iconBox{
+                    background: #13a8a8;
+                }
+            }
+
+            &:hover{
+                // background: #000;
+                @include themeColor("background-color",'hover',0.1)
+            }
+            &:active{
+                // background: #000;
+                @include themeColor("background-color",'active',0.1)
+            }
+        }
+    }
+    .foot{
+        display: flex;
+        border-top: 1px solid #f0f0f0;
+        height: 48px;
+        text-align: center;
+        line-height: 48px;
+        >div{
+            flex: 1;
+            cursor: pointer;
+            user-select: none;
+            &:nth-of-type(1){
+                border-right: 1px solid #f0f0f0;
+            }
+            &:hover{
+                @include themeColor("color",'hover');
+                @include themeColor("background-color",'hover',0.1);
+            }
+            &:active{
+                @include themeColor("color",'active');
+                @include themeColor("background-color",'active',0.1);
+            }
+        }
+    }
+}

package/css/modules/sidebar.scss

@@ -0,0 +1,214 @@
+.sidebarBox{
+    width: 210px;
+    // background: #282f45;
+    @include theme('background-color','sidebar_bgColor');
+    @include theme('color','sidebar_color');
+    display: flex;
+    flex-direction: column;
+    transition: all 0.3s ease;
+    user-select: none;
+    position: relative;
+    z-index: 100;
+    &.mini{
+        width: 48px;
+        .sildeBody {
+            overflow: visible;
+        }
+        .childrenBox {
+            overflow: visible;
+            position: relative;
+            &.open .header {
+                .icon{
+                    color: #7d85a3 !important;
+                }
+            }
+            .header{
+                .icon{
+                    transform: scale(1.3);
+                }
+                .name,.pointer{
+                    opacity: 0;
+                    // display: none;
+                }
+
+            }
+            &.mini{
+                &:hover{
+                    .header{
+                        .icon{
+                            &.itemColor_0{
+                                color: #4098e3 !important;
+                            }
+                            &.itemColor_1{
+                                color: #ffa310 !important;
+                            }
+                            &.itemColor_2{
+                                color: #c87ccd !important;
+                            }
+                            &.itemColor_3{
+                                color: #00c05f !important;
+                            }
+                        }
+                    }
+                    .children{
+                        display: block !important;
+                        visibility: visible;
+                        // left: 42px;
+                        opacity: 1;
+                        transform: scale(1);
+                    }
+                }
+                .children{
+                    display: block !important; 
+                    visibility: hidden;
+                    opacity: 0;
+                    width: 210px;
+                    position: absolute;
+                    border-radius: 5px;
+                    top: 0;
+                    z-index: 999;
+                    transition: all 0.2s ease 0.2s;
+                    transform: scale(0.8);
+                    transform-origin: 0 0;
+                    left: 42px;
+                    box-shadow: 0 3px 6px -4px rgb(0 0 0 / 12%), 0 6px 16px 0 rgb(0 0 0 / 8%), 0 9px 28px 8px rgb(0 0 0 / 5%);
+    
+                }
+            }
+        }
+        
+    }
+
+    .sildetop{
+        height: 48px;
+        line-height: 48px;
+        padding-left: 15px;
+        // color: #acb5ce;
+        &:hover{
+            color: #d4dbef;
+        }
+        &:active{
+            color: #acb5ce;
+        }
+        i{
+            cursor: pointer;
+        }
+    }
+    .sildeBody{
+        flex-grow: 1;
+        overflow: auto;
+        background:  url("~gy-webcode2/img/slogan.png") bottom no-repeat;
+        &.seriesLogoHide{
+            background-image: none;
+        }
+    }
+    
+    .childrenBox{
+        transition: all 0.3s ease;
+        overflow: hidden;
+        
+        .header{
+            height: 44px;
+            line-height: 44px;
+            display: flex;
+            // padding-left: 8px;
+            // color: #acb5ce;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            position: relative;
+            &:hover{
+                color: #60abff ;
+            }
+            .icon{
+                transition:  all 0.3s ease;
+                width: 42px;
+                color: #7d85a3;
+                text-align: center;
+                position: absolute;
+                left: 0;
+                bottom: 0;
+                top: 0;
+            }
+            .name{
+                transition:  all 0.3s ease;
+                flex: 1;
+                padding-left: 42px;
+            }
+            .pointer{
+                transition:  all 0.3s ease;
+                width: 26px;
+                .open{
+                    display: none;
+                }
+                .hide{
+                    display: inline;
+                }
+            }
+        }
+        .children{
+            @include theme('background-color','sidebar_children_bgColor');
+            font-size: 14px;
+            // padding: 4px ;
+            // padding: 0 4px;
+            ul{
+                padding-top: 8px;
+                padding-left: 5px;
+                padding-right: 5px;
+                overflow: hidden;
+                // padding: 5px 0 5px 45px;
+                li{
+                    overflow: hidden;
+                    line-height: 40px;
+                    cursor: pointer;
+                    padding-right: 10px;
+                    padding-left: 45px;
+                    // color: #acb5ce;
+                    transition: all 0.3s ease;
+                    // margin: 4px ;
+                    margin-bottom: 8px;
+                    border-radius: 5px;
+                    &:hover{
+                        @include themeColor('color','sidebar_menu2_hoverColor');
+                        @include themeColor('background-color','sidebar_menu2_hoverBgColor');
+                    }
+                    &:active{
+                        @include themeColor('background-color','sidebar_menu2_activeBgColor')
+                    }
+                    &.active{
+                        @include themeColor('background-color','sidebar_menu2_activeBgColor');
+                        @include themeColor('color','sidebar_menu2_activeColor');
+                    }
+                }
+            }
+        }
+
+        &.open{
+            .header{
+                @include themeColor('color','sidebar_menu1_activeColor');
+                .icon{
+                    // color: #2394e6 !important;
+                    &.itemColor_0{
+                        color: #4098e3;
+                    }
+                    &.itemColor_1{
+                        color: #ffa310;
+                    }
+                    &.itemColor_2{
+                        color: #c87ccd;
+                    }
+                    &.itemColor_3{
+                        color: #00c05f;
+                    }
+                }
+                .pointer{
+                    .open{
+                        display: inline;
+                    }
+                    .hide{
+                        display: none;
+                    }
+                }
+            }
+        }
+    }
+}

package/css/modules/table.scss

@@ -0,0 +1,134 @@
+.myTable{
+    .el-table{
+        color:$color;
+        td,th{
+            padding: 12px 0 !important;
+        }
+        th{
+            background: #fafafa;
+            border-right: 1px solid #ebebeb;
+            >.cell{
+                color:$color;
+                font-weight: initial;
+                font-size: 14px;
+            }
+            &:nth-of-type(1){
+                border-radius: 8px 0 0 0 ;
+            }
+            &:nth-last-child(2){
+                border-radius:0 8px 0 0 ;
+            }
+        }
+        .cell{
+            line-height: 20px;
+            padding-left:10px;
+            padding-right:10px;
+        }
+        
+    }
+    .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
+        @include themeColor("background-color",'hover',0.1)
+    }
+
+    .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
+        border-bottom: 1px solid #ebebeb;
+    }
+    .el-table--border .el-table__cell, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{
+        border-right: 1px solid #ebebeb;
+    }
+    
+    .el-table--border, .el-table--group{
+        // border: none;
+        border: 1px solid #ebebeb;
+    }
+    .el-table--border {
+        border-right: none;
+        border-bottom: none;
+    }
+
+    
+
+
+    .el-table .cell{
+        font-size: 12px;
+    }
+
+    .el-table__column-filter-trigger{
+        line-height:20px;
+    }
+    .el-table .caret-wrapper{
+        height: 20px;
+    }
+    .el-table .sort-caret.ascending{
+        top: -1px;
+    }
+    .el-table .sort-caret.descending{
+        bottom: -1px;
+    }
+    &.gutter .el-table th.gutter{
+        background: #f3f3f3;
+        display: table-cell!important;
+    }
+
+    .tr_error{
+        background: #fff0f0;
+    }
+    .tr_error_hong{
+        background: #FEF0F0;
+    }
+    .tr_error_huang{
+        background: #FDF6EC;
+    }
+}
+.myTable_pages{
+    text-align:right;
+    padding:10px 10px;
+}
+
+.myTable2{
+    text-align: center;
+    table{
+        width: 100%;
+    }
+    th,td{
+        padding: 10px 8px;
+    }
+    td{
+        border-bottom: 1px solid #f0f0f0;
+        color: $color1;
+        font-size: 14px;
+    }
+    th{
+        font-weight: normal;
+        background: #fafafa;
+        border-bottom: 1px solid #ebebeb;
+        color: $color1;
+        font-size: 14px;
+        &:nth-of-type(1){
+            border-radius: 8px 0 0 0 ;
+        }
+        &:nth-last-child(2){
+            border-radius:0 8px 0 0 ;
+        }
+    }
+}
+
+
+.xqTable {
+    font-size: 12px;
+    table {
+        width: 100%;
+        border-left: 1px solid #cccccc;
+        border-top: 1px solid #cccccc;
+    }
+    td {
+        line-height: 18px;
+        padding: 5px;
+        border-right: 1px solid #cccccc;
+        border-bottom: 1px solid #cccccc;
+    }
+    .td_title {
+        vertical-align: top;
+        background: #f3f3f3;
+    }
+}