|
|
@@ -1,538 +1,528 @@
|
|
|
<template>
|
|
|
- <div class="page-current">
|
|
|
- <el-button type="primary" @click="onBack">返回</el-button>
|
|
|
+ <div class="page-current">
|
|
|
+ <el-button type="primary" @click="onBack">返回</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="question-main">
|
|
|
+ <!-- 顶部信息区(完全还原图片样式) -->
|
|
|
+ <div class="info-card info-card-bee">
|
|
|
+ <div class="info-title">
|
|
|
+ <span class="bee-title">{{ title }}</span>
|
|
|
+ </div>
|
|
|
+ <el-row :gutter="20" align="middle" class="info-row">
|
|
|
+ <el-col :span="2"><span>性别:</span>{{ form.gender }}</el-col>
|
|
|
+ <el-col :span="2"><span>年龄:</span>{{ form.age }}</el-col>
|
|
|
+ <el-col :span="2"
|
|
|
+ ><span class="required">*</span><span>BMI:{{ form.bmi }}</span></el-col
|
|
|
+ >
|
|
|
+ <el-col :span="4"
|
|
|
+ ><span class="required">*</span><span>身高:</span> <el-input v-model="form.height" style="width: 120px" /> <span>cm</span></el-col
|
|
|
+ >
|
|
|
+ <el-col :span="4"
|
|
|
+ ><span class="required">*</span><span>体力活动:</span>
|
|
|
+ <el-select v-model="form.activity" style="width: 150px">
|
|
|
+ <el-option v-for="dict in physical_activity" :key="dict.value" :label="dict.label" :value="dict.value" />
|
|
|
+ </el-select>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4" v-if="title === 'BEE'"
|
|
|
+ ><span class="required">*</span><span>应激状态:</span>
|
|
|
+ <el-select v-model="form.stressType" style="width: 150px">
|
|
|
+ <el-option v-for="dict in stress_level" :key="dict.value" :label="dict.label" :value="dict.value" />
|
|
|
+ </el-select>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="3" v-if="title === '烧伤公式'"
|
|
|
+ ><span>烧伤面积:</span> <el-input v-model="form.burnArea" style="width: 120px" /> <span>%</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="3"><span>体重:</span> <el-input v-model="form.weight" style="width: 120px" /> <span>kg</span> </el-col>
|
|
|
+ <el-col :span="3"><span>上臂围:</span> <el-input v-model="form.armCircumference" style="width: 120px" /> <span>cm</span> </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row style="margin-top: 10px">
|
|
|
+ <el-col :span="3"><span>小腿围:</span> <el-input v-model="form.calfCircumference" style="width: 120px" /> <span>cm</span> </el-col>
|
|
|
+ <el-col :span="20" style="text-align: right">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ class="recalc-btn"
|
|
|
+ @click="() => recalculate(form.gender, form.age, form.height, form.weight, form.activity, form.stressType)"
|
|
|
+ >重新计算</el-button
|
|
|
+ >
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
</div>
|
|
|
- <div class="question-main">
|
|
|
- <!-- 顶部信息区(完全还原图片样式) -->
|
|
|
- <div class="info-card info-card-bee">
|
|
|
- <div class="info-title">
|
|
|
- <span class="bee-title">{{ title }}</span>
|
|
|
- </div>
|
|
|
- <el-row :gutter="20" align="middle" class="info-row">
|
|
|
- <el-col :span="2"><span>性别:</span>{{form.gender}}</el-col>
|
|
|
- <el-col :span="2"><span>年龄:</span>{{form.age}}</el-col>
|
|
|
- <el-col :span="2"><span class="required">*</span><span>BMI:{{ form.bmi }}</span></el-col>
|
|
|
- <el-col :span="4"><span class="required">*</span><span>身高:</span>
|
|
|
- <el-input v-model="form.height" style="width: 120px;" /> <span>cm</span></el-col>
|
|
|
- <el-col :span="4"><span class="required">*</span><span>体力活动:</span>
|
|
|
- <el-select v-model="form.activity" style="width: 150px;">
|
|
|
- <el-option v-for="dict in physical_activity" :key="dict.value" :label="dict.label" :value="dict.value" />
|
|
|
- </el-select>
|
|
|
- </el-col>
|
|
|
- <el-col :span="4" v-if="title === 'BEE'"><span class="required">*</span><span>应激状态:</span>
|
|
|
- <el-select v-model="form.stressType" style="width: 150px;">
|
|
|
- <el-option v-for="dict in stress_level" :key="dict.value" :label="dict.label" :value="dict.value" />
|
|
|
- </el-select>
|
|
|
- </el-col>
|
|
|
- <el-col :span="3" v-if="title === '烧伤公式'"><span>烧伤面积:</span>
|
|
|
- <el-input v-model="form.burnArea" style="width: 120px;" /> <span>%</span>
|
|
|
- </el-col>
|
|
|
- <el-col :span="3"><span>体重:</span>
|
|
|
- <el-input v-model="form.weight" style="width: 120px;" /> <span>kg</span>
|
|
|
- </el-col>
|
|
|
- <el-col :span="3"><span>上臂围:</span>
|
|
|
- <el-input v-model="form.armCircumference" style="width: 120px;" /> <span>cm</span>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row style="margin-top: 10px;">
|
|
|
- <el-col :span="3"><span>小腿围:</span>
|
|
|
- <el-input v-model="form.calfCircumference" style="width: 120px;" /> <span>cm</span>
|
|
|
- </el-col>
|
|
|
- <el-col :span="20" style="text-align:right;">
|
|
|
- <el-button type="primary" class="recalc-btn" @click="()=>recalculate(form.gender, form.age, form.height, form.weight, form.activity, form.stressType)">重新计算</el-button>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
+ <!-- 警示提示区 -->
|
|
|
+ <div class="tips-box">注:常量元素、微量元素、维生素、氨基酸、脂肪酸、膳食纤维默认为DRIS数据,如有必要请自行修改。</div>
|
|
|
+ <div v-show="showFlag == 'true'">
|
|
|
+ <el-form ref="NutritionSettingFormRef" :model="form" :rules="rules" label-position="right" label-width="170px">
|
|
|
+ <!-- 能量及三大营养素 -->
|
|
|
+ <div class="group-card">
|
|
|
+ <div class="group-title">能量及三大营养素</div>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="所需热量:" class="right-label">
|
|
|
+ <el-input v-model="form.caloriesKcalPerDay" style="width: 200px" />
|
|
|
+ <span class="unit">kcal/d</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="所需热量:" class="right-label">
|
|
|
+ <span>{{ form.caloriesKcalPerKgDay }}</span>
|
|
|
+ <span class="unit">kcal/kg*d</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="所需热量:" class="right-label">
|
|
|
+ <span>{{ form.caloriesKjPerDay }}</span>
|
|
|
+ <span class="unit">kJ/d</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20" style="margin-top: 8px">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="蛋白质热量占比:" class="right-label">
|
|
|
+ <el-input v-model="form.proteinCaloriePercentage" style="width: 200px" />
|
|
|
+ <span class="unit">%</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="所需蛋白质:" class="right-label">
|
|
|
+ <span>{{ form.proteinGPerKgDay }}</span>
|
|
|
+ <span class="unit">g/kg*d</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="所需蛋白质:" class="right-label">
|
|
|
+ <span>{{ form.proteinGPerDay }}</span>
|
|
|
+ <span class="unit">g/d</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20" style="margin-top: 8px">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="脂肪热量占比:" class="right-label">
|
|
|
+ <el-input v-model="form.fatCaloriePercentage" style="width: 200px" />
|
|
|
+ <span class="unit">%</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="所需脂肪:" class="right-label">
|
|
|
+ <span>{{ form.fatGPerKgDay }}</span>
|
|
|
+ <span class="unit">g/kg*d</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="所需脂肪:" class="right-label">
|
|
|
+ <span>{{ form.fatGPerDay }}</span>
|
|
|
+ <span class="unit">g/d</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20" style="margin-top: 8px">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="碳水化合物热量占比:" class="right-label">
|
|
|
+ <el-input v-model="form.carbohydrateCaloriePercentage" style="width: 200px" />
|
|
|
+ <span class="unit">%</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="所需碳水化合物:" class="right-label">
|
|
|
+ <span>{{ form.carbohydrateGPerKgDay }}</span> <span class="unit">g/kg·d</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="所需碳水化合物:" class="right-label">
|
|
|
+ <span>{{ form.carbohydrateGPerDay }}</span>
|
|
|
+ <span class="unit">g/d</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
</div>
|
|
|
- <!-- 警示提示区 -->
|
|
|
- <div class="tips-box">
|
|
|
- 注:常量元素、微量元素、维生素、氨基酸、脂肪酸、膳食纤维默认为DRIS数据,如有必要请自行修改。
|
|
|
+ <!-- 常量元素 -->
|
|
|
+ <div class="group-card">
|
|
|
+ <div class="group-title">常量元素</div>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="钙:" class="right-label">
|
|
|
+ <el-input v-model="form.calcium" style="width: 200px" />
|
|
|
+ <span class="unit">mg/d</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="磷:" class="right-label">
|
|
|
+ <el-input v-model="form.phosphorus" style="width: 200px" />
|
|
|
+ <span class="unit">mg/d</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="钾:" class="right-label">
|
|
|
+ <el-input v-model="form.potassium" style="width: 200px" />
|
|
|
+ <span class="unit">mg/d</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20" style="margin-top: 8px">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="钠:" class="right-label">
|
|
|
+ <el-input v-model="form.sodium" style="width: 200px" />
|
|
|
+ <span class="unit">mg/d</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="镁:" class="right-label">
|
|
|
+ <el-input v-model="form.magnesium" style="width: 200px" />
|
|
|
+ <span class="unit">mg/d</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="氯:" class="right-label">
|
|
|
+ <el-input v-model="form.chloride" style="width: 200px" />
|
|
|
+ <span class="unit">mg/d</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
</div>
|
|
|
- <div v-show="showFlag=='true'">
|
|
|
- <el-form ref="NutritionSettingFormRef" :model="form" :rules="rules" label-position="right" label-width="170px">
|
|
|
- <!-- 能量及三大营养素 -->
|
|
|
- <div class="group-card">
|
|
|
- <div class="group-title">能量及三大营养素</div>
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="所需热量:" class="right-label">
|
|
|
- <el-input v-model="form.caloriesKcalPerDay" style="width: 200px;" />
|
|
|
- <span class="unit">kcal/d</span>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="所需热量:" class="right-label">
|
|
|
- <span>{{ form.caloriesKcalPerKgDay }}</span>
|
|
|
- <span class="unit">kcal/kg*d</span>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="所需热量:" class="right-label">
|
|
|
- <span>{{form.caloriesKjPerDay}}</span>
|
|
|
- <span class="unit">kJ/d</span>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="20" style="margin-top: 8px;">
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="蛋白质热量占比:" class="right-label">
|
|
|
- <el-input v-model="form.proteinCaloriePercentage" style="width: 200px;" />
|
|
|
- <span class="unit">%</span>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="所需蛋白质:" class="right-label">
|
|
|
- <span>{{ form.proteinGPerKgDay }}</span>
|
|
|
- <span class="unit">g/kg*d</span>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="所需蛋白质:" class="right-label">
|
|
|
- <span>{{ form.proteinGPerDay }}</span>
|
|
|
- <span class="unit">g/d</span>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="20" style="margin-top: 8px;">
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="脂肪热量占比:" class="right-label">
|
|
|
- <el-input v-model="form.fatCaloriePercentage" style="width: 200px;" />
|
|
|
- <span class="unit">%</span>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="所需脂肪:" class="right-label">
|
|
|
- <span>{{ form.fatGPerKgDay }}</span>
|
|
|
- <span class="unit">g/kg*d</span>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="所需脂肪:" class="right-label">
|
|
|
- <span>{{ form.fatGPerDay }}</span>
|
|
|
- <span class="unit">g/d</span>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="20" style="margin-top: 8px;">
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="碳水化合物热量占比:" class="right-label">
|
|
|
- <el-input v-model="form.carbohydrateCaloriePercentage" style="width: 200px;" />
|
|
|
- <span class="unit">%</span>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="所需碳水化合物:" class="right-label">
|
|
|
- <span>{{ form.carbohydrateGPerKgDay }}</span> <span class="unit">g/kg·d</span>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="所需碳水化合物:" class="right-label">
|
|
|
- <span>{{ form.carbohydrateGPerDay }}</span>
|
|
|
- <span class="unit">g/d</span>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
-
|
|
|
- </div>
|
|
|
- <!-- 常量元素 -->
|
|
|
- <div class="group-card">
|
|
|
- <div class="group-title">常量元素</div>
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="钙:" class="right-label">
|
|
|
- <el-input v-model="form.calcium" style="width: 200px;" />
|
|
|
- <span class="unit">mg/d</span>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="磷:" class="right-label">
|
|
|
- <el-input v-model="form.phosphorus" style="width: 200px;" />
|
|
|
- <span class="unit">mg/d</span>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="钾:" class="right-label">
|
|
|
- <el-input v-model="form.potassium" style="width: 200px;" />
|
|
|
- <span class="unit">mg/d</span>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
-
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="20" style="margin-top: 8px;">
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="钠:" class="right-label">
|
|
|
- <el-input v-model="form.sodium" style="width: 200px;" />
|
|
|
- <span class="unit">mg/d</span>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="镁:" class="right-label">
|
|
|
- <el-input v-model="form.magnesium" style="width: 200px;" />
|
|
|
- <span class="unit">mg/d</span>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="氯:" class="right-label">
|
|
|
- <el-input v-model="form.chloride" style="width: 200px;" />
|
|
|
- <span class="unit">mg/d</span>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
-
|
|
|
-
|
|
|
- </el-row>
|
|
|
-
|
|
|
- </div>
|
|
|
- <!-- 微量元素 -->
|
|
|
- <div class="group-card">
|
|
|
- <div class="group-title">微量元素</div>
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="铁:" class="right-label">
|
|
|
- <el-input v-model="form.iron" style="width: 200px;" />
|
|
|
- <span class="unit">mg/d</span>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="锌:" class="right-label">
|
|
|
- <el-input v-model="form.zinc" style="width: 200px;" />
|
|
|
- <span class="unit">mg/d</span>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="硒:" class="right-label">
|
|
|
- <el-input v-model="form.selenium" style="width: 200px;" />
|
|
|
- <span class="unit">μg/d</span>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="20" style="margin-top: 8px;">
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="铜:" class="right-label">
|
|
|
- <el-input v-model="form.copper" style="width: 200px;" />
|
|
|
- <span class="unit">mg/d</span>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="锰:" class="right-label">
|
|
|
- <el-input v-model="form.manganese" style="width: 200px;" />
|
|
|
- <span class="unit">mg/d</span>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="碘:" class="right-label">
|
|
|
- <el-input v-model="form.iodine" style="width: 200px;" />
|
|
|
- <span class="unit">μg/d</span>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="20" style="margin-top: 8px;">
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="氟:" class="right-label">
|
|
|
- <el-input v-model="form.fluoride" style="width: 200px;" />
|
|
|
- <span class="unit">mg/d</span>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="铬:" class="right-label">
|
|
|
- <el-input v-model="form.chromium" style="width: 200px;" />
|
|
|
- <span class="unit">μg/d</span>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="20" style="margin-top: 8px;">
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="钼:" class="right-label">
|
|
|
- <el-input v-model="form.molybdenum" style="width: 200px;" />
|
|
|
- <span class="unit">μg/d</span>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
- <!-- 脂溶性维生素 -->
|
|
|
- <div class="group-card">
|
|
|
- <div class="group-title">脂溶性维生素</div>
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="维生素A:" class="right-label">
|
|
|
- <el-input v-model="form.vitaminA" style="width: 200px;" />
|
|
|
- <span class="unit">μgRAE/d</span>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
-
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="维生素D:" class="right-label">
|
|
|
- <el-input v-model="form.vitaminD" style="width: 200px;" />
|
|
|
- <span class="unit">μg/d</span>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="维生素E:" class="right-label">
|
|
|
- <el-input v-model="form.vitaminE" style="width: 200px;" />
|
|
|
- <span class="unit">mgα-TE/d</span>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="20" style="margin-top: 8px;">
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="维生素K:" class="right-label">
|
|
|
- <el-input v-model="form.vitaminK" style="width: 200px;" />
|
|
|
- <span class="unit">μg/d</span>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
- <!-- 水溶性维生素 -->
|
|
|
- <div class="group-card">
|
|
|
- <div class="group-title">水溶性维生素</div>
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="维生素B1:" class="right-label">
|
|
|
- <el-input v-model="form.vitaminBOne" style="width: 200px;" />
|
|
|
- <span class="unit">mg/d</span>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="维生素B2:" class="right-label">
|
|
|
- <el-input v-model="form.vitaminBTwo" style="width: 200px;" />
|
|
|
- <span class="unit">mg/d</span>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="维生素B6:" class="right-label">
|
|
|
- <el-input v-model="form.vitaminBSix" style="width: 200px;" />
|
|
|
- <span class="unit">mg/d</span>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
-
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="20" style="margin-top: 8px;">
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="维生素B12:" class="right-label">
|
|
|
- <el-input v-model="form.vitaminBTwelve" style="width: 200px;" />
|
|
|
- <span class="unit">μg/d</span>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="烟酸(尼克酸):" class="right-label">
|
|
|
- <el-input v-model="form.niacin" style="width: 200px;" />
|
|
|
- <span class="unit">mgNE/d</span>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="维生素C:" class="right-label">
|
|
|
- <el-input v-model="form.vitaminC" style="width: 200px;" />
|
|
|
- <span class="unit">mg/d</span>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="20" style="margin-top: 8px;">
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="叶酸:" class="right-label">
|
|
|
- <el-input v-model="form.folicAcid" style="width: 200px;" />
|
|
|
- <span class="unit">μgDFE/d</span>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="生物素:" class="right-label">
|
|
|
- <el-input v-model="form.biotin" style="width: 200px;" />
|
|
|
- <span class="unit">μg/d</span>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="胆碱:" class="right-label">
|
|
|
- <el-input v-model="form.choline" style="width: 200px;" />
|
|
|
- <span class="unit">mg/d</span>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="20" style="margin-top: 8px;">
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="泛酸:" class="right-label">
|
|
|
- <el-input v-model="form.pantothenicAcid" style="width: 200px;" />
|
|
|
- <span class="unit">mg/d</span>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
-
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
- <!-- 其他 -->
|
|
|
- <div class="group-card">
|
|
|
- <div class="group-title">其他</div>
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="膳食纤维:" class="right-label">
|
|
|
- <el-input v-model="form.dietaryFiber" style="width: 200px;" />
|
|
|
- <span class="unit">g/d</span>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
- </el-form>
|
|
|
- <div class="flex justify-center gap-2 mt-4">
|
|
|
- <el-button :loading="buttonLoading" type="primary" @click="submitForm">保 存</el-button>
|
|
|
- </div>
|
|
|
+ <!-- 微量元素 -->
|
|
|
+ <div class="group-card">
|
|
|
+ <div class="group-title">微量元素</div>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="铁:" class="right-label">
|
|
|
+ <el-input v-model="form.iron" style="width: 200px" />
|
|
|
+ <span class="unit">mg/d</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="锌:" class="right-label">
|
|
|
+ <el-input v-model="form.zinc" style="width: 200px" />
|
|
|
+ <span class="unit">mg/d</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="硒:" class="right-label">
|
|
|
+ <el-input v-model="form.selenium" style="width: 200px" />
|
|
|
+ <span class="unit">μg/d</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20" style="margin-top: 8px">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="铜:" class="right-label">
|
|
|
+ <el-input v-model="form.copper" style="width: 200px" />
|
|
|
+ <span class="unit">mg/d</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="锰:" class="right-label">
|
|
|
+ <el-input v-model="form.manganese" style="width: 200px" />
|
|
|
+ <span class="unit">mg/d</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="碘:" class="right-label">
|
|
|
+ <el-input v-model="form.iodine" style="width: 200px" />
|
|
|
+ <span class="unit">μg/d</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20" style="margin-top: 8px">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="氟:" class="right-label">
|
|
|
+ <el-input v-model="form.fluoride" style="width: 200px" />
|
|
|
+ <span class="unit">mg/d</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="铬:" class="right-label">
|
|
|
+ <el-input v-model="form.chromium" style="width: 200px" />
|
|
|
+ <span class="unit">μg/d</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20" style="margin-top: 8px">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="钼:" class="right-label">
|
|
|
+ <el-input v-model="form.molybdenum" style="width: 200px" />
|
|
|
+ <span class="unit">μg/d</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
</div>
|
|
|
+ <!-- 脂溶性维生素 -->
|
|
|
+ <div class="group-card">
|
|
|
+ <div class="group-title">脂溶性维生素</div>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="维生素A:" class="right-label">
|
|
|
+ <el-input v-model="form.vitaminA" style="width: 200px" />
|
|
|
+ <span class="unit">μgRAE/d</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="维生素D:" class="right-label">
|
|
|
+ <el-input v-model="form.vitaminD" style="width: 200px" />
|
|
|
+ <span class="unit">μg/d</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="维生素E:" class="right-label">
|
|
|
+ <el-input v-model="form.vitaminE" style="width: 200px" />
|
|
|
+ <span class="unit">mgα-TE/d</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20" style="margin-top: 8px">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="维生素K:" class="right-label">
|
|
|
+ <el-input v-model="form.vitaminK" style="width: 200px" />
|
|
|
+ <span class="unit">μg/d</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <!-- 水溶性维生素 -->
|
|
|
+ <div class="group-card">
|
|
|
+ <div class="group-title">水溶性维生素</div>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="维生素B1:" class="right-label">
|
|
|
+ <el-input v-model="form.vitaminBOne" style="width: 200px" />
|
|
|
+ <span class="unit">mg/d</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="维生素B2:" class="right-label">
|
|
|
+ <el-input v-model="form.vitaminBTwo" style="width: 200px" />
|
|
|
+ <span class="unit">mg/d</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="维生素B6:" class="right-label">
|
|
|
+ <el-input v-model="form.vitaminBSix" style="width: 200px" />
|
|
|
+ <span class="unit">mg/d</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20" style="margin-top: 8px">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="维生素B12:" class="right-label">
|
|
|
+ <el-input v-model="form.vitaminBTwelve" style="width: 200px" />
|
|
|
+ <span class="unit">μg/d</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="烟酸(尼克酸):" class="right-label">
|
|
|
+ <el-input v-model="form.niacin" style="width: 200px" />
|
|
|
+ <span class="unit">mgNE/d</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="维生素C:" class="right-label">
|
|
|
+ <el-input v-model="form.vitaminC" style="width: 200px" />
|
|
|
+ <span class="unit">mg/d</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20" style="margin-top: 8px">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="叶酸:" class="right-label">
|
|
|
+ <el-input v-model="form.folicAcid" style="width: 200px" />
|
|
|
+ <span class="unit">μgDFE/d</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="生物素:" class="right-label">
|
|
|
+ <el-input v-model="form.biotin" style="width: 200px" />
|
|
|
+ <span class="unit">μg/d</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="胆碱:" class="right-label">
|
|
|
+ <el-input v-model="form.choline" style="width: 200px" />
|
|
|
+ <span class="unit">mg/d</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20" style="margin-top: 8px">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="泛酸:" class="right-label">
|
|
|
+ <el-input v-model="form.pantothenicAcid" style="width: 200px" />
|
|
|
+ <span class="unit">mg/d</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <!-- 其他 -->
|
|
|
+ <div class="group-card">
|
|
|
+ <div class="group-title">其他</div>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="膳食纤维:" class="right-label">
|
|
|
+ <el-input v-model="form.dietaryFiber" style="width: 200px" />
|
|
|
+ <span class="unit">g/d</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ <div class="flex justify-center gap-2 mt-4">
|
|
|
+ <el-button :loading="buttonLoading" type="primary" @click="submitForm">保 存</el-button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
- import { ref, toRefs, getCurrentInstance } from 'vue';
|
|
|
- import { addSetting, updateSetting, recalculateValue } from '@/api/patients/nutritionSetting';
|
|
|
- import type { FormInstance } from 'element-plus';
|
|
|
- const { proxy } = getCurrentInstance() as any;
|
|
|
- const { physical_activity, stress_level } = toRefs(proxy ?.useDict('physical_activity', 'stress_level'));
|
|
|
- const emit = defineEmits(['change'])
|
|
|
- const props = defineProps({
|
|
|
- form: { type: Object, required: true },
|
|
|
- rules: { type: Object, required: true },
|
|
|
- buttonLoading: { type: Boolean, required: true },
|
|
|
- cancel: { type: Function, required: true },
|
|
|
- handleCancelOne: { type: Function, required: true },
|
|
|
- title: { type: String }
|
|
|
- });
|
|
|
- const { handleCancelOne, form, rules } = props;
|
|
|
- const { title } = toRefs(props);
|
|
|
- const showFlag = ref('false');
|
|
|
- const buttonLoading = ref(false);
|
|
|
- const NutritionSettingFormRef = ref < FormInstance > ();
|
|
|
-
|
|
|
+import {ref, toRefs, getCurrentInstance} from 'vue';
|
|
|
+import {addSetting, updateSetting, recalculateValue} from '@/api/patients/nutritionSetting';
|
|
|
+import type {FormInstance} from 'element-plus';
|
|
|
+const {proxy} = getCurrentInstance() as any;
|
|
|
+const {physical_activity, stress_level} = toRefs(proxy?.useDict('physical_activity', 'stress_level'));
|
|
|
+const emit = defineEmits(['change']);
|
|
|
+const props = defineProps({
|
|
|
+ form: {type: Object, required: true},
|
|
|
+ rules: {type: Object, required: true},
|
|
|
+ buttonLoading: {type: Boolean, required: true},
|
|
|
+ cancel: {type: Function, required: true},
|
|
|
+ handleCancelOne: {type: Function, required: true},
|
|
|
+ title: {type: String}
|
|
|
+});
|
|
|
+const {handleCancelOne, form, rules} = props;
|
|
|
+const {title} = toRefs(props);
|
|
|
+const showFlag = ref('false');
|
|
|
+const buttonLoading = ref(false);
|
|
|
+const NutritionSettingFormRef = ref<FormInstance>();
|
|
|
|
|
|
- const recalculate = async (gender, age, height, weight, activity, stressType) => {
|
|
|
- const res = await recalculateValue({ gender, age, height, weight, activity, stressType });
|
|
|
- if (res) {
|
|
|
- const keepSettingType = form.settingType;
|
|
|
- Object.assign(form, res);
|
|
|
- form.settingType = keepSettingType; // 恢复settingType的值
|
|
|
+const recalculate = async (gender, age, height, weight, activity, stressType) => {
|
|
|
+ const res = await recalculateValue({gender, age, height, weight, activity, stressType});
|
|
|
+ if (res) {
|
|
|
+ const keepSettingType = form.settingType;
|
|
|
+ Object.assign(form, res);
|
|
|
+ form.settingType = keepSettingType; // 恢复settingType的值
|
|
|
+ }
|
|
|
+ showFlag.value = 'true';
|
|
|
+};
|
|
|
|
|
|
+/** 提交按钮 */
|
|
|
+const submitForm = async () => {
|
|
|
+ if (!NutritionSettingFormRef.value) return;
|
|
|
+ await NutritionSettingFormRef.value.validate(async (valid: boolean) => {
|
|
|
+ if (valid) {
|
|
|
+ buttonLoading.value = true;
|
|
|
+ try {
|
|
|
+ if (form.id) {
|
|
|
+ await updateSetting(form);
|
|
|
+ } else {
|
|
|
+ console.log(form.settingType);
|
|
|
+ await addSetting(form);
|
|
|
}
|
|
|
- showFlag.value = 'true';
|
|
|
- };
|
|
|
-
|
|
|
- /** 提交按钮 */
|
|
|
- const submitForm = async () => {
|
|
|
- if (!NutritionSettingFormRef.value) return;
|
|
|
- await NutritionSettingFormRef.value.validate(async (valid: boolean) => {
|
|
|
- if (valid) {
|
|
|
- buttonLoading.value = true;
|
|
|
- try {
|
|
|
- if (form.id) {
|
|
|
- await updateSetting(form);
|
|
|
- } else {
|
|
|
- console.log(form.settingType);
|
|
|
- await addSetting(form);
|
|
|
- }
|
|
|
- proxy ?.$modal.msgSuccess('操作成功');
|
|
|
- onBack();
|
|
|
- } catch (error) {
|
|
|
- console.error('提交失败', error);
|
|
|
- } finally {
|
|
|
- buttonLoading.value = false;
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- };
|
|
|
- const close = async () => {
|
|
|
-
|
|
|
- };
|
|
|
+ proxy?.$modal.msgSuccess('操作成功');
|
|
|
+ onBack();
|
|
|
+ } catch (error) {
|
|
|
+ console.error('提交失败', error);
|
|
|
+ } finally {
|
|
|
+ buttonLoading.value = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
+const close = async () => {};
|
|
|
|
|
|
- const onBack = () => {
|
|
|
- showFlag.value = 'false';
|
|
|
- emit('change', 'nutritionSetting');
|
|
|
- handleCancelOne();
|
|
|
- };
|
|
|
+const onBack = () => {
|
|
|
+ showFlag.value = 'false';
|
|
|
+ emit('change', 'nutritionSetting');
|
|
|
+ handleCancelOne();
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
- .page-current {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- padding: 20px;
|
|
|
- background: #fff;
|
|
|
- border-bottom: 1px solid #e6e6e6;
|
|
|
- }
|
|
|
+.page-current {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 20px;
|
|
|
+ background: #fff;
|
|
|
+ border-bottom: 1px solid #e6e6e6;
|
|
|
+}
|
|
|
|
|
|
- .question-main {
|
|
|
- padding: 20px 0 100px;
|
|
|
- }
|
|
|
+.question-main {
|
|
|
+ padding: 20px 0 100px;
|
|
|
+}
|
|
|
|
|
|
- .info-card-bee {
|
|
|
- margin-bottom: 16px;
|
|
|
- background: #f8fafc;
|
|
|
- border-radius: 8px;
|
|
|
- box-shadow: 0 2px 8px #f0f1f2;
|
|
|
- padding: 18px 24px 10px 24px;
|
|
|
- border: none;
|
|
|
- }
|
|
|
+.info-card-bee {
|
|
|
+ margin-bottom: 16px;
|
|
|
+ background: #f8fafc;
|
|
|
+ border-radius: 8px;
|
|
|
+ box-shadow: 0 2px 8px #f0f1f2;
|
|
|
+ padding: 18px 24px 10px 24px;
|
|
|
+ border: none;
|
|
|
+}
|
|
|
|
|
|
- .info-title {
|
|
|
- font-weight: bold;
|
|
|
- font-size: 16px;
|
|
|
- color: #409EFF;
|
|
|
- margin-bottom: 8px;
|
|
|
- padding-left: 2px;
|
|
|
- }
|
|
|
+.info-title {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #409eff;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ padding-left: 2px;
|
|
|
+}
|
|
|
|
|
|
- .bee-title {
|
|
|
- border-left: 4px solid #409EFF;
|
|
|
- padding-left: 8px;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: bold;
|
|
|
- color: #409EFF;
|
|
|
- }
|
|
|
+.bee-title {
|
|
|
+ border-left: 4px solid #409eff;
|
|
|
+ padding-left: 8px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #409eff;
|
|
|
+}
|
|
|
|
|
|
- .info-row {
|
|
|
- background: #f8fafc;
|
|
|
- font-size: 16px;
|
|
|
- padding: 0 0 0 0;
|
|
|
- margin: 0;
|
|
|
- }
|
|
|
+.info-row {
|
|
|
+ background: #f8fafc;
|
|
|
+ font-size: 16px;
|
|
|
+ padding: 0 0 0 0;
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
|
|
|
- .required {
|
|
|
- color: #f56c6c;
|
|
|
- margin-right: 2px;
|
|
|
- }
|
|
|
+.required {
|
|
|
+ color: #f56c6c;
|
|
|
+ margin-right: 2px;
|
|
|
+}
|
|
|
|
|
|
- .recalc-btn {
|
|
|
- margin-left: 12px;
|
|
|
- }
|
|
|
+.recalc-btn {
|
|
|
+ margin-left: 12px;
|
|
|
+}
|
|
|
|
|
|
- .tips-box {
|
|
|
- color: #ff5e4c;
|
|
|
- margin: 16px 0;
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
+.tips-box {
|
|
|
+ color: #ff5e4c;
|
|
|
+ margin: 16px 0;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
|
|
|
- .group-card {
|
|
|
- background: #fff;
|
|
|
- border-radius: 8px;
|
|
|
- margin-bottom: 24px;
|
|
|
- box-shadow: 0 2px 8px #f0f1f2;
|
|
|
- padding: 16px 24px;
|
|
|
- }
|
|
|
+.group-card {
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 8px;
|
|
|
+ margin-bottom: 24px;
|
|
|
+ box-shadow: 0 2px 8px #f0f1f2;
|
|
|
+ padding: 16px 24px;
|
|
|
+}
|
|
|
|
|
|
- .group-title {
|
|
|
- background: #f5f7fa;
|
|
|
- padding: 8px 16px;
|
|
|
- font-weight: bold;
|
|
|
- border-radius: 4px;
|
|
|
- margin-bottom: 16px;
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
+.group-title {
|
|
|
+ background: #f5f7fa;
|
|
|
+ padding: 8px 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ font-size: 16px;
|
|
|
+}
|
|
|
|
|
|
- .unit {
|
|
|
- margin-left: 4px;
|
|
|
- color: #888;
|
|
|
- }
|
|
|
+.unit {
|
|
|
+ margin-left: 4px;
|
|
|
+ color: #888;
|
|
|
+}
|
|
|
|
|
|
- .right-label .el-form-item__label {
|
|
|
- text-align: right !important;
|
|
|
- justify-content: flex-end;
|
|
|
- display: flex;
|
|
|
- }
|
|
|
+.right-label .el-form-item__label {
|
|
|
+ text-align: right !important;
|
|
|
+ justify-content: flex-end;
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
|
|
|
- ::v-deep .el-form-item__label {
|
|
|
- text-align: right !important;
|
|
|
- justify-content: flex-end;
|
|
|
- display: flex;
|
|
|
- }
|
|
|
-</style>
|
|
|
+::v-deep .el-form-item__label {
|
|
|
+ text-align: right !important;
|
|
|
+ justify-content: flex-end;
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+</style>
|