.state-page { position: relative; z-index: 2; } .state-bg { position: absolute; left: 0; width: 100vw; top: 0; z-index: 1; display: block; } .state-page .title { font-size: 38rpx; color: rgba(255, 255, 255, 1); text-align: center; } .state-page .menu{ width: 702rpx; margin: 22rpx auto 42rpx auto; color:rgba(255,255,255,1); opacity:0.8; font-size: 15px; } .state-page .menu .menu-item{ margin-right: 52rpx; /* transition: all 0.3s ease; */ } .state-page .menu .meni-item-active{ color:rgba(255,255,255,1); font-size: 17px; border-bottom: 1px solid rgba(255,255,255,1); } .state-page .picker-contain{ width: 702rpx; margin: 0 auto; background: white; padding: 46rpx; box-sizing: border-box; } .state-page .time-zero { display: flex; justify-content: space-around; } .state-page .time-zero .time { display: flex; flex-direction: column; text-align: center; } .state-page .time-zero .time .time-title { font-size: 12px; color:rgba(153,153,153,1); margin-bottom: 10rpx; } .state-page .time-zero .time .time-body{ background:rgba(240,240,240,1); border-radius:4rpx; padding: 6rpx 0; font-size: 12px; color:rgba(51,51,51,1); display: flex; align-items: center; } .state-page .time-zero .time text{ padding: 0 36rpx; } .state-page .time-zero .time .time-body image{ width: 30rpx; height: 30rpx; padding: 0 6rpx; border-left:1px solid rgba(191,191,191,1); } .state-page .picker-footer{ display: flex; text-align: center; flex-direction: column; margin-top: 48rpx; } .state-page .picker-footer .picker-footer-key{ font-size: 14px; color:rgba(153,153,153,1); } .state-page .picker-footer .picker-footer-value{ font-size: 16px; color:rgba(51,51,51,1); margin-top: 12rpx; } .state-page .stat-body{ width: 702rpx; margin: 30rpx auto; background: white; } .state-page .stat-body > view{ height: 88rpx; line-height: 88rpx; font-size: 15px; padding: 0 40rpx; color:rgba(51,51,51,1); } .state-page .stat-body > view text{ margin-left: 8rpx; } .state-page .stat-body > view:nth-child(1) { background: #ffffff; } .state-page .stat-body > view:nth-child(2) { background: #E1F7E1; } .state-page .stat-body > view:nth-child(2) text { color: #2DB62D; } .state-page .stat-body > view:nth-child(3) { background:#D5E8F3; } .state-page .stat-body > view:nth-child(3) text { color: #449ACD; } .state-page .stat-body > view:nth-child(4) { background: #FAEBD5; } .state-page .stat-body > view:nth-child(4) text { color: #F38456; }