安防大屏

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);
+}

apps/web-antd/src/views/cockpit/security/index.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>