.container { width: 100%; height: 100%; padding: 16rpx; background-color: #f5f5f5; box-sizing: border-box; } /* 筛选栏样式 */ .filter-bar { width: 100%; display: flex; justify-content: space-between; align-items: center; background: white; border-radius: 8rpx; padding: 0 16rpx; margin-bottom: 16rpx; box-sizing: border-box; } .filter_left{ display: flex; } .filter-item { padding: 20rpx 32rpx; font-size: 32rpx; color: #333; position: relative; } .filter-item.active { color: #07c160; font-weight: bold; } .filter-item.active::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 40rpx; height: 6rpx; background-color: #07c160; border-radius: 3rpx; } .date-btn { margin-left: auto; background: #f5f5f5; color: #666; font-size: 28rpx; padding: 8rpx 16rpx; border-radius: 4rpx; line-height: 1; } /* 统计卡片样式 */ .stat-card { width: 100%; display: flex; justify-content: space-around; background: white; border-radius: 8rpx; padding: 24rpx 0; margin-bottom: 16rpx; } .stat-item { width: 100%; display: flex; align-items: center; /* justify-content: space-between; */ justify-content: space-around; text-align: center; } .stat-label { display: block; font-size: 28rpx; color: #222222; font-weight: bold; } .stat-value { font-size: 38rpx; color: #333; font-weight: bold; } .positive { color: #07c160; } .negative { color: #ff4757; } /* 新增:折线图样式(适配现有设计风格) */ .chart-container { width: 100%; background: white; border-radius: 8rpx; padding: 16rpx; margin-bottom: 16rpx; box-sizing: border-box; } .chart { width: 100%; height: 420rpx; } .chart-title { font-size: 14px; color: #333; /* text-align: center; 居中/left靠左/right靠右 */ margin-bottom: 10px; font-weight: 500; } /* 数据列表样式 */ .data-list { width: 100%; background: white; border-radius: 18rpx; padding: 20rpx; box-sizing: border-box; } .list-header { display: flex; justify-content: space-between; font-size: 26rpx; color: #666; font-weight: bold; border-right: 1rpx solid #f0f0f0; } .list-content{ margin: 1rpx; border: 1rpx solid #f0f0f0; border-right: 0rpx solid #f0f0f0; box-sizing: border-box; } .list_title1{ display: flex; align-items: center; justify-content: center; font-size: 26rpx; flex: 1; height: 100rpx; border-right: 1rpx solid #f0f0f0; } .list_title2{ display: flex; align-items: center; justify-content: center; font-size: 26rpx; flex: 1; height: 100rpx; /* border-bottom: 1rpx solid #f0f0f0; */ } .list_title3{ display: flex; align-items: center; justify-content: center; font-size: 26rpx; flex: 1; height: 100rpx; border-right: 1rpx solid #f0f0f0; border-top: 1rpx solid #f0f0f0; } .list_title4{ display: flex; align-items: center; justify-content: center; font-size: 26rpx; flex: 1; height: 100rpx; border-top: 1rpx solid #f0f0f0; border-right: 1rpx solid #f0f0f0; } .list-item { display: flex; justify-content: space-between; font-size: 28rpx; } .list-item:last-child { border-bottom: none; } .empty-tip { width: 100%; text-align: center; padding: 60rpx 0; font-size: 28rpx; color: #999; background: white; border-radius: 8rpx; margin-bottom: 16rpx; box-sizing: border-box; } /* 日期选择器遮罩 */ .picker-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: transparent; z-index: 999; }