93 lines
1.8 KiB
Vue
93 lines
1.8 KiB
Vue
<template>
|
|
<div v-if="visible" class="dialog-overlay" @click.self="close">
|
|
<div class="dialog-content">
|
|
<h3 class="text-lg font-bold mb-4">最近一条的消息翻译</h3>
|
|
<el-scrollbar class="chat-box">
|
|
<div v-for="(msg, index) in messages" :key="index"
|
|
:class="msg.position === 'left' ? 'left-message' : 'right-message'">
|
|
<div :class="['bubble', msg.position]">{{ msg.text }}</div>
|
|
</div>
|
|
</el-scrollbar>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineProps, defineEmits } from 'vue'
|
|
|
|
const props = defineProps({
|
|
visible: Boolean,
|
|
messages: {
|
|
type: Array,
|
|
required: true,
|
|
default: () => [],
|
|
},
|
|
})
|
|
|
|
const emit = defineEmits(['close'])
|
|
|
|
const close = () => emit('close')
|
|
</script>
|
|
|
|
<style scoped>
|
|
.dialog-overlay {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.dialog-content {
|
|
background: rgb(246, 246, 246);
|
|
padding: 0px 20px 20px 20px;
|
|
border-radius: 12px;
|
|
width: 300px;
|
|
}
|
|
|
|
.chat-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
height: 80vh;
|
|
}
|
|
|
|
.left-message {
|
|
align-self: flex-start;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.right-message {
|
|
align-self: flex-end;
|
|
text-align: right;
|
|
margin-bottom: 20px;
|
|
|
|
}
|
|
|
|
.bubble {
|
|
padding: 10px 14px;
|
|
border-radius: 18px;
|
|
max-width: 70%;
|
|
display: inline-block;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.bubble.left {
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.bubble.right {
|
|
background-color: rgb(0, 169, 214);
|
|
color: white;
|
|
text-align: left;
|
|
/* ✅ 关键：强制文字左对齐 */
|
|
}
|
|
|
|
.close-btn {
|
|
margin-top: 20px;
|
|
padding: 8px 12px;
|
|
background-color: #409EFF;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
}
|
|
</style> |