body{ display: flex; flex-direction: column; height: 100vh; } .header{ display: flex; align-items: center; justify-content: space-between; padding: 0 0.37rem; position: fixed; top: 0; left: 0; z-index: 9999; box-sizing: border-box; width: 100%; height: 0.9rem; } .header ul { display: flex; width: 2.18rem; justify-content: space-between; } .header ul li{ font-family: AdobeHeitiStd-Regular; font-size: 0.3rem; color: #fefefe; box-shadow: 0rem 0.03rem 0.02rem 0rem rgba(0, 0, 0, 0.74); position: relative; } .header .weq::after{ content: ""; width: 0.35rem; height: 0.02rem; background-color: #ffffff; box-shadow: 0rem 0.02rem 0.02rem 0rem rgba(12, 0, 255, 0.35); border-radius: 0.01rem; position: absolute; left: 50%; transform: translateX(-50%); bottom: -0.12rem; } .header .header_img{ width: 0.42rem; height: 0.42rem; } .header .header_img1{ width: 0.43rem; height: 0.43rem; } .content{ flex: 1; background-image: url(../img/background.png); background-size: cover; position: relative; } .content .detail{ width: 6.04rem; /*height: 2.18rem;*/ position: absolute; left: 0.3rem; bottom: 0.1rem; } .content .detail .detail_shang{ margin-left: 0.07rem; display: flex; align-items: center; margin-bottom: 0.22rem; } .content .detail .detail_shang img{ width: 0.28rem; height: 0.26rem; margin-right: 0.1rem; } .content .detail .detail_shang p{ font-family: PingFangSC-Regular; font-size: 0.26rem; color: #ffc600; } .content .detail .detail_zhong{ width: 5.85rem; height: 1.68rem; box-sizing: border-box; background-color: #ffffff; padding: 0.1rem 0 0.1rem 0.09rem; display: flex; } .content .detail .detail_zhong img{ width: 1.48rem; height: 1.48rem; margin-right: 0.15rem; } .content .detail .detail_zhong .detail_zhong_z{ margin-top: 0.18rem; } .content .detail .detail_zhong .detail_zhong_z .detail_zhong_z1{ font-family: PingFang-SC-Bold; font-size: 0.28rem; color: #333333; } .content .detail .detail_zhong .detail_zhong_z .detail_zhong_z2{ display: flex; align-items: center; margin-top: 0.27rem; margin-bottom: 0.18rem; } .content .detail .detail_zhong .detail_zhong_z .detail_zhong_z2 div:nth-child(1){ font-family: PingFang-SC-Medium; font-size: 0.28rem; color: #333333; } .content .detail .detail_zhong .detail_zhong_z .detail_zhong_z2 div:nth-child(2){ width: 0.6rem; height: 0.24rem; background-color: #ea4e3d; border-radius: 0.12rem; font-family: PingFang-SC-Regular; font-size: 0.2rem; color: #fffefe; display: flex; align-items: center; justify-content: center; } .content .detail .detail_zhong .detail_zhong_z .detail_zhong_z2 div:nth-child(2) span{ font-family: PingFang-SC-Regular; font-size: 0.2rem; color: #fffefe; display: flex; align-items: center; justify-content: center; zoom: 0.75; margin-left: 0.03rem; } .content .detail .detail_zhong .detail_zhong_z .detail_zhong_z3{ font-family: PingFang-SC-Medium; font-size: 0.2rem; color: #626262; zoom: 0.8; } .content .detail .detail_xia{ display: flex; align-items: center; margin-top: 0.29rem; } .content .detail .detail_xia img{ width: 0.27rem; height: 0.28rem; } .content .detail .detail_xia p{ font-family: PingFangSC-Regular; font-size: 0.24rem; color: #ffffff; margin-left: 0.13rem; } .function{ position: absolute; right: 0.19rem; bottom: 0.14rem; } .function .Photo{ width: 0.96rem; height: 0.97rem; position: relative; } .function .Photo1{ margin-top: 0.3rem; } .function .Photo .Photo_img{ width: 100%; height: 100%; border: solid 0.03rem #ffffff; border-radius: 100%; } .function .Photo .Photo_img1{ width: 0.34rem; height: 0.33rem; position: absolute; left: 50%; bottom: -0.195rem; transform: translateX(-50%); } .function .Photo1{ display: flex; flex-direction: column; justify-content: center; align-items: center; } .function .Photo1 .Photo1_li{ display: flex; flex-direction: column; align-items: center; margin-bottom: 0.3rem; } .function .Photo1 .Photo1_li:nth-child(4){ margin-bottom: 0.12rem; } .function .Photo1 .Photo1_li .Photo1_img{ width: 0.68rem; height: 0.63rem; } .function .Photo1 .Photo1_li .Photo1_zi{ font-family: SourceHanSansCN-Regular; font-size: 0.2rem; color: #ffffff; margin-top: 0.09rem; } .footer{ height: 1rem; background-color: #000000; opacity: 0.6; display: flex; align-items: center; justify-content: space-between; padding-left: 0.39rem; padding-right: 0.54rem; } .footer li{ font-family: AdobeHeitiStd-Regular; font-size: 0.24rem; color: #ffffff; position: relative; } .footer .auss::after{ content: ""; font-family: AdobeHeitiStd-Regular; font-size: 0.24rem; color: #ffffff; position: absolute; width: 0.51rem; height: 0.03rem; background-color: #ffffff; border-radius: 0.015rem; left: 50%; transform: translateX(-50%); bottom: -0.25rem; }