高级检索

杨磊

17 小时以前 87c87f989dcc3027407eccde48a6b35f0f999570

 src/views/chronology/floatingWindow.vue

@@ -2,30 +2,27 @@
  <div class="dialogBox">
    <div
      class="journalBox"
      v-if="info.type === 'journal' || info.type === 'book'"
      v-if="info.cmsItemType === 'journal' || info.cmsItemType === 'books'"
    >
      <div class="title">复方剂量配比多目标优化的ED-NM-MO三联法</div>
      <div :title="info.name" class="title">{{ info.name }}</div>
      <div class="subtitle">
        <div class="source">中国中医基础医学杂志</div>
        <div class="journalInformation">2005 3月 第40卷 第4期</div>
        <div class="source">{{ info.source }}</div>
        <div class="journalInformation">{{ info.IssueNumber }}</div>
      </div>
      <div class="contentBox">
        <p>王睿 中国科学院大连化学物理研究所</p>
        <p>王睿 中国科学院大连化学物理研究所</p>
        <p>王睿 中国科学院大连化学物理研究所</p>
        <p>王睿 中国科学院大连化学物理研究所</p>
        <p>王睿 中国科学院大连化学物理研究所</p>
        <span>{{ info.author }}</span>
        <span style="margin-left: 20px"> {{ info.authorsUnits }}</span>
        <span></span>
      </div>
      <div class="abstract">
        摘要：
        针对复方多药物(多部位多组分多成分)、多靶点多药效指标、非线性的特征,提出复方剂量配比优化的ED-NM-MO三联法,该方法具有良好的非线性拟合能力,可以适应复方的非线性特征,又可以实现同时针对多个药效指标的多目标优化,适合复方的多靶点特征,是一种适应复方特点的优化方法。
        <span v-html="info.abstract"></span>
      </div>
      <div class="keyword">
        关键词： 复方剂量配比优化; 复方数学特征; 多药效指标; 非线性;
        试验设计-非线性建模-多目标优化的三联法
        关键词： <span>{{ info.keyWords }}</span>
      </div>
    </div>
    <div class="imageBox" v-if="info.type === 'image'">
    <div class="imageBox" v-if="info.cmsItemType === 'image'">
      <div style="width: 350px; height: 200px; position: relative">
        <img
          class="autoImg"
@@ -45,46 +42,42 @@
        <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 class="videoBox" v-if="info.cmsItemType === 'video'">
      <video width="370" height="200" controls :src="info.fileLink"></video>

      <div>
        <div class="subtitle">
          <div class="source">中国中医基础医学杂志</div>
          <div class="source">{{ info.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 class="contentBox" style="text-align: left">
            <div class="audioContent" v-html="info.abstract"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="audioBox" v-if="info.type === 'audio'">
    <div class="audioBox" v-if="info.cmsItemType === 'audio'">
      <div style="text-align: center">
        <audio style="width: 100%" src="https://www.w3schools.com/html/horse.ogg" controls></audio>
        <audio
          style="width: 90%"
          :src="info.fileLink"
          controls
        ></audio>
      </div>
      <div>
        <div class="subtitle">
          <div class="source">中国中医基础医学杂志</div>
          <div class="source">{{ info.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 class="audioContent" v-html="info.abstract"></div>
        </div>
      </div>
    </div>

    <div class="btnBox">
      <div @click="toDetail" class="detailBtn">查看详情</div>
    </div>
  </div>
</template>
@@ -98,12 +91,24 @@
      default: () => {},
    },
  },

  data() {
    return {};
  },
  mounted() {
    console.log(this.info);
  },
  methods: {
    toDetail() {
      this.$router.push({ name: "details", query: { id: this.info.id } });
    },
  },
};
</script>

<style scoped>
.dialogBox {
  width: 400px;
  width: 524px;
  height: 100%;
  background-color: #fdf8f0;
  position: relative;
@@ -115,6 +120,10 @@
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 10px;
}

.subtitle {
@@ -137,6 +146,7 @@
.contentBox {
  margin-top: 10px;
  line-height: 18px;
  white-space: pre-line;
}
.imageBox {
  min-height: 300px;
@@ -179,4 +189,37 @@
  font-weight: 700;
  color: #8f7a5a;
}
.source {
  max-width: 300px;
  overflow: hidden;
  white-space: normal;
}
.btnBox {
  text-align: center;
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
.detailBtn {
  width: 100px;
  height: 30px;
  border-radius: 30px;
  color: #8f7a5a;
  line-height: 30px;
  cursor: pointer;
  border: 1px solid #8f7a5a;
}
.audioContent {
  white-space: pre-line;
  line-height: 18px;
  margin-top: 10px;
  max-height: 100px;
  overflow-y: auto;
  margin-top: 20px;
}
video {
      border-radius: 10px;
      border: 1px solid #dcdcdc;
      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    }
</style>