.header { height: 0.95rem; position: fixed; width: 100%; left: 0; top: 0; background: #fff; z-index: 999; display: flex; align-items: center; justify-content: space-around; border-bottom: 0.01rem solid #e5e5e5; } .header li { color: #999; font-size: 0.26rem; position: relative; } .ractive { color: #000 !important; } .ractive::after { content: ""; position: absolute; width: 0.24rem; height: 0.05rem; background: #d0302c; bottom: -15px; left: 50%; transform: translate(-50%); } .content { margin-top: 1.25rem; margin-left: 0.23rem; margin-right: 0.25rem; } .live_list {} .live_list li{ margin-bottom: 0.26rem; } .live_list .item_top{ width: 7.02rem; height: 3.9rem; position: relative; } .live_list .item_top img{ width: 100%; height: 100%; border-radius: 0.04rem; } .live_list .item_top .tips{ position: absolute; width: 1.14rem; height: 0.36rem; right: 0.14rem; top: 0.14rem; font-size: 0.24rem; line-height: 0.36rem; text-align: center; color: #ffffff; background-color: #ff5f13; } .live_list .item_top .status{ position: absolute; right: 0.13rem; bottom: 0.12rem; font-size: 0.22rem; color: #ffffff; } .live_list .item_top .time{ position: absolute; width: 2.8rem; height: 0.4rem; background-color: #000000; border-radius: 0.2rem; opacity: 0.7; font-size: 0.22rem; color: #ffffff; text-align: center; left: 50%; top: 50%; line-height: 0.4rem; transform: translate(-50%); } .live_list .item_title{ font-size: 0.3rem; line-height: 0.52rem; color: #333333; margin-top: 0.21rem; }