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

<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>