help.vue 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  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="block">
  12. 最低有氧心率 = 220-年龄-静态心率x0.55+静态心率
  13. </view>
  14. <view class="block">
  15. 最高有氧心率 = 220-年龄-静态心率x0.75+静态心率
  16. </view>
  17. <view class="">
  18. 有氧简直运动注意事项:
  19. </view>
  20. <view class="">
  21. 1,在运动时心率要控制在最高和最低之间。
  22. </view>
  23. <view class="">
  24. 2,持续25分钟以上才开始脂肪供能,前5分钟是糖原供能
  25. </view>
  26. <view class="">
  27. 3,整个过程无间歇
  28. </view>
  29. </view>
  30. </view>
  31. </template>
  32. <script>
  33. export default {
  34. data() {
  35. return {
  36. }
  37. },
  38. onLoad() {
  39. },
  40. methods: {
  41. onBack: function(id,e) {
  42. uni.navigateBack({
  43. delta:1,
  44. })
  45. }
  46. }
  47. }
  48. </script>
  49. <style lang="scss">
  50. .container {
  51. display: flex;
  52. flex-direction: column;
  53. align-items: center;
  54. justify-content: center;
  55. width:100%;
  56. height: 100vh;
  57. }
  58. .navigation-bar
  59. {
  60. display: flex;
  61. align-items: center;
  62. justify-content: center;
  63. width: 100%;
  64. height: 10%;
  65. font-weight: 700;
  66. color: white;
  67. background-color: rgb(115,164,164);
  68. }
  69. .back{
  70. position: absolute;
  71. display: flex;
  72. align-items: center;
  73. justify-content: center;
  74. width: 2%;
  75. height: 2%;
  76. top: 3%;
  77. left: 1%;
  78. //testing
  79. // border: 1px solid rgb(255,0,0);
  80. }
  81. .content{
  82. display: flex;
  83. flex-direction: column;
  84. align-items: center;
  85. justify-content: center;
  86. width:100%;
  87. height:100%;
  88. }
  89. .block
  90. {
  91. margin: 2%;
  92. }
  93. </style>