From 8bb861ca3109dd55ca913cca5a3db463018be1ff Mon Sep 17 00:00:00 2001 From: mocheng <3057647414@qq.com> Date: Wed, 6 Aug 2025 21:51:30 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=89=E9=98=B2=E5=A4=A7=E5=B1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web-antd/src/api/cockpit/cockpit.ts | 0 .../src/views/cockpit/security/index.css | 116 ++++++++++++++++++ .../src/views/cockpit/security/index.vue | 11 ++ 3 files changed, 127 insertions(+) create mode 100644 apps/web-antd/src/api/cockpit/cockpit.ts create mode 100644 apps/web-antd/src/views/cockpit/security/index.css create mode 100644 apps/web-antd/src/views/cockpit/security/index.vue diff --git a/apps/web-antd/src/api/cockpit/cockpit.ts b/apps/web-antd/src/api/cockpit/cockpit.ts new file mode 100644 index 00000000..e69de29b diff --git a/apps/web-antd/src/views/cockpit/security/index.css b/apps/web-antd/src/views/cockpit/security/index.css new file mode 100644 index 00000000..c32d5ebb --- /dev/null +++ b/apps/web-antd/src/views/cockpit/security/index.css @@ -0,0 +1,116 @@ +/* 自定义滚动条样式 */ +.scrollbar-thin { + scrollbar-width: thin; +} + +.scrollbar-thumb-slate-700::-webkit-scrollbar-thumb { + background-color: #334155; + border-radius: 3px; +} + +.scrollbar-track-transparent::-webkit-scrollbar-track { + background-color: transparent; +} + +/* 动画效果 */ +@keyframes ping { + 0%, 100% { + opacity: 1; + } + 50% { + opacity: 0.5; + } +} + +.animate-ping { + animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; +} + +/* 淡入动画 */ +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(10px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.animate-fadeIn { + animation: fadeIn 0.3s ease-out forwards; +} + +/* 数字计数器动画 */ +@keyframes countUp { + from { + opacity: 0; + transform: translateY(5px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.counter-animation { + animation: countUp 0.5s ease-out forwards; +} + +/* 网格背景图案 */ +.pattern-grid { + background-image: linear-gradient(rgba(148, 163, 184, 0.05) 1px, transparent 1px), + linear-gradient(90deg, rgba(148, 163, 184, 0.05) 1px, transparent 1px); + background-size: 20px 20px; + background-position: center center; +} + +/* 确保Canvas元素占满容器 */ +canvas { + width: 100%; + height: 100%; + display: block; +} + +/* 自定义按钮反馈效果 */ +button:active { + transform: scale(0.98); +} + +/* 卡片悬停效果增强 */ +div[class*="bg-slate-800/60"] { + transition: all 0.3s ease; +} + +div[class*="bg-slate-800/60"]:hover { + box-shadow: 0 0 15px rgba(59, 130, 246, 0.1); +} + +/* 输入框焦点效果 */ +input:focus, textarea:focus { + box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.5); +} + +/* 列表项悬停效果 */ +div[class*="cursor-pointer"] { + transition: all 0.2s ease; +} + +div[class*="cursor-pointer"]:hover { + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); +} + +/* 平滑滚动 */ +html { + scroll-behavior: smooth; +} + +/* 状态徽章样式优化 */ +span[class*="rounded-full"][class*="text-xs"] { + transition: all 0.3s ease; +} + +span[class*="rounded-full"][class*="text-xs"]:hover { + transform: scale(1.05); +} diff --git a/apps/web-antd/src/views/cockpit/security/index.vue b/apps/web-antd/src/views/cockpit/security/index.vue new file mode 100644 index 00000000..63cf316b --- /dev/null +++ b/apps/web-antd/src/views/cockpit/security/index.vue @@ -0,0 +1,11 @@ + + + + +