You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
94 lines
1.9 KiB
94 lines
1.9 KiB
<template>
|
|
<div class="Comment" :class="props.item.side">
|
|
<div class="Avatar"> <v-icon >fas fa-user</v-icon> </div>
|
|
<div class="Bubble">
|
|
<div class="Author"> {{ props.item.user_name }} <span class="Date"> {{ props.item.date }} </span> </div>
|
|
{{ props.item.text }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
|
export default {
|
|
props: {
|
|
props: { default: "" },
|
|
},
|
|
data () {
|
|
return {
|
|
}
|
|
}
|
|
|
|
};
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.Comment {
|
|
width: 100%;
|
|
padding: 10px;
|
|
display: flex;
|
|
}
|
|
.Comment .Avatar {
|
|
padding: 10px;
|
|
}
|
|
.Comment .Avatar .v-icon {
|
|
font-size: 32px;
|
|
}
|
|
.Comment .Bubble {
|
|
padding: 20px 40px;
|
|
height: auto;
|
|
width: 80%;
|
|
color: #000000;
|
|
border-radius: 25px;
|
|
direction: rtl;
|
|
text-align: justify;
|
|
}
|
|
.Comment.Left {
|
|
direction: ltr;
|
|
align-items: flex-end;
|
|
}
|
|
.Comment.Left .Bubble {
|
|
border-bottom-left-radius:0px;
|
|
}
|
|
.Comment.Right .Bubble {
|
|
border-top-right-radius:0px;
|
|
}
|
|
.Bubble .Author {
|
|
font-size: 22px;
|
|
}
|
|
.Bubble .Author .Date {
|
|
font-size: 14px;
|
|
color: #8b8b8b;
|
|
float: left;
|
|
|
|
}
|
|
|
|
.Comment.Red .Avatar .v-icon {
|
|
color: #ee3552;
|
|
}
|
|
.Comment.Red .Bubble {
|
|
// float: left;
|
|
border: 2px solid #ee3552;
|
|
background-color: rgba(238, 53, 82, 0.05);
|
|
}
|
|
.Comment.Cyan .Avatar .v-icon {
|
|
color: #32c5d2;
|
|
}
|
|
.Comment.Cyan .Bubble {
|
|
// float: right;
|
|
border: 2px solid #32c5d2;
|
|
background-color: rgba(50, 197, 210, 0.05);
|
|
}
|
|
.Comment.Gray .Avatar .v-icon {
|
|
color: #d0d0d0;
|
|
}
|
|
.Comment.Gray .Bubble {
|
|
// float: right;
|
|
border: 2px solid #d0d0d0;
|
|
background-color: rgba(241, 241, 241, 0.5);
|
|
border-top-right-radius:0px;
|
|
}
|
|
|
|
</style>
|
|
|