<template>
|
<view>
|
<!-- 顶部 -->
|
<headNav text="中国医学人物知识库"/>
|
<!-- 搜索 -->
|
<view class="flex flex-center Search">
|
<!-- <luanqing-search class="search_bar" @onSearch="onSearch"></luanqing-search> -->
|
<advancedSearch @onSearch="onSearch" placehold="输入姓名/别名/时期/传主职业搜索" :isAvancedTrue="false" />
|
<view class="advancedSea" @click="isAvancedClick" style="color:#244A7B ;cursor: pointer;">高级搜索 ﹀</view>
|
</view>
|
<!-- 热门搜索 -->
|
<view class="flex flex-center hotSearch" style="font-size: 20rpx;margin: 10rpx 0;">
|
热门搜索：
|
<ul class="flex" style="margin-right: 10rpx;">
|
<!--
|
<li v-for="item in hot" :key="item.id" @tap="HotClick(item.id)" style="margin: 0 10rpx;"
|
:style="{color:item.bgColor==true?'#5879a4':'#000'}">
|
{{item.name}}
|
</li>-->
|
<li v-for="item in hot" @click="hotSearchClick(item)" :key="item.id" class="cursor" style="color: #5879a4;">
|
{{item.name}}
|
</li>
|
</ul>
|
</view>
|
<!-- 高级搜索 -->
|
<view class="advancedSeaTrue" v-if="isAdvancedSearch" style="padding: 0 230rpx; margin-bottom: .18rem;">
|
<view style="background-color: #fff;padding: 20rpx;" class="advancedSeaTrue1">
|
<h3>高级搜索</h3>
|
<MyForm @submit="onSubmit" :from="from" />
|
</view>
|
</view>
|
<uni-row class="demo-uni-row zhushuju flex flex-items-start" style="padding: 0 230rpx; ">
|
<uni-col :span="5" class="fbox">
|
<!-- 职业 -->
|
<view class="demo-uni-col zhiye dark box boox"
|
style="margin-bottom: 40rpx;background-color: #fff; border: 2rpx solid #e0e0e0;">
|
<h3>{{profession.title}}</h3>
|
<ul style="margin-top: 10rpx;" :class="{ 'a': activeBox === 'a'?'a':'' }">
|
<!-- background-color: #d6e3f4;border-radius: 60rpx; -->
|
<li class="flex"
|
:style="{'background':profession.index === index ? '#d6e3f4' :'','borderRadius': profession.index === index ? '60rpx' :''}"
|
v-for="(item,index) in profession.list" :key="index" style="padding:0 20rpx;" @click="handInstitCLick(index,'a')">
|
<view class="">{{item.name}}</view>
|
<view class="">{{item.number}}</view>
|
</li>
|
</ul>
|
<view v-if="profession.list.length-1 >3" class="flex flex-center toggleButton1">
|
<view class="toggleButton" style="color: #C1D3EA;" @click="shrinkClick('a')">
|
{{ activeBox !== 'a' ? '更多 ﹀' : '收起 ︿' }}
|
</view>
|
</view>
|
</view>
|
<!-- 世代 -->
|
<view class="demo-uni-col dark box boox zhongjianleft"
|
style="background-color: #fff;border: 2rpx solid #e0e0e0;"
|
:style="{'marginBottom': isAdvancedSearch ===true ? '0': '40rpx'}">
|
<h3>{{dynasty.title}}</h3>
|
<ul style="margin-top: 10rpx;" :class="{ 'b': activeBox === 'b'?'b':'' }">
|
<!-- background-color: #d6e3f4;border-radius: 60rpx; -->
|
<li class="flex"
|
:style="{'background':dynasty.index === index ? '#d6e3f4' :'','borderRadius': dynasty.index === index ? '60rpx' :''}"
|
v-for="(item,index) in dynasty.list" :key="index" style="padding:0 20rpx;" @click="handInstitCLick(index,'b')">
|
<view class="">{{item.name}}</view>
|
<view class="">{{item.number}}</view>
|
</li>
|
</ul>
|
<view v-if="dynasty.list.length-1 >3" class="flex flex-center toggleButton1">
|
<view class="toggleButton" style="color: #C1D3EA;" @click="shrinkClick('b')">
|
{{ activeBox !== 'b' ? '更多 ﹀' : '收起 ︿' }}
|
</view>
|
</view>
|
</view>
|
<!-- 来源 -->
|
<view v-if="!isAdvancedSearch" class="demo-uni-col dark box boox"
|
style="height: 250rpx;background-color: #fff;border: 2rpx solid #e0e0e0;">
|
<h3>{{source.title}}</h3>
|
<ul class="laiyuan" style="margin-top: 10rpx;" :class="{ 'b': activeBox === 'b'?'b':'' }">
|
<!-- background-color: #d6e3f4;border-radius: 60rpx; -->
|
<li class="flex liClick" v-for="(item,index) in source.list" :key="index"
|
style="padding:0 20rpx;color: #244A7B;">
|
<view class="">{{ index+1 + '. ' +item.name}}</view>
|
<view class="">{{item.number}}</view>
|
</li>
|
</ul>
|
<!-- <view class="flex flex-center">
|
<view class="toggleButton" style="font-size: 25rpx;color: #C1D3EA;" @click="shrinkClick('b')">
|
{{ activeBox !== 'b' ? '更多 ﹀' : '收起 ︿' }}</view>
|
</view> -->
|
</view>
|
</uni-col>
|
<uni-col :span="19" class="rightList">
|
<view class="demo-uni-col light fbox1"
|
style=" background-color: #fff;border: 1px solid #e0e0e0;padding: 10rpx 20rpx;">
|
<view class="flex lightTop" style="margin:10rpx 0">
|
<view class="" style="color: #2C2C2C;">共1374条</view>
|
<el-button>下载</el-button>
|
</view>
|
<el-table :data="tableData" class="lightBo" style="width: 100%">
|
<el-table-column prop="serialNumber" label="序号" width="110"></el-table-column>
|
<el-table-column prop="name" label="姓名"></el-table-column>
|
<el-table-column prop="another" label="别名"></el-table-column>
|
<el-table-column prop="gender" label="性别" width="70"></el-table-column>
|
<el-table-column prop="epoch" label="时期"></el-table-column>
|
<el-table-column prop="year" label="生年" width="130"></el-table-column>
|
<el-table-column prop="death" label="卒年" width="130"></el-table-column>
|
<el-table-column prop="nativePlace" label="籍贯"></el-table-column>
|
<el-table-column prop="socialIdentity" label="社会身份"></el-table-column>
|
<el-table-column prop="officialPosition" label="官职"></el-table-column>
|
</el-table>
|
</view>
|
</uni-col>
|
</uni-row>
|
<div class="abox"></div>
|
<Footer1 />
|
</view>
|
</template>
|
|
<script>
|
import Footer1 from '@/components/footer/footer'
|
import MyForm from '@/components/form/form.vue'
|
export default {
|
components: {
|
Footer1,
|
MyForm
|
},
|
data() {
|
return {
|
// 高级搜索显示
|
isAdvancedSearch: false,
|
// 高级搜索
|
from: {
|
from: [{
|
type: 'input',
|
label: '姓名',
|
name: 'name',
|
value: ''
|
},
|
{
|
type: 'input',
|
label: '别名',
|
name: 'alias',
|
value: ''
|
},
|
{
|
type: 'input',
|
label: '籍贯',
|
name: 'nativePlace',
|
value: ''
|
},
|
{
|
type: 'select',
|
label: '职业',
|
value: '',
|
name: 'occupation',
|
options: [{
|
label: '医家',
|
value: '1'
|
},
|
{
|
label: '世家',
|
value: '2'
|
}
|
]
|
},
|
{
|
type: 'input',
|
label: '职官',
|
name: 'officials',
|
value: ''
|
},
|
{
|
type: 'select',
|
label: '性别',
|
value: '',
|
name: 'sex',
|
options: [{
|
label: '男',
|
value: '男'
|
},
|
{
|
label: '女',
|
value: '女'
|
}
|
]
|
},
|
{
|
type: 'input',
|
label: '时期',
|
name: 'time',
|
value: ''
|
},
|
{
|
type: 'input',
|
label: '机构',
|
name: 'institution',
|
value: ''
|
}
|
]
|
},
|
// 热门搜索
|
hot: [{
|
id: 1,
|
name: '李时珍',
|
bgColor: false
|
}, {
|
id: 2,
|
name: '李时珍2',
|
bgColor: false
|
}, {
|
id: 3,
|
name: '李时珍3',
|
bgColor: false
|
}, ],
|
// 职业
|
profession: {
|
title: '职业',
|
index: 0,
|
list: [{
|
name: '全部',
|
id: 1,
|
number: 829
|
},
|
{
|
name: '医家',
|
id: 2,
|
number: 90
|
}, {
|
name: '世医',
|
id: 3,
|
number: 81
|
}, {
|
name: '宫廷医',
|
id: 4,
|
number: 83
|
},{
|
name: '宫廷医1',
|
id: 5,
|
number: 83
|
},
|
]
|
},
|
// 展开和收缩的按钮需要
|
activeBox: null,
|
// 世代
|
dynasty: {
|
title: '时期',
|
index: 0,
|
list: [{
|
name: '全部',
|
id: 1,
|
number: 829
|
},
|
{
|
name: '唐',
|
id: 2,
|
number: 90
|
}, {
|
name: '宋',
|
id: 3,
|
number: 81
|
}, {
|
name: '元',
|
id: 4,
|
number: 83
|
},
|
]
|
},
|
// 来源
|
source: {
|
title: '来源',
|
list: [{
|
name: '中国K小制应薛典',
|
id: 1
|
}, {
|
name: '中医医事大会',
|
id: 2
|
}, {
|
name: '中国医中制度研究',
|
id: 3
|
}, ]
|
},
|
tableData: [{
|
serialNumber: 1,
|
name: '王小虎',
|
another: '小虎',
|
gender: '男',
|
epoch: '唐代',
|
year: 1234,
|
death: 1332,
|
nativePlace: '河北',
|
socialIdentity: '世医',
|
officialPosition: '院判'
|
}, {
|
serialNumber: 2,
|
name: '王w小虎',
|
another: 'w小虎',
|
gender: 'w男',
|
epoch: '唐w代',
|
year: 1234,
|
death: 1332,
|
nativePlace: '河北',
|
socialIdentity: '世医',
|
officialPosition: '院判'
|
}, {
|
serialNumber: 1,
|
name: '王小虎',
|
another: '小虎',
|
gender: '男',
|
epoch: '唐代',
|
year: 1234,
|
death: 1332,
|
nativePlace: '河北',
|
socialIdentity: '世医',
|
officialPosition: '院判'
|
}]
|
}
|
},
|
mounted() {
|
// 修改两次的高度保持一致
|
var box1Height = document.querySelector('.fbox').offsetHeight;
|
document.querySelector('.fbox1').style.height = box1Height + 'px';
|
},
|
methods: {
|
// 热门搜索
|
hotSearchClick(item){
|
console.log(item);
|
},
|
// 左侧的机构统计等等按钮
|
handInstitCLick(index, name) {
|
if (name == 'a') {
|
this.profession.index = index
|
}else if(name == 'b'){
|
this.dynasty.index = index
|
}
|
console.log(index, name);
|
},
|
isAvancedClick() {
|
this.isAdvancedSearch = !this.isAdvancedSearch
|
this.$nextTick(() => {
|
|
var box1Height = document.querySelector('.fbox').offsetHeight;
|
// let box2Height= document.querySelector('.fbox1').style.height = box1Height + 'px';
|
let box2Height = document.querySelector('.fbox1').offsetHeight
|
console.log(box1Height, box2Height);
|
if (box1Height <= box2Height) {
|
document.querySelector('.fbox1').style.height = box1Height + 'px';
|
}
|
})
|
},
|
onSubmit(val) {
|
console.log(val);
|
},
|
onSearch(val) {
|
|
console.log(val);
|
},
|
// 热门搜索
|
HotClick(id) {
|
this.hot.forEach(item => {
|
if (item.id === id) {
|
console.log(item.id === id);
|
item.bgColor = true
|
} else {
|
console.log(item.id === id);
|
item.bgColor = false
|
}
|
})
|
|
},
|
// 展开收缩
|
shrinkClick(box) {
|
console.log(box);
|
if (this.activeBox === box) {
|
this.activeBox = null;
|
} else {
|
this.activeBox = box;
|
}
|
}
|
}
|
}
|
</script>
|
|
<style>
|
.abox{
|
height: 1rem;
|
}
|
@media screen and (min-width:2560px)and (max-width:3840px) {
|
|
/* 搜索 */
|
.Search {
|
margin: .35rem 0 .16rem !important;
|
font-size: .12rem !important;
|
}
|
|
.Search ::v-deep .advancedSea {
|
font-size: .12rem !important;
|
margin-left: .35rem;
|
}
|
|
.Search ::v-deep .flex-center {
|
height: 80% !important;
|
}
|
|
.hotSearch {
|
font-size: .12rem !important;
|
margin-bottom: .19rem !important;
|
|
li {
|
font-size: .12rem !important;
|
margin: 0 .1rem;
|
}
|
}
|
|
.advancedSeaTrue,
|
.zhushuju {
|
padding: 0 1.24rem !important;
|
}
|
|
.advancedSeaTrue1 {
|
padding: .08rem .19rem !important;
|
font-size: .14rem !important;
|
}
|
|
/* Form组件里面的样式 */
|
::v-deep .el-row {
|
display: flex;
|
flex-wrap: wrap;
|
margin-top: .1rem !important;
|
}
|
|
::v-deep .el-form-item {
|
display: flex !important;
|
flex-wrap: wrap !important;
|
margin-bottom: .18rem !important;
|
}
|
|
::v-deep .el-form-item__label {
|
font-size: .14rem !important;
|
height: .3rem !important;
|
display: flex !important;
|
align-items: center !important;
|
}
|
|
::v-deep .el-input__inner {
|
font-size: .14rem !important;
|
height: .3rem !important;
|
}
|
|
::v-deep .Formbtn {
|
width: 100% !important;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
.el-button {
|
width: .7rem !important;
|
height: .3rem !important;
|
font-size: .12rem;
|
|
}
|
}
|
|
/* —————————————————————— */
|
/* 左边的 */
|
.boox {
|
padding: .1rem .09rem;
|
min-height: 2rem !important;
|
position: relative;
|
|
ul {
|
margin-top: .16rem !important;
|
}
|
|
h3 {
|
font-size: .14rem;
|
margin-left: .1rem;
|
}
|
|
li {
|
height: .3rem;
|
line-height: .3rem;
|
padding: 0 .2rem !important;
|
margin: .05rem 0 !important;
|
border-radius: .3rem !important;
|
|
}
|
|
.toggleButton1 {
|
position: absolute;
|
bottom: .1rem !important;
|
left: 40% !important;
|
}
|
|
.toggleButton {
|
font-size: .14rem !important;
|
}
|
}
|
|
.zhongjianleft {
|
margin: .27rem 0 !important;
|
}
|
|
.laiyuan {
|
min-height: 2rem !important;
|
}
|
|
/* ———————————————————— */
|
::v-deep .uni-input-placeholder {
|
font-size: .14rem;
|
height: 100%;
|
display: flex;
|
align-content: center;
|
align-items: center;
|
}
|
|
::v-deep .ffff {
|
border-radius: .3rem !important;
|
height: .36rem !important;
|
}
|
|
::v-deep .widget_button {
|
border-radius: inherit !important;
|
margin-right: .02rem !important;
|
background-color: #597AA5;
|
}
|
|
|
|
/* 右侧 */
|
.rightList {
|
padding-left: .2rem !important;
|
|
.light {
|
padding: .1rem .2rem !important;
|
}
|
|
.lightTop {
|
font-size: .14rem !important;
|
}
|
|
.el-button {
|
font-size: .12rem !important;
|
padding: .05rem .18rem !important;
|
}
|
|
.lightBo {
|
font-size: .14rem !important;
|
|
.is-leaf {
|
background-color: #C1D3EA !important;
|
color: #2C2C2C !important;
|
font-weight: 400;
|
.cell{
|
|
height: .3rem !important;
|
line-height: .3rem !important;
|
}
|
}
|
}
|
|
.el-table__body-wrapper {
|
.el-table__row {
|
height: .46rem !important;
|
line-height: .46rem !important;
|
.cell{
|
|
height: .3rem !important;
|
line-height: .3rem !important;
|
}
|
}
|
|
}
|
}
|
}
|
|
@media screen and (min-width:1366px) and (max-width:1920px) {
|
|
/* 搜索 */
|
.Search {
|
margin: .35rem 0 .16rem !important;
|
font-size: .12rem !important;
|
}
|
|
.Search ::v-deep .advancedSea {
|
font-size: .12rem !important;
|
margin-left: .35rem;
|
}
|
|
.Search ::v-deep .flex-center {
|
height: 80% !important;
|
}
|
|
.hotSearch {
|
font-size: .12rem !important;
|
margin-bottom: .19rem !important;
|
|
li {
|
font-size: .12rem !important;
|
margin: 0 .1rem;
|
}
|
}
|
|
.advancedSeaTrue,
|
.zhushuju {
|
padding: 0 1.24rem !important;
|
}
|
|
.advancedSeaTrue1 {
|
padding: .08rem .19rem !important;
|
font-size: .14rem !important;
|
}
|
|
/* Form组件里面的样式 */
|
::v-deep .el-row {
|
display: flex;
|
flex-wrap: wrap;
|
margin-top: .1rem !important;
|
}
|
|
::v-deep .el-form-item {
|
display: flex !important;
|
flex-wrap: wrap !important;
|
margin-bottom: .18rem !important;
|
}
|
|
::v-deep .el-form-item__label {
|
font-size: .14rem !important;
|
height: .3rem !important;
|
display: flex !important;
|
align-items: center !important;
|
}
|
|
::v-deep .el-input__inner {
|
font-size: .14rem !important;
|
height: .3rem !important;
|
}
|
|
::v-deep .Formbtn {
|
width: 100% !important;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
.el-button {
|
width: .7rem !important;
|
height: .3rem !important;
|
font-size: .12rem;
|
|
}
|
}
|
|
/* —————————————————————— */
|
/* 左边的 */
|
.boox {
|
padding: .1rem .09rem;
|
min-height: 2rem !important;
|
position: relative;
|
|
ul {
|
margin-top: .16rem !important;
|
margin-bottom: .2rem !important;
|
}
|
|
h3 {
|
font-size: .14rem;
|
margin-left: .1rem;
|
}
|
|
li {
|
height: .3rem;
|
line-height: .3rem;
|
padding: 0 .2rem !important;
|
margin: .05rem 0 !important;
|
border-radius: .3rem !important;
|
|
}
|
|
.toggleButton1 {
|
position: absolute;
|
bottom: .1rem !important;
|
left: 40% !important;
|
}
|
|
.toggleButton {
|
font-size: .14rem !important;
|
}
|
}
|
|
.zhongjianleft {
|
margin: .27rem 0 !important;
|
}
|
|
.laiyuan {
|
min-height: 2rem !important;
|
}
|
|
/* ———————————————————— */
|
::v-deep .uni-input-placeholder {
|
font-size: .14rem;
|
height: 100%;
|
display: flex;
|
align-content: center;
|
align-items: center;
|
}
|
|
::v-deep .ffff {
|
border-radius: .3rem !important;
|
height: .36rem !important;
|
}
|
|
::v-deep .widget_button {
|
border-radius: inherit !important;
|
margin-right: .02rem !important;
|
background-color: #597AA5;
|
}
|
|
/* -------------------- */
|
/* 右侧 */
|
.rightList {
|
padding-left: .2rem !important;
|
|
.light {
|
padding: .1rem .2rem !important;
|
}
|
|
.lightTop {
|
font-size: .14rem !important;
|
}
|
|
.el-button {
|
font-size: .12rem !important;
|
padding: .05rem .18rem !important;
|
}
|
|
.lightBo {
|
font-size: .14rem !important;
|
|
.is-leaf {
|
background-color: #C1D3EA !important;
|
color: #2C2C2C !important;
|
font-weight: 400;
|
.cell{
|
|
height: .3rem !important;
|
line-height: .3rem !important;
|
}
|
}
|
}
|
|
.el-table__body-wrapper {
|
.el-table__row {
|
height: .46rem !important;
|
line-height: .46rem !important;
|
.cell{
|
|
height: .3rem !important;
|
line-height: .3rem !important;
|
}
|
}
|
|
}
|
}
|
}
|
|
* {
|
box-sizing: border-box;
|
}
|
|
.hotSearch {
|
font-size: .12rem;
|
margin-bottom: .19rem;
|
|
li {
|
font-size: .12rem;
|
margin: 0 .1rem;
|
}
|
}
|
|
.a {
|
height: 2rem;
|
}
|
|
.b {
|
height: 100px;
|
}
|
|
.box {
|
transition: height 0.3s;
|
/* 添加过渡效果 */
|
overflow: hidden;
|
/* 避免内容溢出 */
|
|
}
|
|
.boox {
|
padding: .1rem .09rem;
|
|
h3 {
|
font-size: .14rem;
|
}
|
}
|
|
::v-deep .el-table th,
|
::v-deep .el-table td {
|
text-align: center;
|
}
|
|
::v-deep .has-gutter tr>th {
|
background-color: #DDE8F6 !important;
|
}
|
</style>
|
