overseas-jsm-mall-front/src/pages/home/components/UserModal.vue

<template>
  <a-drawer
    :open="open"
    title="用户信息"
    width="520px"
    placement="right"
    @close="emits('close')"
  >
    <div class="drawer-box">
      <div class="row-item__content">
        <div class="row-item__label">昵称: </div>
        <div class="row-item__value">{{ userStore.userDetail.nickName }}</div>
      </div>
      <div class="row-item__content">
        <div class="row-item__label">手机号: </div>
        <div class="row-item__value">{{ userStore.userDetail.mobile }}</div>
      </div>
      <div class="row-item__content">
        <div class="row-item__label">邮箱: </div>
        <div class="row-item__value">{{ userStore.userDetail.email }}</div>
      </div>
    </div>
  </a-drawer>
</template>

<script setup lang="js">
import { useUserStore } from '@/store/user'

const userStore = useUserStore()
defineProps({
  open: {
    type: Boolean,
    default: false
  }
})

const emits = defineEmits(['close'])

</script>

<style lang="less" scoped>
.drawer-box {
  .row-item__content {
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 16px;
    margin-bottom: 15px;
    .row-item__label {
      width: 80px;
      flex-shrink: 0;
    }
    .row-item__value {
      color: #222;
      flex: 1;
      min-width: 1px;
      word-break: break-all;
    }
  }
}
</style>