473 lines
11 KiB
HTML
473 lines
11 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh-CN">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||
|
|
<title>员工名片卡片原型</title>
|
||
|
|
<style>
|
||
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
|
body {
|
||
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
|
||
|
|
background: #ededed;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
min-height: 100vh;
|
||
|
|
}
|
||
|
|
.phone-frame {
|
||
|
|
width: 375px;
|
||
|
|
background: #ededed;
|
||
|
|
min-height: 100vh;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 顶部导航栏 */
|
||
|
|
.nav-bar {
|
||
|
|
background: #f7f7f7;
|
||
|
|
height: 44px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
border-bottom: 1px solid #e0e0e0;
|
||
|
|
position: sticky;
|
||
|
|
top: 0;
|
||
|
|
z-index: 10;
|
||
|
|
}
|
||
|
|
.nav-bar .title {
|
||
|
|
font-size: 17px;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #1a1a1a;
|
||
|
|
}
|
||
|
|
.nav-bar .back {
|
||
|
|
position: absolute;
|
||
|
|
left: 12px;
|
||
|
|
font-size: 15px;
|
||
|
|
color: #07C160;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 聊天区域 */
|
||
|
|
.chat-area {
|
||
|
|
flex: 1;
|
||
|
|
padding: 12px 16px;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 16px;
|
||
|
|
overflow-y: auto;
|
||
|
|
padding-bottom: 80px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 时间戳 */
|
||
|
|
.time-stamp {
|
||
|
|
text-align: center;
|
||
|
|
font-size: 12px;
|
||
|
|
color: #999;
|
||
|
|
margin: 8px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 消息行 */
|
||
|
|
.msg-row {
|
||
|
|
display: flex;
|
||
|
|
gap: 8px;
|
||
|
|
max-width: 100%;
|
||
|
|
}
|
||
|
|
.msg-row.agent { flex-direction: row; }
|
||
|
|
.msg-row.user { flex-direction: row-reverse; }
|
||
|
|
|
||
|
|
.avatar {
|
||
|
|
width: 40px;
|
||
|
|
height: 40px;
|
||
|
|
border-radius: 6px;
|
||
|
|
flex-shrink: 0;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
font-size: 16px;
|
||
|
|
color: #fff;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
.avatar.agent { background: #07C160; }
|
||
|
|
.avatar.user { background: #5d9cec; }
|
||
|
|
|
||
|
|
.msg-content {
|
||
|
|
max-width: 260px;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
.msg-row.user .msg-content { align-items: flex-end; }
|
||
|
|
|
||
|
|
.sender-name {
|
||
|
|
font-size: 12px;
|
||
|
|
color: #999;
|
||
|
|
margin-bottom: 2px;
|
||
|
|
margin-left: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bubble {
|
||
|
|
padding: 10px 14px;
|
||
|
|
border-radius: 8px;
|
||
|
|
font-size: 15px;
|
||
|
|
line-height: 1.5;
|
||
|
|
word-break: break-word;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.agent .bubble {
|
||
|
|
background: #fff;
|
||
|
|
color: #1a1a1a;
|
||
|
|
border-top-left-radius: 2px;
|
||
|
|
}
|
||
|
|
.user .bubble {
|
||
|
|
background: #95EC69;
|
||
|
|
color: #1a1a1a;
|
||
|
|
border-top-right-radius: 2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* === 员工名片卡片 === */
|
||
|
|
.contact-card {
|
||
|
|
width: 260px;
|
||
|
|
background: #fff;
|
||
|
|
border-radius: 8px;
|
||
|
|
overflow: hidden;
|
||
|
|
border-top-left-radius: 2px;
|
||
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
|
||
|
|
}
|
||
|
|
|
||
|
|
.card-header {
|
||
|
|
padding: 14px 16px 10px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 10px;
|
||
|
|
border-bottom: 1px solid #f0f0f0;
|
||
|
|
}
|
||
|
|
.card-avatar {
|
||
|
|
width: 44px;
|
||
|
|
height: 44px;
|
||
|
|
border-radius: 6px;
|
||
|
|
flex-shrink: 0;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
font-size: 18px;
|
||
|
|
color: #fff;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
.card-avatar.wang { background: linear-gradient(135deg, #667eea, #764ba2); }
|
||
|
|
.card-avatar.li { background: linear-gradient(135deg, #f093fb, #f5576c); }
|
||
|
|
.card-avatar.zhao { background: linear-gradient(135deg, #4facfe, #00f2fe); }
|
||
|
|
|
||
|
|
.card-name-row {
|
||
|
|
flex: 1;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 2px;
|
||
|
|
}
|
||
|
|
.card-name {
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #1a1a1a;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 6px;
|
||
|
|
}
|
||
|
|
.card-name .gender {
|
||
|
|
font-size: 12px;
|
||
|
|
color: #4facfe;
|
||
|
|
}
|
||
|
|
.card-dept {
|
||
|
|
font-size: 13px;
|
||
|
|
color: #888;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card-body {
|
||
|
|
padding: 10px 16px;
|
||
|
|
}
|
||
|
|
.card-info-item {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 8px;
|
||
|
|
padding: 4px 0;
|
||
|
|
font-size: 13px;
|
||
|
|
color: #555;
|
||
|
|
}
|
||
|
|
.card-info-item .label {
|
||
|
|
color: #aaa;
|
||
|
|
width: 56px;
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
.card-info-item .value {
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
.card-info-item .value.responsibility {
|
||
|
|
color: #07C160;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card-footer {
|
||
|
|
padding: 0 16px 12px;
|
||
|
|
}
|
||
|
|
.card-action-btn {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
gap: 4px;
|
||
|
|
width: 100%;
|
||
|
|
height: 36px;
|
||
|
|
background: #07C160;
|
||
|
|
color: #fff;
|
||
|
|
border: none;
|
||
|
|
border-radius: 6px;
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: 500;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: opacity 0.2s;
|
||
|
|
}
|
||
|
|
.card-action-btn:active { opacity: 0.85; }
|
||
|
|
.card-action-btn .icon {
|
||
|
|
font-size: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 名片类型标识 */
|
||
|
|
.card-type-badge {
|
||
|
|
display: inline-block;
|
||
|
|
font-size: 11px;
|
||
|
|
padding: 1px 6px;
|
||
|
|
border-radius: 3px;
|
||
|
|
background: #f0f0f0;
|
||
|
|
color: #888;
|
||
|
|
margin-left: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 底部输入栏 */
|
||
|
|
.input-bar {
|
||
|
|
position: fixed;
|
||
|
|
bottom: 0;
|
||
|
|
width: 375px;
|
||
|
|
background: #f7f7f7;
|
||
|
|
border-top: 1px solid #dcdcdc;
|
||
|
|
padding: 8px 12px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 8px;
|
||
|
|
z-index: 10;
|
||
|
|
}
|
||
|
|
.input-bar input {
|
||
|
|
flex: 1;
|
||
|
|
height: 36px;
|
||
|
|
border: none;
|
||
|
|
border-radius: 4px;
|
||
|
|
background: #fff;
|
||
|
|
padding: 0 12px;
|
||
|
|
font-size: 15px;
|
||
|
|
outline: none;
|
||
|
|
}
|
||
|
|
.input-bar .send-btn {
|
||
|
|
background: #07C160;
|
||
|
|
color: #fff;
|
||
|
|
border: none;
|
||
|
|
padding: 0 16px;
|
||
|
|
height: 36px;
|
||
|
|
border-radius: 4px;
|
||
|
|
font-size: 14px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Toast 提示 */
|
||
|
|
.toast {
|
||
|
|
position: fixed;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
background: rgba(0,0,0,0.75);
|
||
|
|
color: #fff;
|
||
|
|
padding: 12px 20px;
|
||
|
|
border-radius: 8px;
|
||
|
|
font-size: 14px;
|
||
|
|
z-index: 999;
|
||
|
|
opacity: 0;
|
||
|
|
transition: opacity 0.3s;
|
||
|
|
pointer-events: none;
|
||
|
|
max-width: 280px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.toast.show { opacity: 1; }
|
||
|
|
|
||
|
|
/* 系统消息 */
|
||
|
|
.system-msg {
|
||
|
|
text-align: center;
|
||
|
|
font-size: 12px;
|
||
|
|
color: #b0b0b0;
|
||
|
|
margin: 8px 0;
|
||
|
|
}
|
||
|
|
.system-msg span {
|
||
|
|
background: #e8e8e8;
|
||
|
|
padding: 2px 8px;
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div class="phone-frame">
|
||
|
|
<!-- 顶部导航 -->
|
||
|
|
<div class="nav-bar">
|
||
|
|
<span class="back">← 返回</span>
|
||
|
|
<span class="title">IT智能服务台</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 聊天区域 -->
|
||
|
|
<div class="chat-area">
|
||
|
|
|
||
|
|
<!-- 时间戳 -->
|
||
|
|
<div class="time-stamp">今天 01:08</div>
|
||
|
|
|
||
|
|
<!-- 用户消息 -->
|
||
|
|
<div class="msg-row user">
|
||
|
|
<div class="avatar user">宋</div>
|
||
|
|
<div class="msg-content">
|
||
|
|
<div class="bubble">我的电脑连不上打印机了</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 坐席/AI回复 -->
|
||
|
|
<div class="msg-row agent">
|
||
|
|
<div class="avatar agent">AI</div>
|
||
|
|
<div class="msg-content">
|
||
|
|
<div class="sender-name">IT智能助手</div>
|
||
|
|
<div class="bubble">
|
||
|
|
您好，打印机问题属于行政设备范畴，不在IT服务台服务范围内 😊
|
||
|
|
<br><br>
|
||
|
|
为您推荐行政服务相关联系人，您可以直接点击名片联系TA：
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 名片卡片1 -->
|
||
|
|
<div class="msg-row agent">
|
||
|
|
<div class="avatar agent">AI</div>
|
||
|
|
<div class="msg-content">
|
||
|
|
<div class="contact-card" onclick="showToast('正在打开与 王芳 的企微聊天...')">
|
||
|
|
<div class="card-header">
|
||
|
|
<div class="card-avatar wang">王</div>
|
||
|
|
<div class="card-name-row">
|
||
|
|
<div class="card-name">
|
||
|
|
王芳
|
||
|
|
<span class="gender">♀</span>
|
||
|
|
</div>
|
||
|
|
<div class="card-dept">行政部 · 设备管理岗</div>
|
||
|
|
</div>
|
||
|
|
<span class="card-type-badge">员工名片</span>
|
||
|
|
</div>
|
||
|
|
<div class="card-body">
|
||
|
|
<div class="card-info-item">
|
||
|
|
<span class="label">负责业务</span>
|
||
|
|
<span class="value responsibility">打印机/复印机/扫描仪</span>
|
||
|
|
</div>
|
||
|
|
<div class="card-info-item">
|
||
|
|
<span class="label">分机号</span>
|
||
|
|
<span class="value">8002</span>
|
||
|
|
</div>
|
||
|
|
<div class="card-info-item">
|
||
|
|
<span class="label">服务区域</span>
|
||
|
|
<span class="value">滨江园区 3-5楼</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card-footer">
|
||
|
|
<button class="card-action-btn" onclick="event.stopPropagation(); showToast('调用 wx.invoke(\"openEnterpriseChat\", {userids: \"WangFang\"}) → 打开与王芳的企微单聊')">
|
||
|
|
<span class="icon">💬</span>
|
||
|
|
<span>联系TA</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 系统提示 -->
|
||
|
|
<div class="system-msg">
|
||
|
|
<span>以上为AI自动推荐，点击名片可直接发起企微聊天</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 名片卡片2（多推荐场景） -->
|
||
|
|
<div class="msg-row user">
|
||
|
|
<div class="avatar user">宋</div>
|
||
|
|
<div class="msg-content">
|
||
|
|
<div class="bubble">我的工牌丢了，补办找谁？</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="msg-row agent">
|
||
|
|
<div class="avatar agent">AI</div>
|
||
|
|
<div class="msg-content">
|
||
|
|
<div class="sender-name">IT智能助手</div>
|
||
|
|
<div class="bubble">
|
||
|
|
工牌补办属于人力资源服务，为您推荐HR联系人：
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- HR名片 -->
|
||
|
|
<div class="msg-row agent">
|
||
|
|
<div class="avatar agent">AI</div>
|
||
|
|
<div class="msg-content">
|
||
|
|
<div class="contact-card" onclick="showToast('正在打开与 李娜 的企微聊天...')">
|
||
|
|
<div class="card-header">
|
||
|
|
<div class="card-avatar li">李</div>
|
||
|
|
<div class="card-name-row">
|
||
|
|
<div class="card-name">
|
||
|
|
李娜
|
||
|
|
<span class="gender" style="color:#f5576c">♀</span>
|
||
|
|
</div>
|
||
|
|
<div class="card-dept">人力资源部 · 员工服务岗</div>
|
||
|
|
</div>
|
||
|
|
<span class="card-type-badge">员工名片</span>
|
||
|
|
</div>
|
||
|
|
<div class="card-body">
|
||
|
|
<div class="card-info-item">
|
||
|
|
<span class="label">负责业务</span>
|
||
|
|
<span class="value responsibility">工牌补办/考勤异常/入职手续</span>
|
||
|
|
</div>
|
||
|
|
<div class="card-info-item">
|
||
|
|
<span class="label">分机号</span>
|
||
|
|
<span class="value">8005</span>
|
||
|
|
</div>
|
||
|
|
<div class="card-info-item">
|
||
|
|
<span class="label">办公地点</span>
|
||
|
|
<span class="value">滨江园区 A栋3楼</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card-footer">
|
||
|
|
<button class="card-action-btn" onclick="event.stopPropagation(); showToast('调用 wx.invoke(\"openEnterpriseChat\", {userids: \"LiNa\"}) → 打开与李娜的企微单聊')">
|
||
|
|
<span class="icon">💬</span>
|
||
|
|
<span>联系TA</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 底部输入栏 -->
|
||
|
|
<div class="input-bar">
|
||
|
|
<input type="text" placeholder="输入消息..." disabled>
|
||
|
|
<button class="send-btn">发送</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Toast -->
|
||
|
|
<div class="toast" id="toast"></div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
function showToast(msg) {
|
||
|
|
const toast = document.getElementById('toast');
|
||
|
|
toast.textContent = msg;
|
||
|
|
toast.classList.add('show');
|
||
|
|
setTimeout(() => {
|
||
|
|
toast.classList.remove('show');
|
||
|
|
}, 2500);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|