固定底部button按鈕，兼容各種手機、微信等【flex布局】

吸底布局盡量不要使用fixed布局，客戶端里的表現可能跟微信里不一樣。
目前頁面在需要考慮如下情況適配：
微信IOS
微信安卓
醫生端安卓
醫生端IOS
用戶端安卓
用戶端IOS
iphone普通屏
iphone x及以后的長屏

<template>
  <div class="container">
    <div class="header">我是head</div>
    <div class="content">我是content</div>
    <div class="footer">我是foot</div>
  </div>
</template>

.container {
  height:100%; min-height: 100%;
  width: 100%;
  // flex布局核心代碼
  display: flex;
  flex-direction: column;
  .content {
    flex: 1;
    overflow-y: scroll;
  }
  .footer {
    // 適配iphone X 及以后機型
    @include iphonex(margin-bottom);
  }
}

// 適配iphonex及以后的底部.
// $name可選'margin-bottom'，'bottom'，'padding-bottom' 等等
@mixin iphonex($name) {
  @supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
    #{$name}: constant(safe-area-inset-bottom);
    #{$name}: env(safe-area-inset-bottom);
  }
}