/* ===== 首页 ===== */ .home { min-height: 100vh; background: linear-gradient(180deg, #e6f2f2 0%, #f5f7fa 30%); } /* ===== 用户栏 ===== */ .person-bar { display: flex; align-items: center; justify-content: space-between; background: #fff; margin: 20rpx 24rpx 0; padding: 16rpx 28rpx; border-radius: 12rpx; box-shadow: 0 1px 3px rgba(0,0,0,0.06); } .person-selector { display: flex; align-items: center; gap: 12rpx; } .person-icon { font-size: 32rpx; } .person-name { font-size: 30rpx; font-weight: 600; color: #2c7a7b; } .person-arrow { font-size: 20rpx; color: #a0aec0; } .person-bar-right { display: flex; align-items: center; gap: 20rpx; } .person-bar-btn { width: 48rpx; height: 48rpx; line-height: 48rpx; text-align: center; font-size: 32rpx; font-weight: 600; color: #2c7a7b; background: #e6f2f2; border-radius: 50%; } .person-bar-btn:active { background: #d0e8e8; } .person-bar-btn--manage { font-size: 26rpx; color: #718096; background: #f7fafc; } /* ===== 行内新增用户输入 ===== */ .add-person-row { display: flex; align-items: center; gap: 16rpx; margin: 16rpx 24rpx 0; padding: 16rpx 20rpx; background: #fff; border-radius: 12rpx; box-shadow: 0 1px 3px rgba(0,0,0,0.06); } .add-person-input { flex: 1; padding: 14rpx 16rpx; border: 1rpx solid #2c7a7b; border-radius: 8rpx; font-size: 28rpx; height: 52rpx; box-sizing: border-box; } .add-person-btn { flex-shrink: 0; font-size: 26rpx; font-weight: 500; padding: 12rpx 20rpx; border-radius: 8rpx; } .add-person-btn--confirm { color: #fff; background: #2c7a7b; } .add-person-btn--confirm:active { background: #1a5c5d; } .add-person-btn--cancel { color: #718096; background: #edf2f7; } .add-person-btn--cancel:active { background: #e2e8f0; } /* ===== 页面标题 ===== */ .home-header { text-align: center; padding: 50rpx 0 0; } .home-title { display: block; font-size: 40rpx; font-weight: 700; color: #2c7a7b; margin-bottom: 12rpx; } .home-desc { font-size: 26rpx; color: #718096; } .home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20rpx; padding: 40rpx 24rpx 0; } .home-card { background: #fff; border-radius: 16rpx; padding: 36rpx 24rpx; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.06); transition: transform 0.15s ease, box-shadow 0.15s ease; } .home-card:active { transform: scale(0.97); box-shadow: 0 1px 3px rgba(0,0,0,0.06); } .home-card-icon { width: 88rpx; height: 88rpx; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20rpx; } .home-card-emoji { font-size: 44rpx; line-height: 1; } .home-card-icon--entry { background: #e6f7ff; } .home-card-icon--items { background: #f0f5ff; } .home-card-icon--trend { background: #f6ffed; } .home-card-icon--details { background: #fff7e6; } .home-card-title { display: block; font-size: 28rpx; font-weight: 600; color: #2d3748; margin-bottom: 8rpx; } .home-card-desc { font-size: 22rpx; color: #a0aec0; } /* 清除数据 */ .clear-section { padding: 40rpx 24rpx; text-align: center; } .clear-btn { display: inline-flex; align-items: center; gap: 12rpx; padding: 20rpx 40rpx; border: 1rpx dashed #e53e3e; border-radius: 12rpx; background: #fff5f5; } .clear-btn:active { background: #ffe0e0; } .clear-icon { font-size: 32rpx; } .clear-text { font-size: 26rpx; color: #e53e3e; font-weight: 500; } /* ===== 无用户强制弹窗 ===== */ .modal-desc { font-size: 28rpx; color: #718096; text-align: center; margin-bottom: 24rpx; } .force-input-row { margin-bottom: 8rpx; } .force-input { width: 100%; padding: 18rpx 20rpx; border: 2rpx solid #2c7a7b; border-radius: 10rpx; font-size: 30rpx; text-align: center; box-sizing: border-box; height: 60rpx; } /* ===== 用户管理弹窗 ===== */ .person-list { margin-bottom: 20rpx; } .person-list-item { display: flex; align-items: center; justify-content: space-between; padding: 22rpx 16rpx; border-radius: 10rpx; margin-bottom: 8rpx; background: #f7fafc; border: 1rpx solid #edf2f7; } .person-list-item--active { background: #e6f2f2; border-color: #2c7a7b; } .person-list-left { display: flex; align-items: center; gap: 12rpx; } .person-list-name { font-size: 28rpx; font-weight: 500; color: #2d3748; } .person-list-item--active .person-list-name { color: #2c7a7b; font-weight: 600; } .person-list-right { display: flex; gap: 20rpx; } .person-list-action { font-size: 28rpx; padding: 4rpx; } .person-edit-row { display: flex; gap: 16rpx; align-items: center; margin-bottom: 8rpx; } .person-edit-input { flex: 1; padding: 16rpx 20rpx; border: 1rpx solid #e2e8f0; border-radius: 8rpx; background: #f7fafc; font-size: 28rpx; height: 56rpx; box-sizing: border-box; } .person-edit-btn { flex-shrink: 0; width: 130rpx; height: 56rpx; line-height: 56rpx; padding: 0; font-size: 26rpx; }