diff --git a/css/alarmMge/alarmMge.css b/css/alarmMge/alarmMge.css new file mode 100644 index 0000000..d1ca437 --- /dev/null +++ b/css/alarmMge/alarmMge.css @@ -0,0 +1,80 @@ +html, +body { + width: 100%; + height: 100%; + margin: 0; + padding: 0; + color: #fff; + font-family: 'Alibaba PuHuiTi R'; +} + +.layout { + display: flex; + align-items: center; + justify-content: center; +} + +.main-box { + width: 100%; + height: 100%; + justify-content: space-evenly; +} + +.left-box { + width: 20%; + height: 100%; +} + +.right-box { + width: 75%; + height: 100%; + flex-direction: column; + justify-content: space-between; +} + +.select { + width: 100%; + height: 100%; + padding: 8% 2% 2% 2%; + box-sizing: border-box; + background: url("../../img/alarmMge/select.png") no-repeat 0 0 / 100% 100%; + background-position: center center !important; + flex-direction: column; + justify-content: flex-start; + overflow-y: auto; +} + +.alarm{ + width: 100%; + height: 100%; + padding: 5% 2% 2% 2%; + box-sizing: border-box; + background: url("../../img/alarmMge/alarm.png") no-repeat 0 0 / 100% 100%; + background-position: center center !important; +} + +.dark{ + display: flex; + width: 100%; + height: 4.5%; + box-sizing: border-box; + background: url("../../img/alarmMge/dark.png") no-repeat 0 0 / 100% 100%; + background-position: center center !important; + flex-direction: row; + justify-content: center; + align-items: center; + margin-top: 4%; +} + +.bright{ + display: flex; + width: 100%; + height: 4.5%; + box-sizing: border-box; + background: url("../../img/alarmMge/bright.png") no-repeat 0 0 / 100% 100%; + background-position: center center !important; + flex-direction: row; + justify-content: center; + align-items: center; + margin-top: 4%; +} \ No newline at end of file diff --git a/img/alarmMge/alarm.png b/img/alarmMge/alarm.png new file mode 100644 index 0000000..12c2657 Binary files /dev/null and b/img/alarmMge/alarm.png differ diff --git a/img/alarmMge/bright.png b/img/alarmMge/bright.png new file mode 100644 index 0000000..330d6e3 Binary files /dev/null and b/img/alarmMge/bright.png differ diff --git a/img/alarmMge/dark.png b/img/alarmMge/dark.png new file mode 100644 index 0000000..66b25c6 Binary files /dev/null and b/img/alarmMge/dark.png differ diff --git a/img/alarmMge/select.png b/img/alarmMge/select.png new file mode 100644 index 0000000..78230af Binary files /dev/null and b/img/alarmMge/select.png differ diff --git a/js/pages/alarmMge/alarmMge.js b/js/pages/alarmMge/alarmMge.js index e69de29..ad2f4af 100644 --- a/js/pages/alarmMge/alarmMge.js +++ b/js/pages/alarmMge/alarmMge.js @@ -0,0 +1,36 @@ +let layer; +layui.use(['layer'], function () { + layer = layui.layer; + + getSelect(); + updateSelection(); +}); + +function getSelect(){ + $("#selection").empty(); + var data = [ + { a: 1, b: 2,c:1 }, + { a: 2, b: 2,c:2 }, + { a: 2, b: 2,c:3 } + ]; + var html =""; + data = JSON.parse(JSON.stringify(data)); // 创建一个新的变量存储 JSON 化后的数据 + for (var i = 0; i < data.length; i++) { + if(data[i].a == 1){ + html += '
'+data[i].b+'
' ; + }else{ + html += '
'+data[i].b+'
' ; + } + } + console.log(html) + $("#selection").append(html); +} + +function updateSelection() { + $(".item").on("click", function() { + $(".item").removeClass("bright").addClass("dark"); // 点击时将所有元素设置为 dark 类 + $(this).removeClass("dark").addClass("bright"); // 点击的元素设置为 bright 类 + var clickedId = $(this).attr('id'); // 获取被点击的 div 元素的 id 值 + console.log("选中的值为: " + clickedId); + }); +} \ No newline at end of file diff --git a/pages/alarmMge/alarmMge.html b/pages/alarmMge/alarmMge.html index 24e5d03..791847d 100644 --- a/pages/alarmMge/alarmMge.html +++ b/pages/alarmMge/alarmMge.html @@ -1,11 +1,84 @@ - - - - 告警管理 - - - 告警管理 - + + + + + + + + + + + + + + + 告警管理 + + + +
+
+
+
+ +
+ +
+
+
+
+
+
+ +
+ +
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+ + \ No newline at end of file diff --git a/plugin/layui-v2.9.7/layui/css/layui.css b/plugin/layui-v2.9.7/layui/css/layui.css index 11875f0..6d9034d 100644 --- a/plugin/layui-v2.9.7/layui/css/layui.css +++ b/plugin/layui-v2.9.7/layui/css/layui.css @@ -2354,7 +2354,7 @@ a cite { .layui-tab-title, .layui-tab-title .layui-this:after, .layui-textarea { - border-color: #eee + border-color: #298B83 } .layui-border { @@ -2775,8 +2775,8 @@ hr.layui-border-red { line-height: 38px\9; border-width: 1px; border-style: solid; - background-color: #fff; - color: rgba(0, 0, 0, .85); + background-color: transparent; + color: #ffffff; border-radius: 2px } @@ -3141,10 +3141,11 @@ hr.layui-border-red { border: 1px solid #eee; max-height: 300px; overflow-y: auto; - background-color: #fff; + background-color: transparent; border-radius: 2px; box-shadow: 1px 1px 4px rgb(0 0 0 / 8%); - box-sizing: border-box + box-sizing: border-box; + color: #ffffff; } .layui-form-select dl dd, @@ -3166,7 +3167,7 @@ hr.layui-border-red { } .layui-form-select dl dd:hover { - background-color: #f8f8f8; + background-color: #298B83; -webkit-transition: .5s all; transition: .5s all } @@ -3181,7 +3182,7 @@ hr.layui-border-red { } .layui-form-select dl dd.layui-this { - background-color: #f8f8f8; + background-color: #298B83; color: #16b777; font-weight: 700 }