98 lines
1.9 KiB
Vue
98 lines
1.9 KiB
Vue
<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> |