系统消息提示

leiSP-admin/src/main/resources/static/css/toast.style.css

@@ -0,0 +1,130 @@
+@charset "UTF-8";
+@font-face {
+  font-family: 'toast';
+  src: url("../fonts/toast.eot?76tjxy");
+  src: url("../fonts/toast.eot?76tjxy#iefix") format("embedded-opentype"), url("../fonts/toast.ttf?76tjxy") format("truetype"), url("../fonts/toast.woff?76tjxy") format("woff"), url("../fonts/toast.svg?76tjxy#toast") format("svg");
+  font-weight: normal;
+  font-style: normal; }
+
+i {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'toast' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale; }
+
+.toast-icon-error:before {
+  content: "?";
+}
+
+.toast-icon-info:before {
+  content: "?";
+}
+
+.toast-icon-notice:before {
+  content: "?";
+}
+
+.toast-icon-success:before {
+  content: "!";
+}
+
+.toast-icon-warning:before {
+  content: "?"; }
+
+.toast-item-wrapper {
+  min-width: 250px;
+  padding: 10px;
+  box-sizing: border-box;
+  color: #fff;
+  overflow: hidden;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none; }
+  .toast-item-wrapper i.toast-icon {
+    position: absolute;
+    top: 12px;
+    left: 0;
+    width: 50px;
+    text-align: center;
+    vertical-align: middle;
+    font-size: 2rem; }
+  .toast-item-wrapper .toast-close {
+    font-size: 1.2rem;
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 20px;
+    text-align: center;
+    cursor: pointer; }
+  .toast-item-wrapper.success {
+    background-color: #44aeff;
+    border: 1px solid #1a9581; }
+  .toast-item-wrapper.error {
+    background-color: #ff7946;
+    border: 1px solid #f35818; }
+  .toast-item-wrapper.warning {
+    background-color: #fff1c0;
+    border: 1px solid #f0c948;
+    color: #333; }
+  .toast-item-wrapper.notice {
+    background-color: #48a9f8;
+    border: 1px solid #208ce4; }
+  .toast-item-wrapper.info {
+    background-color: #7f97a3;
+    border: 1px solid #6b8699; }
+  .toast-item-wrapper.toast-top-left {
+    left: 20px;
+    top: 20px; }
+  .toast-item-wrapper.toast-top-right {
+    right: 20px;
+    top: 20px; }
+  .toast-item-wrapper.toast-top-center {
+    margin: 0 auto;
+    top: 20px; }
+  .toast-item-wrapper.toast-bottom-left {
+    left: 20px;
+    bottom: 20px; }
+  .toast-item-wrapper.toast-bottom-right {
+    right: 20px;
+    bottom: 20px; }
+  .toast-item-wrapper.toast-bottom-center {
+    margin: 0 auto;
+    bottom: 20px; }
+  .toast-item-wrapper.fullscreen {
+    left: 20px;
+    right: 20px;
+    width: calc(100% - 40px); }
+  .toast-item-wrapper p {
+    margin: 0; }
+  .toast-item-wrapper .toast-message {
+    font-size: 0.87rem; }
+  .toast-item-wrapper .toast-progress {
+    width: 0;
+    height: 3px;
+    background-color: rgba(0, 0, 0, 0.5);
+    position: absolute;
+    bottom: 0;
+    right: 0; }
+
+.toast-item-wrapper.rtl {
+  direction: rtl;
+  text-align: right; }
+  .toast-item-wrapper.rtl i.toast-icon {
+    left: auto;
+    right: 0; }
+  .toast-item-wrapper.rtl .toast-close {
+    right: auto;
+    left: 0; }
+  .toast-item-wrapper.rtl p {
+    text-align: right; }
+  .toast-item-wrapper.rtl .toast-progress {
+    left: auto;
+    right: 0; }

leiSP-admin/src/main/resources/static/js/toast.script.js

@@ -0,0 +1,161 @@
+(function(){
+    "use strict";
+    $.Toast = function(title, message, type, options){
+        var defaultOptions = {
+            appendTo: "body",
+            stack: false,
+            position_class: "toast-bottom-right",
+            fullscreen:false,
+            width: 250,
+            spacing:20,
+            timeout: 4000,
+            has_close_btn:true,
+            has_icon:true,
+            sticky:false,
+            border_radius:6,
+            has_progress:false,
+            rtl:false
+        }
+
+        var $element = null;
+
+        var $options = $.extend(true, {}, defaultOptions, options);
+
+        var spacing = $options.spacing;
+
+        var css = {
+            "position":($options.appendTo == "body") ? "fixed" : "absolute",
+            "min-width":$options.width,
+            "display":"none",
+            "border-radius":$options.border_radius,
+            "z-index":99999
+        }
+
+        $element = $('<div class="toast-item-wrapper ' + type + ' ' + $options.position_class + '"></div>');
+        $('<p class="toast-title">' + title + '</p>').appendTo($element);
+        $('<p class="toast-message">' + message + '</p>').appendTo($element);
+
+        if($options.fullscreen){
+            $element.addClass( "fullscreen" );
+        }
+
+        if($options.rtl){
+            $element.addClass( "rtl" );
+        }
+
+        if($options.has_close_btn){
+            $('<span class="toast-close">&times;</span>').appendTo($element);
+            if( $options.rtl){
+                css["padding-left"] = 20;
+            } else {
+                css["padding-right"] = 20;
+            }
+        }
+
+        if($options.has_icon){
+            $('<i class="toast-icon toast-icon-' + type + '"></i>').appendTo($element);
+            if( $options.rtl){
+                css["padding-right"] = 50;
+            } else {
+                css["padding-left"] = 50;
+            }            
+        }
+
+        if($options.has_progress && $options.timeout > 0){
+            $('<div class="toast-progress"></div>').appendTo($element);
+        }
+
+        if($options.sticky){
+            $options.spacing = 0;
+            spacing = 0;
+
+            switch($options.position_class){
+                case "toast-top-left" : {
+                    css["top"] = 0;
+                    css["left"] = 0;
+                    break;
+                }
+                case "toast-top-right" : {
+                    css["top"] = 0;
+                    css["left"] = 0;                    
+                    break;
+                }
+                case "toast-top-center" : {
+                    css["top"] = 0;
+                    css["left"] = css["right"] = 0;  
+                    css["width"] = "100%";                  
+                    break;
+                }
+                case "toast-bottom-left" : {
+                    css["bottom"] = 0;
+                    css["left"] = 0;                     
+                    break;
+                }
+                case "toast-bottom-right" : {
+                    css["bottom"] = 0;
+                    css["right"] = 0;                     
+                    break;
+                }
+                case "toast-bottom-center" : {
+                    css["bottom"] = 0;
+                    css["left"] = css["right"] = 0;  
+                    css["width"] = "100%";                     
+                    break;
+                }
+                default : {
+                    break;
+                }                                                                        
+            }
+        }
+
+        if($options.stack){
+            if($options.position_class.indexOf("toast-top") !== -1 ){
+                $($options.appendTo).find('.toast-item-wrapper').each(function(){
+                    css["top"] = parseInt($(this).css("top")) + this.offsetHeight + spacing;
+                });
+            } else if($options.position_class.indexOf("toast-bottom") !== -1 ){
+                $($options.appendTo).find('.toast-item-wrapper').each(function(){
+                    css["bottom"] = parseInt($(this).css("bottom")) + this.offsetHeight + spacing;
+                });
+            }
+        }        
+
+        $element.css(css);
+
+        $element.appendTo($options.appendTo);
+
+		if($element.fadeIn) {
+            $element.fadeIn();
+        }else {
+            $alert.css({display: 'block', opacity: 1});
+        }
+
+		function removeToast(){          
+			$.Toast.remove( $element );
+		}
+
+		if($options.timeout > 0){
+			setTimeout(removeToast, $options.timeout);
+            if($options.has_progress){
+                $(".toast-progress", $element).animate({"width":"100%"}, $options.timeout);
+            }
+		}        
+
+        $(".toast-close", $element).click(removeToast)
+
+        return $element;
+    }
+
+    $.Toast.remove = function( $element ){
+        "use strict";        
+		if($element.fadeOut)
+		{
+			$element.fadeOut(function(){
+				return $element.remove();
+			});
+		}
+		else{
+			$element.remove();
+		}        
+    }
+})();

leiSP-admin/src/main/resources/templates/main.html

@@ -6,6 +6,7 @@
     <title>统计</title>
     <link rel="shortcut icon" href="sooka.ico">
     <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
+    <link href="../static/css/toast.style.css" th:href="@{/css/toast.style.css}" rel="stylesheet"/>
     <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
     <link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
     <link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>
@@ -89,7 +90,7 @@
     <div class="row" style="padding:0 15px">
         <div class="th-wid-6 ibox-th-colorbar1">
 
-            <div class="col-sm-6 ibox-left-th">
+            <div class="col-sm-6 ibox-left-th" onclick="addToast()">
                 <img th:src="@{/img/jkzs.png}">
                 <h5>接口总数</h5>
             </div>
@@ -183,6 +184,7 @@
 </div>
 <script th:src="@{/js/jquery.min.js}"></script>
 <script th:src="@{/js/bootstrap.min.js}"></script>
+<script th:src="@{/js/toast.script.js}"></script>
 <script th:src="@{/ajax/libs/flot/jquery.flot.js}"></script>
 
 <th:block th:include="include :: sparkline-js"/>
@@ -320,6 +322,24 @@
         });
         drawPlot(d2);
     }
+
+
+    function addToast(){
+        $.Toast("<p style='font-size: 18px;'>系统提示</p>",
+            "<p style='font-size: 15px;'><a href='https://www.baidu.com' target='_blank'>用户【admin】权限即将到期，请及时处理！</a></p>" +
+            "<p style='font-size: 15px;'><a href='https://www.baidu.com' target='_blank'>用户【admin】权限即将到期，请及时处理！</a></p>",
+            "success", {
+            stack: true,
+            has_icon:true,
+            has_close_btn:true,
+            fullscreen:false,
+            width:250,
+            timeout:0,
+            sticky:false,
+            has_progress:true,
+            rtl:false,
+        });
+    }
 </script>
 </body>
 </html>