hitap-chat/components/bottom-button/three2.vue

<template>
  <!--顶部-->
  
  <cover-view class="bottom">
    <cover-view class="bottom2"></cover-view>
    <cover-view class="bottom1">
      <cover-view class="trapezoidal first" :class="{ primary: firstPrimary }">
        <cover-image src="../../static/map/l.png"></cover-image>
        <cover-view class="font" @click="$emit('first')">
          {{ firstText }}
        </cover-view>
      </cover-view>
      <cover-view
        v-show="type == 'edit'"
        class="trapezoidal min"
        :class="{ primary: secondPrimary }"
      >
        <cover-image src="../../static/map/c2.png"></cover-image>
        <cover-view class="font" @click="$emit('second')">
          {{ secondText }}
        </cover-view>
      </cover-view>
      <cover-view class="trapezoidal last" :class="{ primary: thirdPrimary }">
        <cover-image src="../../static/map/r.png"></cover-image>
        <cover-view class="font" style="color: #fff" @click="$emit('last')">
          {{
            isSubmit ? (type == "view" ? "关闭" : thirdText) : nextText
          }}</cover-view
        >
      </cover-view>
    </cover-view>
  </cover-view>
</template>
  
  <script>
export default {
  name: "no-data",
  props: {
    firstText: {
      type: String,
      default: "上一步",
    },
    secondText: {
      type: String,
      default: "取消",
    },
    nextText: {
      type: String,
      default: "下一步",
    },
    thirdText: {
      type: String,
      default: "完成",
    },
    firstPrimary: Boolean,
    secondPrimary: Boolean,
    thirdPrimary: {
      type: Boolean,
      default: true,
    },
    isSubmit: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      default: "edit",
    },
  },
  data() {
    return {
      $: this.$,
    };
  },
  mounted() {},
  computed: {},
  methods: {},
};
</script>
  
  <style scoped lang="scss">
.bottom {
  position: fixed;
  bottom: 0;
  width: 100%;

  height: 120rpx;

  background: #ffffff;
}
.bottom2 {
  width: 100%;
  height: 1px;
  background: #cccccc;
}
.bottom1 {
  width: calc(100% - 40rpx);
  padding: 18rpx 20rpx;
  height: 80rpx;
  background: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.Img {
  width: 512rpx;
  height: 440rpx;
  margin: 0 auto;
}

.trapezoidal {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  text-align: center;
  border-radius: 10rpx;
  line-height: 60rpx;
  .font {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 60rpx;
  }
  //   cover-image {
  //     width: 100%;
  //     height: 100%;
  //   }
}
</style>