打造一个颜值爆表的 BMI 计算器-繁依Fanyi

今天要分享的是一个超级精美的 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 }