/*顶部*/ /*顶部菜单*/ .header{ height: 4.91rem; background-color: #909090; font-size: 0; } .header_top{ display: flex; align-items: center; justify-content:space-between; padding:0.38rem 0.3rem; box-sizing: border-box; position: fixed; z-index: 999; top: 0; right: 0; left: 0; width: 100%; background-color: #909090; } .header_top img{ width: 0.19rem; height: 0.34rem; } .header_top span{ font-size: 0.34rem; color: #ffffff; } .header_top .kong{ width: 0.19rem; height: 0.34rem; } /*头像*/ .user{ width: 5.99rem; text-align: center; padding-left: 0.74rem; padding-right: 0.77rem; padding-top: 1.27rem; } .user_p{ width: 100%; position: relative; } .user_p img{ width: 1.09rem; height: 1.09rem; border-radius: 100%; } .user_p span{ font-size: 0.2rem; color: #fd4a75; background-color: #ffe0e8; border-radius: 0.03rem; border: solid 0.01rem #fd4a75; position: absolute; left: 50%; bottom: -0.16rem; transform: translateX(-50%); } .user p{ padding-top: 0.24rem; font-size: 0.24rem; color: #ffffff; padding-bottom: 0.38rem; } .user .xian{ width: 5.99rem; height: 0.03rem; background-color: #7e7e7e; } .xiaoshou{ display: flex; justify-content: space-evenly; margin-top: 0.43rem; } .xiaoshou li{ text-align: center; } .xiaoshou li p{ font-size: 0.34rem; color: #ffffff; } .xiaoshou li span{ font-size: 0.24rem; color: #ffffff; } /*底部*/ .footer{ width: 7.5rem; height: 0.96rem; background-color: #4799ee; font-size: 0; display: flex; align-items:center; justify-content:center; position: fixed; bottom: 0; z-index: 999; } .footer span{ font-size: 0.34rem; color: #ffffff; } /*中间*/ .content{ font-size: 0; margin-bottom: 0.96rem; } /*中间_顶部*/ .content_top{ display: flex; justify-content:space-between; margin-top: 0.38rem; margin-left: 0.5rem; margin-right: 0.23rem; margin-bottom: 0.58rem; } .content_top span{ font-size: 0.28rem; color: #333333; } .content_top_right{ display: flex; align-items: center; } .content_top_right span{ font-size: 0.24rem; color: #5b6e95; margin-right: 0.25rem; } .content_top_right img{ width: 0.15rem; height: 0.27rem; } /*图片*/ .photo{} .pgoto_1{ display: flex; overflow-x: overlay; } .pgoto_1 li{ position: relative; flex-shrink: 0; margin-right: 0.21rem; } .pgoto_1 li:first-child{ margin-left: 0.24rem; } .pgoto_1 img{ width: 2rem; height: 2rem; } .shadow{ background: url(../img/yy.png);/*阴影*/ width: 2rem; height: 0.61rem; display: flex; align-items: center; position: absolute; bottom: 0; left: 0; } .shadow span{ font-size: 0.24rem; color: #ffffff; } /*横条*/ .horizontal_1{ width: 7.5rem; height: 1.02rem; background-color: #efeff4; box-shadow: 0rem 0.05rem 0.095rem 0.005rem rgba(141, 141, 141, 0.25); opacity: 0.5; margin-top: 0.33rem; display: flex; align-items: center; justify-content: space-around; } .horizontal_1 li{ text-align: center; position: relative; } .horizontal_1 li::after{ content: ""; width: 0.01rem; height: 0.46rem; background-color: #dbdbdb; position: absolute; right: -0.72rem; top: 0.18rem; } .horizontal_1 li:last-child::after{ content: none; } .horizontal_1 .top_1{ font-size: 0.34rem; color: #000; font-weight: 600; } .horizontal_1 .top_2{ font-size: 0.28rem; color: #7e7e7e; } /*图片部分*/ .shop{ display: flex; flex-wrap:wrap; } .shop li{ margin-left: 0.24rem; padding-top: 0.32rem; } .tupian{ position: relative; } .tupian img{ width: 3.39rem; height: 4.68rem; } .yinying{ background: url(../img/yy2.png); width: 3.39rem; height: 0.61rem; opacity: 0.8; position: absolute; bottom: 0; left: 0; display: flex; align-items:flex-end; padding-left: 0.1rem; box-sizing: border-box; } .yinying span {/*在span里面加阴影*/ font-size: 0.24rem; color: #ffffff; } .shop_1{ font-size: 0.28rem; color: #2b2b2b; margin-top: 0.2rem; } .shop_2{ font-size: 0.24rem; color: #7d7d7d; }