<script setup lang="ts">
definePageMeta({
  layout: 'main',
  middleware: ['auth']
})
</script>

<template>
  <div class="user-info-layout">
    <div class="user-card">
       <div class="user-card-top">
         <Avatar size="xlarge" shape="circle" class="avatar" image="https://api.multiavatar.com/asdasd.svg"/>
          <h2>sdasdas</h2>
          <p>1231231231sdasd2</p>
          <Tag>思科交换机哈克斯的</Tag>
       </div>
      <div class="user-card-bottom">
        <div>
          <p>asdas</p>
          <p>sadasd</p>
        </div><div>
          <p>asdas</p>
          <p>sadasd</p>
        </div>
       </div>
    </div>
    <div class="user-info"></div>
  </div>
</template>

<style scoped lang="scss">
@import "base";
.user-info-layout{
  width: 100%;
  display: grid;
  min-height: 800px;
  border-radius: $radius;
  grid-template-columns: minmax(300px,400px) 3fr;
  gap: $gap*4;
  grid-template-rows: 1fr;
}
.user-card{
  background: $light-bg-color;
  border-radius: $radius;
  border: 1px solid rgba(51, 51, 51, 0.17);
  display: flex;
  flex-direction: column;

}
.user-card-top{
  padding: $padding*3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: $gap;
  .p-avatar{
    width: 150px;
    height: 150px;
  }

  h2{
    font-weight: 500;
  }

  p{
    color: #333;
    //字符间距
    letter-spacing: 1px;
  }
  .p-tag{
    letter-spacing: 1px;
    font-size: 13px;
    padding: $padding*.5;
  }
}
.user-card-bottom{
  border-top: 1px solid rgba(51, 51, 51, 0.17);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: $gap;
  padding: $padding $padding 0;
  div{
    display: flex;
    justify-content: space-between;
    p{
      color: #333;
    }
  }
}
.user-info{
  background: $light-bg-color;
  border-radius: $radius;
  padding: $padding*3;
  border: 1px solid rgba(51, 51, 51, 0.17);
}
</style>