help.vue 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. <template>
  2. <view class="container">
  3. <view class="navigation-bar">每日消耗总热量</view>
  4. <view class="back" @click="onBack(0, $event)">
  5. <image src="/static/backArrow.png" mode="aspectFit" style="width:100%"></image>
  6. </view>
  7. <view class="content">
  8. <view class="block">
  9. 成年女性的体脂率计算公式:
  10. </view>
  11. <view class="">
  12. 参数a=腰围(单位:厘米)x0.74;
  13. </view>
  14. <view class="">
  15. 身体脂肪总重量(单位:千克)=a-b;
  16. </view>
  17. <view class="">
  18. 体脂率=(身体脂肪总量÷体重)x100%;
  19. </view>
  20. <view class="block">
  21. 成年男性的体脂率计算公式:
  22. </view>
  23. <view class="">
  24. 参数a=腰围(单位:厘米)x0.74;
  25. </view>
  26. <view class="">
  27. 参数b=体重(单位:千克)x0.082+44.74;
  28. </view>
  29. <view class="">
  30. 身体脂肪总重量(单位:千克)=a-b;
  31. </view>
  32. <view class="">
  33. 体脂率=(身体脂肪总量÷体重)x100%;
  34. </view>
  35. </view>
  36. </view>
  37. </template>
  38. <script>
  39. export default {
  40. data() {
  41. return {
  42. }
  43. },
  44. onLoad() {
  45. },
  46. methods: {
  47. onBack: function(id,e) {
  48. uni.navigateBack({
  49. delta:1,
  50. })
  51. }
  52. }
  53. }
  54. </script>
  55. <style lang="scss">
  56. .container {
  57. display: flex;
  58. flex-direction: column;
  59. align-items: center;
  60. justify-content: center;
  61. width:100%;
  62. height: 100vh;
  63. }
  64. .navigation-bar
  65. {
  66. display: flex;
  67. align-items: center;
  68. justify-content: center;
  69. width: 100%;
  70. height: 10%;
  71. font-weight: 700;
  72. color: white;
  73. background-color: rgb(115,164,164);
  74. }
  75. .back{
  76. position: absolute;
  77. display: flex;
  78. align-items: center;
  79. justify-content: center;
  80. width: 2%;
  81. height: 2%;
  82. top: 3%;
  83. left: 1%;
  84. //testing
  85. // border: 1px solid rgb(255,0,0);
  86. }
  87. .content{
  88. display: flex;
  89. flex-direction: column;
  90. align-items: center;
  91. justify-content: center;
  92. width:100%;
  93. height:100%;
  94. }
  95. .block
  96. {
  97. margin: 2%;
  98. }
  99. </style>