78 lines
2.8 KiB
Vue
78 lines
2.8 KiB
Vue
<script setup lang="ts"></script>
|
||
|
||
<template>
|
||
<div class="d-flex mb-4 ga-2">
|
||
<v-avatar size="36" class="" color="blue-lighten-4">
|
||
<span class="text-blue-darken-2">А</span>
|
||
</v-avatar>
|
||
<div class="message-wrapper">
|
||
<div class="d-flex align-center ga-2">
|
||
<span class="text-subtitle-2 font-weight-medium">Анна</span>
|
||
<span class="text-caption text-disabled">10:30</span>
|
||
</div>
|
||
<v-card class="pa-4" rounded="lg" flat>
|
||
<span>Привет! Как дела? Что нового?</span>
|
||
</v-card>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="d-flex mb-4 ga-2">
|
||
<v-avatar size="36" color="deep-purple-lighten-4">
|
||
<span class="text-deep-purple-darken-2">М</span>
|
||
</v-avatar>
|
||
<div class="message-wrapper">
|
||
<div class="d-flex align-center ga-2">
|
||
<span class="text-subtitle-2 font-weight-medium">Максим</span>
|
||
<span class="text-caption text-disabled">10:30</span>
|
||
</div>
|
||
<v-card class="pa-4" rounded="lg" flat>
|
||
<span>
|
||
Всем привет! Смотрели новый фильм? Там такие спецэффекты, просто космос! Очень советую
|
||
сходить в кино.
|
||
</span>
|
||
</v-card>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="d-flex mb-4 ga-2 flex-row-reverse">
|
||
<v-avatar size="36" color="primary">
|
||
<span class="text-white">Я</span>
|
||
</v-avatar>
|
||
<div style="align-items: flex-end">
|
||
<div class="d-flex align-center flex-row-reverse ga-2">
|
||
<span class="text-caption text-disabled">10:35</span>
|
||
<span class="text-subtitle-2 font-weight-medium">Вы</span>
|
||
</div>
|
||
<v-card class="pa-4" rounded="lg" flat color="primary">
|
||
<span class="text-white"
|
||
>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
|
||
has been the industry's standard dummy text ever since the 1500s, when an unknown printer
|
||
took a galley of type and scrambled it to make a type specimen book.</span
|
||
>
|
||
</v-card>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="d-flex mb-4 ga-2">
|
||
<v-avatar size="36" color="orange-lighten-4">
|
||
<span class="text-orange-darken-2">К</span>
|
||
</v-avatar>
|
||
<div class="message-wrapper">
|
||
<div class="d-flex align-center ga-2">
|
||
<span class="text-subtitle-2 font-weight-medium">Катя</span>
|
||
<span class="text-caption text-disabled">10:40</span>
|
||
</div>
|
||
<v-card class="message-bubble friend-message pa-4" rounded="lg" flat>
|
||
<span>Смотрите какой милый котик</span>
|
||
<v-img
|
||
src="https://cdn.vuetifyjs.com/images/cards/kitchen.png"
|
||
max-width="200"
|
||
class="mt-2 rounded"
|
||
></v-img>
|
||
</v-card>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped></style>
|