.container { width: 100%; align-items: stretch; padding: 20rpx; box-sizing: border-box; } .ai-doctor-section { background: white; border-radius: 20rpx; padding: 40rpx 30rpx; display: flex; align-items: center; margin-bottom: 30rpx; box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); } .doctor-avatar { margin-right: 25rpx; flex-shrink: 0; } .avatar { width: 100rpx; height: 100rpx; border-radius: 50%; } .doctor-info { flex: 1; display: flex; flex-direction: column; } .doctor-name { font-size: 32rpx; font-weight: bold; color: #333; margin-bottom: 10rpx; } .doctor-desc { font-size: 24rpx; color: #666; } .symptom-section { background: white; border-radius: 20rpx; padding: 30rpx; margin-bottom: 30rpx; box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); } .section-title { font-size: 28rpx; font-weight: bold; color: #333; margin-bottom: 20rpx; padding-left: 10rpx; border-left: 6rpx solid #007AFF; } .input-area { position: relative; } .symptom-input { width: 100%; min-height: 200rpx; background: #f8f8f8; border-radius: 15rpx; padding: 20rpx; font-size: 28rpx; box-sizing: border-box; color: #333; } .input-tips { display: flex; justify-content: space-between; margin-top: 15rpx; } .char-count { font-size: 22rpx; color: #999; } .tip-text { font-size: 22rpx; color: #666; } .quick-symptoms { background: white; border-radius: 20rpx; padding: 30rpx; margin-bottom: 30rpx; box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); } .symptom-tags { display: flex; flex-wrap: wrap; gap: 20rpx; } .symptom-tag { background: #f0f8ff; border: 1rpx solid #007AFF; color: #007AFF; padding: 15rpx 25rpx; border-radius: 30rpx; font-size: 24rpx; transition: all 0.3s; } .symptom-tag:active { background: #007AFF; color: white; } .diagnosis-action { margin-bottom: 30rpx; } .diagnosis-btn { width: 100%; background: #007AFF; color: white; border: none; border-radius: 50rpx; padding: 30rpx 0; font-size: 32rpx; font-weight: bold; box-shadow: 0 4rpx 15rpx rgba(0, 122, 255, 0.3); } .diagnosis-btn:disabled { background: #ccc; color: #999; box-shadow: none; } .result-section { background: white; border-radius: 20rpx; padding: 30rpx; margin-bottom: 30rpx; box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); } .result-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30rpx; padding-bottom: 20rpx; border-bottom: 1rpx solid #f0f0f0; } .result-title { font-size: 32rpx; font-weight: bold; color: #333; } .result-status { display: flex; align-items: center; } .status-text { font-size: 24rpx; color: #52c41a; margin-right: 10rpx; } .status-icon { width: 32rpx; height: 32rpx; } .diagnosis-detail { margin-bottom: 30rpx; } .detail-item { margin-bottom: 25rpx; } .item-label { font-size: 26rpx; font-weight: bold; color: #333; display: block; margin-bottom: 10rpx; } .item-value { font-size: 28rpx; color: #666; line-height: 1.6; } .diagnosis-name { color: #FF6B35; font-weight: bold; } .symptom-match { display: flex; flex-wrap: wrap; gap: 15rpx; } .match-tag { background: #e6f7ff; color: #1890ff; padding: 10rpx 20rpx; border-radius: 20rpx; font-size: 22rpx; } .suggestion { background: #f6ffed; border-left: 4rpx solid #52c41a; padding: 20rpx; border-radius: 8rpx; display: block; } .recommend-medicine { margin-bottom: 30rpx; } .medicine-list { background: #f8f8f8; border-radius: 15rpx; overflow: hidden; } .medicine-item { display: flex; align-items: center; padding: 25rpx; border-bottom: 1rpx solid #f0f0f0; transition: background 0.3s; } .medicine-item:last-child { border-bottom: none; } .medicine-item:active { background: #f0f0f0; } .medicine-icon { width: 60rpx; height: 60rpx; margin-right: 20rpx; flex-shrink: 0; } .medicine-info { flex: 1; display: flex; justify-content: space-between; align-items: center; } .medicine-name { font-size: 28rpx; color: #333; font-weight: 500; } .medicine-action { font-size: 24rpx; color: #007AFF; } .action-buttons { display: flex; gap: 20rpx; margin-top: 30rpx; } .btn { flex: 1; border-radius: 50rpx; padding: 25rpx 0; font-size: 28rpx; font-weight: bold; border: none; } .btn.secondary { background: #f0f0f0; color: #666; } .btn.primary { background: #007AFF; color: white; box-shadow: 0 4rpx 15rpx rgba(0, 122, 255, 0.3); } .history-section { background: white; border-radius: 20rpx; padding: 30rpx; margin-bottom: 30rpx; box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); } .history-list { display: flex; flex-direction: column; } .history-item { display: flex; justify-content: space-between; align-items: center; padding: 25rpx 0; border-bottom: 1rpx solid #f0f0f0; } .history-item:last-child { border-bottom: none; } .history-content { flex: 1; display: flex; flex-direction: column; } .history-date { font-size: 22rpx; color: #999; margin-bottom: 8rpx; } .history-symptom { font-size: 26rpx; color: #333; margin-bottom: 8rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .history-diagnosis { font-size: 24rpx; color: #FF6B35; } .history-action { margin-left: 20rpx; } .view-btn { font-size: 24rpx; color: #007AFF; padding: 10rpx 20rpx; } .loading-section { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.95); display: flex; align-items: center; justify-content: center; z-index: 1000; } .loading-content { display: flex; flex-direction: column; align-items: center; } .loading-icon { width: 120rpx; height: 120rpx; margin-bottom: 30rpx; } .loading-text { font-size: 32rpx; font-weight: bold; color: #333; margin-bottom: 15rpx; } .loading-desc { font-size: 24rpx; color: #999; }