2022-01-31 14:21:50 +08:00
|
|
|
<template lang="pug">
|
|
|
|
|
.dialogue-list
|
|
|
|
|
.post(v-for="item in data", :key="item._id")
|
|
|
|
|
.left
|
2022-07-31 06:08:01 +08:00
|
|
|
div.avatar(v-if="item.user.name === '游客'")
|
|
|
|
|
img.avatar(v-else :src="item.user.avatar")
|
2022-01-31 14:21:50 +08:00
|
|
|
.right
|
2022-02-07 01:46:11 +08:00
|
|
|
.name {{ item.user.name }}
|
2022-01-31 14:21:50 +08:00
|
|
|
.message {{ item.data }}
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
export default {
|
|
|
|
|
props: ["data"],
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="sass" scoped>
|
|
|
|
|
.dialogue-list
|
|
|
|
|
.post
|
|
|
|
|
display: flex
|
|
|
|
|
margin: 1rem 0
|
|
|
|
|
.left
|
|
|
|
|
justify-content: center
|
|
|
|
|
align-items: center
|
|
|
|
|
.avatar
|
|
|
|
|
width: 2rem
|
|
|
|
|
height: 2rem
|
2022-07-31 06:08:01 +08:00
|
|
|
background: #dddddd
|
2022-01-31 14:21:50 +08:00
|
|
|
border-radius: 50%
|
|
|
|
|
margin: .5rem auto
|
|
|
|
|
.right
|
|
|
|
|
padding: 0 2rem
|
|
|
|
|
.name
|
|
|
|
|
color: #999
|
|
|
|
|
font-size: .8rem
|
|
|
|
|
.message
|
|
|
|
|
background: #ffffff
|
|
|
|
|
padding: 1rem
|
|
|
|
|
border-radius: 1rem
|
|
|
|
|
position: relative
|
|
|
|
|
|
|
|
|
|
&::before
|
|
|
|
|
content: ""
|
|
|
|
|
position: absolute
|
|
|
|
|
top: 10px
|
|
|
|
|
left: -1rem
|
|
|
|
|
border-top: 20px solid #ffffff
|
|
|
|
|
border-left: 1rem solid transparent
|
|
|
|
|
border-right: 1rem solid transparent
|
|
|
|
|
</style>
|
