60 lines
1.3 KiB
Vue
60 lines
1.3 KiB
Vue
<template>
|
|
<view class="product-item flex justify-start">
|
|
<view class="cu-avatar xl-view" :style="'background-image:url(' + vCard.picUrl + ');'">
|
|
</view>
|
|
<view class="margin-left-sm product-content">
|
|
<view>
|
|
<view class="text-black text-xl">{{vCard.name}}</view>
|
|
<view>
|
|
<text v-if="vCard.comments.icon" :class="'cuIcon-' + vCard.comments.icon" class="margin-right-xs text-main-color"></text>
|
|
<text>{{vCard.comments.desc}}</text>
|
|
</view>
|
|
</view>
|
|
<view v-for="(item, index) in vCard.extraInfos">
|
|
<view class="text-sm">
|
|
<text v-if="item.icon" :class="'cuIcon-' + item.icon" class="margin-right-xs text-main-color"></text>
|
|
<text>{{item.desc}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'horizontal-name-card',
|
|
props: {
|
|
vCard: {
|
|
type: Object,
|
|
default: {}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.xl-view {
|
|
min-width: 150rpx;
|
|
min-height: 150rpx;
|
|
}
|
|
|
|
.product-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.cu-list.menu-avatar>.cu-item .content .cu-tag.sm {
|
|
display: inline-block;
|
|
margin-left: 0;
|
|
height: 28rpx;
|
|
font-size: 16rpx;
|
|
line-height: 32rpx;
|
|
}
|
|
</style>
|