RMS-FrontEnd/RMS-FrontEnd/src/assets/css/activeDiv.scss

  /* 拖拽相关样式 */
    /*包围div样式*/
    .box {
        display: flex;
        justify-content: space-around;
        width: 100%;
        // height: 100%;
        // margin: 10px 0px;
        overflow: auto;
        box-shadow: -1px 9px 10px 3px rgba(0, 0, 0, 0.11);
    }
    /*左侧div样式*/
    .left {
        // width: calc(32% - 10px);  
        height: 100%;
        background: #FFFFFF;
        // float: left;
    }
    /*拖拽区div样式*/
    .resize {
        cursor: col-resize;
        // float: left;
        // position: relative;
        // top: 45%;
        
        display: flex;
        flex-direction: column;
        justify-content: center;
        // padding-top: 25%;
       
        background-color: #d6d6d6;
        /*z-index: 99999;*/
        font-size: 32px;
        color: white;
        div{
            
            background-size: cover;
            background-position: center;
            border-radius: 5px;
            width: 10px;
            height: 50px;
        }
    }
    /*右侧div'样式*/
    .mid {
        // float: left;
        // width: 68%;   
        // height: 100%;
        background: #fff;
        box-shadow: -1px 4px 5px 3px rgba(0, 0, 0, 0.11);
    }
    .box1{
        width: 100%;
        // height: 100%;
        
    }
    /*拖拽区div样式*/
    .resize1 {
        cursor: col-resize;
        // position: relative;
        // top: 45%;
        // background-color: #d6d6d6;
        background-color: rgba(50, 50, 50, 0.3);
        // border-radius: 5px;
        margin: -10px 5px;
        width: 10px;
        // height: 100%;
        background-size: cover;
        background-position: center;
        /*z-index: 99999;*/
        font-size: 32px;
        color: white;
        span{
            position: relative;
            top: 45%;
            border-radius: 5px;
            background-color: #d6d6d6; 
            height: 50px;
            display: flex;
            flex-direction: column;
            color: white;
        }
        span:hover{
            color: #444444;
        }
    }
    .resize2 {
        cursor: row-resize;
        // position: relative;
        // top: 45%;
        // background-color: #d6d6d6;
        background-color: rgba(50, 50, 50, 0.3);
        // border-radius: 5px;
        margin: 5px 0;
        width: 100%;
        height: 10px;
        background-size: cover;
        background-position: center;
        /*z-index: 99999;*/
        font-size: 20px;
        color: white;
        p{
            // position: relative;
            // top: 45%;
            margin:0 auto;
            border-radius: 5px;
            background-color: #d6d6d6; 
            width: 50px;
            height: 10px;
            // color: white;
            text-align: center;
            // display: flex;
            span{
                margin-right:5px
            }
           
        }
        p:hover{
            color: #444444;
        }
    }
    /*拖拽区鼠标悬停样式*/
    .resize:hover {
        color: #444444;
    }