From 1695fcd442fe2cefb6d3b63869ad8a72ebd5210a Mon Sep 17 00:00:00 2001
From: zhongshujie <2862698242@qq.com>
Date: 星期五, 04 七月 2025 23:57:18 +0800
Subject: [PATCH] 测试图书 7.4
---
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