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

<template>
  <!--顶部-->
  <view class="bottom">
    <view class="trapezoidal first" @click="$emit('cancel')">
      <text>{{ cancelText }}</text>
    </view>
    <view class="trapezoidal last" @click="$emit('confirm')">
      <text>确认</text>
    </view>
  </view>
</template>

<script>
export default {
  name: "no-data",
  props: {
    marginTop:{
      type:Number,
      default:300
    },
    cancelText:{
      type:String,
      default: '取消'
    }
  },
  data() {
    return {
      $:this.$,
    }
  },
  mounted(){
  },
  computed:{
  },
  methods: {
    // 获取url
    getCurPage() {
      let pages = getCurrentPages();
      let curPage = pages[pages.length - 1];
      return curPage
    },
    // 返回
    backPage(){
      this.$emit('backPage')
    },
    // 跳转页面
    skipPage(item) {
      this.$emit('skipPage', item.pageUrl)
    },
  },
}
</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-block;
    width: 25%;
    height: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 8rpx 20rpx 8rpx 40rpx;
    border-radius: 10rpx;
    line-height: 60rpx;
  }
  .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 {
  margin-right: 40rpx;
  text {
    position: relative;
    left: 12.5%;
  }
}
.last {
  background: #2663BF;
  flex: 1;
  margin-left: 60rpx;
  color: #FFFFFF;
  text {
    position: relative;
    left: -10%;
  }
}

.last::after {
  width: 0;
}
.last::before {
  width: 30%;
  left: -10rpx;
  transform: skew(17deg);
  background-color: #2663BF;
}

</style>