62 lines
1.1 KiB
Vue
62 lines
1.1 KiB
Vue
|
<script setup>
|
||
|
|
import IconButton from "./IconButton.vue";
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
show: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false,
|
||
|
|
},
|
||
|
|
content: {
|
||
|
|
type: String,
|
||
|
|
default: false,
|
||
|
|
},
|
||
|
|
onClose: {
|
||
|
|
type: Function,
|
||
|
|
default: () => {},
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<view class="container" :style="{ display: show ? 'flex' : 'none' }">
|
||
|
|
<view class="scale-in">
|
||
|
|
<image src="../static/coach-comment.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.6);
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.container > view:first-child {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
position: relative;
|
||
|
|
width: 70vw;
|
||
|
|
color: #fff;
|
||
|
|
margin-bottom: 25vw;
|
||
|
|
}
|
||
|
|
.container > view:first-child > image {
|
||
|
|
position: absolute;
|
||
|
|
width: 80vw;
|
||
|
|
left: -5vw;
|
||
|
|
bottom: -20vw;
|
||
|
|
z-index: -1;
|
||
|
|
}
|
||
|
|
</style>
|