body { background: black; } .header { position: relative; } .header .mui-action-back { margin-top: 15px; color: white; position: absolute; z-index: 11; padding: 9px; } .header img { width: 100%; } .header .time { width: 126px; height: 39px; line-height: 39px; text-align: center; border: 1px solid #f4d752; color: #f6e164; font-size: 21.6px; position: absolute; margin: 0 auto; left: 0; right: 0; bottom: 30%; } .yhq { padding: 0 2%; } .yhq_block { width: 23%; height: 117px; float: left; margin: 1%; position: relative; background: #c59c5a; border-radius: 3%; } .yhq_block .yhq_img { width: 100%; } .yhq_block .yhq_btn { width: 90%; position: absolute; margin: 0 auto; left: 0; right: 0; bottom: 7%; } .yhq_p1 { position: absolute; margin: 0 auto; left: 0; right: 0; font-size: 36px; font-weight: bold; letter-spacing: -3px; text-align: center; color: #262626; top: 18px; } .yhq_p2 { position: absolute; margin: 0 auto; left: 0; right: 0; font-size: 14.4px; text-align: center; color: #262626; top: 48px; } .yhq_p3 { position: absolute; margin: 0 auto; left: 0; right: 0; font-size: 9.6px; text-align: center; color: #262626; top: 68px; } .title { width: 100%; text-align: center; padding: 5% 18%; } .title img { width: 100%; } .jggcj { width: 100%; padding: 2%; position: relative; } .jggcj .bg_img { width: 100%; } .zz_img { width: 96%; margin: 0 auto; position: absolute; left: 0; right: 0; bottom: 9.5%; z-index: 10; } .jggcj .on { transform: rotateY(180deg); } .cj_con { width: 82.8%; position: absolute; margin: 0 auto; left: 0; right: 0; top: 18%; z-index: 11; padding: 0.5% 0 0 1%; } .content { width: 32.3%; float: left; margin: 0 1% 0.5% 0; position: relative; } .content img { width: 100%; } .num { width: 98%; text-align: center; position: absolute; bottom: 4%; color: #FFFFFF; font-size: 13.2px; } .content_con { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 12; } .cj_con .active .content_con { background: rgba(255, 255, 255, 0.6); border-radius: 10%; } .content_con img { width: 100%; height: 100%; } .nav { padding: 1%; } .nav_block { width: 48%; margin: 1%; float: left; position: relative; } .nav_block img { width: 100% } .nav_block_con { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .p1 { color: #fffffe; font-size: 16.8px; margin-left: 4%; margin-top: 4%; } .p2 { color: #fffffe; margin-left: 4%; height: 16px; } .go { text-align: center; width: 40px; height: 16px; line-height: 16px; font-size: 10.8px; background: white; margin-left: 4%; border-radius: 15px; margin-top: 3%; } .nav .nav_block1 { width: 98%; } .nav .nav_block1 .p1 { margin-top: 2%; margin-left: 2%; } .nav .nav_block1 .p2 { margin-left: 2%; } .nav .nav_block1 .go { margin-top: 1.5%; margin-left: 2%; } .list { padding: 1%; } .list_block { width: 48%; margin: 1%; position: relative; float: left; } .list_block_bg { width: 100%; } .list_block_con { padding: 2% 2% 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .list_block_con img { width: 100%; height: 85%; } .p3 { color: white; height: 15px; font-size: 10.8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 80%; } .p4 { color: white; height: 15px; font-size: 14.4px; position: absolute; bottom: 3%; }