SOURCE

<div class="record-card">
    <div class="communication-record">
        <i class="icon ion-plus add-icon"></i>
        <div class="record-content">新增沟通记录</div>
    </div>
    <div class="date-record">
        <div>2021-4-12</div>
        <div>共5条记录</div>
    </div>
    <div class="classise">
        <div class="classise-content"><div class="tip-dot tip-danger"></div><div>不完整</div></div>
        <div class="classise-content"><div class="tip-dot"></div><div>不完整</div></div>
    </div>
    <div class="record-car">
        <div class="car-header">
            <div class="header-tip">
                <div class="tip-dot"></div>
                <div class="header-text text-weight">1、中信/广东/中山</div>
            </div>
            <div class="header-text text-warm">删除</div>
        </div>
        <div class="split-line"></div>
        <div class="car-footer">
            <div class="footer-info">
                <div class="footer-text">即时通讯工具</div>
                <div class="footer-text">重点项目</div>
            </div>
            <div class="footer-time">
                <div>22:34</div>
            </div>
        </div>
    </div>
    <div class="record-car">
        <div class="car-header">
            <div class="header-tip">
                <div class="tip-dot tip-danger"></div>
                <div class="header-text text-weight">1、中信/广东/中山</div>
            </div>
            <div class="header-text text-warm">删除</div>
        </div>
        <div class="split-line"></div>
        <div class="car-footer">
            <div class="footer-info">
                <div class="footer-text">即时通讯工具</div>
                <div class="footer-text">重点项目</div>
            </div>
            <div class="footer-time">
                <div>22:34</div>
            </div>
        </div>
    </div>
    <div class="record-car">
        <div class="car-header">
            <div class="header-tip">
                <div class="tip-dot tip-danger"></div>
                <div class="header-text text-weight">1、中信/广东/中山</div>
            </div>
            <div class="header-text text-warm">删除</div>
        </div>
        <div class="split-line"></div>
        <div class="car-footer">
            <div class="footer-info">
                <div class="footer-text">即时通讯工具</div>
                <div class="footer-text">重点项目</div>
            </div>
            <div class="footer-time">
                <div>22:34</div>
            </div>
        </div>
    </div>
    <div class="record-car">
        <div class="car-header">
            <div class="header-tip">
                <div class="tip-dot tip-danger"></div>
                <div class="header-text text-weight">1、中信/广东/中山</div>
            </div>
            <div class="header-text text-warm">删除</div>
        </div>
        <div class="split-line"></div>
        <div class="car-footer">
            <div class="footer-info">
                <div class="footer-text">即时通讯工具</div>
                <div class="footer-text">重点项目</div>
            </div>
            <div class="footer-time">
                <div>22:34</div>
            </div>
        </div>
    </div>
</div>

.content {
    font-size: 14px;
    font-family: PingFang-SC-Medium;
	font-weight: normal;
	font-stretch: normal;
    letter-spacing: 0em;
    color: #222222;
}

.communication-record {
    display: flex;
    width: 100%;
    height: 3em;
    align-items: center;
    justify-content: center;
    border: .1em dashed #CCCCCC;
    border-radius: .5em;
    margin: 1em  0 1em;
    font-family: PingFangSC;
	font-size: 0.86rem;
	font-weight: normal;
	letter-spacing: 0em;
	color: #918f8f;
}

.add-icon {
    margin-right: .1em;
}

.date-record {
    display: flex;
    align-items: center;
    justify-content: space-between;
	font-family: PingFangSC;
	font-size: 0.93em;
	font-weight: normal;
	font-stretch: normal;
	line-height: 1.29em;
	letter-spacing: 0em;
	color: #918f8f;
}

.classise {
    display: flex;
}

.classise-content {
    display: flex;
    align-items: center;
    text-align: center;
	font-family: PingFangSC;
	font-size: 0.93em;
	font-weight: normal;
	font-stretch: normal;
	line-height: 2em;
	letter-spacing: 0rem;
	color: #222222;
    margin-right: 1em;
}

.record-car {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 5em;
    padding: .8em;
    margin-top: 1em;
	background-color: #ffffff;
	box-shadow: 0rem 0.14rem 0.29rem 0rem 
		rgba(216, 215, 215, 0.75);
	border-radius: 0.36rem;
}

.car-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.split-line {
    border-bottom: .1em solid #C9C9C9;
    margin: 0 .1em;
}
.car-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color:#00bfff;
}

.header-text {
	font-family: PingFangSC-Medium;
	font-size: 1rem;
	font-stretch: normal;
	line-height: 1.29rem;
	letter-spacing: 0rem;
	color: #222222;
}
.text-weight {
    font-weight: 600;
}

.text-warm {
    color: #e71e23;
}

.tip-dot {
    width: 0.5em;
	height: 0.5em;
    background-color: #26a157;
    margin-right: .5em;
    border-radius: 50%;
}

.tip-danger {
    background-color: #e71e23;
}

.footer-text {
    margin-right: 2em;
	font-family: PingFangSC;
	font-size: 0.86rem;
	font-weight: normal;
	font-stretch: normal;
	line-height: 1.29rem;
	letter-spacing: 0rem;
	color: #77b3e9;
}

.header-tip {
    display: flex;
    align-items: center;
}
.footer-info {
    display: flex;
    align-items: center;
    color:#00bfff;
}

.footer-time {
	font-family: PingFangSC;
	font-size: 0.86em;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0em;
	color: #918f8f;
}