aiot-app/pages/production/components/CommonFooter.vue

<template>
  <view class="footBox-container">
    <view class="footBox">
      <view class="add" @click="leftClick" v-if="leftText">
        <uni-icons type="plus" size="20" color="#fff"></uni-icons>
        {{ leftText }}
      </view>
      <view class="reg" @click="rightClick" v-if="rightText">
        <uni-icons type="scan" size="20" color="#fff" v-if="icon"></uni-icons>
        {{ rightText }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    leftText: String,
    rightText: String,
    icon: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {}
  },
  methods: {
    leftClick () {
      this.$emit('leftClick')
    },
    rightClick () {
      this.$emit('rightClick')
    }
  }
}
</script>

<style lang="scss" scoped>
.footBox-container {
  height: 100rpx;
  width: 100vw;
}
.footBox {
  position: fixed;
  left: 0px;
  bottom: 0px;
  height: 100rpx;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  view {
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .add {
    background: $uni-color-success;
  }

  .reg {
    background: $u-success-dark;
  }

  .uni-icons {
    margin-right: 8rpx !important;
    font-weight: bold;
  }
}
</style>