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

<template>
  <!--顶部-->
  <view class="bottom">
    <view class="trapezoidal first" :class="{primary: firstPrimary}" :style="{marginRight:type=='view'?'45rpx':'30rpx'}" 
      @click="$emit('first')">
      <text>{{ firstText }}</text>
    </view>
    <view v-show="type=='edit'" class="trapezoidal min" :class="{primary: secondPrimary}" style="margin:0 30rpx" @click="$emit('second')">
      <text>{{ secondText }}</text>
    </view>
    <view class="trapezoidal last" :class="{primary: thirdPrimary}" :style="{marginLeft:type=='view'?'45rpx':'30rpx'}"  @click="$emit('last')">
      <text>{{isSubmit?(type=='view'?'关闭':thirdText):nextText}}</text>
    </view>
  </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: calc(100% - 40rpx);
    padding: 18rpx 20rpx;
    height: 80rpx;
    background: #FFFFFF;
    border-top: 1px solid #cccccc;
    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: 20%;
    height: 100%;
    box-sizing: border-box;
    text-align: center;
    border-radius: 10rpx;
    line-height: 60rpx;

    &.primary {
      background: #2663BF;
      color: #fff;

      &::after,
      &::before {
        background: #2663BF;
      }
    }
  }

  .trapezoidal::before,
  .trapezoidal::after {
    content: '';
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 10rpx;
    background: #E9EDF5;
    z-index: -1;
    transform-origin: bottom;
    transform: skew(17deg);
    box-sizing: border-box;
  }

  .trapezoidal::after {
    left: auto;
    right: 0;
    transform: skew(0deg);
    border-radius: 10rpx;
    background-color: #E9EDF5;
    border-left: 0 none;
  }

  .first::before {
    width: 50%;
    left: 70%;
  }

  .min::before {
    right: -20%;
  }

  .min::after {
    transform: skew(17deg);
    //right: 10%;
  }
</style>