help.vue 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  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. 男:66+(13.7x体重kg)+(5x身高cm)-(6.8x年龄)= BMR
  13. </view>
  14. <view class="block">
  15. 女:655+(9.6x体重kg)+(1.8x身高cm)-(4.7x年龄)= BMR
  16. </view>
  17. </view>
  18. </view>
  19. </template>
  20. <script>
  21. export default {
  22. data() {
  23. return {
  24. }
  25. },
  26. onLoad() {
  27. },
  28. methods: {
  29. onBack: function(id,e) {
  30. uni.navigateBack({
  31. delta:1,
  32. })
  33. }
  34. }
  35. }
  36. </script>
  37. <style lang="scss">
  38. .container {
  39. display: flex;
  40. flex-direction: column;
  41. align-items: center;
  42. justify-content: center;
  43. width:100%;
  44. height: 100vh;
  45. }
  46. .navigation-bar
  47. {
  48. display: flex;
  49. align-items: center;
  50. justify-content: center;
  51. width: 100%;
  52. height: 10%;
  53. font-weight: 700;
  54. color: white;
  55. background-color: rgb(115,164,164);
  56. }
  57. .back{
  58. position: absolute;
  59. display: flex;
  60. align-items: center;
  61. justify-content: center;
  62. width: 2%;
  63. height: 2%;
  64. top: 3%;
  65. left: 1%;
  66. //testing
  67. // border: 1px solid rgb(255,0,0);
  68. }
  69. .content{
  70. display: flex;
  71. flex-direction: column;
  72. align-items: center;
  73. justify-content: center;
  74. width:100%;
  75. height:100%;
  76. }
  77. .block
  78. {
  79. margin: 2%;
  80. }
  81. </style>