monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by XuHaoJie
Commit d62a56ec390674401a06888f8ad3e86c1b21b45b 1 parent d2d0454d

浙江-及时消息配置-页面样式优化

Inline Side-by-side
Showing 2 changed files with 49 additions and 27 deletions
@@ -276,13 +276,26 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'treeTabl @@ -276,13 +276,26 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'treeTabl
276 type: 1 276 type: 1
277 , title: '及时消息自定义展示示例' 277 , title: '及时消息自定义展示示例'
278 , closeBtn: 1 278 , closeBtn: 1
279 - , area: ['60%', '70%'] 279 + , area: ['60%', '40%']
280 , shade: 0.8 280 , shade: 0.8
281 , id: 'lay_cron_noticeTimely' //设定一个id，防止重复弹出 281 , id: 'lay_cron_noticeTimely' //设定一个id，防止重复弹出
282 , content: $("#notice_timely_template").html() 282 , content: $("#notice_timely_template").html()
283 }); 283 });
284 }); 284 });
285 285
  286 + //及时消息配置地址提示信息
  287 + $('#show_corn_info_state').unbind("click").on("click", function () {
  288 + layer.open({
  289 + type: 1
  290 + , title: '及时消息地址配置示例'
  291 + , closeBtn: 1
  292 + , area: ['60%', '30%']
  293 + , shade: 0.8
  294 + , id: 'lay_cron_noticeTimely_state' //设定一个id，防止重复弹出
  295 + , content: $("#notice_timely_site_template").html()
  296 + });
  297 + });
  298 +
286 //获取列明 299 //获取列明
287 function getRowName() { 300 function getRowName() {
288 var map = { 301 var map = {
@@ -17,33 +17,34 @@ @@ -17,33 +17,34 @@
17 placeholder="请输入频率" class="layui-input"> 17 placeholder="请输入频率" class="layui-input">
18 </div> 18 </div>
19 <div class="layui-form-mid layui-word-aux" id="show_corn_info_frequency" 19 <div class="layui-form-mid layui-word-aux" id="show_corn_info_frequency"
20 - style="padding: 0!important;position: relative;line-height: 38px;"> 20 + style="padding: 0!important;position: relative;line-height: 38px;display: flex;justify-content: center;margin: 0px;margin-left: 5px;">
21 <i class="layui-icon form-btn-icon">&#xe702;</i> 21 <i class="layui-icon form-btn-icon">&#xe702;</i>
22 </div> 22 </div>
23 </div> 23 </div>
24 </div> 24 </div>
25 - <div class="layui-form-item">  
26 - <div class="layui-inline"> 25 + <div class="layui-form-item" style="display: flex;justify-content: space-between;">
  26 + <div class="layui-inline" style="flex: 1;">
27 <label class="layui-form-label">状态</label> 27 <label class="layui-form-label">状态</label>
28 - <div class="layui-input-inline" style="width: calc(20vw - 142px);margin-right:105px"> 28 + <div class="layui-input-inline" style="margin-left: 20px;;width: 100px">
  29 +<!-- <div class="layui-input-inline" style="width: calc(20vw - 142px);margin-right:65px;margin-left: 50px;">-->
29 <input type="checkbox" id="switch_noticeTimely_state" name="state" lay-skin="switch" lay-text="启用|禁用" value="0" > 30 <input type="checkbox" id="switch_noticeTimely_state" name="state" lay-skin="switch" lay-text="启用|禁用" value="0" >
30 </div> 31 </div>
31 </div> 32 </div>
32 - <div class="layui-inline">  
33 - <label class="layui-form-label">是否广播</label>  
34 - <div class="layui-input-inline" style="width: calc(20vw - 142px);margin-right:105px"> 33 + <div class="layui-inline" style="flex: 1;">
  34 + <label class="layui-form-label" >是否广播</label>
  35 + <div class="layui-input-inline" style="margin-left: 20px;width: 100px">
35 <input type="checkbox" id="switch_noticeTimely_broadcast" name="broadcast" lay-skin="switch" lay-text="是|否" value="0" > 36 <input type="checkbox" id="switch_noticeTimely_broadcast" name="broadcast" lay-skin="switch" lay-text="是|否" value="0" >
36 </div> 37 </div>
37 </div> 38 </div>
38 - <div class="layui-inline"> 39 + <div class="layui-inline" style="">
39 <label class="layui-form-label">是否轮循</label> 40 <label class="layui-form-label">是否轮循</label>
40 - <div class="layui-input-inline" style="width: calc(20vw - 142px);margin-right:105px"> 41 + <div class="layui-input-inline" style="margin-left: 20px;width: 100px">
41 <input type="checkbox" id="switch_noticeTimely_retry" name="retry" lay-skin="switch" lay-text="轮循|不轮循" value="0" > 42 <input type="checkbox" id="switch_noticeTimely_retry" name="retry" lay-skin="switch" lay-text="轮循|不轮循" value="0" >
42 </div> 43 </div>
43 </div> 44 </div>
44 <div class="layui-inline" style="display: none !important;"> 45 <div class="layui-inline" style="display: none !important;">
45 <label class="layui-form-label">发送状态</label> 46 <label class="layui-form-label">发送状态</label>
46 - <div class="layui-input-inline" style="width: calc(20vw - 142px);margin-right:0px"> 47 + <div class="layui-input-inline" style="width: calc(20vw - 142px);margin-right:0px;margin-left: 50px;">
47 <input type="checkbox" id="switch_noticeTimely_sendState" name="sendState" lay-skin="switch" lay-text="已发送|未发送" value="0" > 48 <input type="checkbox" id="switch_noticeTimely_sendState" name="sendState" lay-skin="switch" lay-text="已发送|未发送" value="0" >
48 </div> 49 </div>
49 </div> 50 </div>
@@ -55,15 +56,21 @@ @@ -55,15 +56,21 @@
55 <input type="text" name="retryTime" placeholder="请输入重发延迟时间(秒)" class="layui-input"> 56 <input type="text" name="retryTime" placeholder="请输入重发延迟时间(秒)" class="layui-input">
56 </div> 57 </div>
57 </div> 58 </div>
58 - <div class="inline-half layui-inline" style="width: 80%"> 59 + <div class="inline-half layui-inline" style="width: 100%">
59 <label class="layui-form-label">跳转地址</label> 60 <label class="layui-form-label">跳转地址</label>
60 - <div class="layui-input-inline">  
61 - <select id="notice_timely_select">  
62 - <option selected="selected" disabled="disabled" style='display: none' value=''></option>  
63 - </select>  
64 - </div>  
65 - <div class="layui-input-inline" style="margin-left: 10px">  
66 - <input type="text" name="site" id="notice_timely_site" placeholder="请输入详情页地址" class="layui-input"> 61 + <div style="width: 95%">
  62 + <div class="layui-input-inline" style="width: 46%;">
  63 + <select id="notice_timely_select">
  64 + <option selected="selected" disabled="disabled" style='display: none' value=''></option>
  65 + </select>
  66 + </div>
  67 + <div class="layui-input-inline" style="margin-left: 1px;width: 52%;">
  68 + <input type="text" name="site" id="notice_timely_site" placeholder="请输入详情页地址" class="layui-input">
  69 + </div>
  70 + <div class="layui-form-mid layui-word-aux" id="show_corn_info_state"
  71 + style="padding: 0!important;position: relative;line-height: 38px;display: flex;justify-content: center;margin: 0px;margin-left: 5px;">
  72 + <i class="layui-icon form-btn-icon">&#xe702;</i>
  73 + </div>
67 </div> 74 </div>
68 </div> 75 </div>
69 </div> 76 </div>
@@ -87,16 +94,15 @@ @@ -87,16 +94,15 @@
87 </div> 94 </div>
88 <div class="layui-form-item"> 95 <div class="layui-form-item">
89 <label class="layui-form-label">用户</label> 96 <label class="layui-form-label">用户</label>
90 - <div class="layui-input-block tags-input" style="height: auto"> 97 + <div class="layui-input-block tags-input" style="height: auto;width: 90% !important;">
91 <div class="tags" id="select_noticeTimely_id_user"></div> 98 <div class="tags" id="select_noticeTimely_id_user"></div>
92 </div> 99 </div>
93 - <div class="layui-form-mid layui-word-aux" style="padding: 0!important;position: relative;top: -28px;left: 98%"><i class="layui-icon form-btn-icon" id="noticeTimely-form-select-users">&#xe615;</i></div> 100 + <div class="layui-form-mid layui-word-aux" style="padding: 0!important;position: relative;top: -28px;left: 98%;justify-content: center;margin-left: 10px; "><i class="layui-icon form-btn-icon" id="noticeTimely-form-select-users">&#xe615;</i></div>
94 </div> 101 </div>
95 <div class="layui-form-item"> 102 <div class="layui-form-item">
96 <label class="layui-form-label textarea-label">内容</label> 103 <label class="layui-form-label textarea-label">内容</label>
97 - <div class="layui-input-block" style="display: flex;">  
98 - <textarea name="details" placeholder="请输入内容(SQL)" class="layui-textarea" style="width: 93%"  
99 - id="layui-notice_timely_sql"></textarea> 104 + <div class="layui-input-block" style="display: flex;flex-direction: column;align-items: flex-end;">
  105 + <textarea name="details" placeholder="请输入内容(SQL)" class="layui-textarea" id="layui-notice_timely_sql" style="width: 100%"></textarea>
100 <div style="width: 100px;height: auto;"> 106 <div style="width: 100px;height: auto;">
101 <div style="background-color: #1E9FFF;width: 90px;float: right;display: flex;justify-content: center;height: 40px;line-height: 40px;margin-top: 30px; color: #fff;" 107 <div style="background-color: #1E9FFF;width: 90px;float: right;display: flex;justify-content: center;height: 40px;line-height: 40px;margin-top: 30px; color: #fff;"
102 id="layui-notice_timely_sql_test">测试 108 id="layui-notice_timely_sql_test">测试
@@ -185,9 +191,12 @@ @@ -185,9 +191,12 @@
185 <p style="margin: 10px auto; padding: 0px;"> 191 <p style="margin: 10px auto; padding: 0px;">
186 　　<span style="margin: 0px; padding: 0px; line-height: 18px; color: rgb(255, 0, 0);"><span style="margin: 0px; padding: 0px; line-height: 18px; color: rgb(0, 0, 255);"><span style="margin: 0px; padding: 0px; line-height: 18px; color: rgb(0, 0, 0);">（3）</span></span><strong style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; line-height: 18px; color: rgb(0, 0, 255);">颜色的选择和弹出声音有关系</span></strong>&nbsp;&nbsp;</span>&nbsp;每种颜色对应不同的声音 192 　　<span style="margin: 0px; padding: 0px; line-height: 18px; color: rgb(255, 0, 0);"><span style="margin: 0px; padding: 0px; line-height: 18px; color: rgb(0, 0, 255);"><span style="margin: 0px; padding: 0px; line-height: 18px; color: rgb(0, 0, 0);">（3）</span></span><strong style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; line-height: 18px; color: rgb(0, 0, 255);">颜色的选择和弹出声音有关系</span></strong>&nbsp;&nbsp;</span>&nbsp;每种颜色对应不同的声音
187 </p> 193 </p>
188 - <p>  
189 - &nbsp;  
190 - </p> 194 + </div>
  195 +</script>
  196 +
  197 +<!--及时消息跳转地址示例-->
  198 +<script type="text/html" id="notice_timely_site_template">
  199 + <div id="cronContent_site" style="color:#000000">
191 <p style="margin: 10px auto; padding: 0px;"> 200 <p style="margin: 10px auto; padding: 0px;">
192 　　<strong style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; line-height: 18px; color: rgb(255, 0, 0);">跳转地址用法详解</span></strong> 201 　　<strong style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; line-height: 18px; color: rgb(255, 0, 0);">跳转地址用法详解</span></strong>
193 </p> 202 </p>