cancerai/privacy-protection
Archived
1
0 Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

done: basic main table UI

Browse Source
This commit is contained in:
cancerai committed 2026-04-05 23:21:53 +08:00
1 parent 6eb6c59508
commit c687df6a4b
6 files changed
+483 -9
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

PP-binding/frontend/web/.idea/modules.xml
Generated
+8
View File
@@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/web.iml" filepath="$PROJECT_DIR$/.idea/web.iml" />
</modules>
</component>
</project>
PP-binding/frontend/web/.idea/vcs.xml
Generated
+6
View File
@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="$PROJECT_DIR$/../../.." vcs="Git" />
</component>
</project>
PP-binding/frontend/web/.idea/web.iml
Generated
+8
View File
@@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$" />
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>
PP-binding/frontend/web/index.html
+346 -4
View File
@@ -4,19 +4,20 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>平台绑定统计</title> <title>平台绑定统计</title>
<link rel="stylesheet" href="./style/index.css"> <link rel="stylesheet" href="./style/index.css">
<script src="./script/index.js"></script>
</head> </head>
<body> <body>
<div class="title-container"> <div class="title-container" id="title-container">
<h1 class="title">平台绑定统计</h1> <h1 class="title">平台绑定统计</h1>
</div> </div>
<div class="main-container"> <div class="main-container">
<div class="tools-container"> <div class="tools-container" id="tools-container">
<button class="add-item-button">添加</button> <button class="add-item-button">添加</button>
<input placeholder="输入关键字查询"/> <input placeholder="输入关键字查询"/>
<div class="count">总共&nbsp;<span>210</span>&nbsp;条数据</div> <div class="count">总共&nbsp;<span>210</span>&nbsp;条数据</div>
</div> </div>
<div class="table-container"> <div class="table-container" id="table-header">
<div class="table-header"> <div class="table-header">
<div>基础工具类型</div> <div>基础工具类型</div>
<div>基础工具ID</div> <div>基础工具ID</div>
@@ -29,7 +30,348 @@
<div>操作</div> <div>操作</div>
</div> </div>
<div class="table-item"></div> <div class="table-outer-scrollable-container" id="table-outer-scrollable-container">
<div class="table-items-container">
<div>{{手机号}}</div>
<div>{{12345678900}}</div>
<div>{{滴滴打车}}</div>
<div>{{安全}}</div>
<div>{{小爱同学}}</div>
<div>{{123456}}</div>
<div>{{暂无}}</div>
<div class="more-platform-container">
<div>{{邮箱}},&nbsp;</div>
<div>{{微信}},&nbsp;</div>
<div>{{qq}},&nbsp;</div>
<div>{{微博}}</div>
</div>
<div>
<button class="change-item-button">修改</button>
<div class="white-space"></div>
<button class="delete-item-button">删除</button>
</div>
</div>
<div class="table-items-container">
<div>{{手机号}}</div>
<div>{{12345678900}}</div>
<div>{{滴滴打车}}</div>
<div>{{安全}}</div>
<div>{{小爱同学}}</div>
<div>{{123456}}</div>
<div>{{暂无}}</div>
<div class="more-platform-container">
<div>{{邮箱}},&nbsp;</div>
<div>{{微信}},&nbsp;</div>
<div>{{qq}},&nbsp;</div>
<div>{{微博}}</div>
</div>
<div>
<button class="change-item-button">修改</button>
<div class="white-space"></div>
<button class="delete-item-button">删除</button>
</div>
</div>
<div class="table-items-container">
<div>{{手机号}}</div>
<div>{{12345678900}}</div>
<div>{{滴滴打车}}</div>
<div>{{安全}}</div>
<div>{{小爱同学}}</div>
<div>{{123456}}</div>
<div>{{暂无}}</div>
<div class="more-platform-container">
<div>{{邮箱}},&nbsp;</div>
<div>{{微信}},&nbsp;</div>
<div>{{qq}},&nbsp;</div>
<div>{{微博}}</div>
</div>
<div>
<button class="change-item-button">修改</button>
<div class="white-space"></div>
<button class="delete-item-button">删除</button>
</div>
</div>
<div class="table-items-container">
<div>{{手机号}}</div>
<div>{{12345678900}}</div>
<div>{{滴滴打车}}</div>
<div>{{安全}}</div>
<div>{{小爱同学}}</div>
<div>{{123456}}</div>
<div>{{暂无}}</div>
<div class="more-platform-container">
<div>{{邮箱}},&nbsp;</div>
<div>{{微信}},&nbsp;</div>
<div>{{qq}},&nbsp;</div>
<div>{{微博}}</div>
</div>
<div>
<button class="change-item-button">修改</button>
<div class="white-space"></div>
<button class="delete-item-button">删除</button>
</div>
</div>
<div class="table-items-container">
<div>{{手机号}}</div>
<div>{{12345678900}}</div>
<div>{{滴滴打车}}</div>
<div>{{安全}}</div>
<div>{{小爱同学}}</div>
<div>{{123456}}</div>
<div>{{暂无}}</div>
<div class="more-platform-container">
<div>{{邮箱}},&nbsp;</div>
<div>{{微信}},&nbsp;</div>
<div>{{qq}},&nbsp;</div>
<div>{{微博}}</div>
</div>
<div>
<button class="change-item-button">修改</button>
<div class="white-space"></div>
<button class="delete-item-button">删除</button>
</div>
</div>
<div class="table-items-container">
<div>{{手机号}}</div>
<div>{{12345678900}}</div>
<div>{{滴滴打车}}</div>
<div>{{安全}}</div>
<div>{{小爱同学}}</div>
<div>{{123456}}</div>
<div>{{暂无}}</div>
<div class="more-platform-container">
<div>{{邮箱}},&nbsp;</div>
<div>{{微信}},&nbsp;</div>
<div>{{qq}},&nbsp;</div>
<div>{{微博}}</div>
</div>
<div>
<button class="change-item-button">修改</button>
<div class="white-space"></div>
<button class="delete-item-button">删除</button>
</div>
</div>
<div class="table-items-container">
<div>{{手机号}}</div>
<div>{{12345678900}}</div>
<div>{{滴滴打车}}</div>
<div>{{安全}}</div>
<div>{{小爱同学}}</div>
<div>{{123456}}</div>
<div>{{暂无}}</div>
<div class="more-platform-container">
<div>{{邮箱}},&nbsp;</div>
<div>{{微信}},&nbsp;</div>
<div>{{qq}},&nbsp;</div>
<div>{{微博}}</div>
</div>
<div>
<button class="change-item-button">修改</button>
<div class="white-space"></div>
<button class="delete-item-button">删除</button>
</div>
</div>
<div class="table-items-container">
<div>{{手机号}}</div>
<div>{{12345678900}}</div>
<div>{{滴滴打车}}</div>
<div>{{安全}}</div>
<div>{{小爱同学}}</div>
<div>{{123456}}</div>
<div>{{暂无}}</div>
<div class="more-platform-container">
<div>{{邮箱}},&nbsp;</div>
<div>{{微信}},&nbsp;</div>
<div>{{qq}},&nbsp;</div>
<div>{{微博}}</div>
</div>
<div>
<button class="change-item-button">修改</button>
<div class="white-space"></div>
<button class="delete-item-button">删除</button>
</div>
</div>
<div class="table-items-container">
<div>{{手机号}}</div>
<div>{{12345678900}}</div>
<div>{{滴滴打车}}</div>
<div>{{安全}}</div>
<div>{{小爱同学}}</div>
<div>{{123456}}</div>
<div>{{暂无}}</div>
<div class="more-platform-container">
<div>{{邮箱}},&nbsp;</div>
<div>{{微信}},&nbsp;</div>
<div>{{qq}},&nbsp;</div>
<div>{{微博}}</div>
</div>
<div>
<button class="change-item-button">修改</button>
<div class="white-space"></div>
<button class="delete-item-button">删除</button>
</div>
</div>
<div class="table-items-container">
<div>{{手机号}}</div>
<div>{{12345678900}}</div>
<div>{{滴滴打车}}</div>
<div>{{安全}}</div>
<div>{{小爱同学}}</div>
<div>{{123456}}</div>
<div>{{暂无}}</div>
<div class="more-platform-container">
<div>{{邮箱}},&nbsp;</div>
<div>{{微信}},&nbsp;</div>
<div>{{qq}},&nbsp;</div>
<div>{{微博}}</div>
</div>
<div>
<button class="change-item-button">修改</button>
<div class="white-space"></div>
<button class="delete-item-button">删除</button>
</div>
</div>
<div class="table-items-container">
<div>{{手机号}}</div>
<div>{{12345678900}}</div>
<div>{{滴滴打车}}</div>
<div>{{安全}}</div>
<div>{{小爱同学}}</div>
<div>{{123456}}</div>
<div>{{暂无}}</div>
<div class="more-platform-container">
<div>{{邮箱}},&nbsp;</div>
<div>{{微信}},&nbsp;</div>
<div>{{qq}},&nbsp;</div>
<div>{{微博}}</div>
</div>
<div>
<button class="change-item-button">修改</button>
<div class="white-space"></div>
<button class="delete-item-button">删除</button>
</div>
</div>
<div class="table-items-container">
<div>{{手机号}}</div>
<div>{{12345678900}}</div>
<div>{{滴滴打车}}</div>
<div>{{安全}}</div>
<div>{{小爱同学}}</div>
<div>{{123456}}</div>
<div>{{暂无}}</div>
<div class="more-platform-container">
<div>{{邮箱}},&nbsp;</div>
<div>{{微信}},&nbsp;</div>
<div>{{qq}},&nbsp;</div>
<div>{{微博}}</div>
</div>
<div>
<button class="change-item-button">修改</button>
<div class="white-space"></div>
<button class="delete-item-button">删除</button>
</div>
</div>
<div class="table-items-container">
<div>{{手机号}}</div>
<div>{{12345678900}}</div>
<div>{{滴滴打车}}</div>
<div>{{安全}}</div>
<div>{{小爱同学}}</div>
<div>{{123456}}</div>
<div>{{暂无}}</div>
<div class="more-platform-container">
<div>{{邮箱}},&nbsp;</div>
<div>{{微信}},&nbsp;</div>
<div>{{qq}},&nbsp;</div>
<div>{{微博}}</div>
</div>
<div>
<button class="change-item-button">修改</button>
<div class="white-space"></div>
<button class="delete-item-button">删除</button>
</div>
</div>
<div class="table-items-container">
<div>{{手机号}}</div>
<div>{{12345678900}}</div>
<div>{{滴滴打车}}</div>
<div>{{安全}}</div>
<div>{{小爱同学}}</div>
<div>{{123456}}</div>
<div>{{暂无}}</div>
<div class="more-platform-container">
<div>{{邮箱}},&nbsp;</div>
<div>{{微信}},&nbsp;</div>
<div>{{qq}},&nbsp;</div>
<div>{{微博}}</div>
</div>
<div>
<button class="change-item-button">修改</button>
<div class="white-space"></div>
<button class="delete-item-button">删除</button>
</div>
</div>
<div class="table-items-container">
<div>{{手机号}}</div>
<div>{{12345678900}}</div>
<div>{{滴滴打车}}</div>
<div>{{安全}}</div>
<div>{{小爱同学}}</div>
<div>{{123456}}</div>
<div>{{暂无}}</div>
<div class="more-platform-container">
<div>{{邮箱}},&nbsp;</div>
<div>{{微信}},&nbsp;</div>
<div>{{qq}},&nbsp;</div>
<div>{{微博}}</div>
</div>
<div>
<button class="change-item-button">修改</button>
<div class="white-space"></div>
<button class="delete-item-button">删除</button>
</div>
</div>
<div class="table-items-container">
<div>{{手机号}}</div>
<div>{{12345678900}}</div>
<div>{{滴滴打车}}</div>
<div>{{安全}}</div>
<div>{{小爱同学}}</div>
<div>{{123456}}</div>
<div>{{暂无}}</div>
<div class="more-platform-container">
<div>{{邮箱}},&nbsp;</div>
<div>{{微信}},&nbsp;</div>
<div>{{qq}},&nbsp;</div>
<div>{{微博}}</div>
</div>
<div>
<button class="change-item-button">修改</button>
<div class="white-space"></div>
<button class="delete-item-button">删除</button>
</div>
</div>
<div class="table-items-container">
<div>{{手机号}}</div>
<div>{{12345678900}}</div>
<div>{{滴滴打车}}</div>
<div>{{安全}}</div>
<div>{{小爱同学}}</div>
<div>{{123456}}</div>
<div>{{暂无}}</div>
<div class="more-platform-container">
<div>{{邮箱}},&nbsp;</div>
<div>{{微信}},&nbsp;</div>
<div>{{qq}},&nbsp;</div>
<div>{{微博}}</div>
</div>
<div>
<button class="change-item-button">修改</button>
<div class="white-space"></div>
<button class="delete-item-button">删除</button>
</div>
</div>
</div>
</div> </div>
</div> </div>
</body> </body>
PP-binding/frontend/web/script/index.js
+28
View File
@@ -0,0 +1,28 @@
window.onload = () => {
main()
}
function main() {
const tableContainer = document.getElementById("table-outer-scrollable-container")
const tableItems = tableContainer.children
const backgroundColor = "rgba(164,168,157,0.16)"
for (let i = 1; i < tableItems.length; i += 2) {
if (hasSpecificClassNameByNode(tableItems[i], "table-items-container")) {
tableItems[i].setAttribute("style", `background-color: ${backgroundColor};`)
}
}
}
function hasSpecificClassNameByNode(node, className) {
const classList = node.classList
let isContain = false
classList.forEach((value) => {
if (value === className) {
isContain = true
}
})
return isContain
}
PP-binding/frontend/web/style/index.css
+87 -5
View File
@@ -3,8 +3,14 @@
padding: 0; padding: 0;
} }
:root {
--color-green: #80c671;
--color-red: #d56161;
}
body { body {
padding: 10px 40px; padding: 10px 40px 10px 40px;
background-color: rgba(236, 236, 236, 0.39);
} }
.title-container { .title-container {
@@ -30,10 +36,10 @@ body {
.tools-container .add-item-button { .tools-container .add-item-button {
width: 60px; width: 60px;
height: 40px; height: 40px;
background-color: #80c671; background-color: var(--color-green);
border: none; border: none;
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: 800;
color: white; color: white;
border-radius: 5px; border-radius: 5px;
} }
@@ -53,7 +59,7 @@ body {
} }
.tools-container input:focus { .tools-container input:focus {
outline: 2px solid #80c671; outline: 2px solid var(--color-green);
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 5px; border-radius: 5px;
} }
@@ -69,12 +75,88 @@ body {
} }
.table-header { .table-header {
height: 50px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center;
background-color: var(--color-green);
} }
.table-header div { .table-header div {
width: 100%; width: 100%;
text-align: center; text-align: center;
font-size: 18px; font-size: 18px;
} font-weight: bold;
color: white;
}
.table-outer-scrollable-container {
height: 700px;
overflow-y: scroll;
scrollbar-color: var(--color-green) rgba(236, 236, 236, 0.89);
}
.table-container div {
border-radius: 5px;
}
.table-items-container {
display: flex;
justify-content: space-between;
margin-top: 3px;
margin-bottom: 3px;
}
.table-items-container .more-platform-container {
display: flex;
justify-content: start;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
scrollbar-width: thin;
scrollbar-color: var(--color-green) rgba(236, 236, 236, 0.89);
}
.table-items-container .more-platform-container div {
white-space: nowrap;
}
.table-items-container div {
width: 100%;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
margin-top: 5px;
margin-bottom: 5px;
}
.table-items-container .change-item-button {
width: 50px;
height: 30px;
border: none;
background-color: var(--color-green);
color: white;
border-radius: 5px;
}
.table-items-container .change-item-button:hover {
cursor: pointer;
}
.table-items-container .white-space {
width: 10px;
}
.table-items-container .delete-item-button {
width: 50px;
height: 30px;
border: none;
background-color: var(--color-red);
color: white;
border-radius: 5px;
}
.table-items-container .delete-item-button {
cursor: pointer;
}