*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
.transition{
    transition: all 0.5s;
}
.container{
    padding:20px 0;
    width: 100%;
    height:100vh;
    overflow: hidden;
    display: flex;
    justify-content: space-between
}
.left-tool-box,.right-tool-box{
    width:300px;
    height:100%;
    overflow: hidden;
}
.left-tool-box>.wrap{
    width:300px;
}
.left-tool-box.close{
    width:0;
}
.right-tool-box{
   width:330px;
}
.echarts-container{
    height: 100%;
    flex-grow: 1;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 20px;
    border-radius: 5px;
    position: relative;
    padding:20px;
}
.echarts-container>.layui-icon {
    position: absolute;
    width:36px;
    height:36px;
    top: 50%;
    left:-18px;
    z-index: 100;
    font-size:36px;
    cursor: pointer;
    color:#999;
    background-color: #fff;
    border-radius: 50%;
}
.echarts-container>.echarts{
    width:100%;
    height: 100%;
}
.echarts-container>.layui-icon.close{
    transform: rotate(180deg);
    left:-16px;
}
.layui-form-label{
    width: 90px;
}
.layui-btn{
    margin:20px;
    width:calc(100% - 40px);
}

.right-tool-box .date{
    margin:20px;
    color:#333;
    font-size:18px;
}
.note-content{
    margin:0 20px;
    width:calc(100% - 40px);
    max-width: 290px;
    height:400px;
    border:1px solid #ccc;
    outline:none;
    padding:15px;
    color:#333;
    font-size:16px;
}

/* 在小屏幕上修改样式 */
@media screen and (max-width:720px) {
    .container{
        height: auto;
        overflow-y: auto;
        flex-direction: column;
    }
    .left-tool-box,.right-tool-box{
        width:100%;
        height:400px;
    }
    .left-tool-box>.wrap{
        width:100%;
        height: 400px;
    }
    .right-tool-box{
        width: 100%;
    }
    .left-tool-box.close{
        height: 0;
    }
    .echarts-container{
        height: 600px;
    }
    .echarts-container>.layui-icon{
        top: -18px;
        left: 45%;
        transform: rotate(90deg);
    }
    .echarts-container>.layui-icon.close{
        top: -18px;
        left: 45%;
        transform: rotate(270deg);
    }
    .note-content{
        width: 100%;
        height: 200px;
        max-width: calc(100% - 40px);
    }
  }