.content { display: flex; flex-direction: column; box-sizing: border-box; width: 100vw; height: 100vh; } .content { font-family: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; } .content .info { display: flex; flex-direction: column; position: relative; flex-grow: 1; background-color: #f1f1f1; } .content .info .one { height: 10vh; background-color: #FF7800; color: #ffffff; padding: 4vw 2vw; font-size: 18px; } .content .info .two { width: 92vw; padding: 0 4vw; position: absolute; top: 16vw; } .content .info .two .two_1 { display: flex; justify-content: space-between; align-items: center; background-color: #ffffff; border-radius: 3vw; padding: 4vw 2vw; } .content .info .two .two_1 .left { font-size: 16px; font-weight: 600; } .content .info .two .two_1 .right { font-size: 14px; } .content .info .two .two_2 { margin: 2vw 0; padding: 2vw; background-color: #ffffff; border-radius: 4vw; } .content .info .two .two_2 .two_2_1 { padding: 2vw 0; font-size: 16px; font-weight: 600; } .content .info .two .two_2 .two_2_2 { position: relative; display: flex; flex-direction: column; height: 32vh; } .content .info .two .two_2 .two_2_2 .list { display: flex; width: 84vw; margin: 0 0 2vw 0; padding: 2vw; box-shadow: 0 0 5px #f1f1f1; border-radius: 5px; } .content .info .two .two_2 .two_2_2 .list .img { width: 25vw; } .content .info .two .two_2 .two_2_2 .list .img .image { width: 25vw; height: 20vw; border-radius: 5px; } .content .info .two .two_2 .two_2_2 .list .infoList { width: 35vw; padding: 0 0 0 2vw; } .content .info .two .two_2 .two_2_2 .list .infoList .name { font-size: 16px; } .content .info .two .two_2 .two_2_2 .list .infoList .spec { font-size: 12px; color: #858585; } .content .info .two .two_2 .two_2_2 .list .money { display: flex; flex-direction: column; align-items: flex-end; width: 20vw; font-size: 14px; } .content .info .two .two_2 .two_2_2 .list .money text:first-child { color: #FF8C00; } .content .info .two .two_2 .two_2_3 .two_2_3_1 { display: flex; justify-content: space-between; align-items: center; font-size: 14px; padding: 2vw 3vw; } .content .info .two .two_2 .two_2_3 .two_2_3_1 .left text { color: #858585; font-size: 12px; margin: 0 2vw; } .content .info .two .two_2 .two_2_3 .two_2_3_1 .right { color: #FF7800; } .content .info .two .two_2 .two_2_3 .two_2_3_2 { padding: 3vw; text-align: right; font-size: 14px; color: #858585; border-top: 1px solid #f1f1f1; } .content .info .two .two_2 .two_2_3 .two_2_3_2 text:first-child { color: #FF7800; } .content .info .two .two_2 .two_2_3 .two_2_3_2 text:last-child { color: #FF7800; font-size: 18px; } .content .info .two .two_3 { margin: 2vw 0; padding: 2vw; background-color: #ffffff; border-radius: 4vw; } .content .info .two .two_3 .two_3_1 { display: flex; justify-content: space-between; padding: 2vw; font-size: 14px; border-bottom: 1px solid #f1f1f1; } .content .foot { display: flex; justify-content: space-around; align-items: center; padding: 2vw 3vw; background-color: #ffffff; border-top: 1px solid #f1f1f1; } .content .foot .foot_1 .button { background-color: #ffffff; color: #FF8C00; border: 1px solid #FF8C00; border-radius: 5vw; padding: 0 15vw; font-size: 16px; } .content .foot .foot_2 .button { background-color: #FF8C00; color: #ffffff; border-radius: 5vw; padding: 0 15vw; font-size: 16px; } .scroll-view { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .scroll-view .list-scroll-view { display: flex; flex-direction: column; }