Archived
add: add item window(only done the title bar)
This commit is contained in:
cancerai committed
1 parent
55824ddb21
commit
3fffec5a71
3 files changed
+61
-300
No files matched your search
@@ -13,7 +13,7 @@
|
||||
|
||||
<div class="main-container">
|
||||
<div class="tools-container" id="tools-container">
|
||||
<button class="add-item-button">添加</button>
|
||||
<button class="add-item-button" id="add-item-button">添加</button>
|
||||
<input placeholder="输入关键字查询"/>
|
||||
<div class="count">总共 <span>210</span> 条数据</div>
|
||||
</div>
|
||||
@@ -71,308 +71,16 @@
|
||||
<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>{{邮箱}}, </div>
|
||||
<div>{{微信}}, </div>
|
||||
<div>{{qq}}, </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>{{邮箱}}, </div>
|
||||
<div>{{微信}}, </div>
|
||||
<div>{{qq}}, </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>{{邮箱}}, </div>
|
||||
<div>{{微信}}, </div>
|
||||
<div>{{qq}}, </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>{{邮箱}}, </div>
|
||||
<div>{{微信}}, </div>
|
||||
<div>{{qq}}, </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>{{邮箱}}, </div>
|
||||
<div>{{微信}}, </div>
|
||||
<div>{{qq}}, </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>{{邮箱}}, </div>
|
||||
<div>{{微信}}, </div>
|
||||
<div>{{qq}}, </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>{{邮箱}}, </div>
|
||||
<div>{{微信}}, </div>
|
||||
<div>{{qq}}, </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>{{邮箱}}, </div>
|
||||
<div>{{微信}}, </div>
|
||||
<div>{{qq}}, </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>{{邮箱}}, </div>
|
||||
<div>{{微信}}, </div>
|
||||
<div>{{qq}}, </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>{{邮箱}}, </div>
|
||||
<div>{{微信}}, </div>
|
||||
<div>{{qq}}, </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>{{邮箱}}, </div>
|
||||
<div>{{微信}}, </div>
|
||||
<div>{{qq}}, </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>{{邮箱}}, </div>
|
||||
<div>{{微信}}, </div>
|
||||
<div>{{qq}}, </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>{{邮箱}}, </div>
|
||||
<div>{{微信}}, </div>
|
||||
<div>{{qq}}, </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>{{邮箱}}, </div>
|
||||
<div>{{微信}}, </div>
|
||||
<div>{{qq}}, </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>{{邮箱}}, </div>
|
||||
<div>{{微信}}, </div>
|
||||
<div>{{qq}}, </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>
|
||||
|
||||
<dialog class="add-item-dialog" id="add-item-dialog">
|
||||
<!-- title bar -->
|
||||
<div class="title-bar-container">
|
||||
<div class="close-button" id="add-item-dialog-close-button"></div>
|
||||
<div class="title">添加一条数据</div>
|
||||
</div>
|
||||
</dialog>
|
||||
</body>
|
||||
</html>
|
||||
@@ -6,12 +6,23 @@ function main() {
|
||||
const tableContainer = document.getElementById("table-outer-scrollable-container")
|
||||
const tableItems = tableContainer.children
|
||||
const backgroundColor = "rgba(164,168,157,0.16)"
|
||||
const addItemButton = document.getElementById("add-item-button")
|
||||
const addItemDialog = document.getElementById("add-item-dialog")
|
||||
const addItemDialogCloseButton = document.getElementById("add-item-dialog-close-button")
|
||||
|
||||
for (let i = 1; i < tableItems.length; i += 2) {
|
||||
if (hasSpecificClassNameByNode(tableItems[i], "table-items-container")) {
|
||||
tableItems[i].setAttribute("style", `background-color: ${backgroundColor};`)
|
||||
}
|
||||
}
|
||||
|
||||
addItemButton.addEventListener("click", () => {
|
||||
addItemDialog.showModal()
|
||||
})
|
||||
|
||||
addItemDialogCloseButton.addEventListener("click", ()=>{
|
||||
addItemDialog.close()
|
||||
})
|
||||
}
|
||||
|
||||
function hasSpecificClassNameByNode(node, className) {
|
||||
|
||||
@@ -181,3 +181,45 @@ body {
|
||||
.table-items-container .delete-item-button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.add-item-dialog {
|
||||
width: 60vw;
|
||||
height: 70vh;
|
||||
margin: auto;
|
||||
border: none;
|
||||
background-color: #f2f2f2f7;
|
||||
border-top-left-radius: 20px;
|
||||
border-top-right-radius: 20px;
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
}
|
||||
|
||||
.add-item-dialog .title-bar-container {
|
||||
height: 60px;
|
||||
background-color: #68686869;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.add-item-dialog .title-bar-container .close-button {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border-radius: 180px;
|
||||
margin-left: 8px;
|
||||
background-color: #d56161;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.add-item-dialog .title-bar-container .close-button:hover::after {
|
||||
content: "\2A2F";
|
||||
}
|
||||
|
||||
.add-item-dialog .title-bar-container .title {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0%);
|
||||
}
|
||||
Reference in new issue
Block a user