From 7d7744fe006714f6be0341d03d4de9b1e90d775d Mon Sep 17 00:00:00 2001
From: zhongshujie <2862698242@qq.com>
Date: 星期五, 23 五月 2025 22:45:09 +0800
Subject: [PATCH] 5.23 婴幼儿游戏活动实施（wb）
---
src/components/translateWord/index.vue | 88 +++++++++++++++++++++++++++++++++----------
1 files changed, 67 insertions(+), 21 deletions(-)
diff --git a/src/components/translateWord/index.vue b/src/components/translateWord/index.vue
index aed1475..ef48108 100644
--- a/src/components/translateWord/index.vue
+++ b/src/components/translateWord/index.vue
@@ -1,35 +1,81 @@
<template>
- <div class="translate-box" :style="{left: pageX + 'px', top: pageY + 'px'}">
- {{showWord}}
+ <div class="translate-box" :style="{ left: pageX + 'px', top: pageY + 'px' }">
+ <div class="translate-box-word">
+ <div> {{ showWord }}</div>
+ <div>{{ IPA }}</div>
+ </div>
+ <div class="translate-box-translation">
+ {{ translate }}
+ </div>
</div>
</template>
<script>
- export default {
- props: {
- showWord: {
- type: String,
- default: ""
- },
- pageX:{
- type: Number,
- default: 0
- },
- pageY:{
- type: Number,
- default: 0
- }
+export default {
+ props: {
+ showWord: {
+ type: String,
+ default: ""
},
- name: "TranslateWord",
- }
+ prototype: {
+ type: String,
+ default: ""
+ },
+ IPA: {
+ type: String,
+ default: ""
+ },
+ translate: {
+ type: String,
+ default: ""
+ },
+ pageX: {
+ type: Number,
+ default: 0
+ },
+ pageY: {
+ type: Number,
+ default: 0
+ }
+ },
+ name: "TranslateWord",
+}
</script>
<style lang="less" scoped>
.translate-box {
- width: 500px;
- height: 200px;
- background-color: red;
+ max-width: 20%;
+ text-wrap: wrap;
+ border: 2px solid #3bc6f2;
+ background-color: #fff;
position: absolute;
z-index: 9999;
+ box-sizing: border-box;
+
+ .translate-box-word {
+ display: flex;
+ padding: 2px 5px;
+ border-bottom: 1px solid #3bc6f2;
+
+ div:nth-child(1) {
+ color: #3bc6f2;
+ padding-right: 5px;
+ }
+
+ div:nth-child(2) {
+ overflow-wrap: break-word;
+ word-break: break-word;
+ /* 纭繚鏂囨湰鍙互鎹㈣ */
+ white-space: normal;
+ }
+ }
+
+ .translate-box-translation {
+ padding: 2px 5px;
+ overflow-wrap: break-word;
+ word-break: break-word;
+ /* 纭繚鏂囨湰鍙互鎹㈣ */
+ white-space: normal;
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.9.1