| | |
| | | <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> |
| | |
| | | </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> |
| | |
| | | ], |
| | | }; |
| | | }, |
| | | mounted() { |
| | | console.log(this.$route.params.key, "key001"); |
| | | this.detailsList = this.$route.params.key; |
| | | }, |
| | | methods: { |
| | | goPage(key) {}, |
| | | goPage(key) { }, |
| | | |
| | | goBack() { |
| | | this.$router.go(-1); |
| | |
| | | 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; |
| | |
| | | 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%; |
| | | } |
| | | |
| | | |
| | |
| | | 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) { |
| | |
| | | display: flex; |
| | | justify-content: center; |
| | | |
| | | audio { |
| | | } |
| | | audio {} |
| | | } |
| | | |
| | | .page-main-literature { |