From cbe20406c70d44dc730c6a45fe1b05deaf55b2dd Mon Sep 17 00:00:00 2001 From: faper <2446866151@qq.com> Date: Aug 31 2021 15:54:31 +0000 Subject: 添加了主页面、设置页面,包括其CSS和少许Dom操作 --- diff --git a/render/.gitignore b/render/.gitignore new file mode 100644 index 0000000..32935e9 --- /dev/null +++ b/render/.gitignore @@ -0,0 +1,2 @@ +# vscode文件 +.vscode/ \ No newline at end of file diff --git a/render/default.css b/render/default.css new file mode 100644 index 0000000..eb9891c --- /dev/null +++ b/render/default.css @@ -0,0 +1,203 @@ +html, body { + height: 100%; + margin: 0; +} +ul { + margin: 0; + padding: 0; +} +ul.row { + padding: 0; +} +ul.row li { + height: 32px; + padding: 0 8px; +} +ul.tool-bar-left li input[type="image"] { + width: 32px; + height: 32px; + cursor: default; +} +ul.tool-bar-right li input[type="image"] { + width: 32px; + height: 32px; + cursor: pointer; +} +li { + list-style-type: none; +} +span.tab-line-col { + box-sizing: content-box; + display: block; + margin: auto; + width: 1px; + height: 100%; + background-color: black; +} +span.tab-line-row { + box-sizing: content-box; + display: block; + margin: 4px 0; + width: 100%; + height: 1px; + background-color: black; +} +span.tab-line-row:hover { + border: 8px 0 solid #63616134; + margin: 0; + transform: scale(100%, 175%) +} +iframe { + box-sizing: content-box; + width: 100%; + height: 100%; + border: none; +} +.tool { + position: relative; + padding: 8px; +} +.tool-bar { + min-width: 750px; + width: 100%; + height: 32px; + display: inline-flex; +} + +.tool-bar-left { + box-sizing: content-box; + display: flex; + direction: ltr; + justify-content: flex-start; +} +.tool-bar-center { + box-sizing: content-box; + display: flex; + flex: 1; + justify-content: center; +} +.tool-bar-right { + box-sizing: content-box; + display: flex; + direction: ltr; + justify-content: flex-end; +} + +.workspace { + position: absolute; + display: flex; + padding: 8px; + top: 56px; + bottom: 0; + left: 0; + right: 0; +} +.workspace-left { + box-sizing: content-box; + display: flex; + flex-direction: column; + flex: 1; + left: 0; + min-width: 300px; + width: 40%; + padding: 8px; +} +.workspace-left .task-list { + box-sizing: content-box; + flex: 1.5; + width: 100%; + height: 60%; + min-height: 300px; + border: 0.5px solid black; +} +.workspace-left .cur-task { + box-sizing: content-box; + flex: 1; + width: 100%; + height: 40%; + min-height: 200px; + border: 0.5px solid black; +} +.workspace-right { + box-sizing: content-box; + display: flex; + flex-direction: column; + flex: 1.5; + right: 0; + min-width: 450px; + width: 60%; + padding: 8px; +} +.workspace-right .cur-website { + box-sizing: content-box; + flex: 2; + width: 100%; + height: 66.6%; + min-height: 333px; + border: 0.5px solid black; +} +.workspace-right .variable-list { + box-sizing: content-box; + flex: 1; + width: 100%; + height: 33.3%; + min-height: 167px; + border: 0.5px solid black; +} +.rule { + top: 0; +} +.rule-left { + min-width: 250px; + flex: 1 +} +.rule-left .rule-list { + box-sizing: content-box; + flex: 1; + width: 100%; + height: 100%; + min-height: 450px; + border: 0.5px solid black; +} +.rule-left .tool-bar-rule { + box-sizing: content-box; + width: 100%; + height: fit-content; +} +.rule-bar { + box-sizing: content-box; + display: flex; + justify-content: flex-end; +} +.rule-right { + min-height: 500px; + flex: 2; +} +.rule-right .rule-detail { + box-sizing: content-box; + flex: 1; + width: 100%; + height: 100%; + border: 0.5px solid black; +} +.rule-setting { + margin-bottom: 8px; +} +.rule-setting div { + display: flex; + margin-bottom: 8px; +} +.rule-setting input { + font-size: 12px; + height: 1.2rem; +} +.rule-setting input[type="text"] { + box-sizing: content-box; + flex: 1; + margin-right: 16px; +} +.rule-setting input[type="button"] { + box-sizing: content-box; + min-width: 64px; +} + diff --git a/render/lib/controller.js b/render/lib/controller.js new file mode 100644 index 0000000..3252ae0 --- /dev/null +++ b/render/lib/controller.js @@ -0,0 +1,45 @@ +const box1 = document.querySelector(".tool-bar-left"); +const box2 = document.querySelector(".tool-bar-right"); +const box3 = document.querySelector(".task-list"); +const box4 = document.querySelector(".cur-task"); +const box5 = document.querySelector("iframe"); +const box6 = document.querySelector(".variable-list"); + +const button_list1 = box1.querySelectorAll("input"); +const button_list2 = box2.querySelectorAll("input"); +// ... + +const start_button = button_list1[0]; +const pause_button = button_list1[1]; +const stop_button = button_list1[2]; +const rule_setting_button = button_list2[0]; +const setting_button = button_list2[1]; + +//初始化button +pause_button.style.cursor = "not-allowed"; +stop_button.style.cursor = "not-allowed"; + +start_button.addEventListener("click", () => { + //do something... + start_button.style.cursor = "not-allowed"; + pause_button.style.cursor = "initial"; + stop_button.style.cursor = "initial"; + //do something... +}); + +pause_button.addEventListener("click", () => { + //do something... + start_button.style.cursor = "initial"; + pause_button.style.cursor = "not-allowed"; + stop_button.style.cursor = "initial"; + //do something... +}); + +stop_button.addEventListener("click", () => { + //do something... + start_button.style.cursor = "initial"; + pause_button.style.cursor = "not-allowed"; + stop_button.style.cursor = "not-allowed"; + //do something... +}); + diff --git a/render/main.html b/render/main.html index 73c8e96..8cd6930 100644 --- a/render/main.html +++ b/render/main.html @@ -1,11 +1,78 @@ + + - -
- - - -