.container {
    display: flex;
    position: relative;

    .reader-container {
        transition: all ease 0.5s;
        width: calc(100vw - 54px); //默认宽度是sidebar收起的宽度
        overflow: hidden;
    }

    .show-panel {
        width: calc((100vw - 54px) * 0.8); //展开panel时宽度为8份
    }

    .right-panel {
        position: absolute;
        right: 0;
        top: 0;
        transition: all ease 0.5s;
        width: calc((100vw - 54px) * 0.2); //默认宽度是sidebar收起的宽度
    }

    .translateXLeft {
        transform: translateX(0);
    }

    .translateXRight {
        transform: translateX(calc((100vw - 54px) * 0.2));
    }

    .reader-container,
    .right-panel {
        height: calc(100vh - 84px);
        transition: all ease 0.5s;
    }
}

.sidebar-open {
    .wps-container {
        width: calc(100vw - 234px); //sidebar展开后的宽度
    }

    .show-panel {
        width: calc((100vw - 234px) * 0.8); //展开panel时宽度为8份
    }
}