103 lines
2.2 KiB
Vue
103 lines
2.2 KiB
Vue
|
<template>
|
||
|
|
<div class="swiper-card">
|
||
|
|
<div class="avator">
|
||
|
|
<img :src="cardInfo.pictureUrl || cardInfo.facePicUrl" alt="" class="avator-img">
|
||
|
|
</div>
|
||
|
|
<div class="info">
|
||
|
|
<div class="name_cls">
|
||
|
|
<span class="name">{{ cardInfo.personnelName }}</span>
|
||
|
|
<span class="cls">{{ cardInfo.departmentName }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="date">{{ getTime(cardInfo.eventTime) }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import moment from 'moment'
|
||
|
|
export default {
|
||
|
|
name: "SwiperCard",
|
||
|
|
props: {
|
||
|
|
cardInfo: {
|
||
|
|
type: Object,
|
||
|
|
default: () => ({})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getTime (time) {
|
||
|
|
return moment(time).format('YYYY-MM-DD HH:mm:ss')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="less">
|
||
|
|
@import "assets/styles/mixin";
|
||
|
|
.swiper-card {
|
||
|
|
background: url('assets/images/顶部本月的粉 3.png') left top no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
width: 166px;
|
||
|
|
height: 213px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 10px;
|
||
|
|
margin-right: 10px;
|
||
|
|
display: inline-block;
|
||
|
|
&:last-child {
|
||
|
|
margin-right: 0;
|
||
|
|
}
|
||
|
|
.avator {
|
||
|
|
height: 141px;
|
||
|
|
.avator-img {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.info {
|
||
|
|
margin-top: 5px;
|
||
|
|
.name_cls {
|
||
|
|
.clear-fix;
|
||
|
|
.name {
|
||
|
|
font-family: MicrosoftYaHeiUI-Bold;
|
||
|
|
font-size: 16px;
|
||
|
|
color: #9FF7FF;
|
||
|
|
letter-spacing: 0;
|
||
|
|
line-height: 24px;
|
||
|
|
font-weight: 700;
|
||
|
|
padding-right: 2px;
|
||
|
|
float: left;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
white-space: nowrap;
|
||
|
|
width: calc(100% - 70px);
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
.cls {
|
||
|
|
float: right;
|
||
|
|
border: 1px solid #1BF3DC;
|
||
|
|
border-radius: 4px;
|
||
|
|
font-family: MicrosoftYaHeiUI;
|
||
|
|
font-size: 14px;
|
||
|
|
color: #1BF3DC;
|
||
|
|
letter-spacing: 0;
|
||
|
|
line-height: 1;
|
||
|
|
font-weight: 400;
|
||
|
|
padding: 2px 4px;
|
||
|
|
width: 70px;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.date {
|
||
|
|
margin-top: 5px;
|
||
|
|
font-family: HIKLDH-Number-CondensedMedium;
|
||
|
|
font-size: 14px;
|
||
|
|
color: rgba(255,255,255,0.50);
|
||
|
|
letter-spacing: 0;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|