三

mh-two-thousand-and-two

2024-04-03 29a02350b873fa6339a7535fa929697fec9a8f84

 pages/knowledgeBase/knowledgeBase.vue

@@ -1,15 +1,15 @@
<template>
   <view>
      <!-- 顶部 -->
      <headNav />
      <headNav text="中国医学人物知识库"/>
      <!-- 搜索 -->
      <view class="flex flex-center" style="margin: 20rpx 0;">
         <luanqing-search class="search_bar" @onSearch="onSearch"></luanqing-search>
         <view class="" @click="isAvancedClick"
            style="color:#244A7B ;font-size: 20rpx;margin-left: 60rpx;cursor: pointer;">高级搜索 ﹀</view>
      <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" style="font-size: 20rpx;margin: 10rpx 0;">
      <view class="flex flex-center hotSearch" style="font-size: 20rpx;margin: 10rpx 0;">
         热门搜索：
         <ul class="flex" style="margin-right: 10rpx;">
            <!-- 
@@ -17,23 +17,23 @@
                :style="{color:item.bgColor==true?'#5879a4':'#000'}">
                {{item.name}}
             </li>-->
            <li v-for="item in hot" :key="item.id" style="margin: 0 10rpx;color: #5879a4;font-size: 20rpx;">
            <li v-for="item in hot" :key="item.id" style="color: #5879a4;">
               {{item.name}}
            </li>
         </ul>
      </view>
      <!-- 高级搜索 -->
      <view class="" v-if="isAdvancedSearch" style="padding: 0 230rpx; margin-bottom: 10rpx;">
         <view style="background-color: #fff;padding: 20rpx;" class="">
      <view class="advancedSeaTrue" v-if="isAdvancedSearch" style="padding: 0 230rpx; margin-bottom: 10rpx;">
         <view style="background-color: #fff;padding: 20rpx;" class="advancedSeaTrue1">
            <h3>高级搜索</h3>
            <MyForm @submit="onSubmit" :from="from" />
         </view>
      </view>
      <uni-row class="demo-uni-row flex flex-items-start" style="padding: 0 230rpx; ">
      <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 dark box"
               style="margin-bottom: 40rpx;background-color: #fff; padding: 20rpx;border: 2rpx solid #e0e0e0;">
            <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; -->
@@ -44,15 +44,16 @@
                     <view class="">{{item.number}}</view>
                  </li>
               </ul>
               <view class="flex flex-center">
                  <view class="toggleButton" style="font-size: 25rpx;color: #C1D3EA;" @click="shrinkClick('a')">
               <view 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"
               style="background-color: #fff;padding: 20rpx;border: 2rpx solid #e0e0e0;" :style="{'marginBottom': isAdvancedSearch ===true ? '0': '40rpx'}">
            <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; -->
@@ -63,20 +64,20 @@
                     <view class="">{{item.number}}</view>
                  </li>
               </ul>
               <view class="flex flex-center">
                  <view class="toggleButton" style="font-size: 25rpx;color: #C1D3EA;" @click="shrinkClick('b')">
               <view 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"
               style="height: 250rpx;background-color: #fff;padding: 20rpx;border: 2rpx solid #e0e0e0;">
            <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 style="margin-top: 10rpx;" :class="{ 'b': activeBox === 'b'?'b':'' }">
               <ul class="laiyuan" style="margin-top: 10rpx;" :class="{ 'b': activeBox === 'b'?'b':'' }">
                  <!-- background-color: #d6e3f4;border-radius: 60rpx; -->
                  <li class="flex" v-for="(item,index) in source.list" :key="index"
                     style="padding:0 20rpx;color: #244A7B;font-size: 24rpx;">
                  <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>
@@ -87,21 +88,21 @@
               </view> -->
            </view>
         </uni-col>
         <uni-col :span="19" style="padding-left: 20rpx; ">
         <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" style="margin:10rpx 0">
               <view class="flex lightTop" style="margin:10rpx 0">
                  <view class="" style="color: #2C2C2C;">共1374条</view>
                  <el-button size="mini">下载</el-button>
                  <el-button>下载</el-button>
               </view>
               <el-table :data="tableData" size="mini" style="width: 100%">
                  <el-table-column prop="serialNumber" label="序号" width="70"></el-table-column>
               <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="性别"></el-table-column>
                  <el-table-column prop="epoch" label="时代"></el-table-column>
                  <el-table-column prop="year" label="生年" width="70"></el-table-column>
                  <el-table-column prop="death" label="卒年" width="70"></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>
@@ -109,6 +110,7 @@
            </view>
         </uni-col>
      </uni-row>
      <div class="abox"></div>
      <Footer1 />
   </view>
</template>
@@ -134,6 +136,39 @@
                     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: '',
@@ -150,34 +185,15 @@
                  },
                  {
                     type: 'input',
                     label: '联系',
                     name: 'phone',
                     label: '时期',
                     name: 'time',
                     value: ''
                  },
                  {
                     type: 'input',
                     label: '证件',
                     name: 'idNumber',
                     label: '机构',
                     name: 'institution',
                     value: ''
                  },
                  {
                     type: 'select',
                     label: '状态',
                     name: 'state',
                     value: '',
                     options: [{
                           label: '未申请',
                           value: '未申请'
                        },
                        {
                           label: '已申请',
                           value: '已申请'
                        },
                        {
                           label: '已删除',
                           value: '已删除'
                        }
                     ]
                  }
               ]
            },
@@ -223,7 +239,7 @@
            activeBox: null,
            // 世代
            dynasty: {
               title: '世代',
               title: '时期',
               index: 0,
               list: [{
                     name: '全部',
@@ -348,12 +364,403 @@
</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: 200px;
      height: 2rem;
   }

   .b {
@@ -368,6 +775,14 @@

   }

   .boox {
      padding: .1rem .09rem;

      h3 {
         font-size: .14rem;
      }
   }

   ::v-deep .el-table th,
   ::v-deep .el-table td {
      text-align: center;