court-badminton/pages/matchInfo/index.less

.main {
    height: 88.8vh;

    .zero {
        width: 96vw;
    }

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

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

            .list-scroll-view {
                display: flex;
                flex-direction: column;
            }
        }

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

            .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 {
            .b_1 {
                width: 96vw;

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

                    .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 {
            width: 96vw;
            display: flex;
            flex-direction: column;


            .c_1 {
                width: 92vw;
                padding: 2vw;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                background-color: #f1f1f1;
                margin: 0 0 2vw 0;

                .c_1btn {
                    width: 25vw;

                    button {
                        width: 100%;
                        font-size: 14px;
                        padding: 2vw;
                    }
                }

                .c_1inp {
                    width: 66vw;

                    input {
                        text-align: left;
                        border: 1px solid #ccc;
                        padding: 1vw;
                        border-radius: 5px;
                    }
                }
            }

            .c_2 {
                width: 96vw;
                position: relative;
                flex-grow: 1;

                .cList {
                    background-color: #328d26;
                    margin: 0 0 2vw 0;
                    padding: 2vw;

                    .cList_0 {
                        .name {
                            padding: 1vw 0;
                            color: #ffffff;
                            margin: 0 0 1vw 0;

                            text {
                                padding: 0 2vw 0 0;
                            }
                        }

                        .pk {
                            display: flex;
                            flex-direction: row;
                            justify-content: space-around;
                            background-color: #fff;

                            .pk_1 {
                                width: 30vw;
                                text-align: center;
                                padding: 2vw;
                            }

                            .pk_2 {
                                text-align: center;
                                box-shadow: 0 0 5px #cccccc;

                                .time {
                                    background-color: #328d26;
                                    color: #ffffff;
                                    padding: 1vw 0;
                                    font-size: 14px;
                                }

                                .score {
                                    font-size: 20px;
                                    padding: 1vw 0;
                                    font-weight: bold;
                                }
                            }
                        }
                    }

                    .cList_1 {
                        text {
                            padding: 0 1vw;
                            color: #ffffff;
                        }
                    }
                }

                .cList:last-child {
                    margin: 0;
                }
            }
        }

        .d {
            .d_1 {
                margin: 0 0 2vw 0;
            }

            .d_2 {
                flex-grow: 1;
                position: relative;

                .dList {
                    background-color: #328d26;
                    margin: 0 0 2vw 0;
                    padding: 2vw;

                    .name {
                        padding: 1vw 0;
                        color: #ffffff;
                        margin: 0 0 1vw 0;

                        text {
                            padding: 0 2vw 0 0;
                        }
                    }

                    .pk {
                        display: flex;
                        flex-direction: row;
                        justify-content: space-around;
                        background-color: #fff;

                        .pk_1 {
                            width: 30vw;
                            text-align: center;
                            padding: 2vw;
                        }

                        .pk_2 {
                            text-align: center;
                            box-shadow: 0 0 5px #cccccc;

                            .time {
                                background-color: #328d26;
                                color: #ffffff;
                                padding: 1vw 0;
                                font-size: 14px;
                            }

                            .score {
                                font-size: 20px;
                                padding: 1vw 0;
                                font-weight: bold;
                            }
                        }
                    }
                }

                .dList:last-child {
                    margin: 0;
                }
            }


        }

        .e {
            .eList {
                background-color: #328d26;
                margin: 0 0 2vw 0;
                padding: 2vw;

                text {
                    padding: 0 1vw;
                    color: #ffffff;
                }
            }

            .eList:last-child {
                margin: 0;
            }
        }
    }

    .two {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 2vw 0;
        background-color: #cccccc;

        button {
            font-size: 14px;
            padding: 2vw;
            margin: 0 2vw;
            width: 25vw;
        }
    }
}