68 lines
1.2 KiB
Vue
68 lines
1.2 KiB
Vue
<script setup>
|
|
import IconButton from "./IconButton.vue";
|
|
|
|
const props = defineProps({
|
|
show: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
onClose: {
|
|
type: Function,
|
|
default: null,
|
|
},
|
|
height: {
|
|
type: Number,
|
|
default: 100,
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<view class="container" :style="{ display: show ? 'flex' : 'none' }">
|
|
<view class="scale-in">
|
|
<image src="../static/point-book-tip-bg.png" mode="widthFix" />
|
|
<slot />
|
|
</view>
|
|
<IconButton
|
|
v-if="!!onClose"
|
|
src="../static/close-white-outline.png"
|
|
:width="30"
|
|
:onClick="onClose"
|
|
/>
|
|
</view>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.container {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
background-color: rgba(0, 0, 0, 0.8);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 999;
|
|
}
|
|
.container > view:first-child {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
width: 75vw;
|
|
margin-bottom: 15px;
|
|
border-radius: 30rpx;
|
|
background: #fff;
|
|
}
|
|
.container > view:first-child > image {
|
|
position: absolute;
|
|
width: 100%;
|
|
z-index: -1;
|
|
top: 0;
|
|
border-top-left-radius: 30rpx;
|
|
border-top-right-radius: 30rpx;
|
|
}
|
|
</style>
|