155 lines
2.5 KiB
HTML
155 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC";
|
|
background: #f0f2f5;
|
|
}
|
|
|
|
.mask {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0,0,0,.45);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.modal {
|
|
width: 480px;
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
box-shadow: 0 12px 32px rgba(0,0,0,.18);
|
|
}
|
|
|
|
/* 用户区 */
|
|
.header {
|
|
display: flex;
|
|
gap: 14px;
|
|
padding: 16px 20px;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.avatar {
|
|
width: 52px;
|
|
height: 52px;
|
|
border-radius: 50%;
|
|
background: #ddd;
|
|
}
|
|
|
|
.user-main {
|
|
flex: 1;
|
|
}
|
|
|
|
.user-line {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #262626;
|
|
}
|
|
|
|
.user-line .role {
|
|
font-weight: 400;
|
|
color: #595959;
|
|
}
|
|
|
|
.status {
|
|
font-size: 12px;
|
|
color: #52c41a;
|
|
margin-left: 6px;
|
|
}
|
|
|
|
.contact-line {
|
|
margin-top: 6px;
|
|
font-size: 13px;
|
|
color: #595959;
|
|
display: flex;
|
|
gap: 16px;
|
|
}
|
|
|
|
.action {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.btn {
|
|
padding: 6px 14px;
|
|
border-radius: 6px;
|
|
border: none;
|
|
background: #1677ff;
|
|
color: #fff;
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* 公司区 */
|
|
.company {
|
|
padding: 14px 20px 18px;
|
|
}
|
|
|
|
.company-name {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #262626;
|
|
}
|
|
|
|
.company-meta {
|
|
margin-top: 4px;
|
|
font-size: 12px;
|
|
color: #8c8c8c;
|
|
}
|
|
|
|
.desc {
|
|
margin-top: 8px;
|
|
font-size: 13px;
|
|
color: #595959;
|
|
line-height: 1.6;
|
|
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="mask">
|
|
<div class="modal">
|
|
|
|
<!-- 用户 -->
|
|
<div class="header">
|
|
<div class="avatar"></div>
|
|
<div class="user-main">
|
|
<div class="user-line">
|
|
张三 · <span class="role">产品经理</span>
|
|
<span class="status">● 在线</span>
|
|
</div>
|
|
|
|
<div class="contact-line">
|
|
<span>📧 zhangsan@company.com</span>
|
|
<span>📞 138****8888</span>
|
|
</div>
|
|
|
|
<div class="action">
|
|
<button class="btn">发起聊天</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 公司 -->
|
|
<div class="company">
|
|
<div class="company-name">北京某某科技有限公司</div>
|
|
<div class="company-meta">互联网 / SaaS · 北京</div>
|
|
<div class="desc">
|
|
专注于为中大型企业提供数字化解决方案，覆盖供应链、协同办公与数据分析等多个领域，
|
|
服务客户超过 3000 家。
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|