mirror of
https://github.com/algerkong/AlgerMusicPlayer.git
synced 2026-04-14 14:50:50 +08:00
41 lines
890 B
Vue
41 lines
890 B
Vue
<script lang="ts" setup>
|
|
import { setAnimationClass } from '@/utils';
|
|
|
|
const props = defineProps({
|
|
showPop: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
showClose: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
});
|
|
|
|
const musicFullClass = computed(() => {
|
|
if (props.showPop) {
|
|
return setAnimationClass('animate__fadeInUp');
|
|
}
|
|
return setAnimationClass('animate__fadeOutDown');
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div v-show="props.showPop" class="pop-page" :class="musicFullClass">
|
|
<i v-if="props.showClose" class="iconfont icon-icon_error close"></i>
|
|
<img src="http://code.myalger.top/2000*2000.jpg,f054f0,0f2255" />
|
|
<slot></slot>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.pop-page {
|
|
height: 800px;
|
|
@apply absolute top-4 left-0 w-full;
|
|
background-color: #000000f0;
|
|
.close {
|
|
@apply absolute top-4 right-4 cursor-pointer text-white text-3xl;
|
|
}
|
|
}
|
|
</style>
|