From 982c97ab82f3beb1b4febcf014562eda34b9fc05 Mon Sep 17 00:00:00 2001
From: liu <2021943741@qq.com>
Date: 星期二, 29 九月 2026 17:59:41 +0800
Subject: [PATCH] feat(ui): 江苏商贸品牌视觉与首页/登录页改版
---
src/views/dashboard/analytics/modules/quick-actions.vue | 129 ++++++++++++++++++++++++++++++++-----------
1 files changed, 96 insertions(+), 33 deletions(-)
diff --git a/src/views/dashboard/analytics/modules/quick-actions.vue b/src/views/dashboard/analytics/modules/quick-actions.vue
index 9a825b5..ea58f12 100644
--- a/src/views/dashboard/analytics/modules/quick-actions.vue
+++ b/src/views/dashboard/analytics/modules/quick-actions.vue
@@ -11,62 +11,125 @@
title: string;
icon: string;
route: string;
- gradient: string;
- shadow: string;
}
+/** 蹇嵎鍏ュ彛锛氬搴旂郴缁熷疄闄呰彍鍗曪紙瀹℃壒涓績 / 璇鹃绠＄悊 / 璐㈠姟鎶ラ攢 / 閫氱煡鍏憡锛� */
const actions: QuickAction[] = [
- { title: '鐢熶骇宸ュ崟', icon: 'lucide:file-text', route: 'MesProWorkOrder', gradient: 'from-blue-500 to-cyan-500', shadow: 'shadow-blue-500/15' },
- { title: '鐢熶骇鎶ュ伐', icon: 'lucide:check-square', route: 'MesProFeedback', gradient: 'from-emerald-500 to-green-500', shadow: 'shadow-emerald-500/15' },
- { title: '璐ㄦ绠＄悊', icon: 'lucide:clipboard-check', route: 'MesQcRecord', gradient: 'from-orange-500 to-amber-500', shadow: 'shadow-orange-500/15' },
- { title: '璁惧鐐规', icon: 'lucide:settings', route: 'MesDvMachinery', gradient: 'from-violet-500 to-purple-500', shadow: 'shadow-violet-500/15' },
- { title: '鐢熶骇鎺掔▼', icon: 'lucide:calendar-range', route: 'MesProScheduling', gradient: 'from-cyan-500 to-teal-500', shadow: 'shadow-cyan-500/15' },
- { title: '鐗╂枡搴撳瓨', icon: 'lucide:package-search', route: 'WlsMaterialStock', gradient: 'from-indigo-500 to-blue-500', shadow: 'shadow-indigo-500/15' },
- { title: '宸ヨ壓璺嚎', icon: 'lucide:route', route: 'MesPdRouting', gradient: 'from-teal-500 to-emerald-500', shadow: 'shadow-teal-500/15' },
- { title: '鏁版嵁鎶ヨ〃', icon: 'lucide:bar-chart-big', route: 'MesHomeIndex', gradient: 'from-pink-500 to-rose-500', shadow: 'shadow-pink-500/15' },
+ { title: '鍙戣捣娴佺▼', icon: 'lucide:circle-plus', route: 'BpmProcessInstanceCreate' },
+ { title: '寰呭姙浠诲姟', icon: 'lucide:list-todo', route: 'BpmTaskTodo' },
+ { title: '宸插姙浠诲姟', icon: 'lucide:circle-check-big', route: 'BpmTaskDone' },
+ { title: '鎴戠殑娴佺▼', icon: 'lucide:git-branch', route: 'BpmProcessInstance' },
+ { title: '璇鹃鐢虫姤', icon: 'lucide:file-text', route: 'ResearchApplication' },
+ { title: '璇鹃鎸囧崡', icon: 'lucide:book-open', route: 'ResearchGuideline' },
+ { title: '璐㈠姟鎶ラ攢', icon: 'lucide:receipt', route: 'FinanceReimbursement' },
+ { title: '閫氱煡鍏憡', icon: 'lucide:bell', route: 'BpmOaNotice' },
];
</script>
<template>
- <div class="glass-card rounded-2xl p-5">
- <h3 class="mb-4 text-sm font-semibold text-gray-800 dark:text-gray-100">蹇嵎鎿嶄綔</h3>
- <div class="grid grid-cols-4 gap-3 sm:grid-cols-8">
+ <div class="elite-card p-5">
+ <div class="elite-head">
+ <h3 class="elite-title">
+ <span class="elite-bar"></span>
+ 蹇嵎鍏ュ彛
+ </h3>
+ </div>
+ <div class="grid grid-cols-4 gap-3">
<div
v-for="action in actions"
:key="action.route"
- class="group flex cursor-pointer flex-col items-center gap-2 rounded-xl p-3 transition-all duration-300 hover:-translate-y-1"
+ class="elite-action group flex cursor-pointer flex-col items-center gap-2 rounded-xl p-3 transition-colors duration-300"
@click="emit('navigate', action.route)"
>
<div
- class="flex size-10 items-center justify-center rounded-xl bg-gradient-to-br transition-shadow duration-300 group-hover:shadow-lg"
- :class="[action.gradient, action.shadow]"
+ class="elite-icon flex size-10 items-center justify-center rounded-xl transition-shadow duration-300"
>
- <IconifyIcon :icon="action.icon" class="size-5 text-white" />
+ <IconifyIcon :icon="action.icon" class="size-5 text-[#e3c567]" />
</div>
- <span class="text-xs font-medium text-gray-600 dark:text-gray-400">{{ action.title }}</span>
+ <span class="elite-action-label">{{ action.title }}</span>
</div>
</div>
</div>
</template>
<style scoped>
-.glass-card {
- background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(255,255,255,0.55));
- backdrop-filter: blur(20px);
- -webkit-backdrop-filter: blur(20px);
- border: 1px solid rgba(255,255,255,0.6);
- box-shadow:
- 0 4px 24px rgba(0,0,0,0.04),
- 0 1px 4px rgba(0,0,0,0.02),
- inset 0 1px 0 rgba(255,255,255,0.8);
+.elite-card {
+ background: #fdfcfa;
+ border: 1px solid rgba(212, 175, 55, 0.22);
+ border-radius: 14px;
+ box-shadow: 0 2px 14px rgba(15, 36, 64, 0.05);
+ transition:
+ border-color 0.3s ease,
+ box-shadow 0.3s ease;
}
-.dark .glass-card {
- background: linear-gradient(135deg, rgba(30,30,55,0.75), rgba(20,20,40,0.5));
- border: 1px solid rgba(255,255,255,0.08);
+.elite-card:hover {
+ border-color: rgba(212, 175, 55, 0.5);
+ box-shadow: 0 6px 20px rgba(15, 36, 64, 0.09);
+}
+
+.dark .elite-card {
+ background: #101a2b;
+ border-color: rgba(212, 175, 55, 0.2);
+ box-shadow: 0 2px 14px rgba(0, 0, 0, 0.3);
+}
+
+.elite-head {
+ display: flex;
+ align-items: center;
+ margin-bottom: 16px;
+}
+
+.elite-title {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ margin: 0;
+ font-size: 15px;
+ font-weight: 600;
+ letter-spacing: 1px;
+ color: #0f2440;
+}
+
+.dark .elite-title {
+ color: #f0ead8;
+}
+
+.elite-bar {
+ display: inline-block;
+ width: 3px;
+ height: 15px;
+ border-radius: 2px;
+ background: linear-gradient(180deg, #e3c567, #b8901f);
+}
+
+/* 鍥炬爣搴曪細钘忛潚娓愬彉 + 閲戣壊鍥炬爣 */
+.elite-icon {
+ color: #e3c567;
+ background: linear-gradient(135deg, #1e4571, #0f2440);
+ border: 1px solid rgba(212, 175, 55, 0.3);
+ box-shadow: 0 4px 12px rgba(15, 36, 64, 0.18);
+}
+
+/* 鎮仠鍙彁浜噾鑹叉弿杈癸紝涓嶅仛浣嶇Щ */
+.elite-action:hover .elite-icon {
box-shadow:
- 0 4px 24px rgba(0,0,0,0.3),
- 0 1px 4px rgba(0,0,0,0.2),
- inset 0 1px 0 rgba(255,255,255,0.04);
+ 0 0 0 1px rgba(212, 175, 55, 0.7),
+ 0 4px 14px rgba(15, 36, 64, 0.22);
+}
+
+.elite-action-label {
+ font-size: 12px;
+ font-weight: 500;
+ letter-spacing: 0.5px;
+ color: #8a94a6;
+}
+
+.elite-action:hover .elite-action-label {
+ color: #b8901f;
+}
+
+.dark .elite-action:hover .elite-action-label {
+ color: #e3c567;
}
</style>
--
Gitblit v1.9.3