| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113 |
- body { background-color: #F7F8FA;
- }
- .container { min-height: 100vh; background-color: #F7F8FA;
- }
- .tab-bar {
- display: flex;
- background-color: #fff;
- padding: 0 0.9375rem;
- }
- .tab-item {
- padding: 0.5625rem 0.5rem 0;
- font-size: 0.875rem;
- color: #999;
- display: flex;
- flex-direction: column;
- align-items: center;
- }
- .tab-item:first-child { padding-left: 0;
- }
- .tab-item.active { color: #FF9800; font-weight: bold;
- }
- /* 下划线正常流,自然居中 */
- .tab-line {
- width: 1rem;
- height: 0.09375rem;
- background-color: #FF9800;
- border-radius: 0.0625rem;
- margin-top: 0.25rem;
- align-self: center;
- }
- .main-scroll { flex: 1; padding: 0.5rem 0;
- }
- .month-group {
- background-color: #fff;
- border-radius: 0.5rem;
- padding: 0 0.75rem;
- margin: 0 0.9375rem 0.5rem;
- overflow: hidden;
- }
- .month-header {
- display: flex;
- align-items: center;
- padding: 0.625rem 0;
- border-bottom: 0.03125rem solid #f5f5f5;
- }
- .month-title {
- font-size: 0.9375rem;
- font-weight: bold;
- color: #333;
- margin-right: 0.375rem;
- }
- .month-summary { display: flex;
- }
- .month-sum-text { font-size: 0.6875rem; color: #999; margin-right: 0.3125rem;
- }
- .record-item {
- display: flex;
- align-items: center;
- padding: 0.75rem 0;
- border-bottom: 0.03125rem solid #f9f9f9;
- }
- .ri-icon {
- width: 2.25rem;
- height: 2.25rem;
- border-radius: 50%;
- background-color: #FFF3E0;
- display: flex;
- align-items: center;
- justify-content: center;
- margin-right: 0.625rem;
- flex-shrink: 0;
- }
- .ri-icon.ri-penalty { background-color: #FAFAFA;
- }
- .ri-icon-text {
- font-size: 0.9375rem;
- color: #FF9800;
- font-weight: bold;
- }
- .ri-icon.ri-penalty .ri-icon-text { color: #ccc;
- }
- .ri-content { flex: 1;
- }
- .ri-title-row { display: flex; align-items: center; margin-bottom: 0.1875rem;
- }
- .ri-date { font-size: 0.8125rem; color: #333; font-weight: bold; margin-right: 0.3125rem;
- }
- .ri-title { font-size: 0.8125rem; color: #333;
- }
- .ri-desc { font-size: 0.75rem; color: #999;
- }
- .ri-right {
- display: flex;
- flex-direction: column;
- align-items: flex-end;
- margin-left: 0.5rem;
- }
- .ri-amount { font-size: 0.9375rem; font-weight: bold; margin-bottom: 0.125rem;
- }
- .ri-amount.positive { color: #FF5722;
- }
- .ri-amount.negative { color: #333;
- }
- .ri-status { font-size: 0.6875rem;
- }
- .ri-status.pending { color: #FF9800;
- }
- .ri-status.credited { color: #999;
- }
- .ri-status.deducted { color: #999;
- }
|