done: basic main table UI

PP-binding/frontend/web/.idea/modules.xml

@@ -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

@@ -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

@@ -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

@@ -4,19 +4,20 @@
     <meta charset="UTF-8">
     <title>平台绑定统计</title>
     <link rel="stylesheet" href="./style/index.css">
+    <script src="./script/index.js"></script>
 </head>
 <body>
-<div class="title-container">
+<div class="title-container" id="title-container">
     <h1 class="title">平台绑定统计</h1>
 </div>
 
 <div class="main-container">
-    <div class="tools-container">
+    <div class="tools-container" id="tools-container">
         <button class="add-item-button">添加</button>
         <input placeholder="输入关键字查询"/>
         <div class="count">总共&nbsp;<span>210</span>&nbsp;条数据</div>
     </div>
-    <div class="table-container">
+    <div class="table-container" id="table-header">
         <div class="table-header">
             <div>基础工具类型</div>
             <div>基础工具ID</div>
@@ -29,7 +30,348 @@
             <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>
 </body>

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
+}

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;
+    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;
 }