|
@@ -11,10 +11,15 @@ import { Swiper, SwiperClass, SwiperSlide } from "swiper/react";
|
|
|
import CustomButton from "../CustomButton";
|
|
|
import styles from "./index.module.scss";
|
|
|
|
|
|
+interface ImageItem {
|
|
|
+ image: string;
|
|
|
+ text: string;
|
|
|
+}
|
|
|
+
|
|
|
interface Props {
|
|
|
className?: string;
|
|
|
text?: string;
|
|
|
- images?: string[];
|
|
|
+ images?: ImageItem[];
|
|
|
}
|
|
|
|
|
|
const AdSwiperBox: React.FC<Props> = ({ className, images = [], text }) => {
|
|
@@ -24,10 +29,10 @@ const AdSwiperBox: React.FC<Props> = ({ className, images = [], text }) => {
|
|
|
const swipreRef = React.useRef<SwiperClass | null>(null);
|
|
|
const config = React.useMemo(() => {
|
|
|
const result =
|
|
|
- images?.map((img: string) => {
|
|
|
+ images?.map((item) => {
|
|
|
return {
|
|
|
- img_url: img,
|
|
|
- text,
|
|
|
+ img_url: item.image,
|
|
|
+ text: item.text,
|
|
|
};
|
|
|
}) || [];
|
|
|
|
|
@@ -92,7 +97,9 @@ const AdSwiperBox: React.FC<Props> = ({ className, images = [], text }) => {
|
|
|
return (
|
|
|
<SwiperSlide key={idx} className="overflow-hidden rounded-[.15rem]">
|
|
|
<div className="relative" id={`swiperSlide_${idx}`}>
|
|
|
- <img src={item.img_url} className="h-[100%]" alt="" />
|
|
|
+ <div className="min-h-[3rem]">
|
|
|
+ <img src={item.img_url} className="h-[100%]" alt="" />
|
|
|
+ </div>
|
|
|
<div className="absolute bottom-[.2rem] left-[0] right-[0] flex flex-col items-center">
|
|
|
<img
|
|
|
src={qrDataUrl}
|
|
@@ -100,9 +107,10 @@ const AdSwiperBox: React.FC<Props> = ({ className, images = [], text }) => {
|
|
|
className="mb-[.1rem] h-[100px] w-[100px]"
|
|
|
/>
|
|
|
{item.text && (
|
|
|
- <div className="px-[.15rem] text-center text-[10px] leading-[1] text-[#fff]">
|
|
|
- {item.text}
|
|
|
- </div>
|
|
|
+ <div
|
|
|
+ className="px-[.15rem] text-center text-[10px] leading-[1] text-[#fff]"
|
|
|
+ dangerouslySetInnerHTML={{ __html: item.text }}
|
|
|
+ ></div>
|
|
|
)}
|
|
|
</div>
|
|
|
</div>
|