.category-container.data-v-451f4738 { max-width: 800px; margin: 0 auto; background: #f5f5f5; min-height: 100vh; } .search-bar.data-v-451f4738 { padding: 15px; background-color: #fff; } .search-input.data-v-451f4738 { background-color: #f5f5f5; border-radius: 25px; padding: 8px 15px; display: flex; align-items: center; } .search-input .iconfont.data-v-451f4738 { color: #999; margin-right: 8px; } .search-placeholder.data-v-451f4738 { color: #999; font-size: 14px; } .disease-categories.data-v-451f4738 { display: flex; flex-wrap: wrap; padding: 10px 15px; background-color: #fff; border-bottom: 1px solid #eee; } .category-item.data-v-451f4738 { padding: 8px 15px; margin: 5px; background-color: #f5f5f5; border-radius: 20px; font-size: 13px; color: #666; } .category-item.active.data-v-451f4738 { background-color: #4CAF50; color: #fff; } .disease-list.data-v-451f4738 { padding: 15px; background-color: #fff; } .disease-item.data-v-451f4738 { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #eee; } .disease-item.data-v-451f4738:last-child { border-bottom: none; } .disease-info.data-v-451f4738 { flex: 1; } .disease-name.data-v-451f4738 { font-size: 16px; font-weight: bold; color: #333; margin-bottom: 5px; } .disease-desc.data-v-451f4738 { font-size: 13px; color: #666; } .disease-risk.data-v-451f4738 { padding: 4px 8px; border-radius: 10px; font-size: 12px; margin-left: 10px; } .low-risk.data-v-451f4738 { background-color: #E8F5E9; color: #4CAF50; } .medium-risk.data-v-451f4738 { background-color: #FFF3E0; color: #FF9800; } .high-risk.data-v-451f4738 { background-color: #FFEBEE; color: #F44336; }