.maintenance-page { padding: 0; background: #f5f5f5; min-height: 100vh; } /* 页面头部 */ .page-header { display: flex; justify-content: space-between; align-items: center; padding: 20rpx 30rpx; background: #fff; border-bottom: 1rpx solid #e8e8e8; position: sticky; top: 0; z-index: 10; } .page-title { font-size: 32rpx; font-weight: bold; color: #333; } .header-actions { display: flex; align-items: center; } /* 保养记录列表 */ .maintenance-list { padding: 20rpx 30rpx; } .loading-container { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 100rpx 0; } .loading-text { margin-top: 20rpx; font-size: 26rpx; color: #666; } .maintenance-item { display: block; background: #fff; border-radius: 12rpx; margin-bottom: 20rpx; padding: 30rpx; box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } .item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20rpx; } .maintenance-type, .item-status { display: flex; align-items: center; } .item-body { margin-bottom: 20rpx; } .field-row { display: flex; justify-content: space-between; align-items: center; padding: 16rpx 0; border-bottom: 1rpx solid #f0f0f0; } .field-row:last-child { border-bottom: none; } .field-label { font-size: 26rpx; color: #666; min-width: 120rpx; } .field-value { font-size: 26rpx; color: #333; text-align: right; flex: 1; } .notes-value { white-space: pre-wrap; word-break: break-all; } .t-swipe-cell-demo-btn { height: 100%; display: flex; align-items: center; justify-content: center; color: #fff; padding: 0 40rpx; font-size: 28rpx; } .edit-btn { background-color: #0052d9; } .delete-btn { background-color: #e34d59; } /* 弹窗表单 */ .dialog-form { padding: 20rpx 0; } .dialog-form .t-cell { margin-bottom: 20rpx; } .dialog-form .t-input, .dialog-form .t-textarea { margin-bottom: 30rpx; } /* 响应式设计 */ @media (max-width: 750rpx) { .stats-section { flex-wrap: wrap; } .stat-card { flex: 1 1 50%; margin-bottom: 20rpx; } .item-actions { justify-content: flex-start; } .item-actions .t-button { flex: 1; min-width: auto; } } .maintenance-item:active { transform: scale(0.98); } .stat-number { transition: all 0.3s ease; } /* 空状态 */ .t-empty { padding: 100rpx 0; } /* 标签样式 */ .t-tag { border-radius: 8rpx; font-weight: 500; } /* 按钮组样式优化 */ .item-actions .t-button { border-radius: 8rpx; font-size: 24rpx; height: 60rpx; line-height: 60rpx; } /* 图标颜色 */ .t-icon[name="time"] { color: #409eff; } .t-icon[name="user"] { color: #67c23a; } .t-icon[name="money-circle"] { color: #e6a23c; } .field-value .t-tag { display: inline-flex; } .t-icon[name="notes"] { color: #909399; }