android-cloud-H5/pages/claimCloudPhone/components/layout.vue

<template>
  <div class="layout">
    <div style="height: 12.2666666667vw" v-if="isShowNavBar">
      <van-nav-bar
        title="0元购机，尽情享受"
        left-arrow
        fixed
        @click-left="goBackFun"
      />
    </div>
    <div class="layout-container" :style="containerStyle">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'layout',
  props: {
    // 是否显示头部
    isNavBar: {
      type: Boolean,
      default: true,
    },
    // 背景图片
    bgImgName: {
      type: String,
      default: 'bg-1',
    },
    // 背景图片高度
    bgHeight: {
      type: [Number, String],
      default: 300,
    },
    bgColor: {
      type: String,
      default: '#F3F4F6',
    },
    // 是否强制像是头部
    forceShowNavBar: {
      type: Boolean,
      default: false
    },
    padding: {
      type: String,
      default: ''
    }
  },
  data() {
    return {};
  },
  mounted() {},
  computed: {
    containerStyle() {
      return {
        backgroundImage: this.bgImgName ? `url(${require(`@/assets/image/claimCloudPhone/${this.bgImgName}.png`)})` : '',
        backgroundRepeat: 'no-repeat',
        backgroundSize: this.bgHeight ? `100% ${this.bgHeight}px` : '',
        backgroundColor: this.bgColor,
        backgroundPosition: '0 0',
        padding: this.padding ? this.padding : '16px'
      };
    },
    isShowNavBar() {
      // 是否是APP
      const isApp = this.$userAgent.isSzx || this.$userAgent.isSzxBrowser;
      const isAndroid = this.$userAgent.isAndroid;
      const isIos = this.$userAgent.isIos;
      const isWx = this.$userAgent.isWx;
      // 如果是App并且是安卓，就不显示头部， ios显示
      // 如果微信小程序环境的，也不显示头部
      // 如果是h5 就显示头部
      let bool = false;
      bool = isApp ? (isAndroid ? !isAndroid : isIos) : (isWx ? !isWx : !isWx) ;
      return bool && this.isNavBar || this.forceShowNavBar;
    },
  },
  methods: {
    goBackFun() {
      if (this.$listeners.goBack) {
        this.$emit('goBack');
        return;
      }
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="less" scoped>
.layout {
  height: 100%;
  display: flex;
  position: relative;
  z-index: 0;
  flex-direction: column;
  .layout-container {
    position: relative;
    z-index: -1;
    flex: 1;
    overflow-y: auto;
  }

  ::v-deep .van-nav-bar__arrow {
    color: #000000;
    font-size: 24px;
  }

  ::v-deep .van-nav-bar__title {
    font-weight: bold !important;
    font-size: 17px !important;
    color: #0a132b !important;
    line-height: 24px !important;
  }

  .van-nav-bar {
    z-index: 0;
  }
}
</style>