u
This commit is contained in:
oneao committed
1 parent
dee2eab404
commit
098a061308
10 files changed
+869
-155
No files matched your search
@@ -1,118 +1,142 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>记账卡片优化版</title>
|
||||
<title>分类共享交互演示</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: "PingFang SC", "Helvetica", "Arial", sans-serif;
|
||||
background-color: #f0f2f5;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
border-radius: 24px;
|
||||
padding: 24px;
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
color: #fff;
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.15);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
font-size: 14px;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.balance {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.summary {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.summary-item {
|
||||
flex: 1;
|
||||
background-color: rgba(255,255,255,0.1);
|
||||
border-radius: 16px;
|
||||
padding: 14px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.summary-item:hover {
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.summary-item .title {
|
||||
font-size: 13px;
|
||||
opacity: 0.8;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.summary-item .amount {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.summary-item .percent {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.percent.up {
|
||||
color: #16c784; /* 上升绿色 */
|
||||
}
|
||||
|
||||
.percent.down {
|
||||
color: #ff6b6b; /* 下降红色 */
|
||||
}
|
||||
|
||||
@media (max-width: 360px) {
|
||||
.balance {
|
||||
font-size: 28px;
|
||||
}
|
||||
.summary-item .amount {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
body { font-family: Arial, sans-serif; padding: 20px; }
|
||||
h2 { margin-top: 20px; }
|
||||
ul { list-style: none; padding-left: 0; }
|
||||
li { padding: 5px 10px; margin: 3px 0; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; }
|
||||
.system { background-color: #d0ebff; }
|
||||
.family { background-color: #ffe5d0; }
|
||||
.user { background-color: #d0ffd8; }
|
||||
.hidden { display: none; }
|
||||
button { margin-left: 5px; }
|
||||
.container { display: flex; gap: 50px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">账户余额</div>
|
||||
<div class="balance">¥ 8,520.00</div>
|
||||
<h1>记账分类共享交互演示</h1>
|
||||
|
||||
<div class="summary">
|
||||
<div class="summary-item">
|
||||
<div class="title">收入</div>
|
||||
<div class="amount">¥ 12,000.00</div>
|
||||
<div class="percent up">+15% ↑</div>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<div class="title">支出</div>
|
||||
<div class="amount">¥ 3,480.00</div>
|
||||
<div class="percent down">-5% ↓</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div>
|
||||
<h2>用户 A 视图</h2>
|
||||
<ul id="userAList"></ul>
|
||||
</div>
|
||||
<div>
|
||||
<h2>用户 B 视图</h2>
|
||||
<ul id="userBList"></ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>操作区（模拟修改）</h2>
|
||||
<p>选择用户修改系统分类或隐藏/重命名：</p>
|
||||
<select id="selectUser">
|
||||
<option value="A">用户 A</option>
|
||||
<option value="B">用户 B</option>
|
||||
</select>
|
||||
|
||||
<select id="selectCategory">
|
||||
</select>
|
||||
|
||||
<input type="text" id="newName" placeholder="新名字">
|
||||
<button id="updateName">修改名字</button>
|
||||
<button id="hideCategory">隐藏分类</button>
|
||||
|
||||
<script>
|
||||
// 系统默认分类
|
||||
const systemCategories = [
|
||||
{ id: 1, name: "餐饮" },
|
||||
{ id: 2, name: "交通" },
|
||||
{ id: 3, name: "购物" },
|
||||
{ id: 4, name: "工资" }
|
||||
];
|
||||
|
||||
// 家庭组 overlay（共享修改）
|
||||
const familyCategoryStatus = {
|
||||
// category_id: name
|
||||
};
|
||||
|
||||
// 用户个人状态
|
||||
const userStatus = {
|
||||
A: { hidden: [], customName: {} },
|
||||
B: { hidden: [], customName: {} }
|
||||
};
|
||||
|
||||
// 填充选择分类下拉
|
||||
const selectCategory = document.getElementById("selectCategory");
|
||||
systemCategories.forEach(cat => {
|
||||
const opt = document.createElement("option");
|
||||
opt.value = cat.id;
|
||||
opt.textContent = cat.name;
|
||||
selectCategory.appendChild(opt);
|
||||
});
|
||||
|
||||
// 渲染函数
|
||||
function render() {
|
||||
["A","B"].forEach(user => {
|
||||
const listEl = document.getElementById(`user${user}List`);
|
||||
listEl.innerHTML = "";
|
||||
|
||||
systemCategories.forEach(cat => {
|
||||
let displayName = cat.name;
|
||||
let cssClass = "system";
|
||||
|
||||
// 家庭共享修改覆盖
|
||||
if (familyCategoryStatus[cat.id]) {
|
||||
displayName = familyCategoryStatus[cat.id];
|
||||
cssClass = "family";
|
||||
}
|
||||
|
||||
// 用户个人自定义
|
||||
if (userStatus[user].customName[cat.id]) {
|
||||
displayName = userStatus[user].customName[cat.id];
|
||||
cssClass = "user";
|
||||
}
|
||||
|
||||
// 用户隐藏
|
||||
if (userStatus[user].hidden.includes(cat.id)) {
|
||||
cssClass += " hidden";
|
||||
}
|
||||
|
||||
const li = document.createElement("li");
|
||||
li.textContent = displayName;
|
||||
li.className = cssClass;
|
||||
listEl.appendChild(li);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
render();
|
||||
|
||||
// 修改名字
|
||||
document.getElementById("updateName").onclick = () => {
|
||||
const user = document.getElementById("selectUser").value;
|
||||
const catId = parseInt(selectCategory.value);
|
||||
const newName = document.getElementById("newName").value.trim();
|
||||
if(!newName) return alert("请输入新名字");
|
||||
|
||||
if(user === "A") {
|
||||
// 用户 A 修改 → 家庭共享
|
||||
familyCategoryStatus[catId] = newName;
|
||||
} else {
|
||||
// 用户 B 修改 → 家庭共享
|
||||
familyCategoryStatus[catId] = newName;
|
||||
}
|
||||
render();
|
||||
document.getElementById("newName").value = "";
|
||||
};
|
||||
|
||||
// 隐藏分类
|
||||
document.getElementById("hideCategory").onclick = () => {
|
||||
const user = document.getElementById("selectUser").value;
|
||||
const catId = parseInt(selectCategory.value);
|
||||
userStatus[user].hidden.push(catId);
|
||||
render();
|
||||
};
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user