u
This commit is contained in:
oneao committed
1 parent
eaba6cf17b
commit
1445ed3b6c
19 files changed
+613
-401
No files matched your search
@@ -1,143 +1,232 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>家庭记账列表</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background: #f9f9f9;
|
||||
margin: 20px;
|
||||
}
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>共享空间</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
|
||||
background: #f6f6f7;
|
||||
color: #111;
|
||||
}
|
||||
|
||||
.record-list {
|
||||
max-width: 600px;
|
||||
margin: auto;
|
||||
}
|
||||
.page {
|
||||
max-width: 420px;
|
||||
margin: 0 auto;
|
||||
padding: 16px;
|
||||
background: #fff;
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.record {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 15px;
|
||||
margin-bottom: 8px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
transition: background 0.2s;
|
||||
cursor: default;
|
||||
}
|
||||
h1 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.record:hover {
|
||||
background: #f2f2f2;
|
||||
}
|
||||
/* 按钮 */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 40px;
|
||||
padding: 0 14px;
|
||||
border-radius: 8px;
|
||||
background: #111;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
margin-top: 12px;
|
||||
border: 1px solid #111;
|
||||
}
|
||||
|
||||
.category-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: #eee;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
color: #111;
|
||||
}
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.input-box {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #ddd;
|
||||
margin-top: 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
.list-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 14px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.remark {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
display: none;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.switcher {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.record:hover .remark {
|
||||
display: block;
|
||||
}
|
||||
.switcher button {
|
||||
flex: 1;
|
||||
height: 36px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
border: 1px solid #ccc;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.switcher button.active {
|
||||
background: #111;
|
||||
color: #fff;
|
||||
border-color: #111;
|
||||
}
|
||||
|
||||
.amount {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
}
|
||||
/* 弹窗 */
|
||||
.modal-mask {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.amount.income {
|
||||
color: green;
|
||||
}
|
||||
.modal {
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
max-width: 360px;
|
||||
text-align: center;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.amount.expense {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.member-avatar {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
background: #2196f3;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
.qr-box {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
background: #eee;
|
||||
margin: 16px auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 10px;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="record-list">
|
||||
<div class="record">
|
||||
<div class="category-icon">🛒</div>
|
||||
<div class="info">
|
||||
<div class="name">购物</div>
|
||||
<div class="remark">买菜和日用品</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="amount expense">-50.00</div>
|
||||
<div class="member-avatar">爸</div>
|
||||
</div>
|
||||
<div class="page">
|
||||
<h1>共享空间（预览）</h1>
|
||||
|
||||
<div class="switcher">
|
||||
<button id="btnNotJoined" class="active" onclick="showPage('not')">未加入</button>
|
||||
<button id="btnJoined" onclick="showPage('yes')">已加入</button>
|
||||
</div>
|
||||
|
||||
<div class="record">
|
||||
<div class="category-icon">🍔</div>
|
||||
<div class="info">
|
||||
<div class="name">午餐</div>
|
||||
<div class="remark">外卖订单</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="amount expense">-30.00</div>
|
||||
<div class="member-avatar">妈</div>
|
||||
</div>
|
||||
<!-- 未加入 -->
|
||||
<div id="notJoined">
|
||||
<p>你尚未加入共享空间，你可以创建自己的空间或加入他人的。</p>
|
||||
|
||||
<div class="btn" onclick="openInviteModal()">生成邀请码</div>
|
||||
<div class="btn-outline btn" onclick="openScanModal()">扫码加入</div>
|
||||
|
||||
<div class="btn btn-outline" onclick="toggleJoinInput()">输入邀请码加入</div>
|
||||
|
||||
<input id="inviteInput" type="text" class="input-box" placeholder="邀请码" style="display:none;" />
|
||||
<div id="joinBtn" class="btn" style="display:none;">加入</div>
|
||||
</div>
|
||||
|
||||
<div class="record">
|
||||
<div class="category-icon">💰</div>
|
||||
<div class="info">
|
||||
<div class="name">工资</div>
|
||||
<div class="remark">11月工资到账</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="amount income">+5000.00</div>
|
||||
<div class="member-avatar">我</div>
|
||||
</div>
|
||||
<!-- 已加入 -->
|
||||
<div id="joined" style="display:none;">
|
||||
<p>你已加入共享空间，可查看成员、权限和邀请他人加入。</p>
|
||||
|
||||
<h3 style="margin-top:20px; font-size:16px; font-weight:600;">成员列表</h3>
|
||||
|
||||
<div class="list-item"><span>张三</span><span>管理员</span></div>
|
||||
<div class="list-item"><span>李四</span><span>成员</span></div>
|
||||
<div class="list-item"><span>王五</span><span>成员</span></div>
|
||||
|
||||
<div class="btn" onclick="openInviteModal()">邀请新成员</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 邀请二维码弹窗 -->
|
||||
<div id="inviteModal" class="modal-mask">
|
||||
<div class="modal">
|
||||
<h3>邀请码 / 二维码</h3>
|
||||
<div id="qrBox" class="qr-box">二维码生成中…</div>
|
||||
<div class="btn" onclick="closeInviteModal()">关闭</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 扫码加入弹窗（假装相机界面） -->
|
||||
<div id="scanModal" class="modal-mask">
|
||||
<div class="modal">
|
||||
<h3>扫码加入</h3>
|
||||
<div class="qr-box">[ 相机画面模拟区域 ]</div>
|
||||
<p style="font-size:12px;color:#666;">打开摄像头并扫描共享空间二维码</p>
|
||||
<div class="btn" onclick="closeScanModal()">关闭</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function showPage(type) {
|
||||
const not = document.getElementById("notJoined");
|
||||
const yes = document.getElementById("joined");
|
||||
const btnNot = document.getElementById("btnNotJoined");
|
||||
const btnYes = document.getElementById("btnJoined");
|
||||
|
||||
if (type === 'not') {
|
||||
not.style.display = 'block';
|
||||
yes.style.display = 'none';
|
||||
btnNot.classList.add('active');
|
||||
btnYes.classList.remove('active');
|
||||
} else {
|
||||
not.style.display = 'none';
|
||||
yes.style.display = 'block';
|
||||
btnYes.classList.add('active');
|
||||
btnNot.classList.remove('active');
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------- 邀请码 / 二维码弹窗 -----------------
|
||||
function openInviteModal() {
|
||||
const modal = document.getElementById('inviteModal');
|
||||
const qr = document.getElementById('qrBox');
|
||||
const code = Math.random().toString(36).substring(2, 8).toUpperCase();
|
||||
qr.innerHTML = `二维码：${code}`;
|
||||
modal.style.display = 'flex';
|
||||
}
|
||||
function closeInviteModal() {
|
||||
document.getElementById('inviteModal').style.display = 'none';
|
||||
}
|
||||
|
||||
// ----------------- 扫码加入弹窗 -----------------
|
||||
function openScanModal() {
|
||||
document.getElementById('scanModal').style.display = 'flex';
|
||||
}
|
||||
function closeScanModal() {
|
||||
document.getElementById('scanModal').style.display = 'none';
|
||||
}
|
||||
|
||||
function toggleJoinInput() {
|
||||
const input = document.getElementById("inviteInput");
|
||||
const btn = document.getElementById("joinBtn");
|
||||
const show = input.style.display === 'none';
|
||||
input.style.display = show ? 'block' : 'none';
|
||||
btn.style.display = show ? 'block' : 'none';
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user