wxAuth.vue

<template>
  <van-dialog v-if="showAuth" v-model="show" id="wx-auth" title="微信授权" show-cancel-button
    @confirm="handleConfirm"
  >
    <img class="logo" src="/img/photo.png" alt="logo" />
    <div class="small-tips">
      <p>为您提供优质服务,亿百分需要获取以下信息</p>
      <p>&middot; 您的公开信息（昵称、头像等）</p>
    </div>
  </van-dialog>
</template>

<script>
export default {
  name: "wxAuth",
  components: {},
  props: {
    showAuth: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      show: true
    };
  },
  methods: {
    handleConfirm() {
      this.$emit('confirm');
    }
  }
};
</script>

<style lang="scss">
#wx-auth {
  .logo {
    width: 20%;
    margin: 15px auto;
    display: block;
    border-radius: 50%;
  }
  .small-tips {
    margin-left: 15px;
    p {
      padding: 5px 10px;
    }
    p:first-child {
      font-size: 14px;
      color: #333;
    }
    p:last-child {
      font-size: 12px;
      color: #ccc;
    }
  }
}
</style>