src/theme/Footer/styles.scss

.footer {
    background-color: #162033;

    &-box {
        display: flex;
        justify-content: space-between;

        @media screen and (max-width: 996px) {
            flex-direction: column;
        }

        .footer__title {
            color: var(--global-colors-white);
            font-size: var(--global-font-size-medium);
            margin-bottom: 1.5rem;
            font-weight: 500;
            white-space: nowrap;
        }

        .footer__items {
            .footer__item {
                & + .footer__item {
                    margin-top: 0.5rem;
                }
                .footer__link-item {
                    line-height: 1.375rem;
                }
            }
        }

        .footer__link-item {
            color: var(--global-colors-white);
            font-size: var(--global-font-size-small);
            transition: all 0.3s;
            white-space: nowrap;

            svg {
                display: none;
            }

            &:hover {
                color: var(--ifm-color-primary);
            }
        }

        .footer__col {
            & + .footer__col {
                margin-left: 4rem;
            }
        }

        .left {
            display: flex;

            @media screen and (max-width: 996px) {
                flex-direction: column;
                align-items: center;
            }

            .footer__logo {
                width: 8.5625rem;
                height: 3.5rem;
            }

            .footer__links {
                margin-left: 3.125rem;
                margin-bottom: 0;

                .navbar__link {
                    padding: 0;

                    @media screen and (max-width: 996px) {
                        display: block;
                    }
                }

                @media screen and (max-width: 996px) {
                    margin-left: 0;
                    display: flex;
                    width: 100%;
                    margin-top: 2rem;

                    .footer__col {
                        flex: 1;

                        & + .footer__col {
                            margin-left: 0;
                        }
                    }
                }
            }
        }

        .right {
            @media screen and (max-width: 996px) {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;

                .footer__title {
                    display: none;
                }
            }

            .social-list {
                @media screen and (max-width: 996px) {
                    display: flex;
                }

                .social {
                    display: flex;
                    flex-wrap: wrap;
                    margin: -1.25rem;

                    @media screen and (max-width: 996px) {
                        margin: 0;
                    }

                    .item {
                        display: block;
                        width: 2rem;
                        height: 2rem;
                        background-repeat: no-repeat;
                        background-size: contain;
                        background-position: center;
                        margin: 1.25rem;
                        color: var(--global-colors-white);
                        position: relative;

                        &.wechat {
                            &:hover {
                                cursor: pointer;
                                .wechat-dropdown {
                                    display: flex;
                                }
                            }

                            .wechat-dropdown {
                                background-color: var(--global-colors-white);
                                padding: 0.5rem;
                                border-radius: var(--global-border-radius);
                                width: 8.75rem;
                                height: 10rem;
                                align-items: center;
                                justify-content: center;
                                flex-direction: column;
                                position: absolute;
                                left: 50%;
                                top: 2.5rem;
                                z-index: 2;
                                transform: translateX(-50%);
                                box-shadow: 0px 6px 16px rgba(255, 255, 255, 0.1);
                                display: none;

                                &::before {
                                    content: '';
                                    border: 0.5rem solid transparent;
                                    border-bottom-color: var(--global-colors-white);
                                    display: block;
                                    position: absolute;
                                    left: 50%;
                                    transform: translateX(-50%);
                                    top: -1rem;
                                }

                                img {
                                    width: 100%;
                                    display: block;
                                    left: 50%;
                                    width: 156px;
                                    height: 180px;
                                    background: url('/static/images/wechat-qrc.png') no-repeat center;
                                    background-size: cover;
                                    z-index: 1;
                                    @media screen and (max-width: 996px) {
                                        width: 78px;
                                        height: 90px;
                                    }
                                }
                            }
                        }

                        &:hover {
                            opacity: 0.8;
                        }
                    }
                }
            }
        }
    }

    .footer__copyright {
        width: 98%;
        margin: 0 auto;
        margin-top: 3.5rem;
        line-height: 1.8;
        text-align: center;
        color: #dfe5f0;
        opacity: 0.6;
        font-size: 0.75rem;

        a {
            color: #dfe5f0;
        }

        @media screen and (max-width: 996px) {
            width: auto;
            margin: 1rem 1rem 0;
        }
    }
}

.docs-footer {
    height: 7.625rem;
    background-color: #fff;
    display: flex;
    border-top: 1px solid #edf2fa;
    .logo {
        position: relative;
        .footer__logo {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 8.5625rem;
            height: 3.5rem;
            margin-top: 0;
        }
    }
    .content {
        flex: 1;
    }
}