图表浮窗调整

杨磊

2025-04-08 66a09a6758d243bf8459520895da0e2a8619f008

 src/views/chronology/floatingWindow.vue

@@ -26,12 +26,23 @@
      </div>
    </div>
    <div class="imageBox" v-if="info.type === 'image'">
      <div style="width: 500px; height: 300px">
      <div style="width: 350px; height: 200px; position: relative">
        <img
          class="autoImg"
          src="@/assets/images/chronology/photoTest.png"
          alt=""
        />
      </div>
      <div
        style="
          display: flex;
          width: 100%;
          justify-content: space-between;
          margin-top: 50px;
        "
      >
        <div class="ARROWS">←</div>
        <div class="ARROWS">→</div>
      </div>
    </div>
    <div class="BookBox" v-if="info.type === 'book'">book</div>
@@ -58,8 +69,9 @@
      </div>
    </div>
    <div class="audioBox" v-if="info.type === 'audio'">
      <audio src="https://www.w3schools.com/html/horse.ogg" controls></audio>

      <div style="text-align: center">
        <audio style="width: 100%" src="https://www.w3schools.com/html/horse.ogg" controls></audio>
      </div>
      <div>
        <div class="subtitle">
          <div class="source">中国中医基础医学杂志</div>
@@ -153,4 +165,18 @@
  height: 100%;
  object-fit: cover;
}
.ARROWS {
  font-size: 24px;
  line-height: 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #8f7a5a;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-weight: 700;
  color: #8f7a5a;
}
</style>