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

<template>
  <div class="mobile-modal" v-if="showRemind">
    <div class="mobile-remind-modal">
      <div class="mb-content" v-html="text"></div>
      <div class="mb-foot" @click="$emit('closeAction')">我知道了</div>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      showRemind: {
        type: Boolean,
        default: false
      },
      text: {
        type: String,
        default: '提示'
      }
    }
  }
</script>
<style lang="scss" scoped>
  .mobile-remind-modal {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6.3rem;
    margin-left: -3.15rem;
    margin-top: -1.36rem;
    background: #fff;
    border-radius: .15rem;
    font-size: .32rem;
    .mb-content {
      padding: .39rem .42rem .25rem;
      border-bottom: 1px solid #f4f4f4;
    }
    .mb-foot {
      padding: .27rem 0;
      color: #3f84f6;
      text-align: center;
    }
  }
</style>