.content { display: flex; flex-direction: column; box-sizing: border-box; width: 100vw; height: 100vh; } .main { background-color: var(--rgb000); display: flex; flex-direction: column; width: 100vw; height: 92vh; } .main .one { background-color: var(--rgb111); display: flex; padding: 8px; } .main .one .one_1 { flex-grow: 1; } .main .one .one_1 input { border: 1px solid var(--rgbf1f); height: 30px; border-radius: 2px; padding: 0 5px; font-size: 12px; } .main .one .one_2 button { height: 100%; background-color: var(--rgbfa4); color: var(--rgbfff); } .main .two { position: relative; flex-grow: 1; } .main .two .two_0 { margin: 0 0 10px 0; padding: 0 8px; } .main .two .two_0 .top { margin: 0 0 10px 0; display: flex; padding: 5px 0; } .main .two .two_0 .top .top_1 { flex-grow: 1; } .main .two .two_0 .top .top_1 ._span { color: var(--rgbfff); font-size: 20px; font-family: monospace; font-weight: bold; } .main .two .two_0 .top .top_2 ._span { color: var(--rgbfff); font-size: 14px; } .main .two .two_0 .info { margin: 0 0 10px 0; display: flex; justify-content: space-between; flex-wrap: wrap; } .main .two .two_0 .info .list { position: relative; width: 48%; margin: 0 0 10px 0; } .main .two .two_0 .info .list .image { width: 100%; height: 100px; overflow: hidden; border-radius: 5px; } .main .two .two_0 .info .list .name { font-size: 14px; color: var(--rgbfff); } .main .two .two_0 .info .list .other { display: flex; color: var(--rgbfff); font-size: 12px; justify-content: space-between; } .main .two .two_0 .info .list .vip { position: absolute; top: 0; left: 1vw; } .main .two .two_0 .info .list .vip ._span { font-size: 14px; font-weight: bold; color: var(--rgbffd); } .main .two .two_0 .btn button { border-radius: 25px; background-color: var(--rgbfa4); color: var(--rgbfff); font-size: 14px; } .main .two .two_1 .swiper { height: 200px; overflow: hidden; } .main .two .two_1 .list .image { width: 100%; height: 100%; } .main .two .two_2 { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } .main .two .two_2 .list { text-align: center; width: 18%; margin: 0 0 10px 0; } .main .two .two_2 .list .image { width: 100%; height: 64px; border-radius: 90%; margin: 0 0 5px 0; } .main .two .two_2 .list .name { font-size: 12px; color: #ffffff; } .scroll-view { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .scroll-view .list-scroll-view { display: flex; flex-direction: column; }