NextTerminal手机端简单适配CSS代码

似毛非毛

NextTerminal自用感觉还不错。挺轻量的。
就是手机端好像一直没适配。
手机端其实SSH可以用的，就是后台导航栏手机端有些不方便。

抽空改了下CSS。简单适配了下手机端。

测试环境：安卓kiwi浏览器

修改了以下内容：
手机端部分页面导航栏异常。
手机端导航栏最小化成一个小按钮。
修改资产管理页面列显示。（需要列设置全部勾上，不然可能会出错）
（或者“资产管理列表”相关的可以删除不用）
（代码只修改屏幕宽度小于980px的CSS样式）


CSS代码：

1. /*以下内容仅在小屏幕生效*/
   
2. @media screen and (max-width: 980px) {
   
3. /*隐藏侧边栏背景 */
   
4. .ant-layout-sider-collapsed {background: none;z-index: 999;height:48px !important;top: unset !important;}
   
5. /*隐藏侧边栏上方内容 */
   
6. .ant-layout-sider-collapsed >.ant-layout-sider-children {display: none;}
   
7. /*右侧margin补丁*/
   
8. .ant-layout-sider-collapsed +.ant-layout {margin: 0px 0px !important;}
   
9. /*按钮宽度*/
   
10. .ant-layout-sider-collapsed >.ant-layout-sider-trigger {width:50px !important;}
    
11. /*资产管理列表 - 多选框*/
    
12. .ant-layout-sider-collapsed +.ant-layout .ant-table-thead th:nth-child(1){display: none;}
    
13. .ant-layout-sider-collapsed +.ant-layout .ant-table-tbody td:nth-child(1){display: none;}
    
14. /*资产管理列表 - 序号*/
    
15. .ant-layout-sider-collapsed +.ant-layout .ant-table-thead th:nth-child(2){display: none;}
    
16. .ant-layout-sider-collapsed +.ant-layout .ant-table-tbody td:nth-child(2){display: none;}
    
17. /*资产管理列表 - 网络*/
    
18. .ant-layout-sider-collapsed +.ant-layout .ant-table-thead th:nth-child(5){display: none;}
    
19. .ant-layout-sider-collapsed +.ant-layout .ant-table-tbody td:nth-child(5){display: none;}
    
20. /*资产管理列表 - 标签*/
    
21. .ant-layout-sider-collapsed +.ant-layout .ant-table-thead th:nth-child(6){display: none;}
    
22. .ant-layout-sider-collapsed +.ant-layout .ant-table-tbody td:nth-child(6){display: none;}
    
23. /*资产管理列表 - 所有者*/
    
24. .ant-layout-sider-collapsed +.ant-layout .ant-table-thead th:nth-child(8){display: none;}
    
25. .ant-layout-sider-collapsed +.ant-layout .ant-table-tbody td:nth-child(8){display: none;}
    
26. /*资产管理列表 -创建时间*/
    
27. .ant-layout-sider-collapsed +.ant-layout .ant-table-thead th:nth-child(9){display: none;}
    
28. .ant-layout-sider-collapsed +.ant-layout .ant-table-tbody td:nth-child(9){display: none;}
    
29. /*资产管理列表 - 接入时间*/
    
30. .ant-layout-sider-collapsed +.ant-layout .ant-table-thead th:nth-child(10){display: none;}
    
31. .ant-layout-sider-collapsed +.ant-layout .ant-table-tbody td:nth-child(10){display: none;}
    
32. /*资产管理列表 - 屏蔽删除按钮*/
    
33. .ant-layout-sider-collapsed +.ant-layout .ant-table-tbody .danger{display: none;}
    
34. /*导航栏空白问题*/
    
35. .ant-layout {overflow: hidden;}
    
36. }

复制代码

使用方法：

1.登录Next Terminal后台,账号密码登录进去。
（F12 - 源代码 - 找到 static/css/main.1234.css 文件，右键另存为，并记下地址）

2.修改下载的CSS文件。把上面的代码加到文件末尾，保存备用。

3.把改好的CSS文件，上传到服务器目录。放到根目录的static/css/目录下

4.修改NGINX配置文件，添加以下内容

1. location /static/css/main.1234.css {
   
2.     allow all;
   
3. }

复制代码

（上面的main.1234.css改成自己的。）
5.重新加载配置生效
nginx -t; nginx -s reload


效果图（需要科学）：

似毛非毛

二楼备用。

hotkk

很好，很久没用，我把管理密码和端口忘了，草