114 lines
2.3 KiB
Vue
114 lines
2.3 KiB
Vue
<template>
|
|
<el-card class="box-card-component" style="margin-left:8px;">
|
|
|
|
<el-container>
|
|
<el-aside class="avatar-side" width="200px">
|
|
<pan-thumb :image="person.avatar || 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif'" />
|
|
</el-aside>
|
|
<el-container>
|
|
<el-header>
|
|
<h3>{{ person.name }}</h3>
|
|
</el-header>
|
|
<el-main class="skillbars">
|
|
<div style="position:relative;">
|
|
<div v-for="skill in sortSkills(person.skills)" :key="skill.name" class="progress-item">
|
|
<span>{{ skill.name }}</span>
|
|
<el-progress :percentage="skill.strength" />
|
|
</div>
|
|
<div>
|
|
<el-button type="primary">Kontaktieren</el-button>
|
|
</div>
|
|
</div>
|
|
</el-main>
|
|
</el-container>
|
|
</el-container>
|
|
|
|
</el-card>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from 'vuex'
|
|
import PanThumb from '@/components/PanThumb'
|
|
|
|
export default {
|
|
components: { PanThumb },
|
|
filters: {
|
|
statusFilter(status) {
|
|
const statusMap = {
|
|
success: 'success',
|
|
pending: 'danger'
|
|
}
|
|
return statusMap[status]
|
|
}
|
|
},
|
|
props: {
|
|
person: {
|
|
type: Object,
|
|
default: () => { return { name: 'Max Mustermann' } }
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
statisticsData: {
|
|
article_count: 1024,
|
|
pageviews_count: 1024
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters([
|
|
'name',
|
|
'avatar',
|
|
'roles'
|
|
])
|
|
},
|
|
methods: {
|
|
sortSkills(skills) {
|
|
return skills.sort((a, b) => (a.strength > b.strength) ? -1 : 1)
|
|
}
|
|
}}
|
|
</script>
|
|
|
|
<style lang="scss" >
|
|
.box-card-component{
|
|
.el-card__header {
|
|
padding: 0px!important;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss" scoped>
|
|
.box-card-component {
|
|
.box-card-header {
|
|
position: relative;
|
|
height: 50px;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
transition: all 0.2s linear;
|
|
&:hover {
|
|
transform: scale(1.1, 1.1);
|
|
filter: contrast(130%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.avatar-side{
|
|
background-color: transparent;
|
|
}
|
|
.skillbars {
|
|
padding-top:0;
|
|
}
|
|
|
|
.progress-item {
|
|
margin-bottom: 10px;
|
|
font-size: 14px;
|
|
}
|
|
@media only screen and (max-width: 1510px){
|
|
.mallki-text{
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
</style>
|