From a5c50ff60d14cad5ff27bfcade405c796f9ab0d3 Mon Sep 17 00:00:00 2001 From: vincent <1341870251@qq.com> Date: 星期六, 30 五月 2020 09:29:25 +0800 Subject: [PATCH] # --- src/main/webapp/views/console.html | 77 +++++++++++++++++++++++-- src/main/webapp/static/css/console.css | 46 ++++++++++++-- src/main/webapp/static/image/stop48.png | 0 3 files changed, 107 insertions(+), 16 deletions(-) diff --git a/src/main/webapp/static/css/console.css b/src/main/webapp/static/css/console.css index 43c7fd4..3ffc1cc 100644 --- a/src/main/webapp/static/css/console.css +++ b/src/main/webapp/static/css/console.css @@ -1,18 +1,48 @@ html { height: 100%; } + body { height: 100%; background-color: #fff; border-radius: 5px; box-shadow: 0 0 3px rgba(0,0,0,.3); } -/* 澶撮儴 */ + +/* ------------------------------------ 澶撮儴 ------------------------------------*/ header { height: 20%; border: 1px solid red; + text-align: center; + opacity: 0.8; + position: relative; } -/* 涓讳綋 */ +header h1 { + margin: 0; + letter-spacing: 2px; +} + +/* 鐘舵�佹樉绀� */ +.machine-state { + text-align: left; +} +.crn-state-group { + margin-bottom: 5px; +} +/* 鍫嗗灈鏈虹姸鎬� */ +.crn-state { + display: inline-block; + width: 50px; + text-align: center; +} +/* 绔欑偣鐘舵�� */ +.site-state { + display: inline-block; + width: 50px; + text-align: center; +} + +/* ------------------------------------ 涓讳綋 ------------------------------------*/ main { height: 80%; position: relative; @@ -25,21 +55,21 @@ } /* 杈撻�佺嚎绗竴鍒� */ .site-row-1 { - left: 200px; + left: 400px; } .site-row-1 .site { width: 100px; } /* 杈撻�佺嚎绗簩鍒� */ .site-row-2 { - left: 300px; + left: 500px; } .site-row-2 .site { width: 100px; } /* 杈撻�佺嚎绗笁鍒� */ .site-row-3 { - left: 400px; + left: 600px; width: 100px; } .site-row-3 .site { @@ -48,7 +78,7 @@ } /* 杈撻�佺嚎绗洓鍒� */ .site-row-4 { - left: 500px; + left: 700px; width: 100px; } .site-row-4 .site { @@ -77,7 +107,7 @@ .main-part { position: absolute; top: 250px; - left: 400px; + left: 600px; } /* 鎺掑彿 */ @@ -109,7 +139,7 @@ button.item { font-size: 13px; padding: 1px 1px 1px 1px; - width: 20px; + width: 30px; height: 20px; outline: none; cursor: pointer; diff --git a/src/main/webapp/static/image/stop48.png b/src/main/webapp/static/image/stop48.png new file mode 100644 index 0000000..881f726 --- /dev/null +++ b/src/main/webapp/static/image/stop48.png Binary files differ diff --git a/src/main/webapp/views/console.html b/src/main/webapp/views/console.html index d5d7f2b..987f16d 100644 --- a/src/main/webapp/views/console.html +++ b/src/main/webapp/views/console.html @@ -1,5 +1,6 @@ <!DOCTYPE html> <html lang="en"> +<!--5灞� 28鍒� 1120搴撲綅--> <head> <meta charset="UTF-8"> <title>WCS鎺у埗涓績</title> @@ -12,12 +13,46 @@ <script type="text/javascript" src="../static/js/jquery/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="../static/js/layer/layer.js"></script> <style> + .system-state { + position: absolute; + top: 40px; + right: 20px; + } + + .system-icon { + width: 100px; + height: 100px; + background-image: url("../static/image/stop48.png"); + background-repeat: no-repeat; + background-size:100% 100%; + background-position: top center; + cursor: pointer; + } </style> </head> <body> <header> - <span>鎻忚堪淇℃伅</span> + <h1>鑷姩浠撳簱 WCS 鐩戞帶鍥�</h1> + <!-- 鐘舵�� --> + <div class="machine-state"> + <div class="crn-state-group"> + <span>鍫嗗灈鏈虹姸鎬�:</span> + <span class="crn-state" style="background-color: #21ff3a">鑷姩</span> + <span class="crn-state" style="background-color: red">寮傚父</span> + </div> + <div class="site-state-group"> + <span>绔欑偣鐘舵��:</span> + <span class="site-state" style="background-color: #21ff3a;">鑷姩</span> + <span class="site-state" style="background-color: red;">寮傚父</span> + </div> + </div> + + <!-- 绯荤粺杩愯 --> + <div class="system-state"> + <div class="system-icon"></div> + </div> + </header> <main> @@ -97,6 +132,10 @@ <button class="item">22</button> <button class="item">23</button> <button class="item">24</button> + <button class="item">25</button> + <button class="item">26</button> + <button class="item">27</button> + <button class="item">28</button> <div class="site site-none"> </div> </div> <div class="stock-group"> @@ -125,6 +164,10 @@ <button class="item">22</button> <button class="item">23</button> <button class="item">24</button> + <button class="item">25</button> + <button class="item">26</button> + <button class="item">27</button> + <button class="item">28</button> <div class="site site-none"> </div> </div> <!-- 鍫嗗灈鏈� --> @@ -159,6 +202,10 @@ <button class="item">22</button> <button class="item">23</button> <button class="item">24</button> + <button class="item">25</button> + <button class="item">26</button> + <button class="item">27</button> + <button class="item">28</button> <div class="site site-none"> </div> </div> <div class="stock-group"> @@ -187,6 +234,10 @@ <button class="item">22</button> <button class="item">23</button> <button class="item">24</button> + <button class="item">25</button> + <button class="item">26</button> + <button class="item">27</button> + <button class="item">28</button> <div class="site site-none"> </div> </div> <br> @@ -220,6 +271,10 @@ <button class="item">22</button> <button class="item">23</button> <button class="item">24</button> + <button class="item">25</button> + <button class="item">26</button> + <button class="item">27</button> + <button class="item">28</button> <div class="site site-none"> </div> </div> <div class="stock-group"> @@ -248,6 +303,10 @@ <button class="item">22</button> <button class="item">23</button> <button class="item">24</button> + <button class="item">25</button> + <button class="item">26</button> + <button class="item">27</button> + <button class="item">28</button> <div class="site site-none"> </div> </div> <!-- 鍫嗗灈鏈� --> @@ -282,6 +341,10 @@ <button class="item">22</button> <button class="item">23</button> <button class="item">24</button> + <button class="item">25</button> + <button class="item">26</button> + <button class="item">27</button> + <button class="item">28</button> <div class="site site-none"> </div> </div> <div class="stock-group"> @@ -310,6 +373,10 @@ <button class="item">22</button> <button class="item">23</button> <button class="item">24</button> + <button class="item">25</button> + <button class="item">26</button> + <button class="item">27</button> + <button class="item">28</button> <div class="site site-none"> </div> </div> </div> @@ -320,12 +387,6 @@ </main> -<!-- 寮瑰嚭灞� --> -<form id="msg" style="display: none"> - <input name="name" type="text"> - <input name="password" type="password"> - <button>纭畾</button> -</form> </body> <script> var crn1Position = 0; @@ -354,7 +415,7 @@ layer.open({ type: 1, shadeClose: true, //鐐瑰嚮閬僵鍏抽棴灞� - content: $("#msg") + content: 'text' }); }) -- Gitblit v1.9.1