|
|
@@ -17,7 +17,8 @@ import {
|
|
|
onUnmounted,
|
|
|
ref,
|
|
|
watch,
|
|
|
- Transition
|
|
|
+ Transition,
|
|
|
+ TransitionGroup
|
|
|
} from 'vue'
|
|
|
import iconBack from './image/back.svg'
|
|
|
import styles from './index.module.less'
|
|
|
@@ -40,10 +41,17 @@ import Points from './component/points'
|
|
|
import { browser, getSecondRPM } from '@/helpers/utils'
|
|
|
import { Vue3Lottie } from 'vue3-lottie'
|
|
|
import playLoadData from './datas/data.json'
|
|
|
-import { usePageVisibility } from '@vant/use'
|
|
|
+import { usePageVisibility, useRect } from '@vant/use'
|
|
|
import PlayRecordTime from './playRecordTime'
|
|
|
import dayjs from 'dayjs'
|
|
|
|
|
|
+import { Pagination, Navigation, EffectFade, EffectFlip, EffectCreative, Lazy } from 'swiper'
|
|
|
+import { Swiper, SwiperSlide } from 'swiper/vue'
|
|
|
+import 'swiper/less'
|
|
|
+import 'swiper/less/effect-fade'
|
|
|
+import 'swiper/less/effect-flip'
|
|
|
+import 'swiper/less/effect-creative'
|
|
|
+
|
|
|
export default defineComponent({
|
|
|
name: 'CoursewarePlay',
|
|
|
setup() {
|
|
|
@@ -290,6 +298,7 @@ export default defineComponent({
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ const swiperDom = ref()
|
|
|
onMounted(() => {
|
|
|
getDetail()
|
|
|
getCourseSchedule()
|
|
|
@@ -347,9 +356,10 @@ export default defineComponent({
|
|
|
const toggleMaterial = () => {
|
|
|
const index = data.itemList.findIndex((n: any) => n.id == popupData.itemActive)
|
|
|
if (index > -1) {
|
|
|
- swipeRef.value?.swipeTo(index, {
|
|
|
- immediate: true
|
|
|
- })
|
|
|
+ // swipeRef.value?.swipeTo(index, {
|
|
|
+ // immediate: true
|
|
|
+ // })
|
|
|
+ swiperDom.value?.slideTo(index, 1000)
|
|
|
}
|
|
|
}
|
|
|
/** 延迟收起模态框 */
|
|
|
@@ -389,14 +399,6 @@ export default defineComponent({
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- // 上一个知识点, 下一个知识点
|
|
|
- const handlePreAndNext = (type: string) => {
|
|
|
- if (type === 'up') {
|
|
|
- swipeRef.value?.prev()
|
|
|
- } else {
|
|
|
- swipeRef.value?.next()
|
|
|
- }
|
|
|
- }
|
|
|
|
|
|
// 去点名,签退
|
|
|
const gotoRollCall = (pageTag: string) => {
|
|
|
@@ -452,187 +454,325 @@ export default defineComponent({
|
|
|
const handleEnded = (m: any) => {
|
|
|
// console.log(m)
|
|
|
if (popupData.activeIndex != data.itemList.length - 1) {
|
|
|
- swipeRef.value?.next()
|
|
|
+ swiperDom.value.slideNext(800)
|
|
|
+
|
|
|
+ // setTimeout(() => {
|
|
|
+ // swipeRef.value?.next()
|
|
|
+ // ;(document.querySelector('.swiper-button-next') as any)?.click()
|
|
|
+ // swiperDom.value.navigation.nextEl.click()
|
|
|
+ // swiperDom.value.slideNext(800)
|
|
|
+ // }, 300)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ const effects = [
|
|
|
+ {
|
|
|
+ prev: {
|
|
|
+ shadow: true,
|
|
|
+ translate: [0, 0, -400]
|
|
|
+ },
|
|
|
+ next: {
|
|
|
+ translate: ['100%', 0, 0]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prev: {
|
|
|
+ shadow: true,
|
|
|
+ translate: ['-120%', 0, -500]
|
|
|
+ },
|
|
|
+ next: {
|
|
|
+ shadow: true,
|
|
|
+ translate: ['120%', 0, -500]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prev: {
|
|
|
+ shadow: true,
|
|
|
+ translate: ['-20%', 0, -1]
|
|
|
+ },
|
|
|
+ next: {
|
|
|
+ translate: ['100%', 0, 0]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prev: {
|
|
|
+ shadow: true,
|
|
|
+ translate: [0, 0, -800],
|
|
|
+ rotate: [180, 0, 0]
|
|
|
+ },
|
|
|
+ next: {
|
|
|
+ shadow: true,
|
|
|
+ translate: [0, 0, -800],
|
|
|
+ rotate: [-180, 0, 0]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prev: {
|
|
|
+ shadow: true,
|
|
|
+ translate: ['-125%', 0, -800],
|
|
|
+ rotate: [0, 0, -90]
|
|
|
+ },
|
|
|
+ next: {
|
|
|
+ shadow: true,
|
|
|
+ translate: ['125%', 0, -800],
|
|
|
+ rotate: [0, 0, 90]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prev: {
|
|
|
+ shadow: true,
|
|
|
+ origin: 'right center',
|
|
|
+ translate: ['5%', 0, -200],
|
|
|
+ rotate: [0, -100, 0]
|
|
|
+ },
|
|
|
+ next: {
|
|
|
+ origin: 'left center',
|
|
|
+ translate: ['-5%', 0, -200],
|
|
|
+ rotate: [0, 100, 0]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prev: {
|
|
|
+ scale: 0.3,
|
|
|
+ opacity: 0.4
|
|
|
+ },
|
|
|
+ next: {
|
|
|
+ opacity: 0.4,
|
|
|
+ scale: 0.3
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ const swiperType = ref(effects[2])
|
|
|
+ // 上一个知识点, 下一个知识点
|
|
|
+ const handlePreAndNext = (type: string) => {
|
|
|
+ setTimeout(() => {
|
|
|
+ if (type === 'up') {
|
|
|
+ // swiperRef.value?.allowSlidePrev()
|
|
|
+
|
|
|
+ // ;(document.querySelector('.swiper-button-prev') as any)?.click()
|
|
|
+ // swiperDom.value.navigation.prevEl.click()
|
|
|
+ swiperDom.value.slidePrev(800)
|
|
|
+ } else {
|
|
|
+ // swiperRef.value?.allowSlideNext()
|
|
|
+
|
|
|
+ // ;(document.querySelector('.swiper-button-next') as any)?.click()
|
|
|
+ // swiperDom.value.navigation.nextEl.click()
|
|
|
+ // const nextKonwledgeId = data.itemList[popupData.activeIndex + 1].knowledgePointId
|
|
|
+ // console.log(nextKonwledgeId === popupData.tabActive)
|
|
|
+ // if (nextKonwledgeId === popupData.tabActive) {
|
|
|
+ // swiperType.value = effects[2]
|
|
|
+ // } else {
|
|
|
+ // swiperType.value = effects[3]
|
|
|
+ // }
|
|
|
+
|
|
|
+ swiperDom.value.slideNext(800)
|
|
|
+ }
|
|
|
+ }, 400)
|
|
|
+ }
|
|
|
+
|
|
|
return () => (
|
|
|
<div class={styles.playContent}>
|
|
|
<div class={styles.coursewarePlay} style={{ width: parentContainer.width }}>
|
|
|
- <Swipe
|
|
|
+ {/* <swiper :modules="modules" :pagination="{ clickable: true }">
|
|
|
+ <swiper-slide>Slide 1</swiper-slide>
|
|
|
+ <swiper-slide>Slide 2</swiper-slide>
|
|
|
+ <swiper-slide>Slide 3</swiper-slide>
|
|
|
+ </swiper> */}
|
|
|
+
|
|
|
+ {/*
|
|
|
+ 知识点 翻
|
|
|
+ 素材滑
|
|
|
+ */}
|
|
|
+ <Swiper
|
|
|
style={{ height: '100%' }}
|
|
|
- ref={swipeRef}
|
|
|
- showIndicators={false}
|
|
|
- loop={false}
|
|
|
- duration={0}
|
|
|
- vertical
|
|
|
- lazyRender={true}
|
|
|
- touchable={false}
|
|
|
- initialSwipe={popupData.firstIndex}
|
|
|
- onChange={handleSwipeChange}
|
|
|
+ effect="creative"
|
|
|
+ modules={[Pagination, Navigation, EffectFade, EffectFlip, EffectCreative]}
|
|
|
+ creativeEffect={swiperType.value}
|
|
|
+ direction="vertical"
|
|
|
+ navigation
|
|
|
+ allowTouchMove={false}
|
|
|
+ onSwiper={(swiper: any) => {
|
|
|
+ // console.log(swiper, 'index')
|
|
|
+ swiperDom.value = swiper
|
|
|
+ }}
|
|
|
+ onSlideChange={(swiper: any) => {
|
|
|
+ // console.log(swiper, 'index')
|
|
|
+ handleSwipeChange(swiper.activeIndex)
|
|
|
+ }}
|
|
|
>
|
|
|
{data.itemList.map((m: any, mIndex: number) => {
|
|
|
return (
|
|
|
- <SwipeItem class={styles.swipeItem}>
|
|
|
- <>
|
|
|
- <div
|
|
|
- class={styles.itemDiv}
|
|
|
- onClick={() => {
|
|
|
- clearTimeout(activeData.timer)
|
|
|
- if (Date.now() - activeData.nowTime < 300) {
|
|
|
- handleDbClick(m)
|
|
|
- return
|
|
|
- }
|
|
|
- activeData.nowTime = Date.now()
|
|
|
- activeData.timer = setTimeout(() => {
|
|
|
- activeData.model = !activeData.model
|
|
|
- setModelOpen()
|
|
|
- }, 300)
|
|
|
- }}
|
|
|
- >
|
|
|
- {m.type === 'VIDEO' ? (
|
|
|
- <>
|
|
|
- <video
|
|
|
- playsinline="false"
|
|
|
- muted={m.muted}
|
|
|
- preload="auto"
|
|
|
- class="player"
|
|
|
- data-vid={m.id}
|
|
|
- src={m.content}
|
|
|
- loop={m.loop}
|
|
|
- autoplay={m.autoPlay}
|
|
|
- onLoadedmetadata={(e: Event) => {
|
|
|
- const videoEle = e.target as unknown as HTMLVideoElement
|
|
|
- m.currentTime = videoEle.currentTime
|
|
|
- m.duration = videoEle.duration
|
|
|
- m.videoEle = videoEle
|
|
|
- m.isprepare = true
|
|
|
- }}
|
|
|
- onTimeupdate={(e: Event) => {
|
|
|
- if (!m.isprepare) return
|
|
|
- const videoEle = e.target as unknown as HTMLVideoElement
|
|
|
- m.currentTime = videoEle.currentTime
|
|
|
- m.progress = Number((videoEle.currentTime / m.duration) * 100)
|
|
|
- }}
|
|
|
- onPlay={() => {
|
|
|
- // 播放
|
|
|
- m.paused = false
|
|
|
- console.log('播放')
|
|
|
- setModelOpen()
|
|
|
- // 第一次播放
|
|
|
- if (m.muted) {
|
|
|
- m.muted = false
|
|
|
- m.autoPlay = false
|
|
|
- }
|
|
|
- }}
|
|
|
- onPause={() => {
|
|
|
- //暂停
|
|
|
- clearTimeout(activeData.timer)
|
|
|
- m.paused = true
|
|
|
- }}
|
|
|
- onEnded={() => handleEnded(m)}
|
|
|
- >
|
|
|
- <source src={m.content} type="video/mp4" />
|
|
|
- </video>
|
|
|
- {m.muted && (
|
|
|
- <div class={styles.loadWrap}>
|
|
|
- <Vue3Lottie animationData={playLoadData}></Vue3Lottie>
|
|
|
+ <SwiperSlide class={styles.swipeItem}>
|
|
|
+ <div
|
|
|
+ // class={[styles.itemDiv]}
|
|
|
+
|
|
|
+ class={[styles.itemDiv]}
|
|
|
+ onClick={() => {
|
|
|
+ clearTimeout(activeData.timer)
|
|
|
+ if (Date.now() - activeData.nowTime < 300) {
|
|
|
+ handleDbClick(m)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ activeData.nowTime = Date.now()
|
|
|
+ activeData.timer = setTimeout(() => {
|
|
|
+ activeData.model = !activeData.model
|
|
|
+ setModelOpen()
|
|
|
+ }, 300)
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {m.type === 'VIDEO' ? (
|
|
|
+ <>
|
|
|
+ <video
|
|
|
+ class={['player']}
|
|
|
+ playsinline="false"
|
|
|
+ muted={m.muted}
|
|
|
+ preload="auto"
|
|
|
+ // class="player"
|
|
|
+ data-vid={m.id}
|
|
|
+ src={m.content}
|
|
|
+ loop={m.loop}
|
|
|
+ autoplay={m.autoPlay}
|
|
|
+ onLoadedmetadata={(e: Event) => {
|
|
|
+ const videoEle = e.target as unknown as HTMLVideoElement
|
|
|
+ m.currentTime = videoEle.currentTime
|
|
|
+ m.duration = videoEle.duration
|
|
|
+ m.videoEle = videoEle
|
|
|
+ m.isprepare = true
|
|
|
+ }}
|
|
|
+ onTimeupdate={(e: Event) => {
|
|
|
+ if (!m.isprepare) return
|
|
|
+ const videoEle = e.target as unknown as HTMLVideoElement
|
|
|
+ m.currentTime = videoEle.currentTime
|
|
|
+ m.progress = Number((videoEle.currentTime / m.duration) * 100)
|
|
|
+ }}
|
|
|
+ onPlay={() => {
|
|
|
+ // 播放
|
|
|
+ m.paused = false
|
|
|
+ console.log('播放')
|
|
|
+ setModelOpen()
|
|
|
+ // 第一次播放
|
|
|
+ if (m.muted) {
|
|
|
+ m.muted = false
|
|
|
+ m.autoPlay = false
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ onPause={() => {
|
|
|
+ //暂停
|
|
|
+ clearTimeout(activeData.timer)
|
|
|
+ m.paused = true
|
|
|
+ }}
|
|
|
+ onEnded={() => handleEnded(m)}
|
|
|
+ >
|
|
|
+ <source src={m.content} type="video/mp4" />
|
|
|
+ </video>
|
|
|
+ {m.muted && (
|
|
|
+ <div class={styles.loadWrap}>
|
|
|
+ <Vue3Lottie animationData={playLoadData}></Vue3Lottie>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ <div
|
|
|
+ style={{ transform: activeData.model ? '' : 'translateY(100%)' }}
|
|
|
+ class={styles.bottomFixedContainer}
|
|
|
+ onClick={(e: Event) => {
|
|
|
+ e.stopPropagation()
|
|
|
+ setModelOpen()
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <div style={{ opacity: m.isprepare ? '1' : '0' }}>
|
|
|
+ <div class={styles.time}>
|
|
|
+ <span>{getSecondRPM(m.currentTime)}</span>
|
|
|
+ <span>{getSecondRPM(m.duration)}</span>
|
|
|
</div>
|
|
|
- )}
|
|
|
- <div
|
|
|
- style={{ transform: activeData.model ? '' : 'translateY(100%)' }}
|
|
|
- class={styles.bottomFixedContainer}
|
|
|
- onClick={(e: Event) => {
|
|
|
- e.stopPropagation()
|
|
|
- setModelOpen()
|
|
|
- }}
|
|
|
- >
|
|
|
- <div style={{ opacity: m.isprepare ? '1' : '0' }}>
|
|
|
- <div class={styles.time}>
|
|
|
- <span>{getSecondRPM(m.currentTime)}</span>
|
|
|
- <span>{getSecondRPM(m.duration)}</span>
|
|
|
- </div>
|
|
|
- <div class={styles.slider}>
|
|
|
- <Slider
|
|
|
- onClick={() => setModelOpen()}
|
|
|
- buttonSize={16}
|
|
|
- step={1}
|
|
|
- modelValue={m.progress}
|
|
|
- onUpdate:modelValue={(val: any) => {
|
|
|
- console.log('val', val)
|
|
|
- m.progress = val
|
|
|
- handleChangeSlider(m)
|
|
|
- }}
|
|
|
- onDragStart={(e: Event) => {
|
|
|
- // 开始拖动,暂停播放
|
|
|
- console.log('开始拖动')
|
|
|
- // 如果拖动之前,视频是播放状态,拖动完毕后继续播放
|
|
|
- if (!m.paused) {
|
|
|
- m.isDrage = true
|
|
|
- }
|
|
|
- handlePaused(m)
|
|
|
- }}
|
|
|
- onDragEnd={(e: Event) => {
|
|
|
- console.log('结束拖动')
|
|
|
- if (m.isDrage) {
|
|
|
- m.isDrage = false
|
|
|
- handlePlay(m)
|
|
|
- }
|
|
|
- }}
|
|
|
- min={0}
|
|
|
- max={100}
|
|
|
- />
|
|
|
- </div>
|
|
|
+ <div class={styles.slider}>
|
|
|
+ <Slider
|
|
|
+ onClick={() => setModelOpen()}
|
|
|
+ buttonSize={16}
|
|
|
+ step={1}
|
|
|
+ modelValue={m.progress}
|
|
|
+ onUpdate:modelValue={(val: any) => {
|
|
|
+ console.log('val', val)
|
|
|
+ m.progress = val
|
|
|
+ handleChangeSlider(m)
|
|
|
+ }}
|
|
|
+ onDragStart={(e: Event) => {
|
|
|
+ // 开始拖动,暂停播放
|
|
|
+ console.log('开始拖动')
|
|
|
+ // 如果拖动之前,视频是播放状态,拖动完毕后继续播放
|
|
|
+ if (!m.paused) {
|
|
|
+ m.isDrage = true
|
|
|
+ }
|
|
|
+ handlePaused(m)
|
|
|
+ }}
|
|
|
+ onDragEnd={(e: Event) => {
|
|
|
+ console.log('结束拖动')
|
|
|
+ if (m.isDrage) {
|
|
|
+ m.isDrage = false
|
|
|
+ handlePlay(m)
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ min={0}
|
|
|
+ max={100}
|
|
|
+ />
|
|
|
</div>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class={styles.actions}>
|
|
|
- <div class={styles.actionBtn}>
|
|
|
- {m.isprepare ? (
|
|
|
- <>
|
|
|
- {m.paused ? (
|
|
|
- <img src={iconplay} onClick={(e: Event) => handlePlay(m)} />
|
|
|
- ) : (
|
|
|
- <img
|
|
|
- src={iconpause}
|
|
|
- onClick={(e: Event) => handlePaused(m)}
|
|
|
- />
|
|
|
- )}
|
|
|
- </>
|
|
|
- ) : (
|
|
|
- <Loading color="#fff" />
|
|
|
- )}
|
|
|
+ <div class={styles.actions}>
|
|
|
+ <div class={styles.actionBtn}>
|
|
|
+ {m.isprepare ? (
|
|
|
+ <>
|
|
|
+ {m.paused ? (
|
|
|
+ <img src={iconplay} onClick={(e: Event) => handlePlay(m)} />
|
|
|
+ ) : (
|
|
|
+ <img src={iconpause} onClick={(e: Event) => handlePaused(m)} />
|
|
|
+ )}
|
|
|
+ </>
|
|
|
+ ) : (
|
|
|
+ <Loading color="#fff" />
|
|
|
+ )}
|
|
|
|
|
|
- {m.loop ? (
|
|
|
- <img
|
|
|
- src={iconLoopActive}
|
|
|
- onClick={(e: Event) => (m.loop = false)}
|
|
|
- />
|
|
|
- ) : (
|
|
|
- <img src={iconLoop} onClick={(e: Event) => (m.loop = true)} />
|
|
|
- )}
|
|
|
- </div>
|
|
|
- <div>{m.name}</div>
|
|
|
+ {m.loop ? (
|
|
|
+ <img
|
|
|
+ src={iconLoopActive}
|
|
|
+ onClick={(e: Event) => (m.loop = false)}
|
|
|
+ />
|
|
|
+ ) : (
|
|
|
+ <img src={iconLoop} onClick={(e: Event) => (m.loop = true)} />
|
|
|
+ )}
|
|
|
</div>
|
|
|
+ <div>{m.name}</div>
|
|
|
</div>
|
|
|
- </>
|
|
|
- ) : m.type === 'IMG' ? (
|
|
|
- <img src={m.content} />
|
|
|
- ) : (
|
|
|
- <MusicScore
|
|
|
- data-vid={m.id}
|
|
|
- music={m}
|
|
|
- onSetIframe={(el: any) => {
|
|
|
- m.iframeRef = el
|
|
|
- }}
|
|
|
- />
|
|
|
- )}
|
|
|
- </div>
|
|
|
- </>
|
|
|
- </SwipeItem>
|
|
|
+ </div>
|
|
|
+ </>
|
|
|
+ ) : m.type === 'IMG' ? (
|
|
|
+ <img src={m.content} />
|
|
|
+ ) : (
|
|
|
+ <MusicScore
|
|
|
+ data-vid={m.id}
|
|
|
+ music={m}
|
|
|
+ onSetIframe={(el: any) => {
|
|
|
+ m.iframeRef = el
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ </SwiperSlide>
|
|
|
)
|
|
|
})}
|
|
|
- </Swipe>
|
|
|
-
|
|
|
+ </Swiper>
|
|
|
+ {/* <Swipe
|
|
|
+ style={{ height: '100%' }}
|
|
|
+ ref={swipeRef}
|
|
|
+ showIndicators={false}
|
|
|
+ loop={false}
|
|
|
+ duration={0}
|
|
|
+ // vertical
|
|
|
+ lazyRender={true}
|
|
|
+ touchable={false}
|
|
|
+ initialSwipe={popupData.firstIndex}
|
|
|
+ onChange={handleSwipeChange}
|
|
|
+ >
|
|
|
+
|
|
|
+ </Swipe> */}
|
|
|
<div
|
|
|
style={{ transform: activeData.model ? '' : 'translateY(-100%)' }}
|
|
|
id="coursePlayHeader"
|
|
|
@@ -648,7 +788,6 @@ export default defineComponent({
|
|
|
<PlayRecordTime ref={playRef} list={data.itemList} />
|
|
|
)}
|
|
|
</div>
|
|
|
-
|
|
|
<Transition name="right">
|
|
|
{activeData.model && (
|
|
|
<div class={styles.rightFixedBtns}>
|
|
|
@@ -680,7 +819,6 @@ export default defineComponent({
|
|
|
</div>
|
|
|
)}
|
|
|
</Transition>
|
|
|
-
|
|
|
<Transition name="left">
|
|
|
{activeData.model && (
|
|
|
<div class={styles.leftFixedBtns}>
|
|
|
@@ -694,7 +832,7 @@ export default defineComponent({
|
|
|
</div>
|
|
|
)}
|
|
|
{popupData.activeIndex != data.itemList.length - 1 && (
|
|
|
- <div class={styles.fullBtn} onClick={() => handlePreAndNext('down')}>
|
|
|
+ <div class={[styles.fullBtn]} onClick={() => handlePreAndNext('down')}>
|
|
|
<span style={{ textAlign: 'center' }}>下一个</span>
|
|
|
<img src={iconDown} />
|
|
|
</div>
|
|
|
@@ -702,7 +840,6 @@ export default defineComponent({
|
|
|
</div>
|
|
|
)}
|
|
|
</Transition>
|
|
|
-
|
|
|
<Popup
|
|
|
class={styles.popup}
|
|
|
overlayClass={styles.overlayClass}
|
