会议优化以及旅游社英语组件

zhongshujie

2025-05-19 f489c412f7b0f7bf32d201bdbc6317c9c283e693

 src/components/translateWord/index.vue

@@ -1,35 +1,69 @@
<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>111111</div>
    </div>
    <div class="translate-box-translation">
      111111111111111
    </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",
  }
    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>