body { background-color: #f5f5f5; } .footer { display: flex; justify-content: space-around; align-items: center; position: fixed; width: 100%; height: 50px; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid #d5d2d2; box-sizing: border-box; } .footer li { text-align: center; } .footer li i { display: inline-block; margin-bottom: 3px; } .footer li p { font-size: 10px; zoom: 0.9; color: #8e8e93; } .userinfo { height: 110px; background: linear-gradient(90deg,#0af,#0085ff); padding: 25px 15px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; } .userinfo_left { display: flex; align-items: center; } .userinfo_left img{ width: 60px; height: 60px; border-radius: 100%; } .phone { margin-left: 12px; } .phone .title{ font-size: 21px; color: #fff; font-weight: 700; } .phone_text { color: #fff; font-size: 12px; display: flex; align-items: center; margin-top: 2px; } .userinfo .icon-zhankai { color: #fff; } .activity { display: flex; height: 84px; background: #fff; } .activity li { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 50%; height: 100%; } .activity li:first-child { border-right: 1px solid #ddd; } .activity p { font-size: 12px; color: #666; font-weight: 700; margin-top: 4px; } .activity li .text{ display: flex; align-items: flex-end; } .activity .text .number{ font-size: 26px; color: rgb(255, 95, 62); line-height: 22px; } .activity .text .nums{ font-size: 12px; color: rgb(255, 95, 62); } .green .number, .green .nums{ color: rgb(106, 194, 11) !important; } .setting {} .setting li { height: 45px; background: #fff; margin-top: 13px; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; } .clear li { margin-top: 0 !important; } .setting li .left{ display: flex; align-items: center; } .setting li .left i{ font-size: 20px; } .setting li .left span { font-size: 15px; margin-left: 7px; } .setting li .icon-zhankai{ font-size: 13px; color: #bbb; }