.content { display: flex; flex-direction: column; box-sizing: border-box; width: 100vw; height: 100vh; } .main { background-color: var(--rgb111); display: flex; flex-direction: row; width: 96vw; height: 92vh; padding: 0 2vw; } .main .one { width: 24vw; color: var(--rgbfff); margin: 0 10px 0 0; background-color: var(--rgb000); overflow-y: auto; } .main .one .list ._span { display: inline-block; width: 100%; height: 40px; line-height: 40px; text-align: center; font-size: 14px; } .main .two { flex-grow: 1; color: var(--rgbfff); background-color: var(--rgb000); padding: 0 2vw; overflow-y: auto; position: relative; } .main .two .two_1 { padding: 1vw 0; } .main .two .two_2 { display: flex; flex-wrap: wrap; position: relative; } .main .two .two_2 .list { width: 30%; height: 70px; overflow: hidden; position: relative; margin: 0 10px 10px 0; box-shadow: 0 0 5px var(--rgbf1f); border-radius: 5px; } .main .two .two_2 .list .image { width: 100%; height: 100%; border-radius: 5px; } .main .two .two_2 .list .name { position: absolute; bottom: 10px; width: 100%; text-align: center; left: 0; color: var(--rgbfff); font-size: 12px; font-family: monospace; } .main .two .two_2 .list:nth-child(3n) { 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; }