diff --git a/PP-binding/frontend/web/.idea/modules.xml b/PP-binding/frontend/web/.idea/modules.xml new file mode 100644 index 0000000..f589ca3 --- /dev/null +++ b/PP-binding/frontend/web/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/PP-binding/frontend/web/.idea/vcs.xml b/PP-binding/frontend/web/.idea/vcs.xml new file mode 100644 index 0000000..c2365ab --- /dev/null +++ b/PP-binding/frontend/web/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/PP-binding/frontend/web/.idea/web.iml b/PP-binding/frontend/web/.idea/web.iml new file mode 100644 index 0000000..c956989 --- /dev/null +++ b/PP-binding/frontend/web/.idea/web.iml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/PP-binding/frontend/web/index.html b/PP-binding/frontend/web/index.html index 60a1505..59112ec 100644 --- a/PP-binding/frontend/web/index.html +++ b/PP-binding/frontend/web/index.html @@ -4,19 +4,20 @@ 平台绑定统计 + -
+

平台绑定统计

-
+
总共 210 条数据
-
+
基础工具类型
基础工具ID
@@ -29,7 +30,348 @@
操作
-
+
+
+
{{手机号}}
+
{{12345678900}}
+
{{滴滴打车}}
+
{{安全}}
+
{{小爱同学}}
+
{{123456}}
+
{{暂无}}
+
+
{{邮箱}}, 
+
{{微信}}, 
+
{{qq}}, 
+
{{微博}}
+
+
+ +
+ +
+
+
+
{{手机号}}
+
{{12345678900}}
+
{{滴滴打车}}
+
{{安全}}
+
{{小爱同学}}
+
{{123456}}
+
{{暂无}}
+
+
{{邮箱}}, 
+
{{微信}}, 
+
{{qq}}, 
+
{{微博}}
+
+
+ +
+ +
+
+
+
{{手机号}}
+
{{12345678900}}
+
{{滴滴打车}}
+
{{安全}}
+
{{小爱同学}}
+
{{123456}}
+
{{暂无}}
+
+
{{邮箱}}, 
+
{{微信}}, 
+
{{qq}}, 
+
{{微博}}
+
+
+ +
+ +
+
+
+
{{手机号}}
+
{{12345678900}}
+
{{滴滴打车}}
+
{{安全}}
+
{{小爱同学}}
+
{{123456}}
+
{{暂无}}
+
+
{{邮箱}}, 
+
{{微信}}, 
+
{{qq}}, 
+
{{微博}}
+
+
+ +
+ +
+
+
+
{{手机号}}
+
{{12345678900}}
+
{{滴滴打车}}
+
{{安全}}
+
{{小爱同学}}
+
{{123456}}
+
{{暂无}}
+
+
{{邮箱}}, 
+
{{微信}}, 
+
{{qq}}, 
+
{{微博}}
+
+
+ +
+ +
+
+
+
{{手机号}}
+
{{12345678900}}
+
{{滴滴打车}}
+
{{安全}}
+
{{小爱同学}}
+
{{123456}}
+
{{暂无}}
+
+
{{邮箱}}, 
+
{{微信}}, 
+
{{qq}}, 
+
{{微博}}
+
+
+ +
+ +
+
+
+
{{手机号}}
+
{{12345678900}}
+
{{滴滴打车}}
+
{{安全}}
+
{{小爱同学}}
+
{{123456}}
+
{{暂无}}
+
+
{{邮箱}}, 
+
{{微信}}, 
+
{{qq}}, 
+
{{微博}}
+
+
+ +
+ +
+
+
+
{{手机号}}
+
{{12345678900}}
+
{{滴滴打车}}
+
{{安全}}
+
{{小爱同学}}
+
{{123456}}
+
{{暂无}}
+
+
{{邮箱}}, 
+
{{微信}}, 
+
{{qq}}, 
+
{{微博}}
+
+
+ +
+ +
+
+
+
{{手机号}}
+
{{12345678900}}
+
{{滴滴打车}}
+
{{安全}}
+
{{小爱同学}}
+
{{123456}}
+
{{暂无}}
+
+
{{邮箱}}, 
+
{{微信}}, 
+
{{qq}}, 
+
{{微博}}
+
+
+ +
+ +
+
+
+
{{手机号}}
+
{{12345678900}}
+
{{滴滴打车}}
+
{{安全}}
+
{{小爱同学}}
+
{{123456}}
+
{{暂无}}
+
+
{{邮箱}}, 
+
{{微信}}, 
+
{{qq}}, 
+
{{微博}}
+
+
+ +
+ +
+
+
+
{{手机号}}
+
{{12345678900}}
+
{{滴滴打车}}
+
{{安全}}
+
{{小爱同学}}
+
{{123456}}
+
{{暂无}}
+
+
{{邮箱}}, 
+
{{微信}}, 
+
{{qq}}, 
+
{{微博}}
+
+
+ +
+ +
+
+
+
{{手机号}}
+
{{12345678900}}
+
{{滴滴打车}}
+
{{安全}}
+
{{小爱同学}}
+
{{123456}}
+
{{暂无}}
+
+
{{邮箱}}, 
+
{{微信}}, 
+
{{qq}}, 
+
{{微博}}
+
+
+ +
+ +
+
+
+
{{手机号}}
+
{{12345678900}}
+
{{滴滴打车}}
+
{{安全}}
+
{{小爱同学}}
+
{{123456}}
+
{{暂无}}
+
+
{{邮箱}}, 
+
{{微信}}, 
+
{{qq}}, 
+
{{微博}}
+
+
+ +
+ +
+
+
+
{{手机号}}
+
{{12345678900}}
+
{{滴滴打车}}
+
{{安全}}
+
{{小爱同学}}
+
{{123456}}
+
{{暂无}}
+
+
{{邮箱}}, 
+
{{微信}}, 
+
{{qq}}, 
+
{{微博}}
+
+
+ +
+ +
+
+
+
{{手机号}}
+
{{12345678900}}
+
{{滴滴打车}}
+
{{安全}}
+
{{小爱同学}}
+
{{123456}}
+
{{暂无}}
+
+
{{邮箱}}, 
+
{{微信}}, 
+
{{qq}}, 
+
{{微博}}
+
+
+ +
+ +
+
+
+
{{手机号}}
+
{{12345678900}}
+
{{滴滴打车}}
+
{{安全}}
+
{{小爱同学}}
+
{{123456}}
+
{{暂无}}
+
+
{{邮箱}}, 
+
{{微信}}, 
+
{{qq}}, 
+
{{微博}}
+
+
+ +
+ +
+
+
+
{{手机号}}
+
{{12345678900}}
+
{{滴滴打车}}
+
{{安全}}
+
{{小爱同学}}
+
{{123456}}
+
{{暂无}}
+
+
{{邮箱}}, 
+
{{微信}}, 
+
{{qq}}, 
+
{{微博}}
+
+
+ +
+ +
+
+
diff --git a/PP-binding/frontend/web/script/index.js b/PP-binding/frontend/web/script/index.js new file mode 100644 index 0000000..9bf3e63 --- /dev/null +++ b/PP-binding/frontend/web/script/index.js @@ -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 +} \ No newline at end of file diff --git a/PP-binding/frontend/web/style/index.css b/PP-binding/frontend/web/style/index.css index 06f2727..2726d75 100644 --- a/PP-binding/frontend/web/style/index.css +++ b/PP-binding/frontend/web/style/index.css @@ -3,8 +3,14 @@ padding: 0; } +:root { + --color-green: #80c671; + --color-red: #d56161; +} + body { - padding: 10px 40px; + padding: 10px 40px 10px 40px; + background-color: rgba(236, 236, 236, 0.39); } .title-container { @@ -30,10 +36,10 @@ body { .tools-container .add-item-button { width: 60px; height: 40px; - background-color: #80c671; + background-color: var(--color-green); border: none; font-size: 18px; - font-weight: bold; + font-weight: 800; color: white; border-radius: 5px; } @@ -53,7 +59,7 @@ body { } .tools-container input:focus { - outline: 2px solid #80c671; + outline: 2px solid var(--color-green); border: 1px solid transparent; border-radius: 5px; } @@ -69,12 +75,88 @@ body { } .table-header { + height: 50px; display: flex; justify-content: space-between; + align-items: center; + background-color: var(--color-green); } .table-header div { width: 100%; text-align: center; font-size: 18px; -} \ No newline at end of file + 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; +}