打造一个颜值爆表的 BMI 计算器

繁依Fanyi

发布于 2025-02-19 09:22:18

3900

代码可运行

文章被收录于专栏：繁依Fanyi 的专栏繁依Fanyi 的专栏

运行总次数：0

代码可运行

今天要分享的是一个超级精美的 BMI 计算器实现。别看这是个简单的计算功能，但做好了可以惊艳所有人。让用户在计算 BMI 的时候，还能感受到满满的仪式感！

界面设计 - 一见倾心的视觉体验

先来看看整体布局。整个界面采用了清新的渐变背景，搭配毛玻璃效果的输入区域，让人感觉特别舒服：

.container {
  padding: 20px;
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.form {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 25px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);  /* 这个毛玻璃效果简直绝了 */
}

输入框的设计也是很讲究。看似普通的输入框，实际上暗藏玄机：

<view class="input-wrapper">
  <text class="input-icon">📏</text>
  <input 
    v-model="height" 
    type="number" 
    placeholder="请输入身高" 
    class="input-field"
    @focus="handleFocus"
    @blur="handleBlur"
  />
</view>

.input-wrapper {
  display: flex;
  align-items: center;
  background: #f8f9fa;
  border-radius: 12px;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.input-wrapper:focus-within {
  border-color: #3498db;
  box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.1);
}

当用户输入的时候，输入框会有一个超级舒服的光晕效果。这种细节真的能让用户爱不释手！

交互设计 - 让计算变得有趣

计算按钮加入了一个小彩蛋 - 当用户在输入的时候，按钮会轻轻跳动，仿佛在说"快来点我呀"：

handleFocus() {
  this.isButtonPulsing = true;
},
handleBlur() {
  this.isButtonPulsing = false;
}

.button-pulse {
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

结果展示 - 惊喜时刻

计算结果的展示绝对是点睛之笔。首先是这个圆形的 BMI 数值显示：

<view class="bmi-circle">
  <text class="bmi-value">{{ bmi.toFixed(1) }}</text>
  <text class="bmi-label">BMI</text>
</view>

.bmi-circle {
  width: 120px;
  height: 120px;
  border-radius: 60px;
  background: linear-gradient(135deg, #3498db, #2980b9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 20px auto;
  box-shadow: 0 8px 16px rgba(52, 152, 219, 0.2);
}

结果卡片还加入了一个平滑的滑入动画，简直不要太优雅：

.result-card {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease;
}

.slide-in {
  opacity: 1;
  transform: translateY(0);
}

智能建议 - 贴心小助手

根据计算结果，会给出不同的健康建议和目标体重：

if (this.bmi < 18.5) {
  this.bmiCategory = '偏瘦';
  this.healthAdvice = '建议增加营养摄入，适当锻炼。';
} else if (this.bmi >= 18.5 && this.bmi < 24.9) {
  this.bmiCategory = '正常';
  this.healthAdvice = '保持良好的饮食习惯和适量运动。';
} // ... 更多分类

不同的 BMI 分类还会用不同的颜色显示，一目了然：

.category-underweight { color: #e74c3c; }
.category-normal { color: #2ecc71; }
.category-overweight { color: #f1c40f; }
.category-obese { color: #e74c3c; }