expo/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{
        margin: 10px;
        .ms-flex();
        // 侧边
        .el-aside{
            background: #fff;
            .ms-width-height(280px,470px) !important;
            // 微信界面
            .el-container{
                // 头部
                .el-header{
                    .ms-line-height(40px) !important;
                    .ms-font(16px,#fff);
                    text-align: center;
                    background: #323232;
                }
                .el-main{
                    padding: 0;
                    .ms-width-height(280px,379px) !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;
                        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{
                        flex: 1;
                        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%;
                          }
                          >.el-button:last-child{
                              position: absolute;
                              top: -60px;
                              left: 0;
                              border: 1px solid @borderColor !important;
                              width: 100%;
                          }
                      }
                        // 添加菜单
                      .el-button--default{
                          border-left: 1px solid @borderColor !important;
                          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{
                    .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-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;
                            }
                        }
                    }
                }
            }
        }
    }
}