You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
109 lines
2.0 KiB
109 lines
2.0 KiB
<template>
|
|
<div class="person-card" :class="{ activeCard: personInfo.id == current }">
|
|
<div class="info">
|
|
<HeadPortrait :imgUrl="personInfo.headImg"></HeadPortrait>
|
|
<div class="info-detail">
|
|
<div class="name">{{ personInfo.name }}</div>
|
|
<!-- <div class="detail">{{ personInfo.detail }}</div> -->
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import HeadPortrait from "./HeadPortrait.vue";
|
|
|
|
export default {
|
|
props: {
|
|
personInfo: {
|
|
default: {
|
|
},
|
|
},
|
|
pcCurrent: {
|
|
default: ''
|
|
}
|
|
},
|
|
components: {
|
|
HeadPortrait,
|
|
},
|
|
data() {
|
|
return {
|
|
current: '',
|
|
}
|
|
},
|
|
watch: {
|
|
pcCurrent: function() {
|
|
this.isActive()
|
|
}
|
|
},
|
|
methods: {
|
|
isActive() {
|
|
this.current = this.pcCurrent
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.person-card {
|
|
width: 280px;
|
|
height: 80px;
|
|
border-radius: 0px;
|
|
background-color: white;
|
|
position: relative;
|
|
cursor: pointer;
|
|
.info {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
width: 90%;
|
|
transform: translate(-50%, -50%);
|
|
overflow: hidden;
|
|
display: flex;
|
|
.info-detail {
|
|
margin-top: 5px;
|
|
margin-left: 20px;
|
|
.name {
|
|
color: #070707;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
margin-bottom: 5px;
|
|
}
|
|
.detail {
|
|
color: #3f5f8f;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
&:hover {
|
|
background-color: #1d90f5;
|
|
transition: 0.3s;
|
|
// box-shadow: 0px 0px 10px 0px rgba(0, 136, 255);
|
|
// box-shadow: 0 5px 20px rgba(251, 152, 11, .5);
|
|
.info {
|
|
.info-detail {
|
|
.detail {
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.activeCard {
|
|
background-color: #1d90f5;
|
|
transition: 0.3s;
|
|
// box-shadow: 3px 2px 10px 0px rgba(0, 136, 255);
|
|
.info {
|
|
.info-detail {
|
|
.detail {
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |