*{margin: 0;padding: 0;border: 0;list-style: none;text-decoration: none;color: inherit;font-weight: normal;font-family: "微软雅黑";box-sizing: border-box;font-style: normal;outline: none;-webkit-tap-highlight-color: transparent;}
body{width: 100%;overflow-x: hidden;background: #f8f8f8;}
img{vertical-align: middle;max-width: 100%;}
.top-bar{width: 100%;height: .88rem;line-height: .88rem;text-align: center;position: relative;font-size: .38rem;color: #333333;}
.top-bar a{width: .5rem;height: .88rem;position: absolute;top: 0;left: .3rem;background: url(../images/icon-back.png) left center no-repeat;background-size: .23rem auto;z-index: 2;}
.top-bar i{width: .5rem;height: .88rem;position: absolute;top: 0;right: .3rem;background: url(../images/icon-more.png) right center no-repeat;background-size: .41rem auto;z-index: 2;}
.container{width: 100%;padding: 0 .25rem 1rem .25rem;}
/* 月份 */
.month{width: 100%;height: auto;overflow: hidden;padding: .4rem 0;}
.month ul{width: 100%;display: flex;justify-content: center;align-items: center;}
.month ul li{font-size: .28rem;color: #999999;text-align: center;width: 1.1rem;margin: 0 .2rem;}
.month ul li.on{font-size: .28rem;color: #ff7100;padding: .1rem;background: #fff1e5;border-radius: .25rem;}
/* 信息总览 */
.total-info{width: 100%;height: auto;overflow: hidden;}
.total-info ul{width: 100%;display: flex;justify-content: center;align-items: center;height: 1.55rem;background: linear-gradient(to right,#fd738b,#ff2c6a);border-radius: .2rem;}
.total-info ul li{width: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;position: relative;}
.total-info ul li::after{content: "";display: block;width: .01rem;height: .35rem;background: #fd849d;position: absolute;right: 0;top: 50%;transform: translateY(-50%);}
.total-info ul li p{font-size: .38rem;color: #ffffff;}
.total-info ul li p i{font-size: .28rem;margin-right: .02rem;}
.total-info ul li p span{margin-left: .05rem;color: #ffffff;}
.total-info ul li span{font-size: .28rem;color: #ffc9d7;margin-top: .1rem;}
/* 消费支出 */
.chart{width: 100%;height: auto;overflow: hidden;background: #ffffff;padding: .35rem .3rem;margin-top: .4rem;border-radius: .2rem;}
.chart .title{width: 100%;height: auto;overflow: hidden;display: flex;justify-content: space-between;align-items: center;}
.chart .title h3{font-size: .34rem;color: #333333;font-weight: bold;}
.chart .title .type{display: flex;align-items: center;}
.chart .title .type span{width: .8rem;height: .45rem;line-height: .45rem;text-align: center;font-size: .2rem;color: #bcbcbc;background: #f7f7f7;}
.chart .title .type span.on{background: #747d99;color: #ffffff;}
.chart .title .type span:first-child{border-radius: .1rem 0 0 .1rem;}
.chart .title .type span:last-child{border-radius: 0 .1rem .1rem 0;}
.chart #chart{width: 100%;height: 3.8rem;}
/* 收支明细 */
.detail{width: 100%;height: auto;overflow: hidden;background: #ffffff;padding: .35rem .3rem;margin-top: .4rem;border-radius: .2rem;}
.detail .cate{width: 100%;height: auto;overflow: hidden;display: flex;justify-content: space-between;align-items: center;padding: 0 .45rem;margin-bottom: .2rem;}
.detail .cate span{font-size: .28rem;color: #999999;height: .6rem;line-height: .6rem;text-align: center;width: 1.82rem;border-radius: .6rem;}
.detail .cate span.on{background: #fff1e5;color: #ff7100;}
.detail ul{width: 100%;display: flex;flex-direction: column;padding: 0 .1rem;}
.detail ul li{width: 100%;height: 1.1rem;display: flex;align-items: center;justify-content: space-between;position: relative;border-bottom: .01rem solid #f5f5f5;}
.detail ul li:last-child{border-bottom: 0;}
.detail ul li span{font-size: .3rem;font-weight: bold;color: #5b6275;}
.detail ul li .title{display: flex;align-items: center;}
.detail ul li .title i{width: .52rem;height: .52rem;margin-right: .2rem;}
.detail ul li .title i.edu{background: url(../images/icon-edu.png) center center no-repeat;background-size: .52rem auto;}
.detail ul li .title i.money{background: url(../images/icon-money.png) center center no-repeat;background-size: .52rem auto;}
.detail ul li .title span{font-size: .3rem;color: #5b6275;font-weight: normal;}
/* 右侧浮窗 */
.fixed-right{position: fixed;right: .4rem;bottom: 3.8rem;width: 1.25rem;height: 1.25rem;border-radius: 100%;background: linear-gradient(to bottom,#fe5e81,#fe4475);display: flex;flex-direction: column;justify-content: center;align-items: center;font-size: .2rem;color: #ffffff;box-shadow: 0 0 .3rem rgba(255,83,124,.3);z-index: 999;}
.fixed-right i{width: .52rem;height: .53rem;background: url(../images/icon-hg.png) center center no-repeat;background-size: .52rem auto;}
.fixed-right span{margin-top: .05rem;transform: scale(.95);}