server-status主题优化 (#405)

* server-status主题优化
1.前台增加半透明样式切换按钮,同时适配了深色和浅色模式
2.右小角功能区增加收纳,点击展开,滚动页面关闭
3.vps世界分布地图全屏展示
4.修改默认页底版权信息位置,从跟随container box修改为默认置于页面底部,container box到底底部后再跟随
5.修改container box默认宽度和最大宽度,适配高分辨率显示器
6.优化样式文件结构,删除无用的样式文件
7.一些小优化

* 修改默认背景图

* 修改背景图片

* 1.echart图表适配半透明样式切换
2.echart图表移动端设置更细折线
3.修改半透明样式下的默认背景图

* echart Y轴移动端更细刻度线

* fixbug

* 修改半透明样式默认背景图片为本地调用
This commit is contained in:
nap0o
2024-08-09 09:49:45 -04:00
committed by GitHub
parent 6b05a21641
commit d9097540c3
18 changed files with 659 additions and 609 deletions

View File

@@ -1,23 +1,20 @@
{{define "theme-server-status/network"}}
{{template "theme-server-status/header" .}}
<div id="app">
{{template "theme-server-status/content-nav" .}}
<div class="container table-responsive content" style="max-width: 95vw">
<table class="table table-striped table-condensed table-hover">
<button class="ui nezha-primary-btn button"
v-for="server in servers"
style="margin-top: 3px"
@click="redirectNetwork(server.ID)">
@#server.Name#@&nbsp;&nbsp;<i :class="'fi fi-' + server.Host.CountryCode"></i><span class="node-cell-location-text text-uppercase">&nbsp;&nbsp;@#server.Host.CountryCode#@</span>
</button>
</table>
</div>
<div class="container table-responsive content" style="max-width: 95vw">
<div ref="chartDom" style="border-radius: 28px; margin-top: 15px;height: 520px;max-width: 1400px;overflow: hidden"></div>
</div>
{{template "theme-server-status/content-footer" .}}
{{template "theme-server-status/menu" .}}
<div class="container-fluid table-responsive content">
<table class="table table-striped table-condensed table-hover">
<button class="ui nezha-primary-btn button"
v-for="server in servers"
style="margin-top: 3px"
@click="redirectNetwork(server.ID)">
@#server.Name#@&nbsp;&nbsp;<i :class="'fi fi-' + server.Host.CountryCode"></i><span class="node-cell-location-text text-uppercase">&nbsp;&nbsp;@#server.Host.CountryCode#@</span>
</button>
</table>
</div>
<div class="container-fluid table-responsive content">
<div ref="chartDom" style="border-radius: 28px; margin-top: 15px;height: 520px;max-width: 1400px;overflow: hidden"></div>
</div>
{{template "theme-server-status/footer" .}}
<script>
const monitorInfo = JSON.parse('{{.MonitorInfos}}');
const initData = JSON.parse('{{.Servers}}').servers;
@@ -239,5 +236,4 @@
},
});
</script>
{{template "theme-server-status/footer" .}}
{{end}}