Merge branch 'master' of http://182.92.203.7:2001/r/wyyDatabase

杨磊

2025-04-08 fc43cbb086dcd7a5e8976d67d3e6e0f29f9e26ad

 src/views/chronology/floatingWindow.vue

@@ -1,6 +1,9 @@
<template>
  <div class="dialogBox">
    <div class="journalBox">
    <div
      class="journalBox"
      v-if="info.type === 'journal' || info.type === 'book'"
    >
      <div class="title">复方剂量配比多目标优化的ED-NM-MO三联法</div>
      <div class="subtitle">
        <div class="source">中国中医基础医学杂志</div>
@@ -22,10 +25,67 @@
        试验设计-非线性建模-多目标优化的三联法
      </div>
    </div>
    <div class="imageBox"></div>
    <div class="BookBox"></div>
    <div class="videoBox"></div>
    <div class="audioBox"></div>
    <div class="imageBox" v-if="info.type === 'image'">
      <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>
    <div class="videoBox" v-if="info.type === 'video'">
      <video
        width="370"
        height="240"
        controls
        src="https://www.w3schools.com/html/mov_bbb.mp4"
      ></video>

      <div>
        <div class="subtitle">
          <div class="source">中国中医基础医学杂志</div>
          <div class="journalInformation">2005 3月 第40卷 第4期</div>
        </div>
        <div class="contentBox" style="text-align: left">
          <p>王睿 中国科学院大连化学物理研究所</p>
          <p>王睿 中国科学院大连化学物理研究所</p>
          <p>王睿 中国科学院大连化学物理研究所</p>
          <p>王睿 中国科学院大连化学物理研究所</p>
          <p>王睿 中国科学院大连化学物理研究所</p>
        </div>
      </div>
    </div>
    <div class="audioBox" v-if="info.type === '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>
          <div class="journalInformation">2005 3月 第40卷 第4期</div>
        </div>
        <div class="contentBox" style="text-align: left">
          <p>王睿 中国科学院大连化学物理研究所</p>
          <p>王睿 中国科学院大连化学物理研究所</p>
          <p>王睿 中国科学院大连化学物理研究所</p>
          <p>王睿 中国科学院大连化学物理研究所</p>
          <p>王睿 中国科学院大连化学物理研究所</p>
        </div>
      </div>
    </div>
  </div>
</template>

@@ -78,4 +138,45 @@
  margin-top: 10px;
  line-height: 18px;
}
.imageBox {
  min-height: 300px;
  padding: 10px;
}

.videoBox {
  min-height: 240;
  text-align: center;
}
.videoTitle {
  background: #ffffff;
  box-sizing: border-box;
  border: 1px solid #dcdcdc;
  box-shadow: 0px 0px 10px 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  padding: 10px;
  width: 100%;
  height: 100%;
}
.autoImg {
  width: 100%;
  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>