杨磊
3 天以前 a5abb70a428f59894fc9ee4330f0033d6fe93a8b
src/views/achievements/details.vue
@@ -1,73 +1,50 @@
<template>
  <div class="page">
    <div class="page-header">
      <p>王永炎院士学术成果</p>
      <p><span>王永炎院士学术成果</span></p>
    </div>
    <div class="page-main-father">
      <ul class="page-main">
        <li class="page-main-name">
          <p>
            <el-button icon="el-icon-arrow-left" @click="goBack()"
              >返回</el-button
            >
            <el-button icon="el-icon-arrow-left" @click="goBack()">返回</el-button>
          </p>
          <p>{{ detailsList.name }}</p>
        </li>
        <li class="page-main-time">
          <p>
            <span>{{ detailsList.sources }}</span>
            <span>{{ detailsList.time }}</span>
            <span>{{ detailsList.source }}</span>
            <span>{{ detailsList.year }}</span>
          </p>
        </li>
        <li class="page-main-title">
          <p>
            <span
              v-for="(item, index) in detailsList.characterList"
              :key="index"
              >{{ item.name }}</span
            >
            <span v-for="(item, index) in detailsList.characterList" :key="index">{{ item.name }}</span>
          </p>
          <p><span>摘要:</span>{{ detailsList.title }}</p>
          <p>
            <span>摘要:</span>
            <span class="page-main-abstract" v-html="detailsList.abstract"></span>
          </p>
          <p>
            <span>关键词:</span>
            <span
              class="page-main-keyword"
              v-for="(item, index) in detailsList.keyword"
              :key="index"
              >{{ item.name }}</span
            >
            <span class="page-main-keyword" v-for="(item, index) in detailsList.keyWords" :key="index">{{ item
            }}</span>
          </p>
          <p v-if="!isDisplay">
            <el-button @click="isDisplay = !isDisplay">查看全文</el-button>
          </p>
          <p class="page-main-video" v-if="isDisplay">
            <video
              :src="detailsList.videoUrl"
              controls
              autoplay
              class="video"
              width="70%"
            ></video>
            <video :src="detailsList.videoUrl" controls autoplay class="video" width="70%"></video>
          </p>
          <p class="page-main-audio" v-if="isDisplay">
            <audio
              :src="detailsList.videoUrl"
              controls
              autoplay
              class="video"
              width="100%"
            ></audio>
            <audio :src="detailsList.videoUrl" controls autoplay class="video" width="100%"></audio>
          </p>
        </li>
        <li class="page-main-literature">
          <p class="literature-header">相关文献</p>
          <div class="content-right">
            <!-- 结果展示 -->
            <ul
              class="right-main"
              v-for="(item, index) in resultList"
              :key="index"
            >
            <ul class="right-main" v-for="(item, index) in resultList" :key="index">
              <li class="main-name">
                <p>{{ item.name }}</p>
                <p>
@@ -88,11 +65,7 @@
              </li>
              <li class="main-keyword">
                <span>关键词:</span>
                <span
                  class="keyWord"
                  v-for="(citem, cindex) in item.keyword"
                  :key="cindex"
                >
                <span class="keyWord" v-for="(citem, cindex) in item.keyword" :key="cindex">
                  {{ citem.name }}
                </span>
              </li>
@@ -266,8 +239,12 @@
      ],
    };
  },
  mounted() {
    console.log(this.$route.params.key, "key001");
    this.detailsList = this.$route.params.key;
  },
  methods: {
    goPage(key) {},
    goPage(key) { },
    goBack() {
      this.$router.go(-1);
@@ -284,9 +261,12 @@
  background-color: #e9e1d4;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.page-header {
  padding: 8px 0;
  height: 9.4%;
  width: 100%;
  text-align: left;
@@ -295,18 +275,25 @@
  position: sticky;
  top: 0;
  z-index: 100;
  p {
    padding: 1.6% 0 1.55% 0;
    height: 100%;
    font-family: Alimama DongFangDaKai;
    font-size: 30px;
    text-indent: 1em;
    border-bottom: 1px solid #937950;
    display: flex;
    align-items: center;
  }
}
.page-main-father{
  height: calc(100% - 9.4%);
.page-main-father {
  flex: 1;
  width: 100%;
  height: 100%;
  overflow: auto;
  padding-top: 2%;
  padding-bottom: 2%;
}
@@ -381,6 +368,14 @@
        background-color: #6f5a3a;
        color: #fffdf8;
      }
    }
    .page-main-abstract {
      font-family: Source Han Sans !important;
      font-size: 14px !important;
      font-weight: 350 !important;
      line-height: 26px !important;
      color: #333333 !important;
    }
    p:nth-child(1) {
@@ -464,8 +459,7 @@
    display: flex;
    justify-content: center;
    audio {
    }
    audio {}
  }
  .page-main-literature {