zhongshujie
1 天以前 5c4837cdef21239ab1f192aade5e08b2cb75fcc0
src/views/chronology/floatingWindow.vue
@@ -4,7 +4,7 @@
      class="journalBox"
      v-if="info.cmsItemType === 'journal' || info.cmsItemType === 'books'"
    >
      <div class="title">{{ info.name }}</div>
      <div :title="info.name" class="title">{{ info.name }}</div>
      <div class="subtitle">
        <div class="source">{{ info.source }}</div>
        <div class="journalInformation">{{ info.IssueNumber }}</div>
@@ -43,31 +43,30 @@
      </div>
    </div>
    <div class="videoBox" v-if="info.cmsItemType === 'video'">
      <video width="370" height="200" controls :src="info.requestCtx"></video>
      <video width="370" height="200" controls :src="info.fileLink"></video>
      <div>
        <div class="subtitle">
          <div class="source">{{ info.source }}</div>
          <div class="journalInformation">2005 3月 第40卷 第4期</div>
          <div :title="info.contributor">贡献者:{{ info.contributor + "" }}</div>
          <div class="journalInformation">{{ info.endDate }}</div>
        </div>
        <div class="contentBox" style="text-align: left">
          <div class="contentBox" style="text-align: left">
          <div class="audioContent" v-html="info.abstract"></div>
        </div></div>
            <div class="audioContent" v-html="info.abstract"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="audioBox" v-if="info.cmsItemType === 'audio'">
      <div style="text-align: center">
        <audio
          style="width: 90%"
          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">{{ info.source }}</div>
          <div class="journalInformation">2005 3月 第40卷 第4期</div>
          <div :title="info.contributor" class="source">{{ info.source }}</div>
          <div :title="info.contributor">贡献者:{{ info.contributor + "" }}</div>
          <div :title="info.contributor" class="journalInformation">{{ info.endDate }}</div>
        </div>
        <div class="contentBox" style="text-align: left">
          <div class="audioContent" v-html="info.abstract"></div>
@@ -76,7 +75,7 @@
    </div>
    <div class="btnBox">
      <div class="detailBtn">查看详情</div>
      <div @click="toDetail" class="detailBtn">查看详情</div>
    </div>
  </div>
</template>
@@ -97,6 +96,11 @@
  mounted() {
    console.log(this.info);
  },
  methods: {
    toDetail() {
      this.$router.push({ name: "details", query: { id: this.info.id } });
    },
  },
};
</script>
@@ -114,11 +118,21 @@
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 10px;
}
.subtitle {
  display: flex;
  justify-content: space-between;
}
.subtitle > div {
  max-width: 32%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.subtitle {
  margin-top: 20px;
@@ -136,6 +150,7 @@
.contentBox {
  margin-top: 10px;
  line-height: 18px;
  white-space: pre-line;
}
.imageBox {
  min-height: 300px;
@@ -198,7 +213,7 @@
  cursor: pointer;
  border: 1px solid #8f7a5a;
}
.audioContent{
.audioContent {
  white-space: pre-line;
  line-height: 18px;
  margin-top: 10px;
@@ -206,4 +221,9 @@
  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>