gis_bridge_project/src/styles/home.scss

.hc-container {
    flex: 1;
    flex-basis: auto;
    box-sizing: border-box;
    min-width: 0;
    .hc-header {
        padding: 6px 0 24px;
        flex-shrink: 0;
        .gis-header {
            height: 100%;
            display: flex;
            align-items: center;
            .header_left, .header_right {
                flex: 1;
                height: 100%;
            }
            .header_left {
                position: relative;
                background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAs0AAAA/CAMAAAAsVAWIAAAAS1BMVEUAAAAG3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3//QEWnDAAAAGHRSTlMA/env+eTS9VO5kvTs8dvBrXEpyqGADkO9xtMLAAABkklEQVR42u3cYVLbMBCAUdmmNMFJobSA7n9SZPiDZoBJghlZy3tn+FajVTxJ+cXwoavF7+I4FeOv4s91cbsv/t8Uf3fFfYLm8npOHoy5Hox/++LOYLC9mhsMxuGdwXjYFU+JHyX/EKcPRmEwOpVZezCKafE6GIv94maxWyReqTkUg6FmvmMwHlP/MnxtMOr32nMGQ8305OPBOPWHDDUTyahm4nhQM2EMj2omjFnNxHGnZsIY7tVMGFdqJo5rNRPGsFMzYQwJAAAAANi4AbowqZkw8pQgiCnPCYKY85ggiDEfEgQxumwQx2wVpC/j8MZoFaRrdc5OZ7r26eksZ/oiZwKRM12qw7UK0rU6XKsgXbvkdD4m2KTzcz76kZutOj/ng0+QaK9O9As5WwVpr07UKkjX6kQ91NG11U5nqyDtrXZ3dtmgvTpR7850ba2cj05n2rMKEoiHOgJxdyYQd2cCOSVcn+/TCd9sEIhVkEBWuzs7nWnv8pz95SKbc3nO/nKRzVltFfTuTHvrXTYSnGurOd8+AyeBmcKjJvouAAAAAElFTkSuQmCC);
                background-size: 100% 100%;
            }
            .header_center {
                text-align: center;
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100%;
                padding: 0 20px;
                border-bottom: 2px solid #06DFFF;
                .title {
                    color: #fff;
                    font-weight: bold;
                    font-size: 25px;
                    letter-spacing: 2px;
                }
            }
            .header_right {
                background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAs0AAAA/CAMAAAAsVAWIAAAAS1BMVEUAAAAG3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3//QEWnDAAAAGHRSTlMA/env+eTS9VO5kvTs8dvBrXEpyqGADkO9xtMLAAABeElEQVR42u3a4U7UQBSG4dkOLLtMK4iC5/6v1NYfRnTVSSDZzuF5ruHNyTdNC1zd02n1+X719bx6OK4+3a6mulruVjebw1/FDwXemuDjefXldYKtJ8H3o+aP6Ntp9Xwhwbk7wR0r7N+lBG8vJDhkgWoewWlzvzlvjj8TrJs7CUao+RUJkqzmFwly3ZpffvsmI0He7t0/C0qQqyndpoB9K72eA3aue+caCexe6dQC9q70eQzYvdLlyc5gAKXLTcD+lR7HgAGUDic7gyGUDmJmDAUAAAAA2Ld6gCF0xBwHGELHj821QApTtAIpzDEVSKGJmSyqmUEWfzwAp8MvXG0GUqOJmRyqy0wWYiYNMZPGfx6AEmccNZqYyWFxmclijkXM5DDFLGZyaP+OWeKMo0YTMzm0qGImh9llJotqM5PFYmaQRY1FzOTgAUgaPs2Rhs1MGjYzaVSXmSz8m0EaHoCk0WxmsphcZrKYYxIzOSwegKRhZpDHg5jJ4juVJpnCFsZedAAAAABJRU5ErkJggg==);
                background-size: 100% 100%;
                .time {
                    position: absolute;
                    bottom: 6px;
                    right: 24px;
                    color: #57DCF9;
                    font-size: 23px;
                }
            }
        }
    }
    .hc-main {
        flex: 1;
        display: flex;
        flex-basis: auto;
        overflow: auto;
        padding: 8px 16px 20px;
        .main-left {
            position: relative;
            display: flex;
            flex-direction: column;
            .content {
                position: relative;
                border: 1px solid #61616B;
                .text-content {
                    position: absolute;
                    inset: 0;
                    width: 188px;
                    margin: 20px;
                    padding: 16px;
                    border-radius: 8px;
                    background: rgba(0, 0, 0, 0.25);
                    backdrop-filter: blur( 4px );
                    -webkit-backdrop-filter: blur( 4px );
                    border: 1px solid #000000;
                    .title {
                        font-size: 22px;
                        margin-bottom: 50px;
                    }
                    .scroll-bar {
                        position: relative;
                        height: calc(100% - 72px);
                        overflow: auto;
                    }
                    .number-box {
                        position: relative;
                        .name {
                            font-size: 20px;
                            margin-bottom: 10px;
                        }
                        .name.letter {
                            letter-spacing: 2.4rem;
                        }
                    }
                    .number-box + .number-box {
                        margin-top: 40px;
                    }
                }
            }
            .bottom {
                position: relative;
                border: 1px solid #61616B;
                background: #060726;
                margin-top: 24px;
                padding: 18px;
                .content {
                    position: relative;
                    border: 0;
                    .title {
                        font-size: 24px;
                        margin-bottom: 34px;
                    }
                }
            }
        }
        .main-right {
            position: relative;
            border: 1px solid #61616B;
            margin-left: 24px;
            padding: 18px;
            .content {
                position: relative;
                .title {
                    font-size: 28px;
                    margin-bottom: 34px;
                }
                .video-content {
                    position: relative;
                    height: calc(100% - 70px);
                    overflow: auto;
                    .video-item {
                        position: relative;
                        width: 100%;
                        height: 155px;
                    }
                    .video-item + .video-item {
                        margin-top: 24px;
                    }
                }
            }
        }
        .hc-border-1 {
            position: absolute;
            inset: 0;
            height: 50%;
            &::after, &::before {
                content: '';
                position: absolute;
                height: 40px;
                width: 40px;
                border-style: solid;
                border-width: 4px;
                border-color: #4083E2;
            }
            &::before {
                left: -1px;
                top: -1px;
                border-right: 0;
                border-bottom: 0;
            }
            &::after {
                right: -1px;
                top: -1px;
                border-left: 0;
                border-bottom: 0;
            }
        }
        .hc-border-2 {
            position: absolute;
            height: 50%;
            bottom: 0;
            left: 0;
            right: 0;
            &::after, &::before {
                content: '';
                position: absolute;
                height: 40px;
                width: 40px;
                border-style: solid;
                border-width: 4px;
                border-color: #4083E2;
            }
            &::before {
                left: -1px;
                bottom: -1px;
                border-right: 0;
                border-top: 0;
            }
            &::after {
                right: -1px;
                bottom: -1px;
                border-left: 0;
                border-top: 0;
            }
        }
    }
}