.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; } .content .info .one .one_1 { padding: 2vw; display: flex; justify-content: space-between; font-size: 18px; font-weight: bold; } .content .info .one .one_1 .name { display: flex; align-items: center; } .content .info .one .one_2 { display: flex; justify-content: space-between; align-items: center; padding: 2vw; } .content .info .one .one_2 .left text:first-child { font-size: 14px; margin: 0 1vw 0 0; font-weight: 600; } .content .info .one .one_2 .left .left_1 { font-size: 12px; padding: 1vw; margin: 0 1vw 0 0; color: #FF7800; border: 1px solid #FF7800; border-radius: 2vw; } .content .info .one .one_2 .left .left_2 { font-size: 12px; color: #808080; } .content .info .one .one_2 .right { font-size: 12px; color: #808080; } .content .info .one .one_3 { padding: 2vw; text-align: center; background-color: #f1f1f1; } .content .info .one .one_3 image { width: 100%; border-radius: 2vw; height: 15vh; } .content .info .two { height: 61vh; display: flex; } .content .info .two .two_1 { position: relative; width: 25vw; background-color: #fafafa; display: flex; flex-direction: column; } .content .info .two .two_1 .list { text-align: center; padding: 3vw 0; border-bottom: 1px solid #f1f1f1; } .content .info .two .two_1 .list .name { color: #858585; font-size: 12px; } .content .info .two .two_1 .listActive { background-color: #ffffff; } .content .info .two .two_2 { flex-grow: 1; position: relative; display: flex; flex-direction: column; } .content .info .two .two_2 .theme { padding: 2vw; color: #858585; font-size: 12px; } .content .info .two .two_2 .list { display: flex; width: 70vw; 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 { display: flex; flex-direction: column; justify-content: space-between; 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 .info .money { display: flex; justify-content: space-between; align-items: center; font-size: 16px; color: #FF8C00; margin: 0 0 1vw 0; } .content .foot { display: flex; justify-content: space-between; padding: 0 2vw; background-color: #ffffff; border-top: 1px solid #f1f1f1; z-index: 99999 !important; } .content .foot .foot_1 { display: flex; justify-content: space-between; align-items: center; font-size: 14px; } .content .foot .foot_1 .type { color: #FF8C00; } .content .foot .foot_1 .money { font-size: 25px; color: #FF8C00; } .content .foot .foot_2 .button { background-color: #FF8C00; color: #ffffff; border-radius: 5vw; font-size: 16px; } .content .uni-popup { z-index: 9999 !important; } .content .popup { display: flex; flex-direction: column; width: 100vw; height: 60vh; } .content .popup .close { text-align: right; padding: 2vw; } .content .popup .close .name { font-size: 14px; color: #858585; } .content .popup .info_1 { position: relative; display: flex; flex-direction: column; height: 54vh; margin-bottom: 12vw; } .content .popup .info_1 .list { display: flex; width: 96vw; margin: 0 0 2vw 0; padding: 2vw; box-shadow: 0 0 5px #f1f1f1; border-radius: 5px; } .content .popup .info_1 .list .img { width: 30vw; } .content .popup .info_1 .list .img .image { width: 30vw; height: 20vw; border-radius: 5px; } .content .popup .info_1 .list .info { display: flex; flex-direction: column; justify-content: space-between; width: 60vw; padding: 0 0 0 2vw; } .content .popup .info_1 .list .info .name { font-size: 16px; } .content .popup .info_1 .list .info .spec { font-size: 12px; color: #858585; } .content .popup .info_1 .list .info .money { display: flex; justify-content: space-between; align-items: center; font-size: 16px; color: #FF8C00; margin: 0 0 1vw 0; } .scroll-view { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .scroll-view .list-scroll-view { display: flex; flex-direction: column; }