cycgs/src/main/webapp/static/mweixin/custom-menu.less

@import "../ms-admin/4.7.0/less/app.less";
// 自定义菜单
.ms-custom-menu {
    color: rgb(242, 242, 246);
    .ms-custom-container {
        .ms-flex();
        &>.ms-container{
            padding: 0;
            background: transparent;
        }
        // 侧边
        .el-aside {
            background: #fff;
            .ms-width-height(280px, 470px) !important;
            // 微信界面
            .el-container {
                overflow: hidden;
                // 头部
                .el-header {
                    .ms-line-height(40px) !important;
                    .ms-font(16px, #fff);
                    text-align: center;
                    background: #323232;
                }
                .el-main {
                    padding: 0;
                    .ms-width-height(280px, 380px) !important;
                }
                .el-footer {
                    white-space: nowrap;
                    padding: 0;
                    font-size: 0;
                    background-color: #FAFAFA;
                    .ms-width-height(280px, 50px) !important;
                    .ms-flex(flex-start);
                    border-top: 1px solid @borderColor !important;
                    >.el-button {
                        .ms-width-height(40px, 50px) !important;
                        min-width: 40px;
                        padding: 0 !important;
                        border: none !important;
                        border-right: 1px solid @borderColor !important;
                    }
                    .el-button {
                        border-radius: 0 !important;
                        height: 50px !important;
                        background: transparent !important;
                    }
                    .ms-create-menu {
                        width: 240px;
                        font-size: 0;
                        .ms-flex(space-between);
                        .el-button {
                            flex: 1;
                            border: none !important;
                            background: transparent !important;
                            span {
                                color: #333;
                            }
                        }
                        .ms-create-sub-menu {
                            flex: 1;
                            position: relative;
                            // 主菜单
                            >.el-button:first-child {
                                width: 100%;
                                border-right:1px solid @borderColor !important;
                                padding: 10px !important;
                                .ms-ellipsis-clamp(1);
                            }
                            // 添加子菜单
                            .sub-menu-list{
                                position: absolute;
                                bottom:60px;
                                left: 0;
                                border: 1px solid @borderColor !important;
                                width: 100%;
                                .ms-flex(flex-start);
                                flex-direction: column;
                                >button{
                                    margin-left: 0 !important;
                                    border: none !important;
                                    border-bottom: 1px solid @borderColor !important;
                                }
                                .ms-create-btn{
                                    border-bottom: none !important;
                                }
                                // 子菜单列表
                                .sub-menu-item{
                                    .ms-ellipsis-clamp(1);
                                    padding:10px !important;
                                }
                            }
                        }
                        // 添加菜单
                        .el-button--default {
                            padding: 0 !important;
                            flex: 1;
                        }
                    }
                }
            }
        }
        // 内容
        .el-main {
            padding: 0;
            padding-left: 20px;
            flex: 1;
            height: 470px;
            // 内容区域卡片
            .custom-menu-card {
                height: 100%;
                // 内容菜单表单
                .ms-custom-menu-name,.ms-custom-menu-content {
                    .el-form-item__content {
                        .el-input {
                            .ms-width-height(153px, 30px) !important;
                        }
                        .ms-flex(flex-start);
                        span {
                            margin-left: 10px;
                            .ms-font(@auxiliarySize, @auxiliaryColor);
                        }
                    }
                }
                .ms-custom-menu-content {
                    .el-form-item__content {
                        .el-input {
                            .ms-width-height(306px, 30px) !important;
                        }
                    }
                }
                // 菜单内容
                .ms-custom-menu-content {
                    .el-tabs {
                        border: 1px solid @borderColor;
                        .el-tabs__header {
                            background: #f2f2f6;
                            border-radius: 4px 4px 0 0 !important;
                            margin: 0 !important;
                            .el-tabs__nav-scroll {
                                padding: 0 20px;
                                i {
                                    margin-right: 8px;
                                }
                            }
                        }
                        .el-tab-pane {
                            padding: 20px;
                            .ms-width-height(100%, 220px);
                            .ms-flex();
                            // 素材库
                            >div {
                                flex: 1;
                                border: 1px dashed @borderColor;
                                .ms-flex(center);
                                align-items: center;
                                flex-direction: column;
                                i {
                                    .ms-font(20px, @themeColor, bolder);
                                }
                                span {
                                    margin-top: 8px;
                                    line-height: 1;
                                }
                                &:hover {
                                    cursor: pointer;
                                }
                            }
                            >div:last-child {
                                margin-left: 20px;
                            }
                        }
                    }
                }
            }
        }
    }
}