Sfoglia il codice sorgente

左侧导航栏调整及css更新

ellisran 1 mese fa
parent
commit
cb716d17d9
3 ha cambiato i file con 49 aggiunte e 24 eliminazioni
  1. 36 12
      app/public/css/main.css
  2. 11 10
      app/view/layout/menu.ejs
  3. 2 2
      config/menu.js

+ 36 - 12
app/public/css/main.css

@@ -324,14 +324,14 @@ input.nospin[type="number"]{-moz-appearance:textfield;}
 .main-nav {
   position: fixed;
   z-index: 99;
-  width:55px;
+  width:110px;
   left: 0;
   top: 0;
   height: 100%;
   background: #33425b;
 }
 .main-panel{
-  padding-left:55px;
+  padding-left:110px;
   box-sizing: border-box;
 }
 .panel-sidebar{
@@ -340,7 +340,7 @@ input.nospin[type="number"]{-moz-appearance:textfield;}
   position: fixed;
   height: 100%;
   z-index: 4;
-  left:55px;
+  left:110px;
   /*padding-top:50px;*/
   border-right: 1px solid #ddd;
   width: 200px;
@@ -418,7 +418,7 @@ input.nospin[type="number"]{-moz-appearance:textfield;}
   padding-right: 20px;
 }
 .panel-content .panel-title.fluid{
-  padding-left:55px
+  padding-left:110px
 }
 .panel-title>.title-bar{
   padding-left: 20px
@@ -691,18 +691,23 @@ input.nospin[type="number"]{-moz-appearance:textfield;}
 }
 /*侧栏主菜单*/
 .nav-top,.nav-bottom{
-  width: 55px
+  width: 110px
 }
 .bg-nav a{
+    display: flex;
+    align-items: center;     /* 垂直居中 */
+    justify-content: flex-start;  /* 图标和文字水平排列 */
   color:#fff;
-  width:55px;
+  width:110px;
   text-align: center;
-  display: inline-block;
+  /*display: inline-block;*/
   padding:10px 0;
   font-size: 12px
 }
 .bg-nav a i{
-  font-size:18px;
+    margin: 0 5px 0 8px;
+  width: 25px;
+  font-size:15px;
 }
 
 .bg-nav a span{
@@ -1143,7 +1148,7 @@ label{
   top:34px;
 }
 .panel-content .panel-title{
-  padding-left:175px;
+  padding-left:230px;
   background: linear-gradient( #ccc,2%, #ffffff);
 }
 .nav-link{
@@ -1250,9 +1255,9 @@ a.maintain-icon{
 }
 a.maintain-icon span{
   position: absolute;
-  left:55px;
-  height:40px;
-  line-height: 40px;
+  left:110px;
+  height:35px;
+  line-height: 35px;
   width:390px;
   top:0;
   display:none;
@@ -1791,6 +1796,25 @@ overflow-y: auto;
   font-size: 14px;
   color: rgba(255, 255, 255, 0.8);
 }
+.logo-parent{
+    display: flex;
+    align-items: center;      /* 🔹让图标和文字整体上下居中 */
+    justify-content: flex-start;
+    box-sizing: border-box;
+    height: 55px;             /* 固定高度 */
+    overflow: hidden;         /* 防止内容超出 */
+    box-sizing: border-box;
+}
+.logo-project-name{
+    flex: 1;
+    line-height: 1.4;        /* 行高 */
+    display: -webkit-box;    /* Flex-like box for WebKit */
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;   /* 最多显示3行 */
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-word;
+}
 .side-border{
   width: 2px;
   height: 24px;

+ 11 - 10
app/view/layout/menu.ejs

@@ -1,6 +1,7 @@
 <div class="main-nav d-flex align-items-start flex-column">
-    <div class="logo">
-        <img class="w-100" style="padding: 5px" src="/public/css/logo.png">
+    <div class="logo w-100 logo-parent">
+        <img class="w-50" style="padding: 5px" src="/public/css/logo.png">
+        <span class="text-white logo-project-name"><% if (ctx.subProject) { %> <%- ctx.subProject.name %><% } else { %> <span data-toggle="tooltip" data-placement="right" title="" data-original-title="<%- ctx.session.sessionProject.name %>"><%- ctx.session.sessionProject.name %></span><% } %></span>
         <% if (ctx.subProject) { %>
         <span class="poj-info btn-warning" data-toggle="tooltip" data-placement="right" title="" data-original-title="<%- ctx.subProject.name %>"><i class="fa fa-cube te"></i></span>
         <% } %>
@@ -10,7 +11,7 @@
             <% if (maintainData.status !== maintainConst.status.notset && new Date().getTime() + (60*60*1000) > parseFloat(maintainData.maintain_time)) { %>
             <!--系统维护信息-->
             <li class="bg-danger">
-                <a class="text-white maintain-icon"><i class="fa fa-wrench "></i>
+                <a class="text-white maintain-icon"><i class="fa fa-wrench "></i><div class="d-inline-block" style="vertical-align: text-bottom;"> 系统维护</div>
                     <span class="bg-danger maintain-info">系统将于 <%- ctx.helper.dateTran(parseFloat(maintainData.maintain_time)) %> 开始停机维护<%- (maintainData.duration !== maintainConst.duration.forever ? ',持续'+ maintainConst.durationString[maintainData.duration] +'。' : '') %></span></a></li>
             <!--系统维护信息 end-->
             <% } %>
@@ -20,7 +21,7 @@
             <li <% if((ctx.controllerName === menu.controller && (!menu.notIncludedUrl || !menu.notIncludedUrl.some(item => ctx.url.includes(item)))) || (!!menu.controllers && menu.controllers.indexOf(ctx.controllerName) >= 0 && (!menu.includedUrl || !menu.includedUrl[ctx.controllerName] || menu.includedUrl[ctx.controllerName].some(item => ctx.url.includes(item)))) || (menu.url && menu.url === ctx.url)) { %>class="active"<% } %>>
                 <a href="<%- menu.url %>" id="<%- 'nav_' + index%>" data-toggle="tooltip" data-placement="right" title="" data-original-title="<%- menu.name %>">
                     <i class="fa <%- menu.icon %>"></i>
-                    <% if (menu.caption) { %><span><%- menu.caption %></span><% } %>
+                    <% if (menu.caption) { %><span class="d-inline-block" style="vertical-align: text-bottom;"> <%- menu.caption %></span><% } %>
                 </a>
             </li>
             <% } %>
@@ -28,18 +29,18 @@
     </div>
     <div class="nav-bottom mt-auto">
         <ul class="nav nav-pills nav-stacked bg-nav">
-            <li><a href="https://doc.zhzdwd.com/docs/yunjiliangAPI/yunjiliangAPI-1ccjk7h426enp" target="_blank" data-toggle="tooltip" data-placement="right" title="" data-original-title="数据接口">API</a></li>
+            <li><a href="https://doc.zhzdwd.com/docs/yunjiliangAPI/yunjiliangAPI-1ccjk7h426enp" target="_blank" data-toggle="tooltip" data-placement="right" title="" data-original-title="数据接口" class="d-inline-block">API</a></li>
         </ul>
         <ul class="nav nav-pills nav-stacked bg-nav">
             <% if (ctx.isProjectController) { %>
-            <li <% if (ctx.controllerName === 'setting') { %>class="active"<% } %>><a href="/setting/info" data-toggle="tooltip" data-placement="right" title="" data-original-title="平台设置"><i class="fa fa-cogs"></i><span>平台设置</span></a></li>
+            <li <% if (ctx.controllerName === 'setting') { %>class="active"<% } %>><a href="/setting/info" data-toggle="tooltip" data-placement="right" title="" data-original-title="平台设置"><i class="fa fa-cogs"></i><span class="d-inline-block" style="vertical-align: text-bottom;">平台设置</span></a></li>
             <% } else if (ctx.session.sessionUser.is_admin) { %>
-            <li <% if (ctx.controllerName === 'setting') { %>class="active"<% } %>><a href="/sp/<%- ctx.subProject.id %>/setting/category" data-toggle="tooltip" data-placement="right" title="" data-original-title="项目设置"><i class="fa fa-cogs"></i><span>项目设置</span></a></li>
+            <li <% if (ctx.controllerName === 'setting') { %>class="active"<% } %>><a href="/sp/<%- ctx.subProject.id %>/setting/category" data-toggle="tooltip" data-placement="right" title="" data-original-title="项目设置"><i class="fa fa-cogs"></i><span class="d-inline-block" style="vertical-align: text-bottom;"> 项目设置</span></a></li>
             <% } %>
         </ul>
-        <div class="dropup mb-1 ml-1 mr-1">
-            <a href="" class="btn btn-sm btn-light p-1 w-100" data-toggle="dropdown" aria-haspopup="false" aria-expanded="false">
-                <%- ctx.session.sessionUser.name.substr(ctx.session.sessionUser.name.length > 3 ? ctx.session.sessionUser.name.length - 3 : 0) %>
+        <div class="dropup mb-1 ml-1 mr-1 d-inline-block text-center" style="width: 100px;">
+            <a href="" class="btn btn-sm btn-light p-1" style="width: 70px;" data-toggle="dropdown" aria-haspopup="false" aria-expanded="false">
+                <%- ctx.session.sessionUser.name.substr(ctx.session.sessionUser.name.length > 6 ? ctx.session.sessionUser.name.length - 6 : 0) %>
             </a>
             <div class="dropdown-menu">
                 <a href="/profile/info" class="dropdown-item">账号资料</a>

+ 2 - 2
config/menu.js

@@ -50,7 +50,7 @@ const projectMenu = {
         name: '项目管理系统',
         icon: 'fa-cubes',
         display: false,
-        caption: '项目管理系统',
+        caption: 'PMSS',
         children: null,
     },
 };
@@ -70,7 +70,7 @@ const menu = {
         icon: 'fa-check-square-o',
         display: true,
         children: null,
-        caption: '待办',
+        caption: '待办事项',
         controller: 'dashboard',
     },
     datacollect: {