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

<template>
  <!--顶部-->
  <view class="bottom">
    <view class="trapezoidal first" :class="{primary: firstPrimary}" style="margin-right: 30rpx" @click="$emit('first')">
      <text>{{ firstText }}</text>
    </view>
    <view 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="margin-left:30rpx" @click="$emit('last')">
      <text>{{ thirdText }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: "no-data",
  props: {
    firstText:{
      type:String,
      default:'上一步'
    },
    secondText: {
      type:String,
      default: '取消'
    },
    thirdText:{
      type:String,
      default: '完成'
    },
    firstPrimary: Boolean,
    secondPrimary: Boolean,
    thirdPrimary: {
      type: Boolean,
      default: true
    },
  },
  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>