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

zhongshujie

2025-05-19 f489c412f7b0f7bf32d201bdbc6317c9c283e693

 src/components/translateWord/index.vue

@@ -1,6 +1,12 @@
<template>
  <div class="translate-box" :style="{left: pageX + 'px', top: pageY + 'px'}">
    {{showWord}}
    <div class="translate-box-word">
      <div> {{ showWord }}</div>
      <div>111111</div>
    </div>
    <div class="translate-box-translation">
      111111111111111
    </div>
  </div>
</template>

@@ -26,10 +32,38 @@

<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>