79 lines
1.4 KiB
Vue
79 lines
1.4 KiB
Vue
<script setup>
|
|
import IconButton from "./IconButton.vue";
|
|
|
|
const props = defineProps({
|
|
show: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
onClose: {
|
|
type: Function,
|
|
default: () => {},
|
|
},
|
|
mode: {
|
|
type: String,
|
|
default: "normal",
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<view class="container" :style="{ display: show ? 'flex' : 'none' }">
|
|
<view class="scale-in">
|
|
<image
|
|
v-if="mode === 'normal'"
|
|
src="../static/coach-comment.png"
|
|
mode="widthFix"
|
|
/>
|
|
<image
|
|
v-if="mode === 'square'"
|
|
src="../static/prompt-bg-square.png"
|
|
mode="widthFix"
|
|
/>
|
|
<image
|
|
v-if="mode === 'small'"
|
|
src="../static/finish-frame.png"
|
|
mode="widthFix"
|
|
/>
|
|
<slot />
|
|
</view>
|
|
<IconButton
|
|
src="../static/close-gold-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);
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 10;
|
|
}
|
|
.container > view:first-child {
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
width: 70vw;
|
|
min-height: 22vh;
|
|
margin-bottom: 20px;
|
|
color: #fff;
|
|
}
|
|
.container > view:first-child > image {
|
|
position: absolute;
|
|
width: 80vw;
|
|
left: -7%;
|
|
bottom: -20vw;
|
|
z-index: -1;
|
|
transform: translateY(-75px);
|
|
}
|
|
</style>
|