.nutritionist-card { border-radius: 16px; overflow: hidden; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); } .card-header { position: relative; //height: 340px; } .profile-image { width: 100%; height: 100%; object-fit: cover; object-position: center; } .header-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); padding: 16px; } .name-title { color: white; font-size: 1.5rem; font-weight: bold; } .professional-title { color: var(--ion-color-light); font-size: 0.9rem; } .card-content { padding: 16px; } .specialty-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .profile-description { color: var(--ion-color-medium); font-size: 0.9rem; line-height: 1.5; margin: 12px 0; } .credentials { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 0.8rem; color: var(--ion-color-medium); margin-top: 16px; } .card-footer { padding: 16px; } .consult-button { --border-radius: 8px; font-weight: bold; } /* 添加到对应的SCSS文件中 */ .nutritionist-card { margin: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); .card-header { position: relative; //height: 200px; overflow: hidden; .profile-image { width: 100%; height: 100%; object-fit: cover; } .header-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); .name-title { color: white; font-size: 1.5rem; font-weight: bold; } .professional-title { color: var(--ion-color-light); font-size: 1rem; } } } .card-content { padding: 16px; .specialty-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .profile-section { display: flex; align-items: flex-start; margin-bottom: 16px; .profile-icon { margin-right: 12px; margin-top: 2px; } .profile-description { margin: 0; color: var(--ion-color-medium); line-height: 1.5; } } .credentials { margin-top: 20px; .credential-item { --padding-start: 0; --inner-padding-end: 0; margin-bottom: 8px; } } } .consult-history { margin: 0; padding: 0; .consult-item { --padding-start: 16px; --padding-end: 16px; --inner-padding-end: 0; .default-avatar { font-size: 40px; color: var(--ion-color-medium); } ion-label { h3 { font-weight: 500; } p { color: var(--ion-color-medium); font-size: 0.875rem; } } } } .card-footer { padding: 16px; .consult-button { --border-radius: 8px; height: 48px; font-weight: 600; } } }