gavin/monitor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update at 2026-01-14 16:47:43

Browse Source
This commit is contained in:
douboer@gmail.com
2026-01-14 16:47:43 +08:00
parent ff847ce7d3
commit abf1baee17
7 changed files with 1100 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
dist/assets/index-Cqpp-VMd.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/assets/index-iAORHjbJ.css vendored
View File

@@ -1 +0,0 @@
*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden}#app{width:100%;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px}.monitor-container[data-v-665dfb2f]{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;gap:20px;padding:10px}.style-switcher[data-v-665dfb2f]{display:flex;gap:10px;margin-top:10px}.style-btn[data-v-665dfb2f]{padding:10px 24px;font-size:16px;font-weight:600;color:#ffffffb3;background:#ffffff1a;border:2px solid rgba(255,255,255,.3);border-radius:12px;cursor:pointer;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.style-btn[data-v-665dfb2f]:hover{color:#ffffffe6;background:#ffffff26;border-color:#ffffff80;transform:translateY(-2px);box-shadow:0 4px 12px #fff3}.style-btn.active[data-v-665dfb2f]{color:#fff;background:linear-gradient(135deg,#00f5ff40,#4d9fff40);border-color:#00f5ff;box-shadow:0 0 20px #00f5ff66,0 0 40px #00f5ff33,inset 0 0 20px #00f5ff1a}.style-btn.active[data-v-665dfb2f]:hover{background:linear-gradient(135deg,#00f5ff59,#4d9fff59);box-shadow:0 0 25px #00f5ff80,0 0 50px #00f5ff4d,inset 0 0 25px #00f5ff26}.title[data-v-665dfb2f]{font-size:2.5rem;font-weight:700;color:#fff;text-align:center;text-shadow:0 4px 20px rgba(0,0,0,.3);letter-spacing:2px;padding:20px 30px;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;border:2px solid rgba(255,255,255,.2);animation:titleGlow-665dfb2f 3s ease-in-out infinite;width:100%;max-width:1400px;box-sizing:border-box}@keyframes titleGlow-665dfb2f{0%,to{box-shadow:0 0 20px #ffffff4d}50%{box-shadow:0 0 40px #ffffff80}}.svg-wrapper[data-v-665dfb2f]{flex:1;width:100%;max-width:1400px;display:flex;align-items:center;justify-content:center;background:#fffffff2;border-radius:20px;padding:30px;box-shadow:0 20px 60px #0000004d;overflow:auto;min-height:0;box-sizing:border-box;-webkit-overflow-scrolling:touch}.svg-wrapper[data-v-665dfb2f] svg{width:100%;height:auto;max-height:100%;filter:drop-shadow(0 4px 8px rgba(0,0,0,.1));touch-action:pan-x pan-y}[data-v-665dfb2f] .flowing-line{transition:all .3s ease}[data-v-665dfb2f] .flowing-line:hover{stroke-width:6!important;filter:drop-shadow(0 0 8px #00ff88)}@media (max-width: 1024px){.title[data-v-665dfb2f]{font-size:2rem;padding:15px 20px;letter-spacing:1px}.svg-wrapper[data-v-665dfb2f]{padding:20px}}@media (max-width: 768px){.monitor-container[data-v-665dfb2f]{gap:15px;padding:10px}.title[data-v-665dfb2f]{font-size:1.5rem;padding:12px 16px;letter-spacing:.5px;border-radius:15px}.svg-wrapper[data-v-665dfb2f]{padding:15px;border-radius:15px}}@media (max-width: 480px){.monitor-container[data-v-665dfb2f]{gap:10px;padding:8px}.title[data-v-665dfb2f]{font-size:1.2rem;padding:10px 12px;letter-spacing:.3px;border-radius:12px}.svg-wrapper[data-v-665dfb2f]{padding:10px;border-radius:12px}}

4
dist/index.html vendored
View File

@@ -7,8 +7,8 @@
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<title>火情监控全链路业务监控视图</title>
<script type="module" crossorigin src="/assets/index-Cqpp-VMd.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-iAORHjbJ.css">
<script type="module" crossorigin src="/assets/index-DVL1K2L5.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-nKce6T9N.css">
</head>
<body>
<div id="app"></div>

714
node_modules/.package-lock.json generated vendored
View File

@@ -50,6 +50,78 @@
"node": ">=6.9.0"
}
},
"node_modules/@esbuild/aix-ppc64": {
"version": "0.21.5",
"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
"integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
"cpu": [
"ppc64"
],
"dev": true,
"ideallyInert": true,
"license": "MIT",
"optional": true,
"os": [
"aix"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/android-arm": {
"version": "0.21.5",
"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
"integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
"cpu": [
"arm"
],
"dev": true,
"ideallyInert": true,
"license": "MIT",
"optional": true,
"os": [
"android"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/android-arm64": {
"version": "0.21.5",
"resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
"integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
"cpu": [
"arm64"
],
"dev": true,
"ideallyInert": true,
"license": "MIT",
"optional": true,
"os": [
"android"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/android-x64": {
"version": "0.21.5",
"resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
"integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
"cpu": [
"x64"
],
"dev": true,
"ideallyInert": true,
"license": "MIT",
"optional": true,
"os": [
"android"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/darwin-arm64": {
"version": "0.21.5",
"resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
@@ -67,12 +139,366 @@
"node": ">=12"
}
},
"node_modules/@esbuild/darwin-x64": {
"version": "0.21.5",
"resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
"integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
"cpu": [
"x64"
],
"dev": true,
"ideallyInert": true,
"license": "MIT",
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/freebsd-arm64": {
"version": "0.21.5",
"resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
"integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
"cpu": [
"arm64"
],
"dev": true,
"ideallyInert": true,
"license": "MIT",
"optional": true,
"os": [
"freebsd"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/freebsd-x64": {
"version": "0.21.5",
"resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
"integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
"cpu": [
"x64"
],
"dev": true,
"ideallyInert": true,
"license": "MIT",
"optional": true,
"os": [
"freebsd"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/linux-arm": {
"version": "0.21.5",
"resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
"integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
"cpu": [
"arm"
],
"dev": true,
"ideallyInert": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/linux-arm64": {
"version": "0.21.5",
"resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
"integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
"cpu": [
"arm64"
],
"dev": true,
"ideallyInert": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/linux-ia32": {
"version": "0.21.5",
"resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
"integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
"cpu": [
"ia32"
],
"dev": true,
"ideallyInert": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/linux-loong64": {
"version": "0.21.5",
"resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
"integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
"cpu": [
"loong64"
],
"dev": true,
"ideallyInert": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/linux-mips64el": {
"version": "0.21.5",
"resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
"integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
"cpu": [
"mips64el"
],
"dev": true,
"ideallyInert": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/linux-ppc64": {
"version": "0.21.5",
"resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
"integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
"cpu": [
"ppc64"
],
"dev": true,
"ideallyInert": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/linux-riscv64": {
"version": "0.21.5",
"resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
"integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
"cpu": [
"riscv64"
],
"dev": true,
"ideallyInert": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/linux-s390x": {
"version": "0.21.5",
"resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
"integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
"cpu": [
"s390x"
],
"dev": true,
"ideallyInert": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/linux-x64": {
"version": "0.21.5",
"resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
"integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
"cpu": [
"x64"
],
"dev": true,
"ideallyInert": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/netbsd-x64": {
"version": "0.21.5",
"resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
"integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
"cpu": [
"x64"
],
"dev": true,
"ideallyInert": true,
"license": "MIT",
"optional": true,
"os": [
"netbsd"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/openbsd-x64": {
"version": "0.21.5",
"resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
"integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
"cpu": [
"x64"
],
"dev": true,
"ideallyInert": true,
"license": "MIT",
"optional": true,
"os": [
"openbsd"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/sunos-x64": {
"version": "0.21.5",
"resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
"integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
"cpu": [
"x64"
],
"dev": true,
"ideallyInert": true,
"license": "MIT",
"optional": true,
"os": [
"sunos"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/win32-arm64": {
"version": "0.21.5",
"resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
"integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
"cpu": [
"arm64"
],
"dev": true,
"ideallyInert": true,
"license": "MIT",
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/win32-ia32": {
"version": "0.21.5",
"resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
"integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
"cpu": [
"ia32"
],
"dev": true,
"ideallyInert": true,
"license": "MIT",
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/win32-x64": {
"version": "0.21.5",
"resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
"integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
"cpu": [
"x64"
],
"dev": true,
"ideallyInert": true,
"license": "MIT",
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@jridgewell/sourcemap-codec": {
"version": "1.5.5",
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
"integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
"license": "MIT"
},
"node_modules/@rollup/rollup-android-arm-eabi": {
"version": "4.54.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.54.0.tgz",
"integrity": "sha512-OywsdRHrFvCdvsewAInDKCNyR3laPA2mc9bRYJ6LBp5IyvF3fvXbbNR0bSzHlZVFtn6E0xw2oZlyjg4rKCVcng==",
"cpu": [
"arm"
],
"dev": true,
"ideallyInert": true,
"license": "MIT",
"optional": true,
"os": [
"android"
]
},
"node_modules/@rollup/rollup-android-arm64": {
"version": "4.54.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.54.0.tgz",
"integrity": "sha512-Skx39Uv+u7H224Af+bDgNinitlmHyQX1K/atIA32JP3JQw6hVODX5tkbi2zof/E69M1qH2UoN3Xdxgs90mmNYw==",
"cpu": [
"arm64"
],
"dev": true,
"ideallyInert": true,
"license": "MIT",
"optional": true,
"os": [
"android"
]
},
"node_modules/@rollup/rollup-darwin-arm64": {
"version": "4.54.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.54.0.tgz",
@@ -87,6 +513,291 @@
"darwin"
]
},
"node_modules/@rollup/rollup-darwin-x64": {
"version": "4.54.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.54.0.tgz",
"integrity": "sha512-cOo7biqwkpawslEfox5Vs8/qj83M/aZCSSNIWpVzfU2CYHa2G3P1UN5WF01RdTHSgCkri7XOlTdtk17BezlV3A==",
"cpu": [
"x64"
],
"dev": true,
"ideallyInert": true,
"license": "MIT",
"optional": true,
"os": [
"darwin"
]
},
"node_modules/@rollup/rollup-freebsd-arm64": {
"version": "4.54.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.54.0.tgz",
"integrity": "sha512-miSvuFkmvFbgJ1BevMa4CPCFt5MPGw094knM64W9I0giUIMMmRYcGW/JWZDriaw/k1kOBtsWh1z6nIFV1vPNtA==",
"cpu": [
"arm64"
],
"dev": true,
"ideallyInert": true,
"license": "MIT",
"optional": true,
"os": [
"freebsd"
]
},
"node_modules/@rollup/rollup-freebsd-x64": {
"version": "4.54.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.54.0.tgz",
"integrity": "sha512-KGXIs55+b/ZfZsq9aR026tmr/+7tq6VG6MsnrvF4H8VhwflTIuYh+LFUlIsRdQSgrgmtM3fVATzEAj4hBQlaqQ==",
"cpu": [
"x64"
],
"dev": true,
"ideallyInert": true,
"license": "MIT",
"optional": true,
"os": [
"freebsd"
]
},
"node_modules/@rollup/rollup-linux-arm-gnueabihf": {
"version": "4.54.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.54.0.tgz",
"integrity": "sha512-EHMUcDwhtdRGlXZsGSIuXSYwD5kOT9NVnx9sqzYiwAc91wfYOE1g1djOEDseZJKKqtHAHGwnGPQu3kytmfaXLQ==",
"cpu": [
"arm"
],
"dev": true,
"ideallyInert": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
]
},
"node_modules/@rollup/rollup-linux-arm-musleabihf": {
"version": "4.54.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.54.0.tgz",
"integrity": "sha512-+pBrqEjaakN2ySv5RVrj/qLytYhPKEUwk+e3SFU5jTLHIcAtqh2rLrd/OkbNuHJpsBgxsD8ccJt5ga/SeG0JmA==",
"cpu": [
"arm"
],
"dev": true,
"ideallyInert": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
]
},
"node_modules/@rollup/rollup-linux-arm64-gnu": {
"version": "4.54.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.54.0.tgz",
"integrity": "sha512-NSqc7rE9wuUaRBsBp5ckQ5CVz5aIRKCwsoa6WMF7G01sX3/qHUw/z4pv+D+ahL1EIKy6Enpcnz1RY8pf7bjwng==",
"cpu": [
"arm64"
],
"dev": true,
"ideallyInert": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
]
},
"node_modules/@rollup/rollup-linux-arm64-musl": {
"version": "4.54.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.54.0.tgz",
"integrity": "sha512-gr5vDbg3Bakga5kbdpqx81m2n9IX8M6gIMlQQIXiLTNeQW6CucvuInJ91EuCJ/JYvc+rcLLsDFcfAD1K7fMofg==",
"cpu": [
"arm64"
],
"dev": true,
"ideallyInert": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
]
},
"node_modules/@rollup/rollup-linux-loong64-gnu": {
"version": "4.54.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.54.0.tgz",
"integrity": "sha512-gsrtB1NA3ZYj2vq0Rzkylo9ylCtW/PhpLEivlgWe0bpgtX5+9j9EZa0wtZiCjgu6zmSeZWyI/e2YRX1URozpIw==",
"cpu": [
"loong64"
],
"dev": true,
"ideallyInert": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
]
},
"node_modules/@rollup/rollup-linux-ppc64-gnu": {
"version": "4.54.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.54.0.tgz",
"integrity": "sha512-y3qNOfTBStmFNq+t4s7Tmc9hW2ENtPg8FeUD/VShI7rKxNW7O4fFeaYbMsd3tpFlIg1Q8IapFgy7Q9i2BqeBvA==",
"cpu": [
"ppc64"
],
"dev": true,
"ideallyInert": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
]
},
"node_modules/@rollup/rollup-linux-riscv64-gnu": {
"version": "4.54.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.54.0.tgz",
"integrity": "sha512-89sepv7h2lIVPsFma8iwmccN7Yjjtgz0Rj/Ou6fEqg3HDhpCa+Et+YSufy27i6b0Wav69Qv4WBNl3Rs6pwhebQ==",
"cpu": [
"riscv64"
],
"dev": true,
"ideallyInert": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
]
},
"node_modules/@rollup/rollup-linux-riscv64-musl": {
"version": "4.54.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.54.0.tgz",
"integrity": "sha512-ZcU77ieh0M2Q8Ur7D5X7KvK+UxbXeDHwiOt/CPSBTI1fBmeDMivW0dPkdqkT4rOgDjrDDBUed9x4EgraIKoR2A==",
"cpu": [
"riscv64"
],
"dev": true,
"ideallyInert": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
]
},
"node_modules/@rollup/rollup-linux-s390x-gnu": {
"version": "4.54.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.54.0.tgz",
"integrity": "sha512-2AdWy5RdDF5+4YfG/YesGDDtbyJlC9LHmL6rZw6FurBJ5n4vFGupsOBGfwMRjBYH7qRQowT8D/U4LoSvVwOhSQ==",
"cpu": [
"s390x"
],
"dev": true,
"ideallyInert": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
]
},
"node_modules/@rollup/rollup-linux-x64-gnu": {
"version": "4.54.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.54.0.tgz",
"integrity": "sha512-WGt5J8Ij/rvyqpFexxk3ffKqqbLf9AqrTBbWDk7ApGUzaIs6V+s2s84kAxklFwmMF/vBNGrVdYgbblCOFFezMQ==",
"cpu": [
"x64"
],
"dev": true,
"ideallyInert": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
]
},
"node_modules/@rollup/rollup-linux-x64-musl": {
"version": "4.54.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.54.0.tgz",
"integrity": "sha512-JzQmb38ATzHjxlPHuTH6tE7ojnMKM2kYNzt44LO/jJi8BpceEC8QuXYA908n8r3CNuG/B3BV8VR3Hi1rYtmPiw==",
"cpu": [
"x64"
],
"dev": true,
"ideallyInert": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
]
},
"node_modules/@rollup/rollup-openharmony-arm64": {
"version": "4.54.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.54.0.tgz",
"integrity": "sha512-huT3fd0iC7jigGh7n3q/+lfPcXxBi+om/Rs3yiFxjvSxbSB6aohDFXbWvlspaqjeOh+hx7DDHS+5Es5qRkWkZg==",
"cpu": [
"arm64"
],
"dev": true,
"ideallyInert": true,
"license": "MIT",
"optional": true,
"os": [
"openharmony"
]
},
"node_modules/@rollup/rollup-win32-arm64-msvc": {
"version": "4.54.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.54.0.tgz",
"integrity": "sha512-c2V0W1bsKIKfbLMBu/WGBz6Yci8nJ/ZJdheE0EwB73N3MvHYKiKGs3mVilX4Gs70eGeDaMqEob25Tw2Gb9Nqyw==",
"cpu": [
"arm64"
],
"dev": true,
"ideallyInert": true,
"license": "MIT",
"optional": true,
"os": [
"win32"
]
},
"node_modules/@rollup/rollup-win32-ia32-msvc": {
"version": "4.54.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.54.0.tgz",
"integrity": "sha512-woEHgqQqDCkAzrDhvDipnSirm5vxUXtSKDYTVpZG3nUdW/VVB5VdCYA2iReSj/u3yCZzXID4kuKG7OynPnB3WQ==",
"cpu": [
"ia32"
],
"dev": true,
"ideallyInert": true,
"license": "MIT",
"optional": true,
"os": [
"win32"
]
},
"node_modules/@rollup/rollup-win32-x64-gnu": {
"version": "4.54.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.54.0.tgz",
"integrity": "sha512-dzAc53LOuFvHwbCEOS0rPbXp6SIhAf2txMP5p6mGyOXXw5mWY8NGGbPMPrs4P1WItkfApDathBj/NzMLUZ9rtQ==",
"cpu": [
"x64"
],
"dev": true,
"ideallyInert": true,
"license": "MIT",
"optional": true,
"os": [
"win32"
]
},
"node_modules/@rollup/rollup-win32-x64-msvc": {
"version": "4.54.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.54.0.tgz",
"integrity": "sha512-hYT5d3YNdSh3mbCU1gwQyPgQd3T2ne0A3KG8KSBdav5TiBg6eInVmV+TeR5uHufiIgSFg0XsOWGW5/RhNcSvPg==",
"cpu": [
"x64"
],
"dev": true,
"ideallyInert": true,
"license": "MIT",
"optional": true,
"os": [
"win32"
]
},
"node_modules/@types/estree": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -540,6 +1251,7 @@
"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
"devOptional": true,
"license": "Apache-2.0",
"peer": true,
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
@@ -554,6 +1266,7 @@
"integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"esbuild": "^0.21.3",
"postcss": "^8.4.43",
@@ -620,6 +1333,7 @@
"resolved": "https://registry.npmjs.org/vue/-/vue-3.5.26.tgz",
"integrity": "sha512-SJ/NTccVyAoNUJmkM9KUqPcYlY+u8OVL1X5EW9RIs3ch5H2uERxyyIUI4MRxVCSOiEcupX9xNGde1tL9ZKpimA==",
"license": "MIT",
"peer": true,
"dependencies": {
"@vue/compiler-dom": "3.5.26",
"@vue/compiler-sfc": "3.5.26",

3
package-lock.json generated
View File

@@ -1221,6 +1221,7 @@
"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
"devOptional": true,
"license": "Apache-2.0",
"peer": true,
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
@@ -1235,6 +1236,7 @@
"integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"esbuild": "^0.21.3",
"postcss": "^8.4.43",
@@ -1301,6 +1303,7 @@
"resolved": "https://registry.npmjs.org/vue/-/vue-3.5.26.tgz",
"integrity": "sha512-SJ/NTccVyAoNUJmkM9KUqPcYlY+u8OVL1X5EW9RIs3ch5H2uERxyyIUI4MRxVCSOiEcupX9xNGde1tL9ZKpimA==",
"license": "MIT",
"peer": true,
"dependencies": {
"@vue/compiler-dom": "3.5.26",
"@vue/compiler-sfc": "3.5.26",

408
src/App.vue
View File

@@ -1,40 +1,170 @@
<template>
<div class="monitor-container" :class="{ 'is-top2': currentStyle === 'top2' }">
<h1 class="title">火情监控全链路业务监控视图</h1>
<!-- 样式切换按钮 -->
<div class="style-switcher">
<div class="style-switcher" :class="{ 'is-top2': currentStyle === 'top2' }">
<button
:class="['style-btn', { active: currentStyle === 'circle' }]"
@click="switchStyle('circle')"
>
圆形样式
原型-1
</button>
<button
:class="['style-btn', { active: currentStyle === 'top2' }]"
@click="switchStyle('top2')"
>
Top2样式
原型-2
</button>
</div>
<div
class="svg-wrapper"
:class="{ 'is-top2': currentStyle === 'top2' }"
ref="svgWrapper"
v-html="svgContent"
></div>
<template v-if="currentStyle === 'top2'">
<div class="top2-stage" ref="top2Stage" :style="{ '--top2-scale': top2Scale }">
<div class="top2-scale">
<div class="top2-layout">
<div class="top2-header" data-node-id="153:2111">
<div class="top2-title" data-node-id="153:2112">火情综合监控系统</div>
</div>
<div class="top2-content">
<div class="top2-left-col">
<div class="panel-outline panel-left-top" data-node-id="153:2087">
<div class="panel-label label-metric-11" data-node-id="153:2098">视联拉流质量统计</div>
</div>
<div class="panel-outline panel-left-middle" data-node-id="153:2089">
<div class="panel-label label-metric-21" data-node-id="153:2099">AI分析质量监控</div>
</div>
<div class="panel-outline panel-left-bottom" data-node-id="271:27">
<div class="panel-label label-metric-31" data-node-id="271:28">网络质量分析</div>
</div>
</div>
<div class="top2-center-col">
<div class="top2-cards" data-node-id="270:19">
<div class="top2-card" data-node-id="277:79">
<div class="top2-card-icon">
<img :src="top2CardIcons.device" alt="" />
</div>
<div class="top2-card-text">
<div class="top2-card-label">火情设备数</div>
<div class="top2-card-value">54781</div>
<div class="top2-card-sub">截止今日数量</div>
</div>
</div>
<div class="top2-card" data-node-id="279:46">
<div class="top2-card-icon">
<img :src="top2CardIcons.stream" alt="" />
</div>
<div class="top2-card-text">
<div class="top2-card-label">拉流质量</div>
<div class="top2-card-value">85.2%</div>
<div class="top2-card-sub">拉流成功率指标</div>
</div>
</div>
<div class="top2-card" data-node-id="279:54">
<div class="top2-card-icon">
<img :src="top2CardIcons.ai" alt="" />
</div>
<div class="top2-card-text">
<div class="top2-card-label">AI分析质量</div>
<div class="top2-card-value">99.5%</div>
<div class="top2-card-sub">AI请求成功率</div>
</div>
</div>
<div class="top2-card" data-node-id="279:62">
<div class="top2-card-icon">
<img :src="top2CardIcons.cut" alt="" />
</div>
<div class="top2-card-text">
<div class="top2-card-label">切图质量</div>
<div class="top2-card-value">99.5%</div>
<div class="top2-card-sub">抽帧切图成功率</div>
</div>
</div>
</div>
<div class="top2-subheader" data-node-id="271:25">业务系统分层整体架构展示</div>
<div class="top2-center" data-node-id="162:5">
<div class="svg-wrapper is-top2" ref="svgWrapper" v-html="svgContent"></div>
</div>
<div class="top2-bottom-row">
<div class="panel-outline panel-center-bottom-left" data-node-id="153:2091">
<div class="panel-label label-metric-22" data-node-id="153:2100">监控指标区22</div>
</div>
<div class="panel-outline panel-center-bottom-right" data-node-id="153:2092">
<div class="panel-label label-metric-23" data-node-id="153:2102">监控指标区23</div>
</div>
</div>
</div>
<div class="top2-right-col">
<div class="panel-outline panel-right-top" data-node-id="153:2088">
<div class="panel-label label-alarm" data-node-id="153:2095">告警看板</div>
</div>
<div class="panel-outline panel-right-bottom" data-node-id="153:2090">
<div class="panel-label label-fault" data-node-id="153:2096">故障看板</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<template v-else>
<h1 class="title">火情监控全链路业务监控视图</h1>
<div class="svg-wrapper" ref="svgWrapper" v-html="svgContent"></div>
</template>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ref, onMounted, onBeforeUnmount, nextTick, watch } from 'vue'
type StyleType = 'circle' | 'top2'
const svgWrapper = ref<HTMLElement | null>(null)
const svgContent = ref('')
const currentStyle = ref<StyleType>('circle')
const top2Stage = ref<HTMLElement | null>(null)
const top2Scale = ref(1)
const TOP2_WIDTH = 1438
const TOP2_HEIGHT = 832
let top2ResizeObserver: ResizeObserver | null = null
const top2CardIcons = {
device: 'https://www.figma.com/api/mcp/asset/d0315e83-c91a-4df2-aa1c-c68bc334548a',
stream: 'https://www.figma.com/api/mcp/asset/05d50c71-8671-4e90-beb7-46c7186a2c1f',
ai: 'https://www.figma.com/api/mcp/asset/8e943e5a-ebbb-44d4-9caa-9d32a8329ab7',
cut: 'https://www.figma.com/api/mcp/asset/c1ba83a9-ec62-49b0-9b07-925faae32277',
}
const updateTop2Scale = () => {
const stage = top2Stage.value
if (!stage) return
const { width, height } = stage.getBoundingClientRect()
if (!width || !height) return
const scaleX = width / TOP2_WIDTH
const scaleY = height / TOP2_HEIGHT
top2Scale.value = Math.min(scaleX, scaleY)
}
const attachTop2Observer = () => {
const stage = top2Stage.value
if (!stage) return
if (!top2ResizeObserver) {
top2ResizeObserver = new ResizeObserver(() => {
updateTop2Scale()
})
} else {
top2ResizeObserver.disconnect()
}
top2ResizeObserver.observe(stage)
}
const detachTop2Observer = () => {
if (!top2ResizeObserver) return
top2ResizeObserver.disconnect()
}
const loadSvg = async (style: StyleType) => {
try {
@@ -66,6 +196,20 @@ onMounted(() => {
loadSvg('circle')
})
onBeforeUnmount(() => {
detachTop2Observer()
})
watch(currentStyle, async (style) => {
if (style === 'top2') {
await nextTick()
attachTop2Observer()
updateTop2Scale()
} else {
detachTop2Observer()
}
})
const addFlowingAnimation = () => {
if (!svgWrapper.value) return
@@ -337,6 +481,7 @@ const addTop2Animation = () => {
align-items: center;
gap: 20px;
padding: 10px;
position: relative;
}
.style-switcher {
@@ -345,6 +490,14 @@ const addTop2Animation = () => {
margin-top: 10px;
}
.style-switcher.is-top2 {
margin-top: 0;
position: absolute;
top: 24px;
right: 24px;
z-index: 5;
}
.style-btn {
padding: 10px 24px;
font-size: 16px;
@@ -427,31 +580,215 @@ const addTop2Animation = () => {
}
.monitor-container.is-top2 {
padding: 8px;
gap: 12px;
padding: 0;
gap: 0;
align-items: stretch;
justify-content: stretch;
background: #2543a5;
}
.top2-stage {
flex: 1;
width: 100%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: #2543a5;
}
.top2-scale {
position: relative;
width: calc(1296px * var(--top2-scale));
height: calc(692px * var(--top2-scale));
flex-shrink: 0;
}
.top2-layout {
position: absolute;
left: 0;
top: 0;
width: 1296px;
height: 692px;
background: #2543a5;
border-radius: 0;
overflow: hidden;
transform: scale(var(--top2-scale));
transform-origin: top left;
}
.top2-header {
position: absolute;
left: 16px;
top: 16px;
width: 1264px;
height: 50px;
border-radius: 16px;
background: #e5e5e5;
border: 0.297px solid #9fbaff;
box-sizing: border-box;
}
.top2-title {
position: absolute;
left: 516.1px;
top: 7.78px;
font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
font-size: 28.491px;
font-weight: 700;
color: #2543a5;
letter-spacing: 0.3px;
}
.top2-content {
position: absolute;
left: 16px;
top: 82px;
width: 1264px;
height: 594px;
}
.top2-left-col {
position: absolute;
left: 0;
top: 26.055px;
width: 232.377px;
height: 541.889px;
}
.top2-center-col {
position: absolute;
left: 248.377px;
top: 25.15px;
width: 744.126px;
height: 543.699px;
}
.top2-right-col {
position: absolute;
left: 1008.503px;
top: 25.907px;
width: 232.377px;
height: 542.186px;
}
.panel-outline {
position: absolute;
border: 0.297px solid #f0e2e2;
border-radius: 10.684px;
background: rgba(217, 217, 217, 0);
box-sizing: border-box;
}
.panel-left-top {
left: 0;
top: 0;
width: 232.377px;
height: 259.977px;
}
.panel-left-bottom {
left: 0;
top: 275.977px;
width: 232.377px;
height: 265.912px;
}
.panel-right-top {
left: 0;
top: 0;
width: 232.377px;
height: 259.977px;
}
.panel-right-bottom {
left: 0;
top: 275.977px;
width: 232.377px;
height: 266.209px;
}
.panel-center-bottom-left {
left: 0;
top: 0;
width: 360.668px;
height: 175.692px;
}
.panel-center-bottom-right {
left: 386.668px;
top: 0;
width: 357.216px;
height: 175.692px;
}
.top2-center {
position: absolute;
left: 0;
top: 0;
width: 743.928px;
height: 352.007px;
}
.top2-bottom-row {
position: absolute;
left: 0;
top: 368.007px;
width: 744.126px;
height: 175.692px;
}
.svg-wrapper.is-top2 {
max-width: none;
flex: none;
width: 100%;
height: 100%;
max-width: none;
padding: 0;
background: transparent;
border-radius: 55px;
border-radius: 0;
box-shadow: none;
overflow: hidden;
}
.svg-wrapper.is-top2 :deep(svg) {
width: 100%;
height: 100%;
max-height: none;
filter: none;
.panel-label {
position: absolute;
font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
font-size: 18.994px;
font-weight: 700;
color: #ffffff;
letter-spacing: 0.2px;
}
.svg-wrapper.is-top2 :deep(#shape1) {
fill: #211677;
stroke: none;
.label-metric-11 {
left: 61.73px;
top: 91.7px;
}
.label-metric-21 {
left: 61.73px;
top: 121.68px;
}
.label-metric-22 {
left: 132.11px;
top: 76.27px;
}
.label-metric-23 {
left: 126.11px;
top: 76.27px;
}
.label-alarm {
left: 78.35px;
top: 18.7px;
color: #f02525;
}
.label-fault {
left: 78.35px;
top: 22.85px;
color: #ffffff;
}
.svg-wrapper :deep(svg) {
@@ -462,6 +799,17 @@ const addTop2Animation = () => {
touch-action: pan-x pan-y;
}
.svg-wrapper.is-top2 :deep(svg) {
height: 100%;
max-height: none;
filter: none;
}
.svg-wrapper.is-top2 :deep(#shape1) {
fill: transparent;
stroke: none;
}
:deep(.flowing-line) {
transition: all 0.3s ease;
}
@@ -479,14 +827,14 @@ const addTop2Animation = () => {
letter-spacing: 1px;
}
.svg-wrapper {
.monitor-container:not(.is-top2) .svg-wrapper {
padding: 20px;
}
}
/* 手机适配 */
@media (max-width: 768px) {
.monitor-container {
.monitor-container:not(.is-top2) {
gap: 15px;
padding: 10px;
}
@@ -498,7 +846,7 @@ const addTop2Animation = () => {
border-radius: 15px;
}
.svg-wrapper {
.monitor-container:not(.is-top2) .svg-wrapper {
padding: 15px;
border-radius: 15px;
}
@@ -506,7 +854,7 @@ const addTop2Animation = () => {
/* 小屏手机适配 */
@media (max-width: 480px) {
.monitor-container {
.monitor-container:not(.is-top2) {
gap: 10px;
padding: 8px;
}
@@ -518,7 +866,7 @@ const addTop2Animation = () => {
border-radius: 12px;
}
.svg-wrapper {
.monitor-container:not(.is-top2) .svg-wrapper {
padding: 10px;
border-radius: 12px;
}

9
src/style.css
View File

@@ -8,9 +8,6 @@ body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
@@ -19,7 +16,7 @@ body {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
align-items: stretch;
justify-content: stretch;
padding: 0;
}