From a7d9ddda70f0e593a394ece016e1458e87b65bd2 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期二, 08 十月 2024 14:04:30 +0800
Subject: [PATCH] #
---
zy-acs-flow/src/page/components/PulseSignal.jsx | 64 +++++++++++++++++++------------
1 files changed, 39 insertions(+), 25 deletions(-)
diff --git a/zy-acs-flow/src/page/components/PulseSignal.jsx b/zy-acs-flow/src/page/components/PulseSignal.jsx
index b4a0750..e79c7c2 100644
--- a/zy-acs-flow/src/page/components/PulseSignal.jsx
+++ b/zy-acs-flow/src/page/components/PulseSignal.jsx
@@ -1,36 +1,50 @@
import * as React from 'react';
import { Paper, Typography, Box, Chip, Avatar } from '@mui/material';
+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 ? '#3f51b5' : '#f44336',
- display: 'inline-block',
- animation: 'pulse 1.5s 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