Jelajahi Sumber

优化标段概况显示效果及导航栏展开收起

ellisran 12 jam lalu
induk
melakukan
e61a7927fe
4 mengubah file dengan 148 tambahan dan 34 penghapusan
  1. 40 8
      app/public/css/main.css
  2. 38 16
      app/public/js/global.js
  3. 3 3
      app/view/layout/menu.ejs
  4. 67 7
      app/view/tender/detail.ejs

+ 40 - 8
app/public/css/main.css

@@ -2656,7 +2656,8 @@ animation:shake 1s .2s ease both;}
 }
 
 /* 顶部金额整体卡片:与下方图表共用颜色及标题样式。 */
-.tender-overview .overview-summary{background:var(--ov-card);border:1px solid var(--ov-line);border-radius:6px;color:var(--ov-text);overflow:hidden}
+.tender-overview .overview-summary{background:linear-gradient(180deg,transparent,var(--ov-card)),linear-gradient(110deg,#654149 0%,#65503c 33%,#354f6b 67%,#36594d 100%);border:1px solid var(--ov-line);border-radius:6px;color:var(--ov-text);overflow:hidden}
+.tender-overview #big-data:has(.c-body-white) .overview-summary{background:linear-gradient(180deg,transparent,#fff),linear-gradient(110deg,#f9e6ea 0%,#faeddd 33%,#e1eefb 67%,#e1f2e9 100%)}
 .tender-overview .overview-summary-heading{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:0}
 .tender-overview .overview-summary-heading h6{margin:0;border-left:3px solid #469eff;padding-left:10px;font-size:14px;font-weight:600}
 .tender-overview .overview-summary-heading>span{font-size:11px;color:var(--ov-muted)}
@@ -2725,17 +2726,25 @@ animation:shake 1s .2s ease both;}
 .tender-overview #big-data:has(.c-body-white) .overview-change-group:last-child .overview-change-item:nth-child(1)>span{color:#7356b5}
 .tender-overview #big-data:has(.c-body-white) .overview-change-group:last-child .overview-change-item:nth-child(2)>span{color:#197c88}
 .tender-overview #big-data:has(.c-body-white) .overview-change-group:last-child .overview-change-item:nth-child(3)>span{color:#b44359}
-.tender-overview .overview-summary .overview-metrics{margin:0!important;padding:0 12px}
+.tender-overview .overview-summary .overview-metrics{margin:0!important;padding:0}
 .tender-overview .overview-summary .overview-metrics>.col-12>.row{gap:0}
 .tender-overview .overview-summary .overview-metrics .col-auto{position:relative}
-.tender-overview .overview-summary .overview-metrics .col-auto:nth-of-type(n+5){border-top:1px solid var(--ov-line)}
-.tender-overview .overview-summary .overview-metrics .col-auto:not(:nth-of-type(4n+1)):before{content:'';position:absolute;left:0;top:14px;bottom:14px;width:1px;background:var(--ov-line)}
+.tender-overview .overview-summary .overview-metrics .col-auto:nth-of-type(n+5){border-top:0}
 .tender-overview .overview-summary .overview-metrics .card{border:0;border-radius:0;background:transparent!important;box-shadow:none}
+.tender-overview .overview-summary .overview-metrics .card-title{transform-origin:left center;transition:transform .2s ease}
+.tender-overview .overview-change-item>strong{transform-origin:center;transition:transform .2s ease}
+@media(hover:hover) and (pointer:fine){
+ .tender-overview .overview-summary .overview-metrics .card:hover .card-title{transform:scale(1.12)}
+ .tender-overview .overview-change-item:hover>strong{transform:scale(1.12)}
+}
+@media(prefers-reduced-motion:reduce){
+ .tender-overview .overview-summary .overview-metrics .card-title,.tender-overview .overview-change-item>strong{transition:none}
+}
 .tender-overview .overview-summary .overview-metrics .card-body{padding:12px 16px;gap:7px}
 .tender-overview .overview-summary .overview-metrics .card-title{font-size:22px;font-weight:500}
 .tender-overview .overview-summary .overview-metrics .col-auto:nth-of-type(3) .card-title,
 .tender-overview .overview-summary .overview-metrics .col-auto:nth-of-type(6) .card-title{font-weight:600}
-.tender-overview .overview-summary .overview-progress{border:0;border-top:1px solid var(--ov-line);border-radius:0;padding:10px 28px;background:transparent}
+.tender-overview .overview-summary .overview-progress{border:0;border-radius:0;padding:10px 16px;background:transparent}
 .tender-overview .overview-summary .overview-progress-label{align-items:center;margin-bottom:8px;gap:8px 16px}
 .tender-overview .overview-summary .overview-progress-label strong{font-size:12px;color:var(--ov-muted)}
 .tender-overview .overview-summary .overview-progress-label>div{display:flex;align-items:center;flex-wrap:wrap;gap:4px}
@@ -2744,12 +2753,35 @@ animation:shake 1s .2s ease both;}
 @media(min-width:1451px) and (min-height:760px){
  .tender-overview .overview-summary .overview-metrics .card-body{padding:7px 16px;gap:4px}
  .tender-overview .overview-summary-heading{padding:7px 16px}
- .tender-overview .overview-summary .overview-progress{padding:8px 28px}
+ .tender-overview .overview-summary .overview-progress{padding:8px 16px}
 }
 @media(max-width:900px){
- .tender-overview .overview-summary .overview-progress{padding:10px 24px}
- .tender-overview .overview-summary .overview-metrics .col-auto:nth-of-type(n+3){border-top:1px solid var(--ov-line)}
+ .tender-overview .overview-summary .overview-progress{padding:10px 12px}
+ .tender-overview .overview-summary .overview-metrics .col-auto:nth-of-type(n+3){border-top:0}
  .tender-overview .overview-summary .overview-metrics .col-auto:nth-of-type(odd):before{display:none}
  .tender-overview .overview-summary .overview-metrics .card-body{padding:12px;gap:6px}
  .tender-overview .overview-summary .overview-metrics .card-title{font-size:18px}
 }
+
+/* 计量与材料调差共用审批状态配色,保留原有流程形状。 */
+.tender-overview .overview-audit-colors{--audit-pending:#3698ff;--audit-active:#ffa34b;--audit-done:#38bd7b;--audit-return:#f26576}
+.tender-overview .overview-audit-colors .btn-blueOne{--audit-fill:var(--audit-pending)}
+.tender-overview .overview-audit-colors .btn-yellow{--audit-fill:var(--audit-active)}
+.tender-overview .overview-audit-colors .btn-green{--audit-fill:var(--audit-done)}
+.tender-overview .overview-audit-colors .btn-red{--audit-fill:var(--audit-return)}
+.tender-overview .overview-audit-colors .btn-secondary{--audit-fill:var(--audit-pending)}
+.tender-overview .overview-audit-colors .btn{background-color:var(--audit-fill);border-color:var(--audit-fill);color:#fff}
+.tender-overview .overview-audit-colors .btn:hover,.tender-overview .overview-audit-colors .btn:active{background-color:var(--audit-fill);border-color:var(--audit-fill);box-shadow:none}
+.tender-overview .overview-audit-colors .text-blueOne{color:var(--audit-pending)}
+.tender-overview .overview-audit-colors .text-yellow{color:var(--audit-active)}
+.tender-overview .overview-audit-colors .text-green{color:var(--audit-done)}
+.tender-overview .overview-audit-colors .text-red{color:var(--audit-return)}
+
+/* 图表与审批卡片保持原底色。 */
+@keyframes overview-audit-breathe{0%,100%{filter:brightness(1)}50%{filter:brightness(1.18)}}
+.tender-overview .overview-audit-colors .overview-audit-running{animation:overview-audit-breathe 2.4s ease-in-out infinite}
+@media(prefers-reduced-motion:reduce){.tender-overview .overview-audit-colors .overview-audit-running{animation:none}}
+.tender-overview .overview-legend-highlight{display:flex;align-items:center;gap:6px;padding:0;border:0;background:none;color:inherit;font:inherit}
+.tender-overview .overview-legend-highlight:hover{color:var(--ov-text)}
+.tender-overview .overview-charts>.col-3>.card,
+.tender-overview .overview-charts>.col-6>.card{background:var(--ov-card)!important;box-shadow:none}

+ 38 - 16
app/public/js/global.js

@@ -101,24 +101,46 @@ $(function(){
         }
     });
 
-    $('.bg-nav > li > .nav-up-down').on('click', function() {
-        const nav = $(this).attr('id');
-        if ($(this).children('.child-up-down').hasClass('fa-angle-down')) {
-            $(this).children('.child-up-down').removeClass('fa-angle-down').addClass('fa-angle-right');
-            $('.bg-nav li[data-index="'+ nav + '"]').slideUp('fast');
-        } else {
-            $(this).children('.child-up-down').removeClass('fa-angle-right').addClass('fa-angle-down');
-            $('.bg-nav li[data-index="'+ nav + '"]').slideDown('fast');
-        }
-        setLocalCache('nav-' + nav, $(this).children('.child-up-down').hasClass('fa-angle-down') ? 1 : 0);
-    });
+    // 只保存一个展开项;没有记录时全部收起。
+    const navGroups = $('.bg-nav > li > .nav-up-down');
+    const expandedNavKey = 'nav-expanded-item';
+    function updateNavGroups(expandedNav, animate) {
+        navGroups.each(function() {
+            const nav = $(this).attr('id');
+            const expanded = nav === expandedNav;
+            $(this).attr('aria-expanded', expanded ? 'true' : 'false');
+            $(this).children('.child-up-down')
+                .toggleClass('fa-angle-down', expanded)
+                .toggleClass('fa-angle-right', !expanded);
+            const children = $('.bg-nav li[data-index="' + nav + '"]').stop(true, true);
+            if (animate) {
+                if (expanded) {
+                    children.slideDown('fast');
+                } else {
+                    children.slideUp('fast');
+                }
+            } else {
+                children.toggle(expanded);
+            }
+        });
+    }
+
+    let expandedNav = null;
+    try {
+        expandedNav = getLocalCache(expandedNavKey);
+    } catch (err) {
+        // 浏览器禁用本地存储时仍可正常展开、收起。
+    }
+    updateNavGroups(expandedNav);
 
-    // 侧栏菜单状态判断展开收起
-    $('.bg-nav > li > .nav-up-down').each(function() {
+    navGroups.on('click', function() {
         const nav = $(this).attr('id');
-        if (getLocalCache('nav-' + nav) == 0) {
-            $(this).children('.child-up-down').removeClass('fa-angle-down').addClass('fa-angle-right');
-            $('.bg-nav li[data-index="'+ nav + '"]').slideUp(0);
+        expandedNav = $(this).attr('aria-expanded') === 'true' ? '' : nav;
+        updateNavGroups(expandedNav, true);
+        try {
+            setLocalCache(expandedNavKey, expandedNav);
+        } catch (err) {
+            // 本地存储不可用时仅保留本页状态。
         }
     });
 

File diff ditekan karena terlalu besar
+ 3 - 3
app/view/layout/menu.ejs


File diff ditekan karena terlalu besar
+ 67 - 7
app/view/tender/detail.ejs