wx-qhb/pageD/components/agreePopup.vue

<template>
  <view>
    <u-popup
      :show="agreeShow"
      @close="$emit('close')"
      :safeAreaInsetBottom="false"
      mode="center"
      round="10"
    >
      <view class="popup-content">
        <view class="title"> {{ title }} </view>
        <view class="btn-list">
          <button class="btn-2" @click="$emit('close')">取消</button>
          <button class="btn-1" @click="$emit('close', true)">提交</button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  props: {
    agreeShow: {
      typeof: Boolean,
      default: false,
    },
    title: {
      typeof: String,
      default: "",
    },
  },
  watch: {
    agreeShow() {
      console.log(111);
    },
  },
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
.popup-content {
  padding: 36rpx 28rpx;
  width: 450rpx;
  .title {
    font-size: 32rpx;
    color: #333;
    font-weight: 600;
    text-align: center;
    margin-bottom: 28rpx;
  }
  .btn-list {
    display: flex;
    justify-content: space-around;
    .btn-1 {
      background-color: #f83224;
      color: #fff;
      margin-top: 40rpx;
      border-radius: 38rpx;
      margin: 0;
      width: 188rpx;
      height: 76rpx;
      line-height: 76rpx;
      font-size: 32rpx;
    }

    .btn-2 {
      background-color: #fff;
      color: #f83224;
      margin-top: 40rpx;
      border-radius: 38rpx;
      border: 2rpx solid #f83224;
      margin: 0;
      width: 188rpx;
      height: 76rpx;
      line-height: 76rpx;
      font-size: 32rpx;
    }
  }
}
</style>