88 lines
1.8 KiB
Vue
88 lines
1.8 KiB
Vue
<template>
|
|
<!-- 群聊弹窗 -->
|
|
<view v-if="isShow" class="popup-mask" @click.stop>
|
|
<view class="popup-content">
|
|
<view class="pop-ball">
|
|
<image show-menu-by-longpress
|
|
src="https://image.zfunbox.cn/topic/20250418/0b40de65d2fc4801517569193bfd4cac.png" mode="aspectFit"
|
|
style="width:80vw;height:468px;position:relative;top:-14%;left:0;">
|
|
</image>
|
|
</view>
|
|
<view class="pop-ball-close" @click="close">
|
|
<view style="width: 48rpx;height: 48rpx;border-radius: 50%;opacity: 0.5;">
|
|
<image show-menu-by-longpress src="/static/ic_close.png" style="width: 48rpx;height: 48rpx;" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
|
|
const isShow = ref(false);
|
|
|
|
const open = () => {
|
|
isShow.value = true;
|
|
};
|
|
|
|
const close = () => {
|
|
isShow.value = false;
|
|
};
|
|
|
|
defineExpose({
|
|
open,
|
|
close
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.popup-mask {
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: rgba(0,0,0,0.8);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 999;
|
|
}
|
|
|
|
.popup-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
animation: popup-in 0.2s ease-out;
|
|
}
|
|
|
|
@keyframes popup-in {
|
|
from {
|
|
transform: scale(0.8);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.pop-ball {
|
|
width: 85vw;
|
|
position: relative;
|
|
border-radius: 25rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.pop-ball-close {
|
|
margin-top: 20rpx;
|
|
width: 100%;
|
|
height: 50rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
</style> |