NextTerminal手机端简单适配CSS代码

查看 48|回复 2
作者:似毛非毛   
NextTerminal自用感觉还不错。挺轻量的。
就是手机端好像一直没适配。
手机端其实SSH可以用的,就是后台导航栏手机端有些不方便。
抽空改了下CSS。简单适配了下手机端。
测试环境:安卓kiwi浏览器
修改了以下内容:
手机端部分页面导航栏异常。
手机端导航栏最小化成一个小按钮。
修改资产管理页面列显示。(需要列设置全部勾上,不然可能会出错)
(或者“资产管理列表”相关的可以删除不用)
(代码只修改屏幕宽度小于980px的CSS样式)
CSS代码:
[ol]/*以下内容仅在小屏幕生效*/
@media screen and (max-width: 980px) {
/*隐藏侧边栏背景 */
.ant-layout-sider-collapsed {background: none;z-index: 999;height:48px !important;top: unset !important;}
/*隐藏侧边栏上方内容 */
.ant-layout-sider-collapsed >.ant-layout-sider-children {display: none;}
/*右侧margin补丁*/
.ant-layout-sider-collapsed +.ant-layout {margin: 0px 0px !important;}
/*按钮宽度*/
.ant-layout-sider-collapsed >.ant-layout-sider-trigger {width:50px !important;}
/*资产管理列表 - 多选框*/
.ant-layout-sider-collapsed +.ant-layout .ant-table-thead th:nth-child(1){display: none;}
.ant-layout-sider-collapsed +.ant-layout .ant-table-tbody td:nth-child(1){display: none;}
/*资产管理列表 - 序号*/
.ant-layout-sider-collapsed +.ant-layout .ant-table-thead th:nth-child(2){display: none;}
.ant-layout-sider-collapsed +.ant-layout .ant-table-tbody td:nth-child(2){display: none;}
/*资产管理列表 - 网络*/
.ant-layout-sider-collapsed +.ant-layout .ant-table-thead th:nth-child(5){display: none;}
.ant-layout-sider-collapsed +.ant-layout .ant-table-tbody td:nth-child(5){display: none;}
/*资产管理列表 - 标签*/
.ant-layout-sider-collapsed +.ant-layout .ant-table-thead th:nth-child(6){display: none;}
.ant-layout-sider-collapsed +.ant-layout .ant-table-tbody td:nth-child(6){display: none;}
/*资产管理列表 - 所有者*/
.ant-layout-sider-collapsed +.ant-layout .ant-table-thead th:nth-child(8){display: none;}
.ant-layout-sider-collapsed +.ant-layout .ant-table-tbody td:nth-child(8){display: none;}
/*资产管理列表 -创建时间*/
.ant-layout-sider-collapsed +.ant-layout .ant-table-thead th:nth-child(9){display: none;}
.ant-layout-sider-collapsed +.ant-layout .ant-table-tbody td:nth-child(9){display: none;}
/*资产管理列表 - 接入时间*/
.ant-layout-sider-collapsed +.ant-layout .ant-table-thead th:nth-child(10){display: none;}
.ant-layout-sider-collapsed +.ant-layout .ant-table-tbody td:nth-child(10){display: none;}
/*资产管理列表 - 屏蔽删除按钮*/
.ant-layout-sider-collapsed +.ant-layout .ant-table-tbody .danger{display: none;}
/*导航栏空白问题*/
.ant-layout {overflow: hidden;}
}[/ol]复制代码
使用方法:
1.登录Next Terminal后台,账号密码登录进去。
(F12 - 源代码 - 找到 static/css/main.1234.css 文件,右键另存为,并记下地址)
2.修改下载的CSS文件。把上面的代码加到文件末尾,保存备用。
3.把改好的CSS文件,上传到服务器目录。放到根目录的static/css/目录下
4.修改NGINX配置文件,添加以下内容
[ol]location /static/css/main.1234.css {
    allow all;
}[/ol]复制代码
(上面的main.1234.css改成自己的。)
5.重新加载配置生效
nginx -t; nginx -s reload
效果图(需要科学):



资产管理, 列表, 代码

似毛非毛
OP
  
二楼备用。
hotkk   
很好,很久没用,我把管理密码和端口忘了,草
您需要登录后才可以回帖 登录 | 立即注册

返回顶部