|
|
<!DOCTYPE html>
|
|
|
<!-- 声明文档类型-->
|
|
|
<html lang="en">
|
|
|
<!-- 确定语言形态 -->
|
|
|
<style>
|
|
|
#pie {
|
|
|
width: 400px;
|
|
|
height: 400px;
|
|
|
}
|
|
|
.downorder{
|
|
|
width: 100px;
|
|
|
position: relative;
|
|
|
height: auto;
|
|
|
margin: auto;
|
|
|
}
|
|
|
.downorder:hover a{
|
|
|
display: block;
|
|
|
}
|
|
|
.order{
|
|
|
position: relative;
|
|
|
text-align: center;
|
|
|
display: inline-block;
|
|
|
font-size: 16px;
|
|
|
padding: 15px;
|
|
|
background-color: rgb(1, 1, 1);
|
|
|
color: aliceblue;
|
|
|
}
|
|
|
.order:hover{
|
|
|
background-color: rgb(0, 0, 0);
|
|
|
color: rgb(6, 80, 238);
|
|
|
}
|
|
|
.downtext{
|
|
|
position: relative;
|
|
|
text-align: center;
|
|
|
display: inline-block;
|
|
|
font-size: 10px;
|
|
|
background-color: rgba(182, 182, 182,0.75);
|
|
|
color: aliceblue;
|
|
|
}
|
|
|
.downtext a{
|
|
|
/* display: block; */
|
|
|
display: none;
|
|
|
padding: 15px;
|
|
|
}
|
|
|
.downtext a:hover{
|
|
|
background-color: rgba(182, 182, 182,0.25);
|
|
|
color: rgb(58, 76, 243);
|
|
|
}
|
|
|
/* 遮罩层 */
|
|
|
#overlay {
|
|
|
position: fixed;
|
|
|
left: 0px;
|
|
|
top: 0px;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
font-size: 16px;
|
|
|
/* IE9以下不支持rgba模式 */
|
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
|
/* 兼容IE8及以下 */
|
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);
|
|
|
display: none;
|
|
|
}
|
|
|
/* 弹出框主体 */
|
|
|
.popup {
|
|
|
background-color: #ffffff;
|
|
|
max-width: 400px;
|
|
|
min-width: 200px;
|
|
|
height: 240px;
|
|
|
border-radius: 5px;
|
|
|
margin: 100px auto;
|
|
|
text-align: center;
|
|
|
}
|
|
|
/* 弹出框的标题 */
|
|
|
.popup_title {
|
|
|
height: 60px;
|
|
|
line-height: 60px;
|
|
|
border-bottom: solid 1px #cccccc;
|
|
|
}
|
|
|
/* 弹出框的内容 */
|
|
|
.popup_content {
|
|
|
height: 50px;
|
|
|
line-height: 50px;
|
|
|
padding: 15px 20px;
|
|
|
}
|
|
|
/* 弹出框的按钮栏 */
|
|
|
.popup_btn {
|
|
|
padding-bottom: 10px;
|
|
|
}
|
|
|
/* 弹出框的按钮 */
|
|
|
.popup_btn button {
|
|
|
color: #778899;
|
|
|
width: 40%;
|
|
|
height: 40px;
|
|
|
cursor: pointer;
|
|
|
border: solid 1px #cccccc;
|
|
|
border-radius: 5px;
|
|
|
margin: 5px 10px;
|
|
|
color: #ffffff;
|
|
|
background-color: #337ab7;
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
<script type="text/javascript" src="echarts.js"></script>
|
|
|
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<!--控制网页的编码格式 utf-8 国际性编码-->
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<!--控制视口比例以及缩放-->
|
|
|
<title>首页</title>
|
|
|
<!-- 先引入重置样式表和公共样式表以及主页样式表 -->
|
|
|
<link rel="stylesheet" href="./css/index.css">
|
|
|
<link rel="stylesheet" href="./css/public.css">
|
|
|
<link rel="stylesheet" href="./css/reset.css">
|
|
|
<!-- 这个顺序引入更规范 -->
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
<!-- 这是网页的头部版心盒子 -->
|
|
|
<div class="header_con">
|
|
|
<!-- h1里面放logo哦 -->
|
|
|
<h1>
|
|
|
<img
|
|
|
width="150px"
|
|
|
height="80px"
|
|
|
src="./assets/images/Nginx.jpg" alt="">
|
|
|
</h1>
|
|
|
<!-- 头部右侧表单标签-->
|
|
|
<form action="">
|
|
|
<input type="text" class="search" value="SEARCH...">
|
|
|
<div>
|
|
|
<input type="button" class="btn">
|
|
|
</div>
|
|
|
</form>
|
|
|
</div>
|
|
|
<!-- 导航栏平铺部分：会显示黑色 -->
|
|
|
<div id="nav">
|
|
|
<!-- 导航栏版心部分 -->
|
|
|
<div class="nav_con">
|
|
|
<ul>
|
|
|
<li>
|
|
|
<div class="downorder">
|
|
|
<button class="order">
|
|
|
首页
|
|
|
</button>
|
|
|
<div class="downtext">
|
|
|
<a href="">查看主动探测</a>
|
|
|
<a href="">查看流量控制</a>
|
|
|
<a href="">查看Nginx日志</a>
|
|
|
</div>
|
|
|
</div></li>
|
|
|
<li>
|
|
|
<button class="order"
|
|
|
id="showPopup" onclick="showPopup()">系统设置</button>
|
|
|
<div id="overlay">
|
|
|
<div class="popup">
|
|
|
<p class="popup_title">系统设置</p>
|
|
|
<p class="popup_content">当前系统版本：1.13</p>
|
|
|
<div class="popup_btn">
|
|
|
<button onclick="hidePopup()">确认</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- banner的平铺部分 -->
|
|
|
<div id="banner">
|
|
|
<div class="banner_con">
|
|
|
<img src="./assets/images/R-C.png"
|
|
|
height="466px"
|
|
|
width="1000px">
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 新闻列表的版心部分 -->
|
|
|
<div class="news_con">
|
|
|
<!-- 最左侧的盒子 -->
|
|
|
<div class="news_l">
|
|
|
<h3 class="news_title">版本更新情况</h3>
|
|
|
<ul class="news_list">
|
|
|
<li>
|
|
|
<a>alpha 0.11 更新ui版本</a>
|
|
|
<span>2024-05-05</span>
|
|
|
</li>
|
|
|
<li>
|
|
|
<a>alpha 0.10 更新跳转其他界面逻辑</a>
|
|
|
<span>2024-05-03</span>
|
|
|
</li>
|
|
|
<li>
|
|
|
<a>alpha 0.09 更新LoginUI设计</a>
|
|
|
<span>1998-09-15</span>
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
<!-- 中间的盒子-->
|
|
|
<div class="news_c">
|
|
|
<h3 class="news_title">服务器列表</h3>
|
|
|
<p class="txt1">北京 ip：192.168.20.2</p>
|
|
|
<p class="txt1">广州 ip：192.168.21.4</p>
|
|
|
<p class="txt1">长沙 ip：192.168.23.4</p>
|
|
|
</div>
|
|
|
<!-- 右边的盒子 -->
|
|
|
<div class="news_r">
|
|
|
<h3 class="news_title">最近操作</h3>
|
|
|
<p class="txt3">开启主备切换服务</p>
|
|
|
<p class="txt3">开启Nginx服务</p>
|
|
|
<a href="#"><img src="./images/btn_img_05.jpg" alt=""></a>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 市场项目那一部分 -->
|
|
|
<div class="case_con">
|
|
|
<h3>当前可用服务</h3>
|
|
|
<div class="case_box">
|
|
|
<dl>
|
|
|
<dt><a href="DetectUI.html"><img src="./assets/images/R-C green.png" alt=""></a></dt>
|
|
|
<dd>查看主动探测</dd>
|
|
|
</dl>
|
|
|
<dl>
|
|
|
<dt><img src="./assets/images/R-C red.png" alt=""></dt>
|
|
|
<dd>查看流量控制</dd>
|
|
|
</dl>
|
|
|
<dl>
|
|
|
<dt><img src="./assets/images/R-C pink.png" alt=""></dt>
|
|
|
<dd>启用主备切换</dd>
|
|
|
</dl>
|
|
|
<dl>
|
|
|
<dt><img src="./assets/images/R-C blue.png"></dt>
|
|
|
<dd>查看Nginx日志</dd>
|
|
|
<script>
|
|
|
const util = require('util');
|
|
|
const child_process = require('child_process');
|
|
|
// 调用util.promisify方法，返回一个promise,如const { stdout, stderr } = await exec('rm -rf build')
|
|
|
const exec = util.promisify(child_process.exec);
|
|
|
const appPath = join(__dirname, 'app');
|
|
|
|
|
|
const runClean = async function () {
|
|
|
// cwd指定子进程的当前工作目录 这里的rm -rf build为删除指定目录下的一个文件夹
|
|
|
await exec(`rm -rf build`, { cwd: appPath });
|
|
|
await exec(`rm -rf test`, { cwd: appPath });
|
|
|
runClean();
|
|
|
}
|
|
|
</script>
|
|
|
</dl>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 产品中心那一部分的平铺-->
|
|
|
<div id="links">
|
|
|
<!-- 这个顺序引入更规范 -->
|
|
|
<div class="links_con">
|
|
|
<!-- 版心部分 -->
|
|
|
<!-- 左边的盒子 -->
|
|
|
<div class="links_l">
|
|
|
<h3 class="links_title">技术支持</h3>
|
|
|
<ul class="links_list">
|
|
|
<li>
|
|
|
<a href="#">国防科技大学信息中心</a>
|
|
|
</li>
|
|
|
<li>
|
|
|
<a href="#">全军指挥控制中心</a>
|
|
|
</li>
|
|
|
<li>
|
|
|
<a href="#">国防科技大学网络安全小组</a>
|
|
|
</li>
|
|
|
<li>
|
|
|
<a href="#">软体生物开发小组</a>
|
|
|
</li>
|
|
|
<li>
|
|
|
<a href="#">国防科技大学软件体系结构课程</a>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<!-- 中间的盒子 -->
|
|
|
<div class="links_c">
|
|
|
<h3 class="links_title">开发者联系方式</h3>
|
|
|
<ul class="links_list">
|
|
|
<li>
|
|
|
<a href="#">liuyuyang21a@gfkd.mtn</a>
|
|
|
</li>
|
|
|
<li>
|
|
|
<a href="#">yuankaifeng21@gfkd.mtn</a>
|
|
|
</li>
|
|
|
<li>
|
|
|
<a href="#">xumingyang21@gfkd.mtn</a>
|
|
|
</li>
|
|
|
<li>
|
|
|
<a href="#">dongjiaqi21@gfkd.mtn</a>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<!-- 右边的盒子 -->
|
|
|
<div class="links_r">
|
|
|
<h3 class="links_title">HADG</h3>
|
|
|
<h3 class="links_a"> 旨在为全军指挥信息系统提供坚实保障，开发更高效的网关服务</h3>
|
|
|
<div class="map">
|
|
|
<img
|
|
|
width="150px"
|
|
|
height="100px"
|
|
|
src="./assets/images/nginx.gif">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
<!-- 页脚 -->
|
|
|
<div class="footer_con">
|
|
|
<!-- 页脚左边的盒子 -->
|
|
|
<p class="footer_l">
|
|
|
<a href="./table.html">意见反馈</a>
|
|
|
<a href="#">用户协议</a>
|
|
|
<a href="#">交流QQ群</a>
|
|
|
<a href="#" class="footer-right">湘ICP备20002562号-1</a>
|
|
|
</p>
|
|
|
<!-- 页脚右边的盒子 -->
|
|
|
<p class="footer_r">
|
|
|
国防科技大学软件体系结构课程徐明洋小组开发
|
|
|
</p>
|
|
|
</div>
|
|
|
</body>
|
|
|
<script>
|
|
|
function showPopup(){
|
|
|
var overlay = document.getElementById("overlay");
|
|
|
overlay.style.display = "block";
|
|
|
}
|
|
|
function hidePopup(){
|
|
|
var overlay = document.getElementById("overlay");
|
|
|
overlay.style.display = "none";
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
</html> |
