288 lines
13 KiB
HTML
288 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>XSynergy AR远程协作 – 高保真原型</title>
|
||
<style>
|
||
/* ========== 设计变量 ========== */
|
||
:root{
|
||
--primary:#0A7CFF;
|
||
--secondary:#F0F8FF;
|
||
--accent:#FFD700;
|
||
--danger:#FF4D4F;
|
||
--success:#52C41A;
|
||
--text:#333333;
|
||
--text-light:#888888;
|
||
--white:#FFFFFF;
|
||
--radius:12px;
|
||
--gap:16px;
|
||
--font:"Inter","Source Han Sans",system-ui;
|
||
}
|
||
*{box-sizing:border-box;font-family:var(--font);}
|
||
body{margin:0;background:#f5f5f5;color:var(--text);}
|
||
h1,h2,h3{font-weight:600;margin:0 0 var(--gap);}
|
||
p{margin:0 0 8px;}
|
||
.screen{max-width:375px;margin:20px auto;background:var(--white);min-height:812px;
|
||
border-radius:var(--radius);overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.1);}
|
||
.header,.footer{display:flex;align-items:center;justify-content:space-between;padding:var(--gap);}
|
||
.header{background:var(--primary);color:var(--white);}
|
||
.btn{
|
||
display:inline-flex;align-items:center;justify-content:center;
|
||
height:48px;padding:0 24px;border-radius:var(--radius);
|
||
font-size:16px;font-weight:500;cursor:pointer;border:none;
|
||
}
|
||
.btn-primary{background:var(--primary);color:var(--white);}
|
||
.btn-secondary{background:transparent;color:var(--primary);border:1px solid var(--primary);}
|
||
.btn-danger{background:var(--danger);color:var(--white);}
|
||
.btn:disabled{background:#bbb;color:#eee;cursor:not-allowed;}
|
||
.input,textarea{
|
||
width:100%;padding:14px;border-radius:var(--radius);border:1px solid #ddd;
|
||
font-size:16px;margin-bottom:var(--gap);
|
||
}
|
||
.input:focus{border-color:var(--primary);outline:none;}
|
||
.tabs{display:flex;border-top:1px solid #eee;background:var(--white);}
|
||
.tabs .tab{flex:1;text-align:center;padding:12px 0;font-size:12px;color:var(--text-light);}
|
||
.tabs .tab.active{color:var(--primary);border-top:2px solid var(--primary);}
|
||
.card{background:var(--white);border-radius:var(--radius);padding:var(--gap);
|
||
margin-bottom:var(--gap);box-shadow:0 2px 8px rgba(0,0,0,.05);}
|
||
.mini-avatar{width:32px;height:32px;border-radius:50%;margin-right:6px;}
|
||
.empty{text-align:center;padding:60px 20px;color:var(--text-light);}
|
||
.empty svg{width:80px;height:80px;margin-bottom:12px;fill:#ddd;}
|
||
.loading{display:flex;justify-content:center;padding:40px;}
|
||
.spinner{width:32px;height:32px;border:4px solid #eee;border-top:4px solid var(--primary);
|
||
border-radius:50%;animation:spin 1s linear infinite;}
|
||
@keyframes spin{to{transform:rotate(360deg);}}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- 1. 登录页 -->
|
||
<section class="screen" id="login">
|
||
<div style="padding:60px 24px 0;text-align:center;">
|
||
<svg width="64" height="64" viewBox="0 0 64 64" fill="var(--primary)">
|
||
<circle cx="32" cy="32" r="30" stroke-width="4" fill="none"/>
|
||
<path d="M32 20v24M20 32h24" stroke-width="4"/>
|
||
</svg>
|
||
<h2 style="margin-top:12px;">XSynergy</h2>
|
||
</div>
|
||
<div style="padding:40px 24px;">
|
||
<input class="input" type="tel" placeholder="手机号">
|
||
<div style="display:flex;gap:8px;">
|
||
<input class="input" type="text" placeholder="验证码" style="flex:1;">
|
||
<button class="btn btn-secondary" style="width:120px;">获取验证码</button>
|
||
</div>
|
||
<button class="btn btn-primary" style="width:100%;">登录</button>
|
||
<div style="display:flex;justify-content:space-between;margin-top:12px;font-size:12px;">
|
||
<label><input type="checkbox"> 记住我</label>
|
||
<span>忘记密码 | SSO登录</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 2. 主页 / 仪表盘 -->
|
||
<section class="screen" id="dashboard">
|
||
<div class="header">
|
||
<span>你好，张工</span>
|
||
</div>
|
||
<div style="padding:var(--gap);">
|
||
<button class="btn btn-primary" style="width:100%;margin-bottom:12px;">发起协作</button>
|
||
<div style="display:flex;gap:12px;">
|
||
<button class="btn btn-secondary" style="flex:1;">加入协作</button>
|
||
<button class="btn btn-secondary" style="flex:1;">预约协作</button>
|
||
</div>
|
||
<h3 style="margin-top:24px;">今日预约</h3>
|
||
<div class="card">
|
||
<div style="display:flex;justify-content:space-between;align-items:center;">
|
||
<div>
|
||
<strong>设备年检远程指导</strong>
|
||
<p style="font-size:12px;color:var(--text-light);">14:00-15:00 · 李经理</p>
|
||
</div>
|
||
<span style="background:var(--accent);color:#000;font-size:12px;padding:2px 6px;border-radius:4px;">即将开始</span>
|
||
</div>
|
||
<button class="btn btn-primary" style="width:100%;margin-top:8px;">立即加入</button>
|
||
</div>
|
||
<div class="empty">
|
||
<svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
|
||
<p>暂无预约会议，发起一个吧！</p>
|
||
</div>
|
||
</div>
|
||
<div class="tabs">
|
||
<div class="tab active">首页</div>
|
||
<div class="tab">通讯录</div>
|
||
<div class="tab">历史记录</div>
|
||
<div class="tab">我的</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 3. 协作中界面 -->
|
||
<section class="screen" id="session">
|
||
<!-- 背景为摄像头画面 -->
|
||
<div style="position:relative;width:100%;height:100%;background:url('https://images.unsplash.com/photo-1581833971358-2c8b550f87b3?auto=format&fit=crop&w=800&q=60') center/cover;">
|
||
<!-- 顶部状态栏 -->
|
||
<div class="header" style="background:rgba(0,0,0,.35);position:absolute;top:0;left:0;right:0;">
|
||
<span>00:12:34</span>
|
||
<button class="btn btn-danger" style="height:32px;padding:0 12px;">挂断</button>
|
||
</div>
|
||
<!-- 画中画视频 -->
|
||
<div style="position:absolute;right:12px;top:60px;width:100px;height:140px;border-radius:var(--radius);overflow:hidden;border:2px solid var(--white);">
|
||
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=320&q=60" width="100" height="140">
|
||
</div>
|
||
<!-- 底部控制栏 -->
|
||
<div style="position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.45);display:flex;justify-content:space-around;padding:12px;">
|
||
<button class="btn" style="background:none;color:#fff;font-size:12px;">🎤</button>
|
||
<button class="btn" style="background:none;color:#fff;font-size:12px;">📹</button>
|
||
<button class="btn" style="background:none;color:#fff;font-size:12px;">✏️</button>
|
||
<button class="btn" style="background:none;color:#fff;font-size:12px;">📤</button>
|
||
<button class="btn" style="background:none;color:#fff;font-size:12px;">⋯</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 4. AR标注模式 -->
|
||
<section class="screen" id="ar">
|
||
<!-- 背景同上 -->
|
||
<div style="position:relative;width:100%;height:100%;background:url('https://images.unsplash.com/photo-1581833971358-2c8b550f87b3?auto=format&fit=crop&w=800&q=60') center/cover;">
|
||
<div style="position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.6);display:flex;justify-content:space-around;padding:12px;">
|
||
<button class="btn" style="background:none;color:#fff;font-size:12px;">↗️</button>
|
||
<button class="btn" style="background:none;color:#fff;font-size:12px;">〰️</button>
|
||
<button class="btn" style="background:none;color:#fff;font-size:12px;">▭</button>
|
||
<button class="btn" style="background:none;color:#fff;font-size:12px;">🎨</button>
|
||
<button class="btn" style="background:none;color:#fff;font-size:12px;">🗑️</button>
|
||
<button class="btn" style="background:none;color:#fff;font-size:12px;">✖️</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 5. 历史记录页 -->
|
||
<section class="screen" id="history">
|
||
<div class="header">
|
||
<h2 style="margin:0;font-size:18px;">历史记录</h2>
|
||
<input class="input" placeholder="搜索会议/联系人" style="height:32px;margin:0 0 0 8px;">
|
||
</div>
|
||
<div style="padding:var(--gap);">
|
||
<div class="card">
|
||
<strong>设备年检远程指导</strong>
|
||
<p style="font-size:12px;color:var(--text-light);">2025-09-03 · 60分钟</p>
|
||
<div style="margin:8px 0;">
|
||
<img class="mini-avatar" src="https://i.pravatar.cc/32?a=1">
|
||
<img class="mini-avatar" src="https://i.pravatar.cc/32?a=2">
|
||
<img class="mini-avatar" src="https://i.pravatar.cc/32?a=3">
|
||
<span style="font-size:12px;color:var(--text-light);">+2</span>
|
||
</div>
|
||
<div style="display:flex;gap:12px;">
|
||
<button class="btn btn-secondary" style="flex:1;font-size:14px;">回放</button>
|
||
<button class="btn btn-primary" style="flex:1;font-size:14px;">查看纪要</button>
|
||
</div>
|
||
</div>
|
||
<div class="loading"><div class="spinner"></div></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 6. 通讯录页 -->
|
||
<section class="screen" id="contacts">
|
||
<div class="header">
|
||
<input class="input" placeholder="搜索姓名/部门/职位" style="margin:0;">
|
||
</div>
|
||
<div style="padding:var(--gap);">
|
||
<div class="card" style="padding:8px var(--gap);">
|
||
<div style="display:flex;justify-content:space-between;align-items:center;">
|
||
<span>🖥️ 研发中心</span>
|
||
<span style="font-size:12px;color:var(--text-light);">32人</span>
|
||
</div>
|
||
</div>
|
||
<div class="card" style="padding:8px var(--gap);">
|
||
<img class="mini-avatar" src="https://i.pravatar.cc/32?a=4">
|
||
<span>王工 · 前端负责人</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 7. 预约协作浮层 -->
|
||
<section class="screen" id="booking">
|
||
<div class="header">
|
||
<button class="btn btn-secondary">取消</button>
|
||
<h2 style="font-size:18px;">预约协作</h2>
|
||
<button class="btn btn-primary" disabled>完成</button>
|
||
</div>
|
||
<div style="padding:var(--gap);">
|
||
<input class="input" placeholder="会议主题*">
|
||
<div class="card" style="display:flex;align-items:center;">
|
||
<span>参会人员*</span>
|
||
<button style="margin-left:auto;font-size:24px;background:none;border:none;color:var(--primary);">+</button>
|
||
</div>
|
||
<input class="input" type="datetime-local" value="2025-09-04T14:00">
|
||
<input class="input" type="datetime-local" value="2025-09-04T15:00">
|
||
<textarea class="input" rows="3" placeholder="会议描述（可选）"></textarea>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 8. 会议纪要页 -->
|
||
<section class="screen" id="minutes">
|
||
<div class="header">
|
||
<h2 style="margin:0;font-size:18px;">设备年检远程指导</h2>
|
||
</div>
|
||
<div style="padding:var(--gap);">
|
||
<p style="font-size:12px;color:var(--text-light);">2025-09-03 · 60分钟 · 5人</p>
|
||
<div class="card">
|
||
<h3>会议摘要</h3>
|
||
<p>针对A栋机房UPS年检，远程专家指导现场完成电池组检测…</p>
|
||
</div>
|
||
<div class="card">
|
||
<h3>关键决策</h3>
|
||
<ul style="padding-left:16px;font-size:14px;">
|
||
<li>更换第3组电池</li>
|
||
<li>下周三复测</li>
|
||
</ul>
|
||
</div>
|
||
<div class="card">
|
||
<h3>待办事项</h3>
|
||
<label style="display:flex;align-items:center;font-size:14px;margin-bottom:6px;">
|
||
<input type="checkbox" style="margin-right:8px;"> 采购电池组（王工，截止9/10）
|
||
</label>
|
||
</div>
|
||
<div style="display:flex;gap:12px;margin-top:24px;">
|
||
<button class="btn btn-secondary" style="flex:1;">下载纪要</button>
|
||
<button class="btn btn-primary" style="flex:1;">播放回放</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 9. “我的”页面 -->
|
||
<section class="screen" id="me">
|
||
<div style="padding:var(--gap);text-align:center;">
|
||
<img src="https://i.pravatar.cc/80?a=5" style="border-radius:50%;width:80px;height:80px;">
|
||
<h2 style="margin:8px 0 2px;">张工</h2>
|
||
<p style="font-size:12px;color:var(--text-light);">研发中心 · 高级工程师</p>
|
||
</div>
|
||
<div style="padding:0 var(--gap);">
|
||
<div class="card" style="padding:12px var(--gap);">个人资料</div>
|
||
<div class="card" style="padding:12px var(--gap);">设置</div>
|
||
<div class="card" style="padding:12px var(--gap);">帮助与反馈</div>
|
||
<div class="card" style="padding:12px var(--gap);">关于我们</div>
|
||
</div>
|
||
<div style="padding:var(--gap);">
|
||
<button class="btn btn-danger" style="width:100%;">退出登录</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 10. 空/加载/错误状态示例 -->
|
||
<section class="screen" id="empty">
|
||
<div class="empty">
|
||
<svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/></svg>
|
||
<h3>暂无数据</h3>
|
||
<p>这里空空如也～</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="screen" id="error">
|
||
<div class="empty">
|
||
<svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>
|
||
<h3>网络连接失败</h3>
|
||
<button class="btn btn-primary">点击重试</button>
|
||
</div>
|
||
</section>
|
||
|
||
</body>
|
||
</html>
|