zhangyuheng/MCSManager
1
0
Fork 0
forked from mirror/MCSManager
Code Pull Requests Activity

优化 主界面与CSS优化

Browse Source
This commit is contained in:
Suwings 2019-09-16 15:25:35 +08:00
parent cbacaf75da
commit 288470e5c1
7 changed files with 57 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/common/Press.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

15
public/common/css/block.css
View File

@ -35,7 +35,8 @@
/*通用面板*/ /*通用面板*/
.Panel { .Panel {
box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1); /* box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1); */
box-shadow: 0 1px 4px 0 rgba(0,0,0,.13);
margin-bottom: 16px; margin-bottom: 16px;
background-color: #fff; background-color: #fff;
border: 1px solid #d1d5da; border: 1px solid #d1d5da;
@ -43,7 +44,7 @@
} }
.PanelBlue { .PanelBlue {
/*border-top: 3px solid rgba(60, 141, 188, 1);*/ border-top: 3px solid rgba(60, 141, 188, 1);
} }
.PanelGray { .PanelGray {
@ -51,11 +52,15 @@
} }
.PanelGreen { .PanelGreen {
/*border-top: 3px solid #00a65a;*/ border-top: 3px solid #00a65a;
} }
.PanelRed { .PanelRed {
/*border-top: 3px solid #e00202*/ border-top: 3px solid #e00202;
}
.PanelYellow{
border-top: 3px solid #f39c12;
} }
.PanelTitle { .PanelTitle {
@ -107,7 +112,7 @@
/*Minecraft 服务器列表*/ /*Minecraft 服务器列表*/
.PanelItem { .PanelItem {
background-color: #f5f5f5; background-color: #f1f0f0;
padding: 8px 10px; padding: 8px 10px;
width: 100%; width: 100%;
margin-bottom: 10px; margin-bottom: 10px;

11
public/common/css/common.css
View File

@ -44,7 +44,7 @@ input {
/*全局css定义结束*/ /*全局css定义结束*/
#Header { #Header {
background-color: #6314ad; background-color: #3c8dbc;
/* background: linear-gradient(to right, #0D6AAD, #600dad); */ /* background: linear-gradient(to right, #0D6AAD, #600dad); */
height: 50px; height: 50px;
position: fixed; position: fixed;
@ -67,6 +67,10 @@ input {
animation: MasterLogoImg 2s; animation: MasterLogoImg 2s;
} }
.HeaderPress{
float: right;
}
#SideCol { #SideCol {
position: fixed; position: fixed;
color: white; color: white;
@ -131,8 +135,11 @@ input {
font-weight: 400; font-weight: 400;
} }
/* 菜单栏 */
.HeaderR { .HeaderR {
float: right; float: right;
background-color: rgba(68, 114, 196, 1);
max-height: 50px;
} }
.HeaderR div { .HeaderR div {
@ -345,6 +352,6 @@ input {
} }
.PhomeOpZore {} .PhomeOpZore {}
.HeaderItem { .HeaderItem {
background-color: #6314ad; background-color: #3c8dbc;
} }
} }

7
public/index.html
View File

@ -55,6 +55,7 @@
<img src="common/logo.png" width="160px" height="100%" /> <img src="common/logo.png" width="160px" height="100%" />
</div> </div>
<div id="HeaderInfo" class="HeaderTitle"></div> <div id="HeaderInfo" class="HeaderTitle"></div>
<div class="HeaderR"> <div class="HeaderR">
<div class="PhoneDisplayNone" onclick="PAGE.refresh()"> <div class="PhoneDisplayNone" onclick="PAGE.refresh()">
<span class="glyphicon glyphicon-refresh"></span> <span class="glyphicon glyphicon-refresh"></span>
@ -73,6 +74,9 @@
退出 退出
</div> </div>
</div> </div>
<div class="HeaderPress">
<img src="common/Press.png" height="50px" width="86px">
</div>
</div> </div>
<div id='MainContainer'> <div id='MainContainer'>
<div id='SideCol' class=""> <div id='SideCol' class="">
@ -139,7 +143,8 @@
<!--页面加载进度条--> <!--页面加载进度条-->
<div class="Toolscon" id="ToolsPageLoading"> <div class="Toolscon" id="ToolsPageLoading">
<div class="progress" style="height: 4px;line-height: 4px;background-color: inherit;border: 0px;"> <div class="progress" style="height: 4px;line-height: 4px;background-color: inherit;border: 0px;">
<div id="ToolsLoading" class="progress-bar progress-bar-success progress-bar-striped active" style="width: 0%;height: 4px;"> <div id="ToolsLoading" class="progress-bar progress-bar-success progress-bar-striped active"
style="width: 0%;height: 4px;">
</div> </div>
</div> </div>
</div> </div>

7
public/template/center.html
View File

@ -5,7 +5,8 @@
<div class="Panel"> <div class="Panel">
<div class="PanelTitle PanelBlue"> <div class="PanelTitle PanelBlue">
<!--请不要怀疑这是在欺骗您数据统计日期来自前端，事实上，后端是在每月1日统计至今，所以是一致的--> <!--请不要怀疑这是在欺骗您数据统计日期来自前端，事实上，后端是在每月1日统计至今，所以是一致的-->
控制面板 {{ new Date().getMonth()+1 }}月1日 ~ {{ new Date().getMonth()+1 }}月{{ new Date().getDate() }}日 基础监控 控制面板 {{ new Date().getMonth()+1 }}月1日 ~ {{ new Date().getMonth()+1 }}月{{ new Date().getDate() }}日
基础监控
</div> </div>
<div class="PanelBody"> <div class="PanelBody">
<div class="row"> <div class="row">
@ -137,7 +138,7 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-6 "> <div class="col-md-6 ">
<div class="Panel PanelGreen"> <div class="Panel ">
<div class="PanelTitle">版本</div> <div class="PanelTitle">版本</div>
<div class="PanelBody"> <div class="PanelBody">
<div id="VersionShow"> <div id="VersionShow">
@ -158,7 +159,7 @@
</div> </div>
<div class="col-md-6 "> <div class="col-md-6 ">
<div class="Panel PanelGreen"> <div class="Panel ">
<div class="PanelTitle">操作系统</div> <div class="PanelTitle">操作系统</div>
<div class="PanelBody"> <div class="PanelBody">
<div id="SystemUp"> <div id="SystemUp">

17
public/template/component/console.html
View File

@ -25,7 +25,7 @@
</div> </div>
</div> </div>
<div class="Panel PanelGreen"> <div class="Panel ">
<div class="PanelTitle">服务器操作</div> <div class="PanelTitle">服务器操作</div>
<div class="PanelBody"> <div class="PanelBody">
@ -47,7 +47,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="Panel PanelGreen"> <div class="Panel ">
<div class="PanelTitle">FTP 链接信息</div> <div class="PanelTitle">FTP 链接信息</div>
<div class="PanelBody"> <div class="PanelBody">
<div class="PanelItem"> <div class="PanelItem">
@ -68,7 +68,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="Panel PanelGreen"> <div class="Panel ">
<div class="PanelTitle">任务与机制</div> <div class="PanelTitle">任务与机制</div>
<div class="PanelBody"> <div class="PanelBody">
<transition name="slide-fade"> <transition name="slide-fade">
@ -100,11 +100,12 @@
</div> </div>
</div> </div>
<div class="col-md-9"> <div class="col-md-9">
<div class="Panel PanelRed"> <div class="Panel PanelBlue">
<div class="PanelTitle">服务端控制组</div> <div class="PanelTitle">服务端控制组</div>
<div class="PanelBody"> <div class="PanelBody">
<div class="row"> <div class="row">
<div class="col-md-3 col-sm-6" v-on:click="RES.redirectPage('./template/component/terminal.html', null, '')"> <div class="col-md-3 col-sm-6"
v-on:click="RES.redirectPage('./template/component/terminal.html', null, '')">
<div class="PanelItemBlock"> <div class="PanelItemBlock">
<div class="LogV"> <div class="LogV">
<span class="glyphicon glyphicon-console" aria-hidden="true"> </span> <span class="glyphicon glyphicon-console" aria-hidden="true"> </span>
@ -141,7 +142,7 @@
</div> </div>
</div> </div>
<div class="col-md-9" id='ChartCPUFor'> <div class="col-md-9" id='ChartCPUFor'>
<div class="Panel PanelRed"> <div class="Panel ">
<div class="PanelTitle">CPU（中央处理器）利用率 （%）</div> <div class="PanelTitle">CPU（中央处理器）利用率 （%）</div>
<div class="PanelBody"> <div class="PanelBody">
<div class="row"> <div class="row">
@ -152,7 +153,7 @@
</div> </div>
<div class="col-md-3"></div> <div class="col-md-3"></div>
<div class="col-md-9"> <div class="col-md-9">
<div class="Panel PanelRed"> <div class="Panel ">
<div class="PanelTitle">物理内存使用率 （%）</div> <div class="PanelTitle">物理内存使用率 （%）</div>
<div class="PanelBody"> <div class="PanelBody">
<div class="row"> <div class="row">
@ -217,7 +218,7 @@
username: MCSERVER.listenServername username: MCSERVER.listenServername
}, },
watch: { watch: {
run: function (cur, old) {} run: function (cur, old) { }
} }
}); });

30
public/template/component/server.html
View File

@ -1,7 +1,7 @@
<div id='ServerPanel' class="OneContainer"> <div id='ServerPanel' class="OneContainer">
<div class="row"> <div class="row">
<div class="col-md-3"> <div class="col-md-3">
<div class="Panel"> <div class="Panel PanelYellow">
<div class="PanelTitle">服务器信息</div> <div class="PanelTitle">服务器信息</div>
<div class="PanelBody"> <div class="PanelBody">
<!--右侧--> <!--右侧-->
@ -20,7 +20,7 @@
</div> </div>
</div> </div>
<div class="col-md-9"> <div class="col-md-9">
<div class="Panel"> <div class="Panel PanelGreen">
<div class="PanelTitle">基本参数</div> <div class="PanelTitle">基本参数</div>
<div class="PanelBody"> <div class="PanelBody">
<!--left 侧--> <!--left 侧-->
@ -33,24 +33,28 @@
<p>如果您 Java 环境无误，使用 "java" 环境变量即可</p> <p>如果您 Java 环境无误，使用 "java" 环境变量即可</p>
<div class="input-group input-group-sm"> <div class="input-group input-group-sm">
<span class="input-group-addon">Java 路径</span> <span class="input-group-addon">Java 路径</span>
<input v-bind:disabled="isHighCommande" type="text" class="form-control" v-model="java" placeholder="[未设定]"> <input v-bind:disabled="isHighCommande" type="text" class="form-control" v-model="java"
placeholder="[未设定]">
</div> </div>
<p>端根目录: [ {{ cwd }} ] </p> <p>端根目录: [ {{ cwd }} ] </p>
<div class="input-group input-group-sm"> <div class="input-group input-group-sm">
<span class="input-group-addon"> 服务端文件名 </span> <span class="input-group-addon"> 服务端文件名 </span>
<input v-bind:disabled="isHighCommande" type="text" class="form-control" v-model="jarName" placeholder="[未设定]"> <input v-bind:disabled="isHighCommande" type="text" class="form-control"
v-model="jarName" placeholder="[未设定]">
</div> </div>
<p>如需设置请按照 2018/10/1 这种格式，到期后服务端将无法开启，但文件依然可以上传下载。你可以从用户的可用服务端列表让他彻底对此失去控制。</p> <p>如需设置请按照 2018/10/1 这种格式，到期后服务端将无法开启，但文件依然可以上传下载。你可以从用户的可用服务端列表让他彻底对此失去控制。</p>
<div class="input-group input-group-sm"> <div class="input-group input-group-sm">
<span class="input-group-addon"> 到期限制 </span> <span class="input-group-addon"> 到期限制 </span>
<input v-bind:disabled="isHighCommande" type="text" class="form-control" v-model="timeLimitDate" placeholder="[未设定 如 2018/10/1 2020/1/12]"> <input v-bind:disabled="isHighCommande" type="text" class="form-control"
v-model="timeLimitDate" placeholder="[未设定 如 2018/10/1 2020/1/12]">
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div class="input-group input-group-sm"> <div class="input-group input-group-sm">
<span class="input-group-addon">启动附加参数</span> <span class="input-group-addon">启动附加参数</span>
<input v-bind:disabled="isHighCommande" type="text" class="form-control" v-model="addCmd" placeholder="[可空 列如: -server -xxx 等]"> <input v-bind:disabled="isHighCommande" type="text" class="form-control"
v-model="addCmd" placeholder="[可空 列如: -server -xxx 等]">
</div> </div>
<p>服务端文件与数据的目录所在地。</p> <p>服务端文件与数据的目录所在地。</p>
<div class="input-group input-group-sm"> <div class="input-group input-group-sm">
@ -63,11 +67,13 @@
<p>实质是 -Xmx -Xms 参数，填写请加单位(M,G)</p> <p>实质是 -Xmx -Xms 参数，填写请加单位(M,G)</p>
<div class="input-group input-group-sm"> <div class="input-group input-group-sm">
<span class="input-group-addon"> 最大内存堆 </span> <span class="input-group-addon"> 最大内存堆 </span>
<input v-bind:disabled="isHighCommande" type="text" class="form-control" v-model="Xmx" placeholder="[自动 如需修改请加单位]"> <input v-bind:disabled="isHighCommande" type="text" class="form-control" v-model="Xmx"
placeholder="[自动 如需修改请加单位]">
</div> </div>
<div class="input-group input-group-sm"> <div class="input-group input-group-sm">
<span class="input-group-addon"> 初始内存堆 </span> <span class="input-group-addon"> 初始内存堆 </span>
<input v-bind:disabled="isHighCommande" type="text" class="form-control" v-model="Xms" placeholder="[自动 如需修改请加单位]"> <input v-bind:disabled="isHighCommande" type="text" class="form-control" v-model="Xms"
placeholder="[自动 如需修改请加单位]">
</div> </div>
<div class="row"> <div class="row">
@ -101,7 +107,8 @@
<div class="input-group input-group-sm"> <div class="input-group input-group-sm">
<span class="input-group-addon"> 自定义命令 </span> <span class="input-group-addon"> 自定义命令 </span>
<input type="text" class="form-control" v-model="highCommande" placeholder="[ 尚未使用 | 列如: java -xxx -yyy Xmx4g Xms2g -Djline.terminal=jline.UnsupportedTerminal -jar test.jar --xxx ] "> <input type="text" class="form-control" v-model="highCommande"
placeholder="[ 尚未使用 | 列如: java -xxx -yyy Xmx4g Xms2g -Djline.terminal=jline.UnsupportedTerminal -jar test.jar --xxx ] ">
</div> </div>
</div> </div>
<br /> <br />
@ -121,7 +128,8 @@
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-lg-12">
<div class="" style="float: right;margin-top: 20px;"> <div class="" style="float: right;margin-top: 20px;">
<button class="btn btn-danger" v-on:click="toDocker(name)">Docker 配置</button> &nbsp;|&nbsp; <button class="btn btn-danger" v-on:click="toDocker(name)">Docker 配置</button>
&nbsp;|&nbsp;
<button class="btn btn-primary" v-on:click="toConsole(name)">控制面板</button> &nbsp;|&nbsp; <button class="btn btn-primary" v-on:click="toConsole(name)">控制面板</button> &nbsp;|&nbsp;
<button class="btn btn-success" v-on:click="toRebulider()">保存/更新设置</button> <button class="btn btn-success" v-on:click="toRebulider()">保存/更新设置</button>
</div> </div>
@ -214,5 +222,5 @@
}); });
MI.rListener('onend', function () {}); MI.rListener('onend', function () { });
</script> </script>