From bb584963c6abe77c5577cbcad3c9956b69444ae9 Mon Sep 17 00:00:00 2001
From: zhongshujie <2862698242@qq.com>
Date: 星期二, 01 七月 2025 17:17:30 +0800
Subject: [PATCH] 无人机样章

---
 src/components/translateWord/index.vue |   90 ++++++++++++++++++++++++++++++++++-----------
 1 files changed, 68 insertions(+), 22 deletions(-)

diff --git a/src/components/translateWord/index.vue b/src/components/translateWord/index.vue
index aed1475..569e7fd 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;
-  position: absolute;
+  max-width: 20%;
+  text-wrap: wrap;
+  border: 2px solid #3bc6f2;
+  background-color: #fff;
+  position: fixed;
   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