.header{ position: fixed; top: 0.1rem; left: 0.24rem; z-index: 9999; box-sizing: border-box; width: 4.52rem; height: 0.8rem; background-color: #000000; border-radius: 0.4rem; opacity: 0.73; display: flex; justify-content: space-between; align-items: center; } .header .header_img{ width: 0.7rem; height: 0.7rem; margin-left: 0.07rem; margin-right: 0.09rem; } .header .header_div { margin-right: 0.13rem; } .header .header_div .header_div_zi{ font-family: PingFangSC-Regular; font-size: 0.26rem; color: #ffffff; } .header .header_div .header_div_zi1{ font-family: PingFangSC-Regular; font-size: 0.22rem; color: #ffffff; } .header .header_div1{ display: flex; align-items: center; justify-content: center; margin-right: 0.34rem; width: 1.05rem; height: 0.45rem; background-color: red; border-radius: 0.20rem; } .header .header_div1 .header_div1_img{ width: 0.34rem; height: 0.24rem; } .header .header_div1 .header_div1_zi{ font-family: PingFang-SC-Regular; font-size: 0.24rem; letter-spacing: 0.019rem; color: #ffffff; } /**********************************/ .content{ display: flex; background-size: cover; background-color: aquamarine; position: relative; } .content .content_img{ width: 7.5rem; height: 13.34rem; flex: 1; } .comments{ position: absolute; bottom: 5rem; left: 0.21rem; } .comments .comments_li{ width: 3.5rem; height: 0.5rem; background-color: #4799ee; border-radius: 0.1rem; opacity: 0.85; display: flex; align-items: center; box-sizing: border-box; padding: 0.13rem 0.18rem 0.12rem 0.17rem; margin-bottom: 0.31rem; } .comments .comments_li .comments_li_img{ width: 0.34rem; height: 0.24rem; margin-right: 0.14rem; } .comments .comments_li .comments_li_zi{ font-family: PingFang-SC-Medium; font-size: 0.26rem; color: #ffffff; margin-right: 0.06rem; } .comments .comments_li .comments_li_zi1{ font-family: PingFang-SC-Medium; font-size: 0.26rem; color: #ffffff; } .comments .comments_li1{ width: 3.24rem; height: 0.5rem; background-color: #000000; border-radius: 0.25rem; opacity: 0.6; display: flex; justify-content: center; align-items: center; margin-bottom: 0.13rem; } .comments .comments_li1 .comments_li1_zi{ font-family: PingFangSC-Regular; font-size: 0.26rem; color: #4799ee; } .comments .comments_li1 .comments_li1_zi1{ font-family: PingFangSC-Regular; font-size: 0.26rem; color: #eceded; } /*****************************************************/ .footer{ width: 100%; position: fixed; bottom: 0; left: 0; z-index: 9999; box-sizing: border-box; } .footer .fig{ padding: 0.25rem 0.3rem 0.1rem 0.3rem; display: flex; align-items: center; margin-bottom: 0.05rem; } .footer .fig .fig_li{ margin-right: 0.1rem; width: 1.65rem; height: 2.36rem; background-color: #ffffff; box-shadow: 0rem 0rem 0.29rem 0rem rgba(150, 150, 150, 0.3); border-radius: 0.1rem; opacity: 0.9; } .footer .fig .fig_li .fig_li_img{ width: 1.65rem; height: 1.65rem; background-color: #ffffff; border-radius: 0.1rem 0.1rem 0rem 0rem; } .footer .fig .fig_li .fig_li_zi{ font-family: PingFang-SC-Medium; font-size: 0.2rem; letter-spacing: 0.01rem; color: #000000; margin-left: 0.13rem; zoom: 0.78; margin-top: 0.05rem; } .footer .fig .fig_li .fig_li_zi1{ font-family: PingFang-SC-Bold; font-size: 0.2rem; letter-spacing: 0.01rem; color: #ea4e3d; margin-left: 0.13rem; margin-top: 0.17rem; zoom: 0.78; } /*********************************************/ .press{ height: 1rem; display: flex; align-items: center; padding: 0 0.35rem; } .press .press_text{ width: 3.59rem; height: 0.62rem; background-color: #000000; border-radius: 0.31rem; opacity: 0.4; padding-left: 0.27rem; box-sizing: border-box; margin-left: 0.1rem; margin-right: 0.29rem; } .press .press_li{ width: 0.63rem; height: 0.63rem; background-color: #8b8a8a; opacity: 0.8; border-radius: 100%; display: flex; justify-content: center; align-items: center; } .press .press_li .press_img{ width: 0.34rem; height: 0.34rem; } .press li:nth-child(4){ margin: 0 0.15rem; } .press li:nth-child(1){ background-color: #4799ee; }