100 lines
2.0 KiB
Vue
100 lines
2.0 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>
|
||
|
|
<div class="chat-box">
|
||
|
|
<div class="left-message">
|
||
|
|
<div class="bubble left">{{ leftMsg }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="right-message">
|
||
|
|
<div class="bubble right">{{ rightMsg }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- <button class="close-btn" @click="close">关闭</button> -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { defineProps, defineEmits } from 'vue'
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
leftMsg: String,
|
||
|
|
rightMsg: String,
|
||
|
|
visible: Boolean
|
||
|
|
})
|
||
|
|
|
||
|
|
// const emit = defineEmits(['close'])
|
||
|
|
|
||
|
|
// const close = () => emit('close')
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.dialog-overlay {
|
||
|
|
/* position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0; */
|
||
|
|
/* background: rgba(0, 0, 0, 0.5); */
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
|
||
|
|
.left-message {
|
||
|
|
align-self: flex-start;
|
||
|
|
}
|
||
|
|
|
||
|
|
.right-message {
|
||
|
|
align-self: flex-end;
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bubble {
|
||
|
|
padding: 10px 14px;
|
||
|
|
border-radius: 18px;
|
||
|
|
max-width: 70%;
|
||
|
|
|
||
|
|
display: inline-block;
|
||
|
|
/* 👈 使气泡宽度自适应内容 */
|
||
|
|
padding: 10px 14px;
|
||
|
|
border-radius: 18px;
|
||
|
|
max-width: 70%;
|
||
|
|
word-break: break-word;
|
||
|
|
/* 防止英文单词太长撑爆 */
|
||
|
|
}
|
||
|
|
|
||
|
|
.bubble.left {
|
||
|
|
background-color: #ffffff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bubble.right {
|
||
|
|
background-color: rgb(0, 169, 214);
|
||
|
|
color: white;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.close-btn {
|
||
|
|
margin-top: 20px;
|
||
|
|
padding: 8px 12px;
|
||
|
|
background-color: #409EFF;
|
||
|
|
color: white;
|
||
|
|
border: none;
|
||
|
|
border-radius: 6px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
</style>
|