shumengya/InfoGenie
2
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化结果

Browse Source
This commit is contained in:
树萌芽
2025-09-15 19:08:47 +08:00
parent 72084a8782
commit dcfa89e63c
357 changed files with 16156 additions and 1589 deletions
Download Patch File Download Diff File Expand all files Collapse all files

243
InfoGenie-frontend/public/60sapi/实用功能/身体健康分析/background.css Normal file
View File

@@ -0,0 +1,243 @@
/* 背景样式文件 - 独立管理背景相关样式 */
/* 主体背景 */
body {
background: linear-gradient(135deg, #e8f5e8 0%, #f0f8f0 25%, #e1f5e1 50%, #f5f9f5 75%, #e8f5e8 100%);
background-size: 400% 400%;
animation: gradientShift 15s ease infinite;
position: relative;
overflow-x: hidden;
}
/* 背景动画 */
@keyframes gradientShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* 装饰性背景元素 */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
radial-gradient(circle at 20% 80%, rgba(144, 238, 144, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(152, 251, 152, 0.1) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(173, 255, 173, 0.08) 0%, transparent 50%);
pointer-events: none;
z-index: -2;
}
/* 浮动装饰圆点 */
body::after {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
radial-gradient(2px 2px at 20px 30px, rgba(76, 175, 80, 0.3), transparent),
radial-gradient(2px 2px at 40px 70px, rgba(129, 199, 132, 0.3), transparent),
radial-gradient(1px 1px at 90px 40px, rgba(165, 214, 167, 0.3), transparent),
radial-gradient(1px 1px at 130px 80px, rgba(200, 230, 201, 0.3), transparent),
radial-gradient(2px 2px at 160px 30px, rgba(76, 175, 80, 0.2), transparent);
background-repeat: repeat;
background-size: 200px 100px;
animation: floatDots 20s linear infinite;
pointer-events: none;
z-index: -1;
}
@keyframes floatDots {
0% {
transform: translateY(0px);
}
100% {
transform: translateY(-100px);
}
}
/* 容器背景增强 */
.container {
background: rgba(255, 255, 255, 0.02);
backdrop-filter: blur(10px);
border-radius: 20px;
position: relative;
}
/* 表单区域背景 */
.form-section {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border: 1px solid rgba(144, 238, 144, 0.3);
position: relative;
overflow: hidden;
}
.form-section::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent, rgba(144, 238, 144, 0.05), transparent);
animation: shimmer 3s ease-in-out infinite;
pointer-events: none;
}
@keyframes shimmer {
0% {
transform: translateX(-100%) translateY(-100%) rotate(45deg);
}
50% {
transform: translateX(100%) translateY(100%) rotate(45deg);
}
100% {
transform: translateX(-100%) translateY(-100%) rotate(45deg);
}
}
/* 结果卡片背景 */
.basic-info-card,
.bmi-card,
.weight-card,
.metabolism-card,
.body-fat-card,
.measurements-card,
.advice-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(15px);
border: 1px solid rgba(144, 238, 144, 0.2);
position: relative;
overflow: hidden;
}
/* 卡片悬停背景效果 */
.basic-info-card:hover,
.bmi-card:hover,
.weight-card:hover,
.metabolism-card:hover,
.body-fat-card:hover,
.measurements-card:hover,
.advice-card:hover {
background: rgba(255, 255, 255, 0.98);
border-color: rgba(76, 175, 80, 0.4);
}
/* 免责声明卡片背景 */
.disclaimer-card {
background: rgba(255, 243, 205, 0.95);
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 234, 167, 0.5);
}
/* 错误区域背景 */
.error-content {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border: 1px solid rgba(220, 53, 69, 0.2);
}
/* 输入框背景 */
.form-input,
.form-select {
background: rgba(248, 255, 248, 0.9);
backdrop-filter: blur(10px);
}
.form-input:focus,
.form-select:focus {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(15px);
}
/* 信息项背景 */
.info-item {
background: rgba(248, 255, 248, 0.8);
backdrop-filter: blur(5px);
}
/* BMI分类背景 */
.bmi-category {
background: rgba(232, 245, 232, 0.9);
backdrop-filter: blur(10px);
}
/* 健康建议列表项背景 */
.health-tips li {
background: rgba(248, 255, 248, 0.8);
backdrop-filter: blur(5px);
}
/* 按钮背景增强 */
.submit-btn {
position: relative;
overflow: hidden;
}
.submit-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
.submit-btn:hover::before {
left: 100%;
}
/* 重置按钮背景 */
.reset-btn {
background: rgba(232, 245, 232, 0.9);
backdrop-filter: blur(10px);
}
.reset-btn:hover {
background: rgba(212, 237, 218, 0.95);
}
/* 响应式背景调整 */
@media (max-width: 767px) {
body::after {
background-size: 150px 75px;
animation-duration: 15s;
}
.form-section::before {
animation-duration: 2s;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
body::after {
background-size: 180px 90px;
animation-duration: 18s;
}
}
@media (min-width: 1024px) {
body::after {
background-size: 220px 110px;
animation-duration: 25s;
}
.container {
background: rgba(255, 255, 255, 0.05);
}
}

115
InfoGenie-frontend/public/60sapi/实用功能/身体健康分析/index.html Normal file
View File

@@ -0,0 +1,115 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>身体健康分析</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="background.css">
</head>
<body>
<div class="container">
<header class="header">
<h1 class="title">身体健康分析</h1>
<p class="subtitle">通过身高、体重、年龄、性别多维度分析身体健康状态</p>
</header>
<main class="main-content">
<div class="form-section">
<form id="healthForm" class="health-form">
<div class="form-group">
<label for="height" class="form-label">身高 (cm)</label>
<input type="number" id="height" name="height" class="form-input" placeholder="请输入身高" min="100" max="250" required>
</div>
<div class="form-group">
<label for="weight" class="form-label">体重 (kg)</label>
<input type="number" id="weight" name="weight" class="form-input" placeholder="请输入体重" min="30" max="200" required>
</div>
<div class="form-group">
<label for="age" class="form-label">年龄</label>
<input type="number" id="age" name="age" class="form-input" placeholder="请输入年龄" min="1" max="120" required>
</div>
<div class="form-group">
<label for="gender" class="form-label">性别</label>
<select id="gender" name="gender" class="form-select" required>
<option value="">请选择性别</option>
<option value="male">男性</option>
<option value="female">女性</option>
</select>
</div>
<button type="submit" class="submit-btn" id="analyzeBtn">
<span class="btn-text">开始分析</span>
<div class="loading-spinner" style="display: none;"></div>
</button>
</form>
</div>
<div class="result-section" id="resultSection" style="display: none;">
<div class="result-header">
<h2 class="result-title">分析结果</h2>
<button class="reset-btn" id="resetBtn">重新分析</button>
</div>
<div class="result-content">
<div class="basic-info-card">
<h3 class="card-title">基本信息</h3>
<div class="info-grid" id="basicInfo"></div>
</div>
<div class="bmi-card">
<h3 class="card-title">BMI 分析</h3>
<div class="bmi-content" id="bmiContent"></div>
</div>
<div class="weight-card">
<h3 class="card-title">体重评估</h3>
<div class="weight-content" id="weightContent"></div>
</div>
<div class="metabolism-card">
<h3 class="card-title">代谢分析</h3>
<div class="metabolism-content" id="metabolismContent"></div>
</div>
<div class="body-fat-card">
<h3 class="card-title">体脂分析</h3>
<div class="body-fat-content" id="bodyFatContent"></div>
</div>
<div class="measurements-card">
<h3 class="card-title">理想三围</h3>
<div class="measurements-content" id="measurementsContent"></div>
</div>
<div class="advice-card">
<h3 class="card-title">健康建议</h3>
<div class="advice-content" id="adviceContent"></div>
</div>
<div class="disclaimer-card">
<p class="disclaimer" id="disclaimer"></p>
</div>
</div>
</div>
<div class="error-section" id="errorSection" style="display: none;">
<div class="error-content">
<h3 class="error-title">分析失败</h3>
<p class="error-message" id="errorMessage"></p>
<button class="retry-btn" id="retryBtn">重试</button>
</div>
</div>
</main>
<footer class="footer">
<p class="footer-text">数据来源：60s API</p>
</footer>
</div>
<script src="script.js"></script>
</body>
</html>

515
InfoGenie-frontend/public/60sapi/实用功能/身体健康分析/script.js Normal file
View File

@@ -0,0 +1,515 @@
// 身体健康分析 JavaScript 功能
// DOM 元素获取
const healthForm = document.getElementById('healthForm');
const analyzeBtn = document.getElementById('analyzeBtn');
const btnText = analyzeBtn.querySelector('.btn-text');
const loadingSpinner = analyzeBtn.querySelector('.loading-spinner');
const resultSection = document.getElementById('resultSection');
const errorSection = document.getElementById('errorSection');
const resetBtn = document.getElementById('resetBtn');
const retryBtn = document.getElementById('retryBtn');
// API 配置
const API_BASE_URL = 'https://60s.api.shumengya.top/v2/health';
// 表单验证规则
const validationRules = {
height: {
min: 100,
max: 250,
message: '身高应在100-250cm之间'
},
weight: {
min: 30,
max: 200,
message: '体重应在30-200kg之间'
},
age: {
min: 1,
max: 120,
message: '年龄应在1-120岁之间'
}
};
// 初始化
document.addEventListener('DOMContentLoaded', function() {
initializeEventListeners();
setupFormValidation();
});
// 事件监听器初始化
function initializeEventListeners() {
healthForm.addEventListener('submit', handleFormSubmit);
resetBtn.addEventListener('click', resetForm);
retryBtn.addEventListener('click', retryAnalysis);
// 输入框实时验证
const inputs = healthForm.querySelectorAll('input, select');
inputs.forEach(input => {
input.addEventListener('blur', validateField);
input.addEventListener('input', clearFieldError);
});
}
// 表单验证设置
function setupFormValidation() {
const inputs = healthForm.querySelectorAll('input[type="number"]');
inputs.forEach(input => {
input.addEventListener('input', function() {
// 移除非数字字符
this.value = this.value.replace(/[^0-9.]/g, '');
// 防止多个小数点
const parts = this.value.split('.');
if (parts.length > 2) {
this.value = parts[0] + '.' + parts.slice(1).join('');
}
});
});
}
// 表单提交处理
async function handleFormSubmit(event) {
event.preventDefault();
if (!validateForm()) {
return;
}
const formData = getFormData();
try {
setLoadingState(true);
hideAllSections();
const result = await callHealthAPI(formData);
displayResults(result);
} catch (error) {
console.error('分析失败:', error);
displayError(error.message || '分析失败，请稍后重试');
} finally {
setLoadingState(false);
}
}
// 获取表单数据
function getFormData() {
return {
height: parseInt(document.getElementById('height').value),
weight: parseInt(document.getElementById('weight').value),
age: parseInt(document.getElementById('age').value),
gender: document.getElementById('gender').value
};
}
// 表单验证
function validateForm() {
let isValid = true;
const inputs = healthForm.querySelectorAll('input, select');
inputs.forEach(input => {
if (!validateField({ target: input })) {
isValid = false;
}
});
return isValid;
}
// 单个字段验证
function validateField(event) {
const field = event.target;
const value = field.value.trim();
const fieldName = field.name;
// 清除之前的错误状态
clearFieldError(event);
// 必填验证
if (!value) {
showFieldError(field, '此字段为必填项');
return false;
}
// 数值范围验证
if (validationRules[fieldName]) {
const numValue = parseFloat(value);
const rule = validationRules[fieldName];
if (numValue < rule.min || numValue > rule.max) {
showFieldError(field, rule.message);
return false;
}
}
return true;
}
// 显示字段错误
function showFieldError(field, message) {
field.classList.add('error');
// 移除已存在的错误消息
const existingError = field.parentNode.querySelector('.error-message');
if (existingError) {
existingError.remove();
}
// 添加错误消息
const errorDiv = document.createElement('div');
errorDiv.className = 'error-message';
errorDiv.textContent = message;
errorDiv.style.color = '#dc3545';
errorDiv.style.fontSize = '0.875rem';
errorDiv.style.marginTop = '5px';
field.parentNode.appendChild(errorDiv);
}
// 清除字段错误
function clearFieldError(event) {
const field = event.target;
field.classList.remove('error');
const errorMessage = field.parentNode.querySelector('.error-message');
if (errorMessage) {
errorMessage.remove();
}
}
// 调用健康分析API
async function callHealthAPI(data) {
const params = new URLSearchParams({
height: data.height,
weight: data.weight,
age: data.age,
gender: data.gender
});
const response = await fetch(`${API_BASE_URL}?${params}`);
if (!response.ok) {
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
}
const result = await response.json();
if (result.code !== 200) {
throw new Error(result.message || '分析失败');
}
return result.data;
}
// 显示分析结果
function displayResults(data) {
// 基本信息
displayBasicInfo(data.basic_info);
// BMI 分析
displayBMIInfo(data.bmi);
// 体重评估
displayWeightAssessment(data.weight_assessment);
// 代谢分析
displayMetabolism(data.metabolism);
// 体脂分析
displayBodyFat(data.body_fat);
// 理想三围
displayMeasurements(data.ideal_measurements);
// 健康建议
displayHealthAdvice(data.health_advice);
// 免责声明
displayDisclaimer(data.disclaimer);
// 显示结果区域
resultSection.style.display = 'block';
resultSection.scrollIntoView({ behavior: 'smooth' });
}
// 显示基本信息
function displayBasicInfo(basicInfo) {
const container = document.getElementById('basicInfo');
container.innerHTML = '';
const infoItems = [
{ label: basicInfo.height_desc, value: basicInfo.height },
{ label: basicInfo.weight_desc, value: basicInfo.weight },
{ label: basicInfo.age_desc, value: basicInfo.age },
{ label: basicInfo.gender_desc, value: basicInfo.gender }
];
infoItems.forEach(item => {
const itemDiv = createInfoItem(item.label, item.value);
container.appendChild(itemDiv);
});
}
// 显示BMI信息
function displayBMIInfo(bmiData) {
const container = document.getElementById('bmiContent');
container.innerHTML = `
<div class="bmi-value">${bmiData.value}</div>
<div class="bmi-category">${bmiData.category}</div>
<div class="info-grid">
${createInfoItem(bmiData.evaluation_desc, bmiData.evaluation).outerHTML}
${createInfoItem(bmiData.risk_desc, bmiData.risk).outerHTML}
</div>
`;
}
// 显示体重评估
function displayWeightAssessment(weightData) {
const container = document.getElementById('weightContent');
container.innerHTML = '';
const items = [
{ label: weightData.ideal_weight_range_desc, value: weightData.ideal_weight_range },
{ label: weightData.standard_weight_desc, value: weightData.standard_weight },
{ label: weightData.status_desc, value: weightData.status },
{ label: weightData.adjustment_desc, value: weightData.adjustment }
];
const grid = document.createElement('div');
grid.className = 'info-grid';
items.forEach(item => {
const itemDiv = createInfoItem(item.label, item.value);
grid.appendChild(itemDiv);
});
container.appendChild(grid);
}
// 显示代谢分析
function displayMetabolism(metabolismData) {
const container = document.getElementById('metabolismContent');
container.innerHTML = '';
const items = [
{ label: metabolismData.bmr_desc, value: metabolismData.bmr },
{ label: metabolismData.tdee_desc, value: metabolismData.tdee },
{ label: metabolismData.recommended_calories_desc, value: metabolismData.recommended_calories },
{ label: metabolismData.weight_loss_calories_desc, value: metabolismData.weight_loss_calories },
{ label: metabolismData.weight_gain_calories_desc, value: metabolismData.weight_gain_calories }
];
const grid = document.createElement('div');
grid.className = 'info-grid';
items.forEach(item => {
const itemDiv = createInfoItem(item.label, item.value);
grid.appendChild(itemDiv);
});
container.appendChild(grid);
}
// 显示体脂分析
function displayBodyFat(bodyFatData) {
const container = document.getElementById('bodyFatContent');
container.innerHTML = '';
const items = [
{ label: bodyFatData.percentage_desc, value: bodyFatData.percentage },
{ label: bodyFatData.category_desc, value: bodyFatData.category },
{ label: bodyFatData.fat_weight_desc, value: bodyFatData.fat_weight },
{ label: bodyFatData.lean_weight_desc, value: bodyFatData.lean_weight }
];
const grid = document.createElement('div');
grid.className = 'info-grid';
items.forEach(item => {
const itemDiv = createInfoItem(item.label, item.value);
grid.appendChild(itemDiv);
});
container.appendChild(grid);
}
// 显示理想三围
function displayMeasurements(measurementsData) {
const container = document.getElementById('measurementsContent');
container.innerHTML = '';
const items = [
{ label: measurementsData.chest_desc, value: measurementsData.chest },
{ label: measurementsData.waist_desc, value: measurementsData.waist },
{ label: measurementsData.hip_desc, value: measurementsData.hip }
];
const grid = document.createElement('div');
grid.className = 'info-grid';
items.forEach(item => {
const itemDiv = createInfoItem(item.label, item.value);
grid.appendChild(itemDiv);
});
// 添加说明
const note = document.createElement('p');
note.style.marginTop = '15px';
note.style.fontSize = '0.9rem';
note.style.color = '#4a7c59';
note.style.textAlign = 'center';
note.textContent = measurementsData.note;
container.appendChild(grid);
container.appendChild(note);
}
// 显示健康建议
function displayHealthAdvice(adviceData) {
const container = document.getElementById('adviceContent');
container.innerHTML = '';
// 饮水量建议
const waterDiv = createAdviceSection(adviceData.daily_water_intake_desc, adviceData.daily_water_intake);
container.appendChild(waterDiv);
// 运动建议
const exerciseDiv = createAdviceSection(adviceData.exercise_recommendation_desc, adviceData.exercise_recommendation);
container.appendChild(exerciseDiv);
// 营养建议
const nutritionDiv = createAdviceSection(adviceData.nutrition_advice_desc, adviceData.nutrition_advice);
container.appendChild(nutritionDiv);
// 健康提示
const tipsDiv = document.createElement('div');
tipsDiv.innerHTML = `
<h4 style="color: #2d5a3d; margin-bottom: 10px;">${adviceData.health_tips_desc}</h4>
<ul class="health-tips"></ul>
`;
const tipsList = tipsDiv.querySelector('.health-tips');
adviceData.health_tips.forEach(tip => {
const li = document.createElement('li');
li.textContent = tip;
tipsList.appendChild(li);
});
container.appendChild(tipsDiv);
}
// 创建建议区块
function createAdviceSection(title, content) {
const div = document.createElement('div');
div.style.marginBottom = '20px';
div.innerHTML = `
<h4 style="color: #2d5a3d; margin-bottom: 8px;">${title}</h4>
<p style="background: #f8fff8; padding: 12px; border-radius: 8px; border-left: 4px solid #4caf50; line-height: 1.6;">${content}</p>
`;
return div;
}
// 显示免责声明
function displayDisclaimer(disclaimer) {
const container = document.getElementById('disclaimer');
container.textContent = disclaimer;
}
// 创建信息项
function createInfoItem(label, value) {
const div = document.createElement('div');
div.className = 'info-item';
div.innerHTML = `
<div class="info-label">${label}</div>
<div class="info-value">${value}</div>
`;
return div;
}
// 显示错误信息
function displayError(message) {
const errorMessage = document.getElementById('errorMessage');
errorMessage.textContent = message;
errorSection.style.display = 'block';
errorSection.scrollIntoView({ behavior: 'smooth' });
}
// 设置加载状态
function setLoadingState(isLoading) {
if (isLoading) {
analyzeBtn.disabled = true;
btnText.style.display = 'none';
loadingSpinner.style.display = 'block';
} else {
analyzeBtn.disabled = false;
btnText.style.display = 'block';
loadingSpinner.style.display = 'none';
}
}
// 隐藏所有结果区域
function hideAllSections() {
resultSection.style.display = 'none';
errorSection.style.display = 'none';
}
// 重置表单
function resetForm() {
healthForm.reset();
hideAllSections();
// 清除所有错误状态
const errorInputs = healthForm.querySelectorAll('.error');
errorInputs.forEach(input => {
input.classList.remove('error');
});
const errorMessages = healthForm.querySelectorAll('.error-message');
errorMessages.forEach(msg => msg.remove());
// 滚动到表单顶部
healthForm.scrollIntoView({ behavior: 'smooth' });
}
// 重试分析
function retryAnalysis() {
hideAllSections();
healthForm.scrollIntoView({ behavior: 'smooth' });
}
// 工具函数：防抖
function debounce(func, wait) {
let timeout;
return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout);
func(...args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
}
// 添加CSS样式到错误输入框
const style = document.createElement('style');
style.textContent = `
.form-input.error,
.form-select.error {
border-color: #dc3545 !important;
box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1) !important;
}
`;
document.head.appendChild(style);
// 页面可见性变化处理（用户切换标签页时暂停动画等）
document.addEventListener('visibilitychange', function() {
if (document.hidden) {
// 页面隐藏时的处理
document.body.style.animationPlayState = 'paused';
} else {
// 页面显示时的处理
document.body.style.animationPlayState = 'running';
}
});

697
InfoGenie-frontend/public/60sapi/实用功能/身体健康分析/styles.css Normal file
View File

@@ -0,0 +1,697 @@
/* 基础样式重置 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
line-height: 1.6;
color: #2d5a3d;
min-height: 100vh;
}
/* 容器布局 */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* 头部样式 */
.header {
text-align: center;
margin-bottom: 30px;
padding: 20px 0;
}
.title {
font-size: 2.5rem;
font-weight: 700;
color: #1a4d2e;
margin-bottom: 10px;
text-shadow: 0 2px 4px rgba(26, 77, 46, 0.1);
}
.subtitle {
font-size: 1.1rem;
color: #4a7c59;
font-weight: 400;
}
/* 主内容区域 */
.main-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 30px;
}
/* 表单区域 */
.form-section {
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
padding: 30px;
box-shadow: 0 8px 32px rgba(26, 77, 46, 0.1);
border: 1px solid rgba(144, 238, 144, 0.3);
}
.health-form {
display: grid;
gap: 20px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.form-label {
font-weight: 600;
color: #2d5a3d;
font-size: 1rem;
}
.form-input,
.form-select {
padding: 15px 20px;
border: 2px solid #a8e6a3;
border-radius: 12px;
font-size: 1rem;
background: #f8fff8;
color: #2d5a3d;
transition: all 0.3s ease;
}
.form-input:focus,
.form-select:focus {
outline: none;
border-color: #4caf50;
box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
background: #ffffff;
}
.form-input::placeholder {
color: #81c784;
}
/* 提交按钮 */
.submit-btn {
background: linear-gradient(135deg, #4caf50, #66bb6a);
color: white;
border: none;
padding: 18px 30px;
border-radius: 12px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
margin-top: 10px;
}
.submit-btn:hover {
background: linear-gradient(135deg, #45a049, #5cb85c);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(76, 175, 80, 0.3);
}
.submit-btn:active {
transform: translateY(0);
}
.submit-btn:disabled {
background: #c8e6c9;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
/* 加载动画 */
.loading-spinner {
width: 20px;
height: 20px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top: 2px solid white;
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* 结果区域 */
.result-section {
animation: fadeInUp 0.6s ease-out;
}
.result-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
flex-wrap: wrap;
gap: 15px;
}
.result-title {
font-size: 2rem;
color: #1a4d2e;
font-weight: 700;
}
.reset-btn {
background: #e8f5e8;
color: #2d5a3d;
border: 2px solid #a8e6a3;
padding: 10px 20px;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.reset-btn:hover {
background: #d4edda;
border-color: #4caf50;
}
/* 结果卡片 */
.result-content {
display: grid;
gap: 20px;
}
.basic-info-card,
.bmi-card,
.weight-card,
.metabolism-card,
.body-fat-card,
.measurements-card,
.advice-card,
.disclaimer-card {
background: rgba(255, 255, 255, 0.95);
border-radius: 16px;
padding: 25px;
box-shadow: 0 6px 20px rgba(26, 77, 46, 0.08);
border: 1px solid rgba(144, 238, 144, 0.2);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.basic-info-card:hover,
.bmi-card:hover,
.weight-card:hover,
.metabolism-card:hover,
.body-fat-card:hover,
.measurements-card:hover,
.advice-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(26, 77, 46, 0.12);
}
.card-title {
font-size: 1.4rem;
color: #1a4d2e;
font-weight: 700;
margin-bottom: 15px;
border-bottom: 2px solid #e8f5e8;
padding-bottom: 10px;
}
/* 信息网格 */
.info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
}
.info-item {
background: #f8fff8;
padding: 15px;
border-radius: 10px;
border-left: 4px solid #4caf50;
}
.info-label {
font-size: 0.9rem;
color: #4a7c59;
font-weight: 600;
margin-bottom: 5px;
}
.info-value {
font-size: 1.2rem;
color: #2d5a3d;
font-weight: 700;
}
/* BMI 特殊样式 */
.bmi-value {
font-size: 2.5rem;
font-weight: 800;
color: #4caf50;
text-align: center;
margin: 15px 0;
}
.bmi-category {
text-align: center;
font-size: 1.3rem;
font-weight: 600;
color: #2d5a3d;
background: #e8f5e8;
padding: 10px;
border-radius: 8px;
margin: 10px 0;
}
/* 健康建议列表 */
.health-tips {
list-style: none;
padding: 0;
}
.health-tips li {
background: #f8fff8;
margin: 10px 0;
padding: 12px 15px;
border-radius: 8px;
border-left: 4px solid #81c784;
position: relative;
}
.health-tips li::before {
content: "✓";
color: #4caf50;
font-weight: bold;
margin-right: 10px;
}
/* 免责声明 */
.disclaimer {
background: #fff3cd;
border: 1px solid #ffeaa7;
color: #856404;
padding: 15px;
border-radius: 8px;
font-size: 0.95rem;
line-height: 1.5;
text-align: center;
}
/* 错误区域 */
.error-section {
text-align: center;
padding: 40px 20px;
}
.error-content {
background: rgba(255, 255, 255, 0.95);
border-radius: 16px;
padding: 30px;
box-shadow: 0 6px 20px rgba(220, 53, 69, 0.1);
border: 1px solid rgba(220, 53, 69, 0.2);
max-width: 400px;
margin: 0 auto;
}
.error-title {
color: #dc3545;
font-size: 1.5rem;
margin-bottom: 15px;
}
.error-message {
color: #6c757d;
margin-bottom: 20px;
}
.retry-btn {
background: #dc3545;
color: white;
border: none;
padding: 12px 24px;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: background 0.3s ease;
}
.retry-btn:hover {
background: #c82333;
}
/* 底部 */
.footer {
text-align: center;
padding: 20px 0;
margin-top: 30px;
border-top: 1px solid rgba(144, 238, 144, 0.3);
}
.footer-text {
color: #4a7c59;
font-size: 0.9rem;
}
/* 动画效果 */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 平板端适配 (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
.container {
padding: 30px;
}
.title {
font-size: 2.8rem;
}
.form-section {
padding: 35px;
}
.health-form {
grid-template-columns: repeat(2, 1fr);
gap: 25px;
}
.form-group:last-child {
grid-column: 1 / -1;
}
.result-content {
grid-template-columns: repeat(2, 1fr);
}
.advice-card,
.disclaimer-card {
grid-column: 1 / -1;
}
}
/* 电脑端适配 (1024px+) */
@media (min-width: 1024px) {
.container {
padding: 40px;
max-width: 1400px;
}
.title {
font-size: 3.2rem;
}
.main-content {
flex-direction: row;
gap: 40px;
align-items: flex-start;
}
.form-section {
flex: 0 0 380px;
position: sticky;
top: 20px;
max-height: calc(100vh - 40px);
overflow-y: auto;
}
.result-section,
.error-section {
flex: 1;
min-width: 0;
}
/* 桌面端结果区域重新设计 - 使用更清晰的布局 */
.result-content {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
grid-auto-rows: min-content;
}
/* 基本信息卡片 - 占满第一行 */
.basic-info-card {
grid-column: 1 / -1;
}
/* 第二行：BMI、体重评估、代谢分析 */
.bmi-card,
.weight-card,
.metabolism-card {
grid-column: span 1;
}
/* 第三行：体脂分析和理想三围 */
.body-fat-card {
grid-column: span 2;
}
.measurements-card {
grid-column: span 1;
}
/* 第四行：健康建议 - 占满整行 */
.advice-card {
grid-column: 1 / -1;
}
/* 第五行：免责声明 - 占满整行 */
.disclaimer-card {
grid-column: 1 / -1;
}
/* 基本信息网格优化 */
.basic-info-card .info-grid {
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
/* BMI卡片特殊布局 */
.bmi-card {
display: flex;
flex-direction: column;
min-height: 280px;
}
.bmi-card .bmi-content {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.bmi-value {
font-size: 3rem;
margin: 20px 0;
}
/* 体重评估卡片布局优化 */
.weight-card {
display: flex;
flex-direction: column;
min-height: 280px;
}
.weight-card .weight-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.weight-card .info-grid {
grid-template-columns: 1fr;
gap: 12px;
}
/* 代谢分析卡片布局优化 */
.metabolism-card {
display: flex;
flex-direction: column;
min-height: 280px;
}
.metabolism-card .metabolism-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.metabolism-card .info-grid {
grid-template-columns: 1fr;
gap: 12px;
}
/* 体脂分析卡片网格优化 */
.body-fat-card .info-grid {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
/* 理想三围卡片网格优化 */
.measurements-card {
display: flex;
flex-direction: column;
min-height: 200px;
}
.measurements-card .measurements-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.measurements-card .info-grid {
grid-template-columns: 1fr;
gap: 15px;
}
/* 健康建议卡片布局优化 */
.advice-card {
padding: 30px;
}
.advice-card .advice-content {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
margin-bottom: 25px;
}
.advice-card .health-tips {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
list-style: none;
padding: 0;
}
/* 表单区域优化 */
.health-form {
display: grid;
gap: 25px;
}
.form-group {
margin-bottom: 0;
}
.submit-btn {
margin-top: 20px;
padding: 20px 30px;
font-size: 1.2rem;
}
}
/* 手机端适配 (最高优先级) */
@media (max-width: 767px) {
.container {
padding: 15px;
}
.header {
margin-bottom: 20px;
padding: 15px 0;
}
.title {
font-size: 2rem;
}
.subtitle {
font-size: 1rem;
}
.form-section {
padding: 20px;
border-radius: 16px;
}
.form-input,
.form-select {
padding: 12px 16px;
font-size: 16px; /* 防止iOS缩放 */
}
.submit-btn {
padding: 16px 24px;
font-size: 1rem;
}
.result-header {
flex-direction: column;
align-items: stretch;
gap: 15px;
}
.result-title {
font-size: 1.6rem;
text-align: center;
}
.reset-btn {
align-self: center;
padding: 12px 24px;
}
.basic-info-card,
.bmi-card,
.weight-card,
.metabolism-card,
.body-fat-card,
.measurements-card,
.advice-card,
.disclaimer-card {
padding: 20px;
border-radius: 12px;
}
.card-title {
font-size: 1.2rem;
}
.info-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.bmi-value {
font-size: 2rem;
}
.bmi-category {
font-size: 1.1rem;
}
.health-tips li {
padding: 10px 12px;
font-size: 0.95rem;
}
.error-content {
padding: 25px 20px;
}
}

93
InfoGenie-frontend/public/60sapi/实用功能/身体健康分析/返回接口.json Normal file
View File

@@ -0,0 +1,93 @@
{
"code": 200,
"message": "获取成功。数据来自官方/权威源头，以确保稳定与实时。开源地址 https://github.com/vikiboss/60s，反馈群 595941841",
"data": {
"basic_info": {
"height": "176cm",
"height_desc": "身高",
"weight": "60kg",
"weight_desc": "体重",
"gender": "男性",
"gender_desc": "性别",
"age": "24岁",
"age_desc": "年龄"
},
"bmi": {
"value": 19.37,
"value_desc": "BMI 值",
"category": "正常体重",
"category_desc": "BMI 分类",
"evaluation": "体重正常，保持良好",
"evaluation_desc": "BMI 评价",
"risk": "健康风险较低",
"risk_desc": "健康风险"
},
"weight_assessment": {
"ideal_weight_range": "57.3-74.3kg",
"ideal_weight_range_desc": "理想体重范围",
"standard_weight": "71kg",
"standard_weight_desc": "标准体重",
"status": "体重正常",
"status_desc": "体重状态",
"adjustment": "保持当前体重",
"adjustment_desc": "调整建议"
},
"metabolism": {
"bmr": "1601 卡路里/天",
"bmr_desc": "基础代谢率",
"tdee": "2561 卡路里/天",
"tdee_desc": "每日总消耗",
"recommended_calories": "2561 卡路里/天",
"recommended_calories_desc": "推荐卡路里摄入",
"weight_loss_calories": "2061 卡路里/天",
"weight_loss_calories_desc": "减重卡路里",
"weight_gain_calories": "2861 卡路里/天",
"weight_gain_calories_desc": "增重卡路里"
},
"body_surface_area": {
"value": "1.74m²",
"value_desc": "体表面积",
"formula": "Du Bois 公式",
"formula_desc": "计算公式"
},
"body_fat": {
"percentage": "12.6%",
"percentage_desc": "体脂率",
"category": "正常",
"category_desc": "体脂分类",
"fat_weight": "7.6kg",
"fat_weight_desc": "脂肪重量",
"lean_weight": "52.4kg",
"lean_weight_desc": "瘦体重"
},
"health_advice": {
"daily_water_intake": "2000ml (约 8 杯水)，运动时需额外补充 500-1000ml",
"daily_water_intake_desc": "每日饮水量",
"exercise_recommendation": "继续保持运动习惯，有氧运动和力量训练相结合效果更佳。年轻人可选择多样化的运动方式，建议每周运动 3-5 次",
"exercise_recommendation_desc": "运动建议",
"nutrition_advice": "保持均衡饮食，三大营养素合理搭配，定时定量进餐。年轻人新陈代谢较快，可适当增加能量摄入，男性可适当增加蛋白质摄入",
"nutrition_advice_desc": "营养建议",
"health_tips": [
"保持充足睡眠，成年人建议每天 7-9 小时",
"定期体检有助于早期发现健康问题",
"保持良好心态，适当释放压力",
"年轻人要注意作息规律，合理安排工作与休息",
"长时间用眼后适当休息，保护视力",
"培养兴趣爱好，保持积极的生活态度",
"多饮水，成年人每天 1500-2000ml 为宜"
],
"health_tips_desc": "健康提示"
},
"ideal_measurements": {
"chest": "84cm",
"chest_desc": "胸围",
"waist": "74cm",
"waist_desc": "腰围",
"hip": "83cm",
"hip_desc": "臀围",
"note": "男性理想三围参考标准",
"note_desc": "说明"
},
"disclaimer": "结果基于通用公式和统计数据，仅供参考，不能替代专业医疗建议。如有健康问题，请咨询医生。"
}
}