mall-web-ssr/components/mobile/base/RemindOpeModal.vue

<template>
  <div class="mobile-modal com-remind-modal" v-if="show">
    <div class="cr-remind">
      <div class="header"><i class="iconfont icon-guanbi1" @click="$emit('closeAction')"></i></div>
      <div class="content"><i class="fa fa-exclamation-circle"></i>
        <span>{{text}}</span>
      </div>
      <div class="footer">
        <button @click="$emit('closeAction')">取消</button>
        <button @click="$emit('closeAction', true)">确认</button>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      show: {
        type: Boolean,
        default: false
      },
      text: {
        type: String,
        default: '提示'
      }
    }
  }
</script>
<style lang="scss" scoped>
  // 统一提示弹框
  $base-color: #3f84f6;
  .com-remind-modal {
    .cr-remind {
      width: 6.3rem;
      height: 3.5rem;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -1.75rem;
      margin-left: -3.15rem;
      border-radius: .15rem;
      .header {
        height: .6rem;
        line-height: .6rem;
        background: #3976f4;
        border-top-left-radius: .15rem;
        border-top-right-radius: .15rem;
        i {
          font-size: .32rem;
          color: #fff;
          float: right;
          margin-right: .28rem;
        }
      }
      .content {
        background: #fff;
        padding: .53rem .5rem;
        span {
          font-size: .32rem;
          display: inline-block;
          width: 4.5rem;
        }
        i {
          font-size: .44rem;
          color: #3976f4;
          float: left;
          margin-right: .2rem;
        }
      }
      .footer {
        background: #fff;
        padding-bottom: .37rem;
        text-align: center;
        border-bottom-left-radius: .15rem;
        border-bottom-right-radius: .15rem;
        margin-top: -0.05rem;
        button {
          width: 2.22rem;
          height: .77rem;
          line-height: .77rem;
          color: #fff;
          font-size: .32rem;
          border-radius: .08rem;
          background: #bfbfbf;
          &:last-child {
            background: $base-color;
            margin-left: .3rem;
          }
        }
      }
    }
  }
</style>