71 lines
1.3 KiB
Vue
71 lines
1.3 KiB
Vue
<template>
|
|
<div class="mkw-profile">
|
|
<mk-widget-container>
|
|
<div :class="$style.banner"
|
|
:style="os.i.bannerUrl ? `background-image: url(${os.i.bannerUrl}?thumbnail&size=256)` : ''"
|
|
></div>
|
|
<img :class="$style.avatar"
|
|
:src="`${os.i.avatarUrl}?thumbnail&size=96`"
|
|
alt="avatar"
|
|
/>
|
|
<router-link :class="$style.name" :to="`/@${os.i.username}`">{{ name }}</router-link>
|
|
</mk-widget-container>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import define from '../../../common/define-widget';
|
|
import getUserName from '../../../../../renderers/get-user-name';
|
|
|
|
export default define({
|
|
name: 'profile'
|
|
}).extend({
|
|
computed: {
|
|
name() {
|
|
return getUserName(this.os.i);
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style lang="stylus" module>
|
|
.banner
|
|
height 100px
|
|
background-color #f5f5f5
|
|
background-size cover
|
|
background-position center
|
|
cursor pointer
|
|
|
|
.banner:before
|
|
content ""
|
|
display block
|
|
width 100%
|
|
height 100%
|
|
background rgba(0, 0, 0, 0.5)
|
|
|
|
.avatar
|
|
display block
|
|
position absolute
|
|
width 58px
|
|
height 58px
|
|
margin 0
|
|
vertical-align bottom
|
|
top ((100px - 58px) / 2)
|
|
left ((100px - 58px) / 2)
|
|
border none
|
|
border-radius 100%
|
|
box-shadow 0 0 16px rgba(0, 0, 0, 0.5)
|
|
|
|
.name
|
|
display block
|
|
position absolute
|
|
top 0
|
|
left 92px
|
|
margin 0
|
|
line-height 100px
|
|
color #fff
|
|
font-weight bold
|
|
text-shadow 0 0 8px rgba(0, 0, 0, 0.5)
|
|
|
|
</style>
|