From daad745a9cf2e66c0021a359005175bdeddc51e5 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期五, 18 十月 2024 16:12:23 +0800
Subject: [PATCH] #
---
zy-acs-flow/src/page/components/PulseSignal.jsx | 63 +++++++++++++++++++------------
1 files changed, 38 insertions(+), 25 deletions(-)
diff --git a/zy-acs-flow/src/page/components/PulseSignal.jsx b/zy-acs-flow/src/page/components/PulseSignal.jsx
index 1b98d49..e79c7c2 100644
--- a/zy-acs-flow/src/page/components/PulseSignal.jsx
+++ b/zy-acs-flow/src/page/components/PulseSignal.jsx
@@ -3,35 +3,48 @@
import { teal } from '@mui/material/colors';
const PulseSignal = (props) => {
- const { flag = true, width = 8, ...rest } = props;
+ const { flag = true, width = 8, negative = false, ...rest } = props;
return (
<>
- <Box
- {...rest}
- sx={{
- width: width,
- height: width,
- borderRadius: '50%',
- backgroundColor: flag ? `${teal[400]}` : '#f44336',
- display: 'inline-block',
- animation: 'pulse 1.2s infinite',
- '@keyframes pulse': {
- '0%': {
- transform: 'scale(1)',
- opacity: 1,
+ {flag ? (
+ <Box
+ {...rest}
+ sx={{
+ width: width,
+ height: width,
+ borderRadius: '50%',
+ backgroundColor: `${teal[400]}`,
+ display: 'inline-block',
+ animation: `pulse ${negative ? '2' : '1.2'}s infinite`,
+ '@keyframes pulse': {
+ '0%': {
+ transform: 'scale(1)',
+ opacity: 1,
+ },
+ '50%': {
+ transform: 'scale(1.3)',
+ opacity: 0.7,
+ },
+ '100%': {
+ transform: 'scale(1)',
+ opacity: 1,
+ },
},
- '50%': {
- transform: 'scale(1.2)',
- opacity: 0.7,
- },
- '100%': {
- transform: 'scale(1)',
- opacity: 1,
- },
- },
- }}
- />
+ }}
+ />
+ ) : (
+ <Box
+ {...rest}
+ sx={{
+ width: width + width / 10,
+ height: width + width / 10,
+ borderRadius: '50%',
+ backgroundColor: '#f44336',
+ display: 'inline-block',
+ }}
+ />
+ )}
</>
)
--
Gitblit v1.9.1