RunForge-Frontend/src/pages/User/info/components/user-info-header.vue

<template>
  <div class="header">
    <a-space :size="12" direction="vertical" align="center" class="center">
      <a-avatar :size="80" :imgUrl="user.avatar">
        <img :src="user.avatar" />
      </a-avatar>
      <a-typography-title :heading="5" style="margin: 0">
        {{ user.username }}
      </a-typography-title>
      <div class="user-msg">
        <a-space :size="18">
          <div>
            <icon-email />
            <a-typography-text>{{ user.email }}</a-typography-text>
          </div>
        </a-space>
      </div>
    </a-space>
  </div>
</template>

<script setup>
import { useUserStore } from '@/store/modules/user'
import { ref } from 'vue'

const user = ref('')
const getuser = async () => {
    const userStore = useUserStore()
    let userInfo = await userStore.getInfo()
    user.value = userInfo
}

getuser()
</script>

<style scoped lang="less">
  .header {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 204px;
    color: var(--gray-10);
    background: url('@/assets/userinfo-background.jpg')
      no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 4px;

    .user-msg {
      max-width: 100%;

      :deep(.arco-space) {
        width: 100%;
        justify-content: center;
      }

      :deep(.arco-typography) {
        max-width: 70vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .arco-icon {
        color: rgb(var(--gray-10));
      }
      .arco-typography {
        margin-left: 6px;
      }
    }
  }

  .header::after {
    content: '';
    height: 204px;
    width: 100%;
    background-color: rgba(255,255,255,0.5);
  }

  .center {
    position: absolute;
  }

  @media (max-width: 768px) {
    .header,
    .header::after {
      height: 176px;
    }

    .center {
      width: calc(100% - 24px);
    }
  }
</style>