.footer { height: 1rem; background-color: #000000; width: 100%; display: flex; justify-content: space-between; align-items: center; padding-left: 0.39rem; padding-right: 0.54rem; box-sizing: border-box; position: fixed; bottom: 0; left: 0; z-index: 999; } .footer li { font-size: 0.24rem; color: #ffffff; position: relative; height: 100%; display: flex; align-items: center; } .footer .active::after { content: ""; width: 0.51rem; height: 0.03rem; background-color: #ffffff; border-radius: 0.015rem; position: absolute; bottom: 0.05rem; left: 50%; transform: translateX(-50%); } .footer .active { font-size: 0.3rem; } .header { position: fixed; width: 100%; height: 0.9rem; display: flex; align-items: center; justify-content: space-between; padding: 0 0.43rem; box-sizing: border-box; z-index: 999; } .header ul { display: flex; align-items: center; height: 100%; } .header ul li { font-size: 0.36rem; color: #ffffff; position: relative; height: 100%; align-items: center; display: flex; } .header ul .on { padding-right: 0.423rem; } .header ul .in { padding-left: 0.423rem; } .header ul .active::after{ width: 0.4rem; height: 0.04rem; background-color: #ffffff; border-radius: 0.02rem; content: ""; position: absolute; bottom: 0.1rem; left: 50%; /* transform: translateX(-50%); */ } .header img { /* width: 100%; */ height: 32.4%; } body { background: #fff; } .content { margin-top: 0 !important; height: calc(100vh - 1rem); } .content img { width: 100%; height: 5.5rem; background-size: cover; }