| | |
| | | <template> |
| | | <div class="page"> |
| | | <div class="page-header"> |
| | | <p>王永炎院士学术成果</p> |
| | | <p> |
| | | <span>王永炎院士学术成果</span> |
| | | </p> |
| | | </div> |
| | | <div class="page-main-father"> |
| | | <div class="page-main"> |
| | | <!-- 搜索框 --> |
| | | <ul class="page-input"> |
| | | <li class="input-main"> |
| | | <SearchBox /> |
| | | </li> |
| | | <li class="input-txt" @click="isDisplay = !isDisplay"> |
| | | 高级检索 |
| | | <img :src="[isDisplay ? topIcon : bottomIcon]" alt="" /> |
| | | </li> |
| | | </ul> |
| | | <!-- 高级搜索 --> |
| | | <div v-if="isDisplay" class="page-search"> |
| | | <MyForm |
| | | class="myfrom" |
| | | @submit=" |
| | | <div class="page-main"> |
| | | <!-- 搜索框 --> |
| | | <ul class="page-input"> |
| | | <li class="input-main"> |
| | | <SearchBox /> |
| | | </li> |
| | | <li class="input-txt" @click="isDisplay = !isDisplay"> |
| | | 高级检索 |
| | | <img :src="[isDisplay ? topIcon : bottomIcon]" alt="" /> |
| | | </li> |
| | | </ul> |
| | | <!-- 高级搜索 --> |
| | | <div v-if="isDisplay" class="page-search"> |
| | | <MyForm class="myfrom" @submit=" |
| | | (data) => { |
| | | CurrentPage = 1; |
| | | onSubmit(data); |
| | | } |
| | | " |
| | | @reset="resetForm" |
| | | :from="from" |
| | | /> |
| | | </div> |
| | | <!-- 搜索结果 --> |
| | | <div class="page-content"> |
| | | <div class="content-left"> |
| | | <!-- 类型 --> |
| | | <ul> |
| | | <li class="left-title"> |
| | | <span>{{ category.title }}</span> |
| | | <p @click="category.isDisplay = !category.isDisplay"> |
| | | <img |
| | | :src="[category.isDisplay ? topIcon : bottomIcon]" |
| | | alt="" |
| | | /> |
| | | </p> |
| | | </li> |
| | | <li class="left-main" v-if="category.isDisplay"> |
| | | <div |
| | | class="category-main" |
| | | v-for="(item, index) in category.list" |
| | | :key="index" |
| | | > |
| | | <el-checkbox |
| | | class="el-checkbox" |
| | | v-model="item.checked" |
| | | :title="item.name" |
| | | >{{ item.name }}</el-checkbox |
| | | > |
| | | <span class="">{{ item.num }}</span> |
| | | </div> |
| | | </li> |
| | | </ul> |
| | | <!-- 年度 --> |
| | | <ul> |
| | | <li class="left-title"> |
| | | <div> |
| | | <span>{{ annual.title }}</span> |
| | | <span> |
| | | 时间 |
| | | <img |
| | | class="sort-Icon" |
| | | :src="[isDisplay ? sortTop : sortBottom]" |
| | | alt="" |
| | | /> |
| | | </span> |
| | | <span |
| | | >文献量 |
| | | <img |
| | | class="sort-Icon" |
| | | :src="[isDisplay ? sortBottom : sortTop]" |
| | | alt="" |
| | | /> |
| | | </span> |
| | | </div> |
| | | <p @click="annual.isDisplay = !annual.isDisplay"> |
| | | <img :src="[annual.isDisplay ? topIcon : bottomIcon]" alt="" /> |
| | | </p> |
| | | </li> |
| | | <li class="left-main" v-if="annual.isDisplay"> |
| | | <div |
| | | class="annual-main" |
| | | :style="{ |
| | | display: index + 1 > professionIndex ? 'none' : '', |
| | | }" |
| | | v-for="(item, index) in annual.list" |
| | | :key="index" |
| | | > |
| | | <el-checkbox |
| | | class="el-checkbox" |
| | | v-model="item.checked" |
| | | :title="item.years" |
| | | >{{ item.years }}</el-checkbox |
| | | > |
| | | <span class="">{{ item.num }}</span> |
| | | </div> |
| | | <p |
| | | class="annual-footer" |
| | | v-if="annual.list && annual.list.length > 5" |
| | | @click="shrinkClick('a', '年度')" |
| | | > |
| | | {{ activeBox !== "a" ? "更多 ∨" : "收起 ∧" }} |
| | | </p> |
| | | </li> |
| | | </ul> |
| | | <!-- 文献来源 --> |
| | | <ul> |
| | | <li class="left-title"> |
| | | <div> |
| | | <span>{{ sources.title }}</span> |
| | | <span> |
| | | 文献量 |
| | | <img |
| | | class="sort-Icon" |
| | | :src="[isDisplay ? sortBottom : sortTop]" |
| | | alt="" |
| | | /> |
| | | </span> |
| | | </div> |
| | | <p @click="sources.isDisplay = !sources.isDisplay"> |
| | | <img :src="[sources.isDisplay ? topIcon : bottomIcon]" alt="" /> |
| | | </p> |
| | | </li> |
| | | <li class="left-main" v-if="sources.isDisplay"> |
| | | <div |
| | | class="sources-main" |
| | | v-for="(item, index) in sources.list" |
| | | :key="index" |
| | | :style="{ |
| | | display: index + 1 > dynastyIndex ? 'none' : '', |
| | | }" |
| | | > |
| | | <el-checkbox |
| | | class="el-checkbox" |
| | | :title="item.name" |
| | | v-model="item.checked" |
| | | >{{ item.name }}</el-checkbox |
| | | > |
| | | <span class="">{{ item.num }}</span> |
| | | </div> |
| | | <p |
| | | class="sources-footer" |
| | | v-if="sources.list && sources.list.length > 5" |
| | | @click="shrinkClick('b', '文献来源')" |
| | | > |
| | | {{ activeBox !== "b" ? "更多 ∨" : "收起 ∧" }} |
| | | </p> |
| | | </li> |
| | | </ul> |
| | | <!-- 学科 --> |
| | | <ul> |
| | | <li class="left-title"> |
| | | <span>{{ subject.title }}</span> |
| | | <p @click="subject.isDisplay = !subject.isDisplay"> |
| | | <img :src="[subject.isDisplay ? topIcon : bottomIcon]" alt="" /> |
| | | </p> |
| | | </li> |
| | | <li class="left-main" v-if="subject.isDisplay"> |
| | | <div |
| | | class="category-main" |
| | | v-for="(item, index) in subject.list" |
| | | :key="index" |
| | | > |
| | | <el-checkbox |
| | | class="el-checkbox" |
| | | v-model="item.checked" |
| | | :title="item.name" |
| | | >{{ item.name }}</el-checkbox |
| | | > |
| | | <span class="">{{ item.num }}</span> |
| | | </div> |
| | | </li> |
| | | </ul> |
| | | " @reset="resetForm" :from="from" /> |
| | | </div> |
| | | <div class="content-right"> |
| | | <!-- title部分 --> |
| | | <ul class="right-header"> |
| | | <li v-for="(item, index) in associationList" :key="index"> |
| | | <p>{{ item.type }} : {{ item.content }}</p> |
| | | <img :src="errorIcon" alt="" /> |
| | | </li> |
| | | </ul> |
| | | <!-- 共xx条 --> |
| | | <ul class="right-number"> |
| | | <ul class="number-number"> |
| | | 共找到<span>{{ resultList.length }}</span |
| | | >条结果 |
| | | <!-- 搜索结果 --> |
| | | <div class="page-content"> |
| | | <div class="content-left"> |
| | | <!-- 类型 --> |
| | | <ul> |
| | | <li class="left-title"> |
| | | <span>{{ category.title }}</span> |
| | | <p @click="category.isDisplay = !category.isDisplay"> |
| | | <img :src="[category.isDisplay ? topIcon : bottomIcon]" alt="" /> |
| | | </p> |
| | | </li> |
| | | <li class="left-main" v-if="category.isDisplay"> |
| | | <div class="category-main" v-for="(item, index) in category.list" :key="index"> |
| | | <el-checkbox class="el-checkbox" style="display: inline-block; vertical-align: middle;" |
| | | v-model="item.checked" :title="item.name">{{ item.name }}</el-checkbox> |
| | | <span class="" style="display: inline-block; vertical-align: middle;">{{ item.num }}</span> |
| | | </div> |
| | | </li> |
| | | </ul> |
| | | <ul class="number-time"> |
| | | 发表时间 |
| | | <span><img :src="sortBottom" alt="" /></span> |
| | | <!-- 年度 --> |
| | | <ul> |
| | | <li class="left-title"> |
| | | <div> |
| | | <span>{{ annual.title }}</span> |
| | | <span> |
| | | 时间 |
| | | <img class="sort-Icon" :src="[isDisplay ? sortTop : sortBottom]" alt="" /> |
| | | </span> |
| | | <span>文献量 |
| | | <img class="sort-Icon" :src="[isDisplay ? sortBottom : sortTop]" alt="" /> |
| | | </span> |
| | | </div> |
| | | <p @click="annual.isDisplay = !annual.isDisplay"> |
| | | <img :src="[annual.isDisplay ? topIcon : bottomIcon]" alt="" /> |
| | | </p> |
| | | </li> |
| | | <li class="left-main" v-if="annual.isDisplay"> |
| | | <div class="annual-main" :style="{ |
| | | display: index + 1 > professionIndex ? 'none' : '', |
| | | }" v-for="(item, index) in annual.list" :key="index"> |
| | | <el-checkbox class="el-checkbox" v-model="item.checked" :title="item.years">{{ item.years |
| | | }}</el-checkbox> |
| | | <span class="">{{ item.num }}</span> |
| | | </div> |
| | | <p class="annual-footer" v-if="annual.list && annual.list.length > 5" @click="shrinkClick('a', '年度')"> |
| | | {{ activeBox !== "a" ? "更多 ∨" : "收起 ∧" }} |
| | | </p> |
| | | </li> |
| | | </ul> |
| | | </ul> |
| | | <!-- 结果展示 --> |
| | | <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 class="pagination"> |
| | | <el-pagination |
| | | class="msg-pagination-container" |
| | | :background="isBackground" |
| | | layout="prev, pager, next" |
| | | :total="200" |
| | | > |
| | | </el-pagination> |
| | | <!-- 文献来源 --> |
| | | <ul> |
| | | <li class="left-title"> |
| | | <div> |
| | | <span>{{ sources.title }}</span> |
| | | <span> |
| | | 文献量 |
| | | <img class="sort-Icon" :src="[isDisplay ? sortBottom : sortTop]" alt="" /> |
| | | </span> |
| | | </div> |
| | | <p @click="sources.isDisplay = !sources.isDisplay"> |
| | | <img :src="[sources.isDisplay ? topIcon : bottomIcon]" alt="" /> |
| | | </p> |
| | | </li> |
| | | <li class="left-main" v-if="sources.isDisplay"> |
| | | <div class="sources-main" v-for="(item, index) in sources.list" :key="index" :style="{ |
| | | display: index + 1 > dynastyIndex ? 'none' : '', |
| | | }"> |
| | | <el-checkbox class="el-checkbox" :title="item.name" v-model="item.checked">{{ item.name |
| | | }}</el-checkbox> |
| | | <span class="">{{ item.num }}</span> |
| | | </div> |
| | | <p class="sources-footer" v-if="sources.list && sources.list.length > 5" |
| | | @click="shrinkClick('b', '文献来源')"> |
| | | {{ activeBox !== "b" ? "更多 ∨" : "收起 ∧" }} |
| | | </p> |
| | | </li> |
| | | </ul> |
| | | <!-- 学科 --> |
| | | <ul> |
| | | <li class="left-title"> |
| | | <span>{{ subject.title }}</span> |
| | | <p @click="subject.isDisplay = !subject.isDisplay"> |
| | | <img :src="[subject.isDisplay ? topIcon : bottomIcon]" alt="" /> |
| | | </p> |
| | | </li> |
| | | <li class="left-main" v-if="subject.isDisplay"> |
| | | <div class="category-main" v-for="(item, index) in subject.list" :key="index"> |
| | | <el-checkbox class="el-checkbox" v-model="item.checked" :title="item.name">{{ item.name |
| | | }}</el-checkbox> |
| | | <span class="">{{ item.num }}</span> |
| | | </div> |
| | | </li> |
| | | </ul> |
| | | </div> |
| | | <div class="content-right"> |
| | | <!-- title部分 --> |
| | | <ul class="right-header"> |
| | | <li v-for="(item, index) in associationList" :key="index"> |
| | | <p>{{ item.type }} : {{ item.content }}</p> |
| | | <img :src="errorIcon" alt="" /> |
| | | </li> |
| | | </ul> |
| | | <!-- 共xx条 --> |
| | | <ul class="right-number"> |
| | | <ul class="number-number"> |
| | | 共找到<span>{{ resultList.length }}</span>条结果 |
| | | </ul> |
| | | <ul class="number-time"> |
| | | 发表时间 |
| | | <span><img :src="sortBottom" alt="" /></span> |
| | | </ul> |
| | | </ul> |
| | | <!-- 结果展示 --> |
| | | <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 class="pagination"> |
| | | <el-pagination class="msg-pagination-container" :background="isBackground" layout="prev, pager, next" |
| | | :total="200"> |
| | | </el-pagination> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | }, |
| | | |
| | | methods: { |
| | | async onSubmit(val) {}, |
| | | async onSubmit(val) { }, |
| | | //重置搜索结果 |
| | | resetForm() { |
| | | // this.onSearch(""); |
| | |
| | | background-color: #e9e1d4; |
| | | position: relative; |
| | | overflow: hidden; |
| | | display: flex; |
| | | flex-direction: column; |
| | | } |
| | | |
| | | .page-header { |
| | | background-color: #e9e1d4; |
| | | 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: 10; |
| | | 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: 1%; |
| | | padding-bottom: 2%; |
| | | } |
| | | |
| | | .page-main { |
| | |
| | | border-bottom: 1px solid #e4dace; |
| | | padding: 10px; |
| | | display: flex; |
| | | align-items: center; |
| | | flex-wrap: wrap; |
| | | } |
| | | |
| | | .category-main { |
| | | width: 50%; |
| | | margin-bottom: 10px; |
| | | display: flex; |
| | | align-items: center; |
| | | |
| | | span { |
| | | font-family: Source Han Sans; |
| | |
| | | } |
| | | |
| | | .el-checkbox { |
| | | vertical-align: middle; |
| | | font-family: "Tahoma"; |
| | | width: 70%; |
| | | vertical-align: middle; |
| | | } |
| | | |
| | | /* 设置鼠标经过对勾框,对勾框边框的颜色 */ |
| | |
| | | border-color: #d1d1d1; |
| | | } |
| | | |
| | | ::v-deep .el-checkbox .el-checkbox__input.is-checked + .el-checkbox__label { |
| | | ::v-deep .el-checkbox .el-checkbox__input.is-checked+.el-checkbox__label { |
| | | color: #2c2c2c; |
| | | } |
| | | |
| | | ::v-deep .el-checkbox .el-checkbox__input.is-checked .el-checkbox__inner, |
| | | ::v-deep |
| | | .el-checkbox |
| | | .el-checkbox__input.is-indeterminate |
| | | .el-checkbox__inner { |
| | | ::v-deep .el-checkbox .el-checkbox__input.is-indeterminate .el-checkbox__inner { |
| | | border-color: #8f7a5a; |
| | | background-color: #8f7a5a; |
| | | } |
| | |
| | | border: 1px solid #cccccc; |
| | | } |
| | | |
| | | :deep.msg-pagination-container.is-background |
| | | .el-pager |
| | | li:not(.disabled).active { |
| | | :deep.msg-pagination-container.is-background .el-pager li:not(.disabled).active { |
| | | /*当前选中页数的样式进行修改*/ |
| | | background-color: #937950; |
| | | color: #fff; |