<template>
    <div>
        <div class="chatInfo ">
            <el-avatar :size="48" name="chat" src="../../assets/top_user.png"></el-avatar>
            <div class="main">
                <div class="userInfo">
                    <span class="name">张三</span>
                    <span class="time">2021.01.06</span>
                </div>
                <div class="title">
                    你好，我对贵方的
                    <span>新能源汽车一体化集成动力系统相关配套</span>
                    很感兴趣
                </div>
                <div class="card">
                    <div class="card_item">
                        <div class="text1">单位名称</div>
                        <div class="text2">阿里巴巴股份有限公司</div>
                    </div>
                    <div class="card_item">
                        <div class="text1">职位</div>
                        <div class="text2">运营总监</div>
                    </div>
                    <div class="card_item">
                        <div class="text1">联系人</div>
                        <div class="text2">张三</div>
                    </div>
                    <div class="card_item">
                        <div class="text1">联系方式</div>
                        <div class="text2">15686868686</div>
                    </div>
                    <div class="card_item">
                        <div class="text1">对接描述</div>
                        <div class="text2">
                            负载采用AC-DC、DC-AC两级变换架构，动态响应速度快、输入电压适应范围宽，可将输入的交流能量全功率段回馈至电网压适应范围宽，可将输入的交流能压适应范围宽
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- <div class="chatInfo">
            <el-avatar :size="48" name="chat" src="../../assets/top_user.png"></el-avatar>
            <div class="main">
                <div class="userInfo">
                    <span class="name">张三</span>
                    <span class="time">2021.01.06</span>
                </div>
                <div class="content">
                    嗯嗯，我对贵公司的产品简直不要太喜欢，就算我穷尽我的词汇也无法真实表达我的感受
                </div>
            </div>
        </div> -->
    </div>
</template>

<script>
export default {
    name: 'chatInfo',
    data() {
        return {};
    }
};
</script>
<style lang="less" scoped>
.chatInfo {
    & + .chatInfo {
        margin-top: 12px;
    }
    display: flex;
    // el-avatar {
    //     width: 100%;
    // }

    .main {
        // flex-grow: 1;
        margin-left: 10px;

        font-family: PingFangSC-Regular, PingFang SC;
        .userInfo {
            .name {
                font-size: 14px;
                font-weight: 500;
                color: #000000;
                margin-right: 20px;
            }
            .time {
                font-size: 14px;
                font-weight: 400;
                color: #c8c9cc;
            }
        }
        .title {
            // width: 80%;
            margin: 10px 0px 12px;
            padding: 12px;
            background: #f5f7fa;
            border-radius: 0px 8px 8px 8px;
            font-size: 14px;
            font-weight: 400;
            color: #000000;
            span {
                color: #bf1616;
            }
        }
        .card {
            width: 489px;
            padding: 12px;
            background: #f5f7fa;
            border-radius: 0px 8px 8px 8px;
            font-size: 14px;
            font-weight: 400;
            box-sizing: border-box;
            .card_item {
                display: flex;
                min-height: 30px;
                .text1 {
                    color: #939599;
                    min-width: 60px;
                    margin-right: 16px;
                }
                .text2 {
                    color: #000000;
                }
            }
        }
        .content {
            margin: 10px 0px 12px;
            padding: 12px;
            background: #f5f7fa;
            border-radius: 0px 8px 8px 8px;
            font-size: 14px;
            font-weight: 400;
            color: #000000;
        }
    }
}
</style>
