固定底部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);
  }
}