court-mobile1/pages/match/info.wxss

.main {
    position: relative;
    width: 100%;
}

.main .one {
    float: left;
    width: 100%;
    height: 300px;
    overflow: hidden;
    position: relative;
    margin: 0 0 10px 0;
}

.main .one .image {
    float: left;
    width: 100%;
    height: 240px;
    overflow: hidden;
}

.main .one .one_1 {
    float: left;
    width: 89%;
    height: 120px;
    margin: 0 10px;
    padding: 10px;
    border-radius: 5px;
    overflow: hidden;
    background-color: #fff;
    position: absolute;
    bottom: 0;
}

.main .one .one_1 .name {
    float: left;
    width: 100%;
    font-size: 16px;
    font-weight: bold;
    margin: 0 0 5px 0;
}

.main .one .one_1 .other {
    float: left;
    width: 100%;
}

.main .one .one_1 .other .otherInfo {
    float: left;
    width: 100%;
    font-size: 14px;
    margin: 0 0 5px 0;
    color: #666;
}

.main .one .one_1 .other .otherInfo:nth-child(1) text:nth-child(2) {
    color: #fff;
    padding: 0 10px;
    border-radius: 5px;
}

.main .one .one_1 .other .otherInfo:nth-child(3) {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    word-break: break-all;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.main .one .one_1 .other .otherInfo text:nth-child(2) {
    color: #000;
}

.main .one .one_1 .other .otherInfo .color0 {
    background: rgb(238, 147, 28);
}

.main .one .one_1 .other .otherInfo .color1 {
    background: rgb(54, 233, 48);
}

.main .one .one_1 .other .otherInfo .color2 {
    background: rgb(238, 88, 28);
}

.main .one .one_1 .other .otherInfo .color3 {
    background: rgb(238, 147, 28);
}

.main .one .one_1 .other .otherInfo .color4 {
    background: rgb(136, 136, 136);
}

.main .two {
    float: left;
    width: 95%;
    padding: 0 10px;
}

.main .two .two_1 {
    float: left;
    width: 100%;
    margin: 10px 0 0 0;
}

.two_1 .b {
    float: left;
    width: 100%;
}

.two_1 .b .list {
    float: left;
    width: 20%;
    margin: 0 10px 10px 0;
    background-color: #fff;
    text-align: center;
    padding: 10px 5px;
    border-radius: 5px;
}

.two_1 .b .list:nth-child(4n) {
    margin: 0 0 10px 0;
}

.two_1 .b .list image {
    width: 50px;
    height: 50px;
    border-radius: 90px;
}

.two_1 .b .list .name {
    float: left;
    width: 100%;
    text-align: center;
    font-size: 12px;
    margin: 0 0 5px 0;
}

.two_1 .b .list .num {
    float: left;
    width: 100%;
    font-size: 12px;
    color: #666;
}

.two_1 .c .list {
    float: left;
    width: 95%;
    border-radius: 5px;
    background-color: #fff;
    margin: 0 0 10px 0;
    padding: 10px;
}

.two_1 .c .list .list_1 {
    float: left;
    width: 95%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: #fff;
    padding: 2px 10px;
    font-size: 14px;
    margin: 0 0 5px 0;
}

.two_1 .c .list .list_1 text:nth-child(2) {
    float: right;
}

.two_1 .c .list .list_2 {
    float: left;
    width: 100%;
}

.two_1 .c .list .list_2 .list_2one {
    float: left;
    width: 39%;
    text-align: center;
}

.two_1 .c .list .list_2 .list_2one image {
    width: 50px;
    height: 50px;
    border-radius: 90px;
}

.two_1 .c .list .list_2 .list_2one text {
    float: right;
    font-size: 14px;
    padding: 15px 0;
}

.two_1 .c .list .list_2 .list_2one:nth-child(3) text {
    float: left;
}

.two_1 .c .list .list_2 .list_2two {
    float: left;
    width: 22%;
    text-align: center;
    padding: 10px 0;
}

.two_1 .c .list .list_2 .list_2two text {
    background-color: rgb(228, 226, 226);
    text-align: center;
    color: #ff0000;
    font-size: 20px;
    font-weight: bold;
    text-decoration: line-through;
    text-decoration-color: #fff;
    padding: 0 2px;
}

.two_1 .c .list .list_2 .list_2two text:nth-child(2) {
    color: #000000;
}

.two_1 .c .list .list_2 .list_2two text:nth-child(3) {
    color: #00427b;
}

.two_1 .d {
    float: left;
    width: 100%;
}

.two_1 .d .ranking {
    float: left;
    width: 100%;
    background-color: #000000;
    color: #fff;
    padding: 5px 0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.two_1 .d .ranking view {
    float: left;
    text-align: center;
    width: 20%;
}

.two_1 .d .ranking view:nth-child(2) {
    width: 40%;
}

.two_1 .d .rankingList {
    background-color: #fff;
    border-bottom: 1px solid #cccccc;
    color: #000000;
    border-radius: 0;
}

.two_1 .d .rankingList:nth-child(2) {
    color: #fff;
    background-color: rgba(247, 31, 67);
}

.two_1 .d .rankingList:nth-child(3) {
    color: #fff;
    background-color: rgba(245, 96, 133);
}

.two_1 .d .rankingList:nth-child(4) {
    color: #fff;
    background-color: rgb(252, 172, 198);
}

.two_1 .d .rankingList view text {
    display: inline-block;
    padding: 15px 0;
    font-size: 14px;
}

.two_1 .d .rankingList view:nth-child(2) image {
    float: left;
    width: 50px;
    height: 50px;
    border-radius: 90px;
}