效果展示

组件代码

<div class="cardOneRoot">
    <img :src="itemInfo.psnPicUrl ? itemInfo.psnPicUrl : ''" alt=""/>
    <div class="infoDiv" v-if="itemInfo.noInfo == 1">
        <div v-for="(item2, index2) in confInfo2" :key="index2" v-if="(item2.prop in itemInfo)">
            <div v-if="item2.type == 1">
                <span>{{ item2.label }}：</span>
                <span :style="('maxWidth' in item2)?{'max-width':item2.maxWidth}:{}" :title="itemInfo[item2.prop]">{{ itemInfo[item2.prop] }}</span>
            </div>
            <div v-if="item2.type == 2" class="spcOneHeng">
                <span>{{ item2.label }}：</span>
                <span class="huanHang">{{ itemInfo[item2.prop] }}</span>
            </div>
            <div v-if="item2.type == 3">
                <span>{{ item2.label }}：</span>
                <span>{{ itemInfo[item2.prop] }}</span>
                <span style="margin-left: 20px" v-if="(item2.prop2 in itemInfo)">{{ item2.label2 }}：</span>
                    <span v-if="(item2.prop2 in itemInfo)">{{ itemInfo[item2.prop2] }}</span>
            </div>
            <div v-if="item2.type == 4" style="display: flex">
                <span>{{ item2.label }}：</span>
                <span class="qianHang">{{ itemInfo[item2.prop] }}</span>
            </div>
        </div>
    </div>
    <div class="posiNO" v-if="itemInfo.noInfo == 2">身份未识别</div>
</div>

模拟数据

let cardOne={
    psnPicUrl:"",
    psnCertNoTypeRender:"身份证",
    psnCertNoRender:"99999999999999999",
    psnName:"**",
    psnCertNo:"99999999999999999",
    psnGendName:"男",
    psnNatyName:"汉族",
    cardNo:"9999999",
    addr: "河北省石家庄市桥西区红旗大街123号",
    noInfo:"1"
}

配置参数

【配置】
confInfo2: [
    { type: 1, label: "姓名", prop: "psnName", maxWidth:"100px" },
    { type: 2, label: "号码", prop: "psnCertNo" },
    { type: 3, label: "性别", prop: "psnGendName", label2: "民族", prop2: "psnNatyName"},
    { type: 4, label: "地址", prop: "addr" },
],

样式代码

<style scoped lang="less">
.cardOneRoot {
    position: relative;
    width:300px;
    padding:20px;
    background: #fff;
    border-radius: 3px;
    display: flex;
    box-shadow: 1px 1px 10px rgba(27, 101, 185,0.3);
    &>img{
        width:77px;
        height:95px;
        margin-right: 15px;
    }
    .infoDiv{
        color:#303133;
        font-size: 14px;
        &>div{
            margin-bottom: 10px;
            &:last-child{
                margin-bottom: 0;
            }
            &>div{
                display: flex;
                &.spcOneHeng{
                    display: block;
                }
                &>img{
                    margin-left: 10px;
                    width: 36px;
                    height: 16px;
                }
                &>span{
                    &:nth-child(1),&:nth-child(3){
                        color:#7F7F7F;
                        letter-spacing: 2px;
                        white-space: nowrap;
                    }
                    &:nth-child(2),&:nth-child(4){
                        font-weight: bold;
                        max-width: 220px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                    &.huanHang{
                        display: block;
                    }
                }
            }
        }
    }
    .posiNO {
        font-size: 16px;
        font-weight: bold;
        position: absolute;
        top: 45%;
        left: 50%;
    }
}
</style>