.qrcode-box {
    align-items: center;
    display: flex;
    flex-direction: column
}

.qrcode-box img {
    width: 120px
}

.qrcode-box span {
    color: var(--title-color);
    font-size: 14px;
    font-weight: 500;
    margin-top: 6px;
    opacity: 1;
    text-align: center
}

.side-bar[data-v-1670349f] {
    left: calc(50% + 628px);
    margin-top: -120px;
    position: fixed;
    top: 50%;
    width: 100%;
    z-index: 100
}

.side-bar .tool-bar .active[data-v-1670349f] {
    background-color: #e4f1ff
}

.side-bar .tool-bar li[data-v-1670349f] {
    background-color: #fff;
    border-radius: 10px;
    cursor: pointer;
    height: 54px;
    margin-bottom: 6px;
    opacity: var(--bg-opacity);
    overflow: hidden;
    width: 54px
}

.side-bar .tool-bar li[data-v-1670349f],
.side-bar .tool-bar li a[data-v-1670349f] {
    align-items: center;
    display: flex;
    justify-content: center;
    position: relative
}

.side-bar .tool-bar li a[data-v-1670349f] {
    height: 100%;
    width: 100%
}

.side-bar .tool-bar li img[data-v-1670349f] {
    position: absolute;
    transition: transform .3s ease
}

.side-bar .tool-bar li[data-v-1670349f]:hover {
    background-color: #ededed
}

.side-bar .tool-bar li:first-child img[data-v-1670349f] {
    width: 27px
}

.side-bar .tool-bar li[data-v-1670349f]:nth-child(2):hover {
    background-color: #e0f9e3
}

.side-bar .tool-bar li[data-v-1670349f]:nth-child(3):hover {
    background-color: #e4f1ff
}

.slide-up-enter-active[data-v-1670349f],
.slide-up-leave-active[data-v-1670349f] {
    transition: transform .25s ease-out
}

.slide-up-enter-from[data-v-1670349f] {
    transform: translateY(200%)
}

.slide-up-enter-to[data-v-1670349f],
.slide-up-leave-from[data-v-1670349f] {
    transform: translateY(0)
}

.slide-up-leave-to[data-v-1670349f] {
    transform: translateY(-200%)
}