|
|
|
@ -1,30 +1,38 @@ |
|
|
|
|
|
|
|
<template> |
|
|
|
<div class="matter-details-con"> |
|
|
|
<div class="matter-details"> |
|
|
|
<div class="user-img"> |
|
|
|
<img src="@/assets/images/manyidu/dn_bg1.png" alt="" /> |
|
|
|
<img alt="" src="@/assets/images/manyidu/dn_bg1.png"/> |
|
|
|
<div class="user-name">{{ data.name }}</div> |
|
|
|
</div> |
|
|
|
<div class="tags"> |
|
|
|
<!-- <div class="tag" v-if="data.name">{{ data.name }}</div> --> |
|
|
|
<div class="tag red" v-if="data.riskyFlag == '1'">满意度风险人员</div> |
|
|
|
<div class="tag small" v-if="data.gender"> |
|
|
|
<div v-if="data.riskyFlag == '1'" class="tag red">满意度风险人员</div> |
|
|
|
<div v-if="data.gender" class="tag small"> |
|
|
|
{{ genderArr[data.gender] }} |
|
|
|
</div> |
|
|
|
<div :class="[data.gridName.length > 8 ? 'smallFont' : '', 'tag']" v-if="data.gridName">{{ data.gridName }}</div> |
|
|
|
<div :class="[data.idNum.length > 8 ? 'smallFont' : '', 'tag', 'small']" v-if="data.idNum"> |
|
|
|
<div v-if="data.gridName" :class="[data.gridName.length > 8 ? 'smallFont' : '', 'tag']">{{ |
|
|
|
data.gridName |
|
|
|
}} |
|
|
|
</div> |
|
|
|
<div v-if="data.idNum" :class="[data.idNum.length > 8 ? 'smallFont' : '', 'tag', 'small']"> |
|
|
|
{{ $sensitive(data.idNum, 0, 14) }} |
|
|
|
</div> |
|
|
|
<div :class="[data.mobile.length > 8 ? 'smallFont' : '', 'tag']" v-if="data.mobile"> |
|
|
|
<div v-if="data.mobile" :class="[data.mobile.length > 8 ? 'smallFont' : '', 'tag']"> |
|
|
|
{{ $sensitive(data.mobile, 3, 7) }} |
|
|
|
</div> |
|
|
|
<div :class="[data.householdSituation.length > 8 ? 'smallFont' : '', 'tag', 'small']" v-if="data.householdSituation"> |
|
|
|
<div v-if="data.householdSituation" |
|
|
|
:class="[data.householdSituation.length > 8 ? 'smallFont' : '', 'tag', 'small']"> |
|
|
|
{{ data.householdSituation }} |
|
|
|
</div> |
|
|
|
<div :class="[data.birthday.length > 8 ? 'smallFont' : '', 'tag']" v-if="data.birthday"> |
|
|
|
<div v-if="data.birthday" :class="[data.birthday.length > 8 ? 'smallFont' : '', 'tag']"> |
|
|
|
{{ data.birthday }} |
|
|
|
</div> |
|
|
|
<div :class="[data.fullName.length > 8 ? 'smallFont' : '', 'tag']" v-if="data.fullName">{{ data.fullName }}</div> |
|
|
|
<div v-if="data.fullName" :class="[data.fullName.length > 8 ? 'smallFont' : '', 'tag']">{{ |
|
|
|
data.fullName |
|
|
|
}} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
@ -65,86 +73,97 @@ export default { |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
<style lang="scss" scoped> |
|
|
|
.matter-details-con { |
|
|
|
padding: 12px 0 36px; |
|
|
|
} |
|
|
|
.matter-details { |
|
|
|
position: relative; |
|
|
|
width: 607px; |
|
|
|
height: 372px; |
|
|
|
margin: 0 auto; |
|
|
|
background: url("@/assets/images/manyidu/dn_bg2.png") no-repeat center bottom; |
|
|
|
position: relative; |
|
|
|
margin: 12px auto 60px; |
|
|
|
} |
|
|
|
|
|
|
|
.user-img { |
|
|
|
position: absolute; |
|
|
|
left: calc(50% - 87px); |
|
|
|
top: calc(50% - 37px); |
|
|
|
left: calc(50% - 87px); |
|
|
|
} |
|
|
|
|
|
|
|
.tag { |
|
|
|
font-size: 14px; |
|
|
|
font-weight: 400; |
|
|
|
line-height: 16px; |
|
|
|
position: absolute; |
|
|
|
background: url("@/assets/images/manyidu/dn_big.png") center no-repeat; |
|
|
|
width: 108px; |
|
|
|
height: 107px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
font-size: 14px; |
|
|
|
font-weight: 400; |
|
|
|
color: #ffffff; |
|
|
|
line-height: 16px; |
|
|
|
box-sizing: border-box; |
|
|
|
width: 108px; |
|
|
|
height: 107px; |
|
|
|
padding: 24px; |
|
|
|
text-align: center; |
|
|
|
word-break: break-all; |
|
|
|
color: #ffffff; |
|
|
|
background: url("@/assets/images/manyidu/dn_big.png") center no-repeat; |
|
|
|
|
|
|
|
&.small { |
|
|
|
width: 89px; |
|
|
|
height: 89px; |
|
|
|
background: url("@/assets/images/manyidu/dn_small.png") center no-repeat; |
|
|
|
padding: 16px; |
|
|
|
background: url("@/assets/images/manyidu/dn_small.png") center no-repeat; |
|
|
|
} |
|
|
|
|
|
|
|
&.red { |
|
|
|
background: url("@/assets/images/manyidu/dn_red.png") center no-repeat; |
|
|
|
color: #fe0000; |
|
|
|
background: url("@/assets/images/manyidu/dn_red.png") center no-repeat; |
|
|
|
} |
|
|
|
|
|
|
|
&:nth-of-type(1) { |
|
|
|
left: 42px; |
|
|
|
bottom: 185px; |
|
|
|
left: 42px; |
|
|
|
} |
|
|
|
|
|
|
|
&:nth-of-type(2) { |
|
|
|
left: 499px; |
|
|
|
bottom: 157px; |
|
|
|
left: 499px; |
|
|
|
} |
|
|
|
|
|
|
|
&:nth-of-type(3) { |
|
|
|
left: 194px; |
|
|
|
bottom: 245px; |
|
|
|
left: 194px; |
|
|
|
} |
|
|
|
|
|
|
|
&:nth-of-type(4) { |
|
|
|
left: 384px; |
|
|
|
bottom: 240px; |
|
|
|
left: 384px; |
|
|
|
} |
|
|
|
|
|
|
|
&:nth-of-type(5) { |
|
|
|
left: 0; |
|
|
|
bottom: 15px; |
|
|
|
left: 0; |
|
|
|
} |
|
|
|
|
|
|
|
&:nth-of-type(6) { |
|
|
|
left: 453px; |
|
|
|
bottom: 10px; |
|
|
|
left: 453px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.smallFont { |
|
|
|
font-size: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
.user-name { |
|
|
|
width: 174px; |
|
|
|
text-align: center; |
|
|
|
height: 17px; |
|
|
|
font-size: 18px; |
|
|
|
font-family: PingFang SC; |
|
|
|
font-size: 18px; |
|
|
|
font-weight: bold; |
|
|
|
color: #ffffff; |
|
|
|
line-height: 22px; |
|
|
|
width: 174px; |
|
|
|
height: 17px; |
|
|
|
margin-top: -12px; |
|
|
|
text-align: center; |
|
|
|
color: #ffffff; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
战立标
2 years ago
