generated from VLADIMIR/template_frontend
66 lines
1.0 KiB
Vue
66 lines
1.0 KiB
Vue
<script setup lang="ts">
|
|
/* код */
|
|
</script>
|
|
|
|
<template>
|
|
<div class="main">
|
|
<div class="message-cloud-3"></div>
|
|
<div class="message-cloud-2"></div>
|
|
<div class="message-cloud">
|
|
<slot></slot>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.main {
|
|
position: relative;
|
|
}
|
|
|
|
.message-cloud, .message-cloud-2, .message-cloud-3 {
|
|
background-color: bisque;
|
|
}
|
|
|
|
.message-cloud {
|
|
margin: 15px 0;
|
|
padding: 16px;
|
|
font-family: main;
|
|
color: black;
|
|
line-height: 20px;
|
|
font-size: 18px;
|
|
font-weight: 900;
|
|
position: relative;
|
|
}
|
|
|
|
.message-cloud,
|
|
.message-cloud-2,
|
|
.message-cloud-3 {
|
|
border-radius: 5px;
|
|
background-image: url("@/assets/images/paper.jpg");
|
|
background-size: cover;
|
|
display: flow-root;
|
|
box-shadow: 0 0 5px black;
|
|
}
|
|
|
|
.message-cloud-2,
|
|
.message-cloud-3 {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.message-cloud-2 {
|
|
transform: rotate(-3deg);
|
|
filter: brightness(50%);
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.message-cloud-3 {
|
|
transform: rotate(2deg);
|
|
filter: brightness(80%);
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
</style>
|