44 lines
923 B
Vue
44 lines
923 B
Vue
<template>
|
|
<div class="list-wrapper flex flex-col">
|
|
<div
|
|
class="list-item flex align-center"
|
|
v-for="item in props.messageList"
|
|
:key="item.id"
|
|
:class="item.role"
|
|
>
|
|
<div class="list-item-content-text">{{ item.content }}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
messageList: Array<any>
|
|
}>()
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.list-wrapper {
|
|
row-gap: 1.6rem;
|
|
.list-item {
|
|
min-height: 3.86rem;
|
|
width: fit-content;
|
|
&.user {
|
|
width: 26.2rem;
|
|
align-self: end;
|
|
}
|
|
font-size: 1.4rem;
|
|
font-family: 'Regular';
|
|
color: #333;
|
|
padding: 1.1rem 1.7rem;
|
|
background: linear-gradient(#fffcf4, #fffcf4) padding-box,
|
|
linear-gradient(
|
|
119.03deg,
|
|
rgba(233, 121, 60, 0.3) 1.61%,
|
|
rgba(255, 207, 144, 0.3) 101.01%
|
|
)
|
|
border-box;
|
|
border: 1px solid transparent;
|
|
border-radius: 3.18rem;
|
|
}
|
|
}
|
|
</style>
|