.content { display: flex; flex-direction: column; box-sizing: border-box; width: 100vw; height: 100vh; } .content { background-color: #f1f1f1; font-family: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; } .content .info { display: flex; flex-direction: column; position: relative; flex-grow: 1; padding: 2vw; } .content .info .one { padding: 2vw; background-color: #ffffff; border-radius: 4vw; } .content .info .one .one_1 { display: flex; justify-content: space-between; align-items: center; padding: 2vw 0; border-bottom: 1px solid #f1f1f1; } .content .info .one .one_1 .left { font-size: 16px; font-weight: 600; } .content .info .one .one_1 .right { font-size: 14px; } .content .info .one .one_1 .right .right_1 { background-color: #f1f1f1; padding: 3vw 1vw; border-radius: 5vw; } .content .info .one .one_1 .right .right_1 text { background-color: #f1f1f1; color: #858585; padding: 2vw; } .content .info .one .one_1 .right .right_1 .type { padding: 2vw 3vw; border-radius: 5vw; color: #ffffff; background-color: #FF7800; } .content .info .one .one_2 { display: flex; justify-content: space-between; align-items: center; padding: 3vw 0; border-bottom: 1px solid #f1f1f1; font-size: 14px; } .content .info .one .one_2 .right { display: flex; align-items: center; color: #858585; } .content .info .one .one_3 { display: flex; justify-content: space-between; align-items: center; padding: 3vw 0; font-size: 14px; } .content .info .one .one_3 .right { display: flex; align-items: flex-end; color: #858585; } .content .info .one .one_3 .right input { text-align: right; } .content .info .two { margin: 2vw 0; padding: 2vw; background-color: #ffffff; border-radius: 4vw; } .content .info .two .two_1 { padding: 2vw 0; font-size: 16px; font-weight: 600; } .content .info .two .two_2 { position: relative; display: flex; flex-direction: column; height: 32vh; } .content .info .two .two_2 .list { display: flex; width: 88vw; margin: 0 0 2vw 0; padding: 2vw; box-shadow: 0 0 5px #f1f1f1; border-radius: 5px; } .content .info .two .two_2 .list .img { width: 30vw; } .content .info .two .two_2 .list .img .image { width: 30vw; height: 20vw; border-radius: 5px; } .content .info .two .two_2 .list .info { width: 40vw; padding: 0 0 0 2vw; } .content .info .two .two_2 .list .info .name { font-size: 16px; } .content .info .two .two_2 .list .info .spec { font-size: 12px; color: #858585; } .content .info .two .two_2 .list .money { display: flex; flex-direction: column; align-items: flex-end; width: 20vw; } .content .info .two .two_2 .list .money text:first-child { font-size: 14px; color: #FF8C00; } .content .info .two .two_3 .two_3_1 { display: flex; justify-content: space-between; align-items: center; font-size: 14px; padding: 2vw 3vw; } .content .info .two .two_3 .two_3_1 .left text { color: #858585; font-size: 12px; margin: 0 2vw; } .content .info .two .two_3 .two_3_1 .right { color: #FF7800; } .content .info .two .two_3 .two_3_2 { padding: 3vw; text-align: right; font-size: 14px; color: #858585; border-top: 1px solid #f1f1f1; } .content .info .two .two_3 .two_3_2 text:first-child { color: #FF7800; } .content .info .two .two_3 .two_3_2 text:last-child { color: #FF7800; font-size: 18px; } .content .foot { display: flex; justify-content: space-between; align-items: center; padding: 2vw 3vw; background-color: #ffffff; border-top: 1px solid #f1f1f1; } .content .foot .foot_1 { font-size: 14px; color: #858585; } .content .foot .foot_1 text:first-child { color: #FF7800; } .content .foot .foot_1 text:last-child { color: #FF7800; font-size: 18px; } .content .foot .foot_2 .button { background-color: #FF8C00; color: #ffffff; border-radius: 5vw; 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; }