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
+62
-301
No files matched your search
@@ -13,7 +13,7 @@
|
|||||||
|
|
||||||
<div class="main-container">
|
<div class="main-container">
|
||||||
<div class="tools-container" id="tools-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="输入关键字查询"/>
|
<input placeholder="输入关键字查询"/>
|
||||||
<div class="count">总共 <span>210</span> 条数据</div>
|
<div class="count">总共 <span>210</span> 条数据</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -71,308 +71,16 @@
|
|||||||
<button class="delete-item-button">删除</button>
|
<button class="delete-item-button">删除</button>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
||||||
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -6,12 +6,23 @@ function main() {
|
|||||||
const tableContainer = document.getElementById("table-outer-scrollable-container")
|
const tableContainer = document.getElementById("table-outer-scrollable-container")
|
||||||
const tableItems = tableContainer.children
|
const tableItems = tableContainer.children
|
||||||
const backgroundColor = "rgba(164,168,157,0.16)"
|
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) {
|
for (let i = 1; i < tableItems.length; i += 2) {
|
||||||
if (hasSpecificClassNameByNode(tableItems[i], "table-items-container")) {
|
if (hasSpecificClassNameByNode(tableItems[i], "table-items-container")) {
|
||||||
tableItems[i].setAttribute("style", `background-color: ${backgroundColor};`)
|
tableItems[i].setAttribute("style", `background-color: ${backgroundColor};`)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
addItemButton.addEventListener("click", () => {
|
||||||
|
addItemDialog.showModal()
|
||||||
|
})
|
||||||
|
|
||||||
|
addItemDialogCloseButton.addEventListener("click", ()=>{
|
||||||
|
addItemDialog.close()
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
function hasSpecificClassNameByNode(node, className) {
|
function hasSpecificClassNameByNode(node, className) {
|
||||||
|
|||||||
@@ -181,3 +181,45 @@ body {
|
|||||||
.table-items-container .delete-item-button {
|
.table-items-container .delete-item-button {
|
||||||
cursor: pointer;
|
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