feat: RadioGroupOfButtonStyle增加滑动效果

src/components/CommonComponents/RadioGroupOfButtonStyle/index.module.css

 .RadiosBox {
+	position: relative;
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
@@ -29,8 +30,6 @@
 
 .radioActive {
 	color: #1370ff;
-	background-color: #fff;
-	box-shadow: 2px 4px 12px 0px rgba(0, 27, 63, 0.06);
 	position: relative;
 }
 .border {
@@ -41,3 +40,21 @@
 .borderHidden {
 	visibility: hidden;
 }
+.radioActiveBgBox {
+	width: calc(100% - 3px);
+	position: absolute;
+	left: 1px;
+	top: 1px;
+	height: 28px;
+}
+.radioActiveBg {
+	box-shadow: 2px 4px 12px 0px rgba(0, 27, 63, 0.06);
+	left: 1px;
+	top: 1px;
+	height: 28px;
+	background-color: #fff;
+	transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+	border-radius: 2px;
+	width: 50%;
+	transform: translateX(0px);
+}

src/components/CommonComponents/RadioGroupOfButtonStyle/index.tsx

@@ -28,6 +28,14 @@ const RadioGroupOfButtonStyle = (props: IRadioGroupOfButtonStyleProps) => {
 	const { radioOptions, value, handleRadio, RadiosBoxStyle, radioStyle } =
 		props;
 
+	const radioWidth = useMemo(() => {
+		if (radioOptions.length) {
+			return Number((100 / radioOptions.length).toFixed(2));
+		} else {
+			return 100;
+		}
+	}, [radioOptions]);
+
 	const activeIndex: any = useMemo(() => {
 		let res = 0;
 		radioOptions.forEach((item, index) => {
@@ -40,6 +48,16 @@ const RadioGroupOfButtonStyle = (props: IRadioGroupOfButtonStyleProps) => {
 
 	return (
 		<div className={style.RadiosBox} style={RadiosBoxStyle}>
+			<div className={style.radioActiveBgBox}>
+				<div
+					className={style.radioActiveBg}
+					style={{
+						width: `${radioWidth}%`,
+						transform: `translateX(${activeIndex * 100}%)`,
+					}}
+				></div>
+			</div>
+
 			{radioOptions.map((options, index) => {
 				return (
 					<>