<template>
|
<div class="page">
|
<div class="page-header">
|
<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>
|
</p>
|
<p>{{ details.name }}</p>
|
</li>
|
<li class="page-main-time">
|
<p>
|
<span>{{ details.source }}</span>
|
<span>{{ details.year }}</span>
|
</p>
|
</li>
|
<li class="page-main-title">
|
<p>
|
<span v-for="(item, index) in details.characterList" :key="index">{{ item.name }}</span>
|
</p>
|
<p>
|
<span>摘要：</span>
|
<span class="page-main-abstract" v-html="details.abstract"></span>
|
</p>
|
<p>
|
<span>关键词：</span>
|
<span class="page-main-keyword" v-for="(item, index) in details.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="details.videoUrl" controls autoplay class="video" width="70%"></video>
|
</p>
|
<p class="page-main-audio" v-if="isDisplay">
|
<audio :src="details.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">
|
<li class="main-name">
|
<p>{{ item.name }}</p>
|
<p>
|
<el-button @click="goPage(item)">详情</el-button>
|
<el-button>AI智能阅读</el-button>
|
</p>
|
</li>
|
<li class="main-sources">
|
<span>{{ item.type }}</span>
|
<span>{{ item.sources }}</span>
|
<span>{{ item.time }}</span>
|
</li>
|
<li class="main-author">
|
{{ item.author }}
|
</li>
|
<li class="main-title" :title="item.title">
|
<span>摘要: </span>{{ item.title }}
|
</li>
|
<li class="main-keyword">
|
<span>关键词：</span>
|
<span class="keyWord" v-for="(citem, cindex) in item.keyword" :key="cindex">
|
{{ citem.name }}
|
</span>
|
</li>
|
</ul>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
isDisplay: false,
|
details: {
|
name: "中药闸柜的历史传承与新时代发展思考",
|
sources: "北京中医药大学学报",
|
time: "2025-02-24",
|
characterList: [
|
{
|
name: "杨浣菲",
|
},
|
{
|
name: "杨浣菲",
|
},
|
{
|
name: "杨浣菲",
|
},
|
{
|
name: "杨浣菲",
|
},
|
],
|
title:
|
"中药闸柜是传统中药调剂的高级管理人员，在'前店后厂式'中药房发挥重要作用和关键职能。传承中药闸柜的宝贵学术经验与优秀文化对厘清中药学学科发展脉络、规范中药调剂技术操作、促进老药工技艺'活态传承'具有重要科学价值和现实意义。面向新时代、开启新思维，本文对老字号中药铺的兴起和中药闸柜进行考证，分析中药闸柜的岗位责任、传承路径及未来发展，提出高素质中药闸柜人才培养策略，旨在培养符合当代社会需求的中药行业复合型创新人才。中药闸柜是传统中药调剂的高级管理人员，在'前店后厂式'中药房发挥重要作用和关键职能。传承中药闸柜的宝贵学术经验与优秀文化对厘清中药学学科发展脉络、规范中药调剂技术操作、促进老药工技艺'活态传承'具有重要科学价值和现实意义。面向新时代、开启新思维，本文对老字号中药铺的兴起和中药闸柜进行考证，分析中药闸柜的岗位责任、传承路径及未来发展，提出高素质中药闸柜人才培养策略，旨在培养符合当代社会需求的中药行业复合型创新人才。",
|
keyword: [
|
{
|
name: "中药闸柜",
|
},
|
{
|
name: "中药闸柜",
|
},
|
{
|
name: "中药闸柜",
|
},
|
{
|
name: "中药闸柜",
|
},
|
],
|
videoUrl: "https://www.w3schools.com/html/mov_bbb.mp4",
|
audioMd5: "",
|
},
|
// 查询结果
|
resultList: [
|
{
|
name: "中药闸柜的历史传承与新时代发展思考",
|
sources: "北京中医药大学学报",
|
type: "期刊",
|
author: "杨浣菲 北京中医药大学中药学院；赵天成 北京师范大学",
|
time: "2025-02-24 09:21",
|
title:
|
"中药闸柜是传统中药调剂的高级管理人员，在'前店后厂式'中药房发挥重要作用和关键职能。传承中药闸柜的宝贵学术经验与优秀文化对厘清中药学学科发展脉络、规范中药调剂技术操作、促进老药工技艺'活态传承'具有重要科学价值和现实意义。面向新时代、开启新思维，本文对老字号中药铺的兴起和中药闸柜进行考证，分析中药闸柜的岗位责任、传承路径及未来发展，提出高素质中药闸柜人才培养策略，旨在培养符合当代社会需求的中药行业复合型创新人才。",
|
keyword: [
|
{
|
name: "中药闸柜",
|
},
|
{
|
name: "中药闸柜",
|
},
|
{
|
name: "中药闸柜",
|
},
|
{
|
name: "中药闸柜",
|
},
|
],
|
},
|
{
|
name: "中药闸柜的历史传承与新时代发展思考",
|
sources: "北京中医药大学学报",
|
type: "期刊",
|
author: "杨浣菲 北京中医药大学中药学院；赵天成 北京师范大学",
|
time: "2025-02-24 09:21",
|
title:
|
"中药闸柜是传统中药调剂的高级管理人员，在'前店后厂式'中药房发挥重要作用和关键职能。传承中药闸柜的宝贵学术经验与优秀文化对厘清中药学学科发展脉络、规范中药调剂技术操作、促进老药工技艺'活态传承'具有重要科学价值和现实意义。面向新时代、开启新思维，本文对老字号中药铺的兴起和中药闸柜进行考证，分析中药闸柜的岗位责任、传承路径及未来发展，提出高素质中药闸柜人才培养策略，旨在培养符合当代社会需求的中药行业复合型创新人才。中药闸柜是传统中药调剂的高级管理人员，在'前店后厂式'中药房发挥重要作用和关键职能。传承中药闸柜的宝贵学术经验与优秀文化对厘清中药学学科发展脉络、规范中药调剂技术操作、促进老药工技艺'活态传承'具有重要科学价值和现实意义。面向新时代、开启新思维，本文对老字号中药铺的兴起和中药闸柜进行考证，分析中药闸柜的岗位责任、传承路径及未来发展，提出高素质中药闸柜人才培养策略，旨在培养符合当代社会需求的中药行业复合型创新人才。",
|
keyword: [
|
{
|
name: "中药闸柜",
|
},
|
{
|
name: "中药闸柜",
|
},
|
{
|
name: "中药闸柜",
|
},
|
{
|
name: "中药闸柜",
|
},
|
],
|
},
|
{
|
name: "中药闸柜的历史传承与新时代发展思考",
|
sources: "北京中医药大学学报",
|
type: "期刊",
|
author: "杨浣菲 北京中医药大学中药学院；赵天成 北京师范大学",
|
time: "2025-02-24 09:21",
|
title:
|
"中药闸柜是传统中药调剂的高级管理人员，在'前店后厂式'中药房发挥重要作用和关键职能。传承中药闸柜的宝贵学术经验与优秀文化对厘清中药学学科发展脉络、规范中药调剂技术操作、促进老药工技艺'活态传承'具有重要科学价值和现实意义。面向新时代、开启新思维，本文对老字号中药铺的兴起和中药闸柜进行考证，分析中药闸柜的岗位责任、传承路径及未来发展，提出高素质中药闸柜人才培养策略，旨在培养符合当代社会需求的中药行业复合型创新人才。中药闸柜是传统中药调剂的高级管理人员，在'前店后厂式'中药房发挥重要作用和关键职能。传承中药闸柜的宝贵学术经验与优秀文化对厘清中药学学科发展脉络、规范中药调剂技术操作、促进老药工技艺'活态传承'具有重要科学价值和现实意义。面向新时代、开启新思维，本文对老字号中药铺的兴起和中药闸柜进行考证，分析中药闸柜的岗位责任、传承路径及未来发展，提出高素质中药闸柜人才培养策略，旨在培养符合当代社会需求的中药行业复合型创新人才。",
|
keyword: [
|
{
|
name: "中药闸柜",
|
},
|
{
|
name: "中药闸柜",
|
},
|
{
|
name: "中药闸柜",
|
},
|
{
|
name: "中药闸柜",
|
},
|
],
|
},
|
{
|
name: "中药闸柜的历史传承与新时代发展思考",
|
sources: "北京中医药大学学报",
|
type: "期刊",
|
author: "杨浣菲 北京中医药大学中药学院；赵天成 北京师范大学",
|
time: "2025-02-24 09:21",
|
title:
|
"中药闸柜是传统中药调剂的高级管理人员，在'前店后厂式'中药房发挥重要作用和关键职能。传承中药闸柜的宝贵学术经验与优秀文化对厘清中药学学科发展脉络、规范中药调剂技术操作、促进老药工技艺'活态传承'具有重要科学价值和现实意义。面向新时代、开启新思维，本文对老字号中药铺的兴起和中药闸柜进行考证，分析中药闸柜的岗位责任、传承路径及未来发展，提出高素质中药闸柜人才培养策略，旨在培养符合当代社会需求的中药行业复合型创新人才。中药闸柜是传统中药调剂的高级管理人员，在'前店后厂式'中药房发挥重要作用和关键职能。传承中药闸柜的宝贵学术经验与优秀文化对厘清中药学学科发展脉络、规范中药调剂技术操作、促进老药工技艺'活态传承'具有重要科学价值和现实意义。面向新时代、开启新思维，本文对老字号中药铺的兴起和中药闸柜进行考证，分析中药闸柜的岗位责任、传承路径及未来发展，提出高素质中药闸柜人才培养策略，旨在培养符合当代社会需求的中药行业复合型创新人才。",
|
keyword: [
|
{
|
name: "中药闸柜",
|
},
|
{
|
name: "中药闸柜",
|
},
|
{
|
name: "中药闸柜",
|
},
|
{
|
name: "中药闸柜",
|
},
|
],
|
},
|
{
|
name: "中药闸柜的历史传承与新时代发展思考",
|
sources: "北京中医药大学学报",
|
type: "期刊",
|
author: "杨浣菲 北京中医药大学中药学院；赵天成 北京师范大学",
|
time: "2025-02-24 09:21",
|
title:
|
"中药闸柜是传统中药调剂的高级管理人员，在'前店后厂式'中药房发挥重要作用和关键职能。传承中药闸柜的宝贵学术经验与优秀文化对厘清中药学学科发展脉络、规范中药调剂技术操作、促进老药工技艺'活态传承'具有重要科学价值和现实意义。面向新时代、开启新思维，本文对老字号中药铺的兴起和中药闸柜进行考证，分析中药闸柜的岗位责任、传承路径及未来发展，提出高素质中药闸柜人才培养策略，旨在培养符合当代社会需求的中药行业复合型创新人才。中药闸柜是传统中药调剂的高级管理人员，在'前店后厂式'中药房发挥重要作用和关键职能。传承中药闸柜的宝贵学术经验与优秀文化对厘清中药学学科发展脉络、规范中药调剂技术操作、促进老药工技艺'活态传承'具有重要科学价值和现实意义。面向新时代、开启新思维，本文对老字号中药铺的兴起和中药闸柜进行考证，分析中药闸柜的岗位责任、传承路径及未来发展，提出高素质中药闸柜人才培养策略，旨在培养符合当代社会需求的中药行业复合型创新人才。",
|
keyword: [
|
{
|
name: "中药闸柜",
|
},
|
{
|
name: "中药闸柜",
|
},
|
{
|
name: "中药闸柜",
|
},
|
{
|
name: "中药闸柜",
|
},
|
],
|
},
|
],
|
};
|
},
|
mounted() {
|
console.log(this.$route.params.key, "key001");
|
this.details = this.$route.params.key;
|
|
},
|
methods: {
|
goPage(key) { },
|
|
goBack() {
|
this.$router.go(-1);
|
},
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.page {
|
width: 100%;
|
height: 100%;
|
box-sizing: border-box;
|
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;
|
border-bottom: 2px solid #937950;
|
background-color: #e9e1d4;
|
position: sticky;
|
top: 0;
|
z-index: 100;
|
|
p {
|
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 {
|
flex: 1;
|
width: 100%;
|
height: 100%;
|
overflow: auto;
|
padding-top: 2%;
|
padding-bottom: 2%;
|
}
|
|
|
.page-main {
|
background-color: #fcfaf3;
|
width: 77.3%;
|
margin: 0 auto;
|
margin-top: 1%;
|
|
.page-main-name {
|
display: flex;
|
align-items: center;
|
padding: 21px 28px;
|
border-bottom: 1px solid #d8cbb6;
|
|
::v-deep .el-button {
|
font-size: 14px;
|
background-color: transparent;
|
color: #937950;
|
border: 1px solid #6f5a3a;
|
border-radius: 0;
|
|
&:hover {
|
background-color: #6f5a3a;
|
color: #fffdf8;
|
}
|
}
|
|
p:nth-child(1) {
|
width: 8%;
|
}
|
|
p:nth-child(2) {
|
width: 92%;
|
text-align: center;
|
font-family: Source Han Sans;
|
font-size: 32px;
|
font-weight: 350;
|
color: #937950;
|
}
|
}
|
|
.page-main-time {
|
padding: 8px 0 16px 0;
|
display: flex;
|
justify-content: center;
|
font-family: Source Han Sans;
|
font-size: 14px;
|
font-weight: normal;
|
line-height: 22px;
|
border-bottom: 1px solid #d8cbb6;
|
|
p {
|
span {
|
margin-right: 20px;
|
}
|
}
|
}
|
|
.page-main-title {
|
padding: 13px 185px 25px 185px;
|
border-bottom: 1px solid #d8cbb6;
|
|
::v-deep .el-button {
|
font-size: 14px;
|
background-color: #937950;
|
color: #fff;
|
border: 1px solid #6f5a3a;
|
border-radius: 0;
|
|
&:hover {
|
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;
|
margin-bottom: 13px;
|
|
span {
|
font-family: Source Han Sans;
|
font-size: 14px;
|
font-weight: 350;
|
color: #604d2f;
|
border-right: 1px solid #937950;
|
padding: 0 21px;
|
}
|
|
span:last-child {
|
border: none;
|
}
|
}
|
|
p:nth-child(2) {
|
margin-bottom: 13px;
|
font-family: Source Han Sans;
|
font-size: 14px;
|
font-weight: 350;
|
line-height: 26px;
|
color: #333333;
|
overflow: hidden;
|
display: -webkit-box;
|
-webkit-box-orient: vertical;
|
-webkit-line-clamp: 3;
|
|
span {
|
font-family: Source Han Sans;
|
font-size: 14px;
|
font-weight: bold;
|
color: #333333;
|
}
|
}
|
|
p:nth-child(3) {
|
margin-bottom: 24px;
|
|
span:nth-child(1) {
|
font-family: Source Han Sans;
|
font-weight: 700;
|
font-size: 14px;
|
}
|
|
.page-main-keyword {
|
cursor: pointer;
|
padding: 5px 10px;
|
color: #937950;
|
border: 1px solid #937950;
|
font-family: Source Han Sans;
|
font-size: 12px;
|
font-weight: 350;
|
line-height: 28px;
|
margin-right: 13px;
|
}
|
}
|
}
|
|
.page-main-video {
|
padding: 10px;
|
height: 377px;
|
width: auto;
|
display: flex;
|
justify-content: center;
|
|
video {
|
border-radius: 10px;
|
border: 1px solid #dcdcdc;
|
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
|
}
|
}
|
|
.page-main-audio {
|
padding: 10px;
|
display: flex;
|
justify-content: center;
|
|
audio {}
|
}
|
|
.page-main-literature {
|
padding: 10px 93px 20px 185px;
|
|
.literature-header {
|
font-family: Source Han Sans;
|
font-size: 14px;
|
font-weight: bold;
|
line-height: 26px;
|
}
|
|
.content-right {
|
padding: 14px 20px 20px 14px;
|
|
.right-header {
|
display: flex;
|
|
li {
|
background: #ffffff;
|
border: 1px solid #937950;
|
padding: 3px 10px;
|
margin-right: 13px;
|
display: flex;
|
align-items: center;
|
font-family: Poppins;
|
font-size: 13px;
|
color: #937950;
|
|
img {
|
cursor: pointer;
|
height: 16px;
|
width: auto;
|
margin-left: 5px;
|
}
|
}
|
}
|
|
.right-number {
|
display: flex;
|
justify-content: flex-end;
|
align-items: flex-start;
|
margin-bottom: 12px;
|
|
.number-number {
|
font-family: Source Han Sans;
|
font-weight: 350;
|
font-size: 14px;
|
color: #2c2c2c;
|
margin-right: 20px;
|
|
span {
|
color: #937950;
|
}
|
}
|
|
.number-time {
|
font-family: Source Han Sans;
|
font-size: 12px;
|
font-weight: 350;
|
color: #2c2c2c;
|
|
span {
|
margin-left: 11px;
|
}
|
|
img {
|
height: 12px;
|
width: auto;
|
}
|
}
|
}
|
|
.right-main {
|
margin-bottom: 20px;
|
padding: 19px 30px 15px 30px;
|
border: 1px solid #decaac;
|
|
.main-name {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
font-family: Source Han Sans;
|
font-size: 16px;
|
font-weight: bold;
|
color: #937950;
|
|
::v-deep .el-button {
|
font-size: 14px;
|
background-color: transparent;
|
color: #937950;
|
border: 1px solid #6f5a3a;
|
border-radius: 0;
|
|
&:hover {
|
background-color: #6f5a3a;
|
color: #fffdf8;
|
}
|
}
|
}
|
|
.main-sources {
|
span:nth-child(1) {
|
padding: 3px 5px;
|
background-color: #87a8b9;
|
color: #fff;
|
margin-right: 10px;
|
}
|
|
span:nth-child(2) {
|
font-family: Source Han Sans;
|
font-size: 12px;
|
font-weight: 350;
|
padding-right: 10px;
|
border-right: 1px solid #2c2c2c;
|
color: #333;
|
}
|
|
span:nth-child(3) {
|
font-family: Source Han Sans;
|
font-size: 12px;
|
font-weight: 350;
|
padding-left: 10px;
|
color: #333;
|
}
|
|
margin-bottom: 10px;
|
}
|
|
.main-author {
|
margin-bottom: 12px;
|
font-family: Source Han Sans;
|
font-size: 12px;
|
font-weight: 350;
|
color: #333;
|
}
|
|
.main-title {
|
margin-bottom: 15px;
|
font-family: Source Han Sans;
|
font-size: 14px;
|
font-weight: 350;
|
line-height: 26px;
|
color: #333333;
|
overflow: hidden;
|
display: -webkit-box;
|
-webkit-box-orient: vertical;
|
-webkit-line-clamp: 4;
|
|
span {
|
font-family: Source Han Sans;
|
font-weight: 700;
|
font-size: 14px;
|
}
|
}
|
|
.main-keyword {
|
span:nth-child(1) {
|
font-family: Source Han Sans;
|
font-weight: 700;
|
font-size: 14px;
|
}
|
|
.keyWord {
|
cursor: pointer;
|
padding: 5px 10px;
|
color: #937950;
|
border: 1px solid #937950;
|
font-family: Source Han Sans;
|
font-size: 12px;
|
font-weight: 350;
|
line-height: 28px;
|
margin-right: 13px;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
