new-greemall-wxapp/components/zj-page-container/zj-page-container.vue

<template>
  <view
    :class="{
      'zj-page-container': true,
      'zj-page-container-row': direction === 'row',
      'zj-page-container-column': direction === 'column'
    }"
    :style="{
      width: width,
      height: height
    }"
  >
    <slot></slot>
  </view>
</template>

<script>
export default {
  name: 'ZjPageContainer',
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    direction: {
      type: String,
      default: 'column'
    }
  }
}
</script>

<style lang="scss" scoped>
.zj-page-container {
  display: flex;
}

.zj-page-container-row {
  flex-direction: row;
}

.zj-page-container-column {
  flex-direction: column;
}
</style>