court-badminton/pages/openMatch/index.less

.main {
    height: 88.8vh;

    .zero {
        width: 96vw;
        flex-grow: 1;

        .a {
            display: flex;
            flex-direction: column;
            height: 81vh;
            background-color: #ffffff;
            position: relative;
            margin: 2vw 0 0 0;

            .scroll-view {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;

                .list-scroll-view {
                    display: flex;
                    flex-wrap: wrap;
                    align-content: flex-start;
                    justify-content: space-between;

                    .a_1 {
                        width: 96vw;
                        position: relative;

                        .image {
                            width: 96vw;
                            height: 160px;
                        }

                        .a_1_info {
                            position: absolute;
                            top: 30vw;
                            width: 92vw;
                            margin: 0 2vw;

                            .a_1_1 {
                                background-color: #ffffff;
                                margin: 0 0 3vw 0;
                                border-radius: 5px;
                                padding: 2vw;
                                box-shadow: 0 0 1vw #cccccc;

                                .name {
                                    font-size: 18px;
                                    font-weight: bold;
                                    margin: 0 0 2vw 0;
                                }

                                .status {
                                    margin: 0 0 2vw 0;

                                    text {
                                        font-size: 16px;
                                        color: #ffffff;
                                        padding: 1vw 2vw;
                                        background-color: #ff0000;
                                        border-radius: 10px;
                                    }
                                }

                                .other {
                                    .other_1 {
                                        margin: 0 0 1vw 0;
                                        font-size: 16px;
                                        color: #858585;

                                        .icon {
                                            margin: 0 2vw 0 0;
                                        }

                                        text:nth-child(3) {
                                            color: #000000;
                                        }
                                    }
                                }
                            }

                            .a_1_2 {
                                .a_1_2t {
                                    margin: 0 0 1vw 0;

                                    .txt {
                                        font-size: 16px;
                                        margin: 0 0 1vw 0;
                                    }

                                    .cont {
                                        font-size: 14px;
                                        color: #858585;
                                        text-indent: 1rem;
                                    }
                                }
                            }

                        }

                    }

                    .b_1 {
                        width: 96vw;

                        .groupList {
                            .title {
                                display: flex;
                                flex-direction: row;
                                justify-content: space-between;
                                font-size: 15px;
                            }

                            .project {
                                .projectList {
                                    margin: 0 0 2vw 0;
                                    border-bottom: 1px solid #cccccc;

                                    .project_1 {
                                        display: flex;
                                        flex-direction: row;
                                        justify-content: space-between;
                                        margin: 0 0 2vw 0;

                                        .project_1_1 {
                                            color: #000000;
                                            font-size: 15px;
                                        }

                                    }

                                    .user {
                                        display: flex;
                                        flex-direction: row;
                                        justify-content: space-between;
                                        flex-wrap: wrap;

                                        .userList {
                                            text-align: center;
                                            border: 1px solid #cccccc;
                                            margin: 0 0 2vw 0;
                                            padding: 2vw;
                                            border-radius: 5px;
                                            box-shadow: 0 0 1vw #cccccc;
                                            width: 22vw;

                                            .icon {
                                                width: 50px;
                                                height: 50px;
                                                border-radius: 5px;
                                            }

                                            .name {
                                                text-align: center;
                                                font-size: 15px;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }

                    .c_1 {
                        width: 96vw;
                        // height: 61vh;

                        .c_top {
                            display: flex;
                            flex-direction: row;
                            // background-color: #009cd8;
                            padding: 3px;
                            height: 34px;
                            width: 94vw;

                            button {
                                background-color: #328d26;
                                color: #fff;
                                font-size: 12px;
                                height: 34px;
                                padding: 4px 12px;
                            }

                            .c_top_2 {
                                width: 70vw;

                                input {
                                    margin: 0 0 0 5px;
                                    background-color: #f1f1f1;
                                    height: 34px;
                                    flex-grow: 1;
                                    padding: 0 0 0 4px;
                                }
                            }
                        }

                        .c_buttom {
                            flex-grow: 1;
                            position: relative;
                            margin: 8px 0 0 0;
                            display: flex;
                            flex-direction: column;
                            height: 73vh;

                            .scroll-view {
                                position: absolute;
                                top: 0;
                                left: 0;
                                right: 0;
                                bottom: 0;

                                .list-scroll-view {
                                    display: flex;
                                    flex-wrap: wrap;
                                    align-content: flex-start;
                                    flex-direction: column;
                                    justify-content: space-between;

                                    .list {
                                        width: 96vw;
                                        margin: 0 0 5px 0;

                                        .lists {
                                            box-shadow: 0 0 1vw #cccccc;

                                            .list_1 {
                                                border-radius: 3px;
                                                background-color: #328d26;
                                                padding: 5px 3px;
                                                color: #fff;

                                                text {
                                                    margin: 0 5px;
                                                }
                                            }

                                            .list_2 {
                                                display: flex;
                                                flex-direction: row;
                                                border-radius: 3px;

                                                .one {
                                                    width: 33vw;
                                                    display: flex;
                                                    flex-direction: row;
                                                    font-size: 14px;
                                                    text-align: center;
                                                    padding: 8px 0;

                                                    image {
                                                        border-radius: 50%;
                                                        width: 40px;
                                                        height: 40px;
                                                    }
                                                }

                                                .two {
                                                    display: flex;
                                                    flex-direction: column;
                                                    text-align: center;
                                                    width: 28vw;
                                                    background-color: #fff;
                                                    margin: 0 3px 5px 3px;
                                                    box-shadow: 13px 0 8px -15px rgb(32, 32, 32),
                                                        -13px 0 8px -15px rgb(32, 32, 32);
                                                    border-radius: 0 0 5px 5px;

                                                    .time {
                                                        background-color: #328d26;
                                                        border-radius: 0 0 5px 5px;
                                                        color: #fff;
                                                        padding: 3px;
                                                        font-size: 14px;
                                                    }

                                                    .branch {
                                                        font-size: 22px;
                                                        padding: 2px 0 0 0;
                                                        font-weight: 700;

                                                        text {
                                                            margin: 0 5px;
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }

                                    .list_2 {
                                        margin: 0 0 8px 0;
                                        padding: 0 5px;
                                        width: 96vw;

                                        .lists {
                                            display: flex;
                                            flex-direction: row;
                                            border-bottom: 1px solid #999;
                                            padding: 8px 10px;

                                            .one_1 {
                                                color: rgb(63, 63, 63);
                                            }

                                            .one_2 {
                                                color: rgb(63, 63, 63);
                                                flex-grow: 1;
                                                text-align: right;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        .d_1 {
            width: 96vw;
            text-align: center;
            background-color: #f1f1f1;

            .list {
                width: 46vw;
                font-size: 14px;
                background-color: #ffffff;
                margin: 1vw;

                .time {
                    background-color: #228B22;
                    color: #ffffff;
                    padding: 2vw 2vw 0 2vw;
                    border-radius: 5px 5px 0px 0px;
                }

                .adress {
                    background-color: #228B22;
                    color: #ffffff;
                    padding: 0 2vw 2vw 2vw;
                    border-radius: 0px 0px 5px 5px;
                }

                .name {
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;

                    .icon {
                        width: 10vw;
                        height: 7vw;
                        background-color: #228B22;
                        padding: 1vw;
                        line-height: 9vw;
                        border-radius: 0px 0px 5px 5px;
                    }
                }
            }
        }

        .d_2 {
            width: 96vw;
            text-align: center;
            background-color: #f1f1f1;

            .list {
                width: 96vw;
                font-size: 14px;
                background-color: #ffffff;
                margin-bottom: 2vw;

                .adress {
                    background-color: #228B22;
                    color: #ffffff;
                    padding: 2vw;
                    border-radius: 5px;
                }

                .name {
                    display: flex;
                    flex-direction: row;
                    justify-content: space-around;
                    text-align: center;

                    .icon {
                        display: flex;
                        flex-wrap: wrap;
                        width: 25vw;
                        height: 13vw;
                        background-color: #228B22;
                        color: #ffffff;
                        border-radius: 0px 0px 5px 5px;
                    }

                    .person {
                        display: flex;
                        flex-direction: column;

                        .person_name {
                            width: 100%;
                        }
                    }
                }

                .score {
                    font-size: 18px;
                    font-weight: 500;
                }
            }
        }

        .e_1 {
            width: 96vw;

            .btnList {
                width: 96vw;
            }
        }
    }
}