.user-card { background: linear-gradient(135deg, #4a90e2 0%, #63b8ff 100%); border-radius: 16px; color: white; .user-avatar { width: 48px; height: 48px; margin-bottom: 8px; } } .data-card { position: relative; border-radius: 12px; .metric-item { padding: 12px; &.abnormal { background: #fff3f3; border-radius: 8px; } } .metric-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .metric-value { font-size: 24px; font-weight: bold; .unit { font-size: 14px; color: var(--ion-color-medium); } } .reference { font-size: 12px; } } .task-card { ion-item { --padding-start: 0; --inner-padding-end: 0; } ion-progress-bar { flex: 1; margin-left: 16px; } .recommended { background: #f5f9ff; border-radius: 8px; } } .chart-container { height: 200px; padding: 16px; } .doctor-card { border-radius: 15px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); overflow: hidden; margin: 16px; max-width: 400px; } .card-content { display: flex; padding: 20px; background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%); } .doctor-avatar { margin-right: 16px; } .avatar-image { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .doctor-info { flex: 1; } .doctor-name { margin: 0 0 4px 0; font-size: 1.2rem; font-weight: bold; color: #2c3e50; } .doctor-title { margin: 0 0 8px 0; font-size: 0.9rem; color: #7f8c8d; } .doctor-specialty { margin-bottom: 8px; } .doctor-desc { margin: 8px 0 0 0; font-size: 0.85rem; color: #34495e; line-height: 1.4; } .consult-btn { --border-radius: 0 0 15px 15px; font-weight: bold; --padding-top: 12px; --padding-bottom: 12px; } // 健康数据卡片样式 .health-data-card { margin-top: 16px; .data-section { margin: 8px 0; box-shadow: none; ion-card-header { padding-bottom: 0; ion-card-title { font-size: 1.1rem; display: flex; align-items: center; ion-icon { margin-right: 8px; } } } } .loading-spinner { display: flex; justify-content: center; padding: 16px; } ion-badge { font-weight: normal; } } /* 医生卡片样式 */ .doctor-card { border-radius: 16px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); margin-bottom: 24px; .card-content { display: flex; padding: 16px; .doctor-avatar { position: relative; margin-right: 16px; .avatar-image { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 3px solid var(--ion-color-primary); } .verified-badge { position: absolute; bottom: 0; right: 0; background: white; border-radius: 50%; padding: 4px; font-size: 16px; } } .doctor-info { flex: 1; .doctor-name { margin: 0 0 4px 0; font-weight: bold; color: var(--ion-color-primary); } .doctor-title { margin: 0 0 8px 0; font-size: 14px; color: var(--ion-color-medium); } .doctor-specialty { margin-bottom: 8px; ion-chip { margin: 0 4px 4px 0; } } .doctor-desc { margin: 8px 0; font-size: 14px; color: var(--ion-color-dark); } .doctor-stats { display: flex; flex-wrap: wrap; gap: 8px; ion-badge { padding: 6px 8px; font-weight: normal; ion-icon { margin-right: 4px; } } } } } .consult-btn { margin: 0 16px 16px; --border-radius: 12px; font-weight: bold; } } /* 历史记录列表样式 */ ion-list { ion-item { --padding-start: 0; --inner-padding-end: 0; --border-radius: 12px; margin-bottom: 8px; ion-avatar { width: 48px; height: 48px; } ion-label { h2 { font-weight: 600; } p { color: var(--ion-color-medium); font-size: 14px; } } } } /* 空状态提示样式 */ .empty-state { text-align: center; .empty-content { padding: 24px 0; ion-icon { font-size: 48px; margin-bottom: 16px; } h3 { color: var(--ion-color-medium); margin: 8px 0; } p { color: var(--ion-color-medium); margin-bottom: 16px; } } }