DashboardClient
/
screen.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <style type="text/css">
      html,
      body {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        background: #000;
      }

      ul#navigation {
        position: fixed;
        margin: 0px;
        padding: 0px;
        top: 0px;
        right: 50px;
        list-style: none;
        z-index: 999999;
      }

      ul#navigation li {
        display: inline;
        float: left;
        cursor: pointer;
      }

      ul#navigation li a {
        display: block;
        float: left;
        margin-top: -10px;
        padding: 10px 20px 10px 20px;
        background-color: rgba(0, 0, 0, 0.3);
        background-repeat: no-repeat;
        background-position: 50% 10px;
        border: 1px solid #fff;
        -moz-border-radius: 0px 0px 10px 10px;
        -webkit-border-bottom-right-radius: 10px;
        -webkit-border-bottom-left-radius: 10px;
        -khtml-border-bottom-right-radius: 10px;
        -khtml-border-bottom-left-radius: 10px;
        text-decoration: none;
        text-align: center;
        opacity: 1;
        filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
      }

      ul#navigation li a:hover {
        background-color: rgba(0, 0, 0, 0.5);
      }

      ul#navigation li a span {
        letter-spacing: 2px;
        font-size: 20px;
        color: #ffffff;
        text-shadow: 0 -1px 1px #fff;
      }

      ul#navigation .close {
        margin-left: 20px;
      }
    </style>
  </head>
  <body>
    <ul id="navigation">
      <li class="menu" data-page-id="81">
        <a><span>演示页面1</span></a>
      </li>
      <li class="menu" data-page-id="18">
        <a><span>演示页面2</span></a>
      </li>
      <li class="menu" data-page-id="11">
        <a><span>演示页面3</span></a>
      </li>
      <li class="menu close">
        <a href="javascript:window.close();"><span>X</span></a>
      </li>
    </ul>

    <script type="text/javascript" src="libs/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript">
      $(function () {
        var d = 300;
        $("#navigation a").each(function () {
          $(this)
            .stop()
            .animate(
              {
                opacity: 0.3,
              },
              (d += 150)
            );
        });

        $("#navigation > li").hover(
          function () {
            $("a", $(this)).stop().animate(
              {
                marginTop: "-2px",
                opacity: 1,
              },
              200
            );
          },
          function () {
            $("a", $(this)).stop().animate(
              {
                marginTop: "-10px",
                opacity: 0.3,
              },
              200
            );
          }
        );
        $("#navigation > li").click(function () {
          if ($(this).hasClass("close")) {
            return;
          }
          var pageId = $(this).data("page-id");
          var linkUrl = "http://" + window.location.hostname + ":8070/#/dashboard/include/" + pageId + "?token=" + window.token;
          var ifameHtml = "<iframe class='iframe' width='100%' height='100%' frameborder='0'></iframe>";
          $(".iframe").hide();
          if ($("#page" + pageId).length > 0) {
            $("#page" + pageId).show();
          } else {
            $(ifameHtml)
              .attr("id", "page" + pageId)
              .attr("src", linkUrl)
              .appendTo("body");
          }
        });
        $.ajax({
          url: "http://39.101.138.43:8079/user/login",
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
          type: "post",
          data: {
            username: "admin",
            password: "admin",
          },
          success: function (data) {
            window.token = JSON.parse(data).data.token;
            $("#navigation > li").first().trigger("click");
            console.log(data);
          },
          error: function (data) {
            console.error(data);
          },
        });
      });
    </script>
  </body>
</html>