.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; }