<template>
  <div class="lg:flex">
    <Avatar :src="headerImg" :size="60" class="!mx-auto !block" />
    <div class="flex flex-col justify-center title-box">
      <h1 class="title1">Adam Rignl</h1>
      <span class="title2"> Hi~ 欢迎来到力软低代码设计平台！</span>
    </div>
    <div class="flex flex-1 justify-end">
      <div class="img-box mr">
        <img :src="RightImg1" class="img" />
      </div>
      <div class="img-box">
        <img :src="RightImg2" class="img" />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  // import { computed } from 'vue';
  import { Avatar } from 'ant-design-vue';
  // import { useUserStore } from '/@/store/modules/user';
  import headerImg from '/@/assets/images/platform/head.png';
  import RightImg1 from '/@/assets/images/platform/head-right1.png';
  import RightImg2 from '/@/assets/images/platform/head-right2.png';
  // const userStore = useUserStore();
  // const userinfo = computed(() => userStore.getUserInfo);
</script>
<style lang="less" scoped>
  .title-box {
    margin-left: 14px;
  }

  .title1 {
    font-weight: bold;
    font-size: 18px;
    color: #1c2532;
    line-height: 21px;
  }

  .title2 {
    font-weight: 500;
    font-size: 16px;
    color: #6b788d;
    line-height: 19px;
    text-align: left;
  }

  .img-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    background: rgb(255 255 255 / 50%);
    border-radius: 10px;

    .img {
      width: 25px;
      height: 28px;
    }
  }

  .mr {
    margin-right: 15px;
  }
</style>
