.content { display: flex; flex-direction: column; box-sizing: border-box; width: 100vw; height: 100vh; } .content { background-color: var(--rgb111); } .content .one { padding: 2vw; } .content .one input { border: 1px solid var(--rgbf1f); border-radius: 5px; padding: 5px; font-size: 14px; color: var(--rgbfff); } .content .two { flex-grow: 1; position: relative; } .content .two .two_1 { display: flex; flex-wrap: wrap; } .content .two .two_1 .list { position: relative; width: 48%; margin: 0 10px 10px 0; } .content .two .two_1 .list .image { width: 100%; height: 100px; overflow: hidden; border-radius: 5px; box-shadow: 0 0 5px var(--rgbf1f); margin: 0 0 5px 0; } .content .two .two_1 .list .name { font-size: 14px; color: var(--rgbfff); margin: 0 0 5px 0; } .content .two .two_1 .list .other { display: flex; color: var(--rgbfff); font-size: 12px; justify-content: space-between; } .content .two .two_1 .list .vip { position: absolute; top: 0; left: 1vw; } .content .two .two_1 .list .vip ._span { font-size: 14px; font-weight: bold; color: var(--rgbffd); } .content .two .two_1 .list:nth-child(2n) { margin: 0 0 10px 0; } .scroll-view { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .scroll-view .list-scroll-view { display: flex; flex-direction: column; padding: 0 2vw; } .is_bottom { text-align: center; } .is_bottom text { padding: 2vw 0; display: inline-block; color: #858585; font-size: 14px; }