Merge branch 'master' of http://182.92.203.7:2001/r/TCM_CharacterLibrary

YM

2024-07-26 fe85e4208e502c78e3494a460617ae8753f51341

 src/pages/TcmSystem/TcmSystem.vue

@@ -1,912 +1,1098 @@
<template>
   <view>
      <headNav :idIndex="idIndex" text="中医医事制度" />
      <view class="flex flex-center sousuo" style="flex-direction: column;">
         <view class="search1">
            <next-search-more @search="onSearch" placeholder="搜索职官/机构" :selectValue="selectValue">
            </next-search-more>
         </view>
         <view class="flex remen">
            热门搜索：
            <ul class="flex" style="margin-right: 10rpx;">
               <li v-for="item in hot" :key="item.id" @tap="HotClick(item.id)"
                  style="margin: 0 .05rem;color: #244A7B;">
                  {{item.name}}
               </li>
            </ul>
         </view>
      </view>
      <view class="centre flex">
         <!-- 左 -->
         <view class="CLeft flex fbox">
            <!-- 职业 -->
            <view class="demo-uni-col MargB  box boox" :class="{ 'a': activeBox === 'a'?'a':'' }"
               style="background-color: #fff; border: 2rpx solid #e0e0e0;">
               <h3>{{institution.title}} ({{institution.list.length}}) </h3>
               <ul style="margin-top: 10rpx;">
                  <!-- background-color: #d6e3f4;border-radius: 60rpx; -->
                  <li class="flex"
                     :style="{'background':institution.index === item.dynastyId ?  '#DDE8F6' :'','borderRadius': institution.index === item.dynastyId ?  '60rpx' :'',display:index+1>institutionIndex?'none':'flex'}"
                     v-for="(item,index) in institution.list" :key="index"
                     style="padding:0 20rpx;color: #2C2C2C;" @click="handInstitCLick(item,'a')">
                     <view class="">{{item.dynastyName}}</view>
                     <view class="">{{item.count}}</view>
                  </li>
               </ul>
               <view v-if="institution.list.length-1 >3" class="flex flex-center ">
                  <view class="toggleButton" style="color: #244A7B;" @click="shrinkClick('a','机构')">
                     {{ activeBox !== 'a' ? '更多  ﹀' : '收起  ︿' }}
                  </view>
               </view>
            </view>
            <!-- 职官统计（10） -->
            <view class="demo-uni-col  MargB dark box boox" :class="{ 'b': activeBox === 'b'?'b':'' }"
               style="background-color: #fff; border: 2rpx solid #e0e0e0;">
               <h3>{{officials.title}} ({{officials.list.length}}) </h3>
               <ul style="margin-top: 10rpx;">
                  <!-- background-color: #d6e3f4;border-radius: 60rpx; -->
                  <li class="flex"
                     :style="{'background':officials.index === item.dynastyId ?  '#DDE8F6' :'','borderRadius': officials.index == item.dynastyId ?  '10rem' :'',display:index+1>officialsIndex?'none':'flex'}"
                     v-for="(item,index) in officials.list" :key="index" style="padding:0 20rpx;"
                     @click="handInstitCLick(item,'b')">
                     <view class="">{{item.dynastyName}}</view>
                     <view class="">{{item.count}}</view>
                  </li>
               </ul>
               <view v-if="officials.list.length-1 >3" class="flex flex-center ">
                  <view class="toggleButton" style="color: #244A7B;" @click="shrinkClick('b','职官')">
                     {{ activeBox !== 'b' ? '更多  ﹀' : '收起  ︿' }}
                  </view>
               </view>
            </view>
            <!-- 来源（5） -->
            <view class="demo-uni-col  dark box boox" style="background-color: #fff; border: 2rpx solid #e0e0e0;">
               <h3>{{source.title}} ({{source.list.length}}) </h3>
               <ul style="margin-top: 10rpx;">
                  <!-- background-color: #d6e3f4;border-radius: 60rpx; -->
                  <li class="flex" v-for="(item,index) in source.list" style="padding:0 20rpx;color: #244A7B;">
                     <view @click="handInstitCLick(item,'c')" class="BeyondHiding1">{{index+1}}.{{item.source}}
                     </view>
                     <!-- <view class="">{{item.number}}</view> -->
                  </li>
               </ul>
            </view>
         </view>
         <!-- 右 -->
         <view class="CRight fbox1 flex flex-column relative">
            <!-- <el-row style="height: 50rpx;width: 100%;"> -->
            <view class="flex" style="width: 100%;margin-bottom: .3rem;">
               <view class="" style="font-size: .14rem;color: #2C2C2C;font-weight: 400;">共{{total}}条</view>
               <view class="paixu">
                  <!-- <el-select v-model="rankVal" placeholder="按提名排序">
                     <el-option v-for="(item,index) in rank" :key="index" :label="item.label"
                        :value="item.value"></el-option>
                  </el-select> -->
                  <el-select v-model="rankVal" @change="selectChange" placeholder="请提名排序">
                     <el-option v-for="(item,rankIndex) in rank" :key="rankIndex" :label="item.label"
                        :value="item.value">
                     </el-option>
                  </el-select>
               </view>
            </view>
            <!-- </el-row> flex-grow: 1;-->
            <view style="" class="flex CommodityList">
               <view class="rightList" @click="ListClick(item)" v-for="item in CommodityList" :key="item">
                  <el-card class="box-card" style="height:  100%;">
                     <view class="flex flex-start RightListTop">
                        <view class="Topzhiwei"
                           style="background-color: #5879a4;text-align: right;;color: #fff;"
                           :style="{background:item.post === '职官' ? '#DA7A2B' : '#597AA5'}">
                           <!-- :style="{background:item.color}"> -->
                           {{item.post}}
                        </view>
                        <view class="TopName">{{item.name}}</view>
                        <view class="TopDynasty"
                           style="border: 1px solid #d4d4d4;font-weight:500;padding: 0 10rpx;border-radius: 10rpx;">
                           {{item.dynasty}}
                        </view>
                     </view>
                     <view class="desBox" style="padding: .14rem .2rem .23rem;">
                        <view class="biecheng">
                           <view class="flex" title="sdfsdf"> 别称：
                              <view class="BeyondHiding1" style="width: .75rem;line-height: 1;">
                                 {{item.anotherNamer}}
                              </view>
                           </view>
                           <view class="flex " style="">来源:
                              <view class="BeyondHiding1" style="margin-left: .1rem;line-height: 1">
                                 {{item.source}}
                              </view>
                           </view>
                        </view>
                        <view class="describe font-family BeyondHiding2">
                           {{item.content}}
                        </view>
                     </view>
                  </el-card>
               </view>
            </view>
            <!-- 分页 -->
            <el-row class="fenye" style="position: absolute;bottom: .1rem;">
               <el-pagination class="paging" :current-page="CurrentPage" :total="total" :page-size="pageSize"
                  @current-change="CurrentChange" @prev-click="PrevClick" @next-click="NextClick" prev-text="上一页"
                  next-text="下一页" background layout="prev, pager, next">
               </el-pagination>
            </el-row>
         </view>
      </view>
      <!-- 弹出层 -->
      <el-dialog title="" class="dialog" :visible.sync="dialogVisible" width="40%">
         <!-- 取消键 -->
         <view class=""
            style="padding: .16rem;position: absolute;z-index: 9999999999999999999999999999999999999999; left: 0;top: 0;">
            <img @click="dialogVisible=false" src="@/static/image/X.png" alt="" style="width: 100%;height: 100%;"
               sizes="" srcset="" />
         </view>
         <view class="flex" style="position: relative; height: 100%;flex-direction: column;">
            <view class="detailImage" style="position: relative;">
               <img src="@/static/image/personageBg.png" alt="" />
               <view class=" flex flex-column "
                  style="height: 100%;justify-content: flex-start; position: relative;z-index: 999;">
                  <view class="creatureXinxi1">{{ListDetails.name}}</view>
                  <view class="creatureXinxi2">
                     {{ListDetails.dynasty}}
                  </view>
                  <ul class="flex creatureXinxi3">
                     <li @click="PDFClick(ListDetails,1)">RDF</li>
                     <li @click="PDFClick(ListDetails,2)">NT</li>
                     <li @click="PDFClick(ListDetails,3)">XML</li>
                     <li @click="PDFClick(ListDetails,4)">JSON</li>
                  </ul>
               </view>
            </view>
            <view class="" style="width: 80%; height: 100%;position: relative;">
               <view class="pinji flex ">
                  <view class="">品级: <span> {{ListDetails.grade}}</span> </view>
                  <view class="">别名: <span> {{ListDetails.alias}}</span> </view>
                  <view class="">来源: <span> {{ListDetails.source}}</span> </view>
               </view>
               <view class="">
                  <view class=""
                     style="font-size: .14rem;color: #2C2C2C;  background-color: #F0F0F0;font-weight: 700;padding-left: .18rem;height: .34rem;line-height: .34rem;">
                     相关描述
                  </view>
                  <view class="" style="font-size: .1rem;color: #2C2C2C;margin: .1rem 0 .19rem;line-height: 2.3;">
                     {{ListDetails.desc}}
                  </view>
                  <view class="">
                     <view class=""
                        style="font-size: .14rem;color: #2C2C2C;  background-color: #F0F0F0;font-weight: 700;padding-left: .18rem;height: .34rem;line-height: .34rem;">
                        备注
                     </view>
                     <span class="" v-for="item in ListDetails.notesList"
                        style="font-size: .1rem;color: #2C2C2C;margin: .1rem 0 .19rem;line-height: 2.3;">
                        {{item.content}}
                     </span>
                  </view>
               </view>
            </view>
            <view class="flex detailsBtn">
               <el-button class="flex btn-prev">
                  <view class="flex">
                     <view class="" style="margin-right: 40rpx;">上一条</view>
                     <view class="btn-prev-L">机构: 太医院 </view>
                  </view>
               </el-button>
               <view class="">
                  102/329
               </view>
               <el-button class="flex btn-next">
                  <view class="flex">
                     <view class="" style="margin-right: 40rpx;">机构: 太医院 </view>
                     <view class="btn-prev-R">下一条</view>
                  </view>
               </el-button>
            </view>
         </view>
      </el-dialog>
  <view>
    <headNav :idIndex="idIndex" text="中医医事制度" />
    <view class="flex flex-center sousuo" style="flex-direction: column">
      <view class="search1">
        <next-search-more
          :keyword="SearchValue"
          @search="onSearch"
          placeholder="搜索职官/机构"
          :selectValue="selectValue"
        >
        </next-search-more>
      </view>
      <view class="flex remen">
        热门搜索：
        <ul class="flex" style="margin-right: 10rpx">
          <li
            v-for="(item, index) in hot"
            :key="item.id"
            @tap="HotClick(item.name, index)"
            :class="{ cursor: true, active: hotAciveIndex === index }"
            style="margin: 0 0.05rem; color: #244a7b; cursor: pointer"
          >
            {{ item.name }}
          </li>
        </ul>
      </view>
    </view>
    <view class="centre flex">
      <!-- 左 -->
      <view class="CLeft flex fbox">
        <!-- 职业 -->
        <view
          class="demo-uni-col MargB box boox"
          :class="{ a: activeBox === 'a' ? 'a' : '' }"
          style="background-color: #fff; border: 2rpx solid #e0e0e0"
        >
          <h3>{{ institution.title }} ({{ institution.list.length - 1 }})</h3>
          <ul style="margin-top: 10rpx">
            <li
              class="flex"
              :style="{
                background:
                  institution.index === item.dynastyId ? '#DDE8F6' : '',
                borderRadius:
                  institution.index === item.dynastyId ? '60rpx' : '',
                display: index + 1 > institutionIndex ? 'none' : 'flex'
              }"
              v-for="(item, index) in institution.list"
              :key="index"
              style="padding: 0 20rpx; color: #2c2c2c; cursor: pointer"
              @click="handInstitCLick(item, 'a')"
            >
              <view>{{ item.dynastyName }}</view>
              <view>{{ item.count }}</view>
            </li>
          </ul>
          <view v-if="institution.list.length - 1 > 3" class="flex flex-center">
            <view
              class="toggleButton"
              style="color: #244a7b; cursor: pointer"
              @click="shrinkClick('a', '机构')"
            >
              {{ activeBox !== "a" ? "更多  ∨" : "收起  ∧" }}
            </view>
          </view>
        </view>
        <!-- 职官统计（10） -->
        <view
          class="demo-uni-col MargB dark box boox"
          :class="{ b: activeBox === 'b' ? 'b' : '' }"
          style="background-color: #fff; border: 2rpx solid #e0e0e0"
        >
          <h3>{{ officials.title }} ({{ officials.list.length - 1 }})</h3>
          <ul style="margin-top: 10rpx">
            <!-- background-color: #d6e3f4;border-radius: 60rpx; -->
            <li
              class="flex"
              :style="{
                background: officials.index === item.dynastyId ? '#DDE8F6' : '',
                borderRadius: officials.index == item.dynastyId ? '10rem' : '',
                display: index + 1 > officialsIndex ? 'none' : 'flex'
              }"
              v-for="(item, index) in officials.list"
              :key="index"
              style="padding: 0 20rpx; cursor: pointer"
              @click="handInstitCLick(item, 'b')"
            >
              <view>{{ item.dynastyName }}</view>
              <view>{{ item.count }}</view>
            </li>
          </ul>
          <view v-if="officials.list.length - 1 > 3" class="flex flex-center">
            <view
              class="toggleButton"
              style="color: #244a7b; cursor: pointer"
              @click="shrinkClick('b', '职官')"
            >
              {{ activeBox !== "b" ? "更多  ∨" : "收起  ∧" }}
            </view>
          </view>
        </view>
        <!-- 来源（5） -->
        <view
          class="demo-uni-col dark box boox"
          style="background-color: #fff; border: 2rpx solid #e0e0e0"
        >
          <h3>{{ source.title }} ({{ source.list.length }})</h3>
          <ul style="margin-top: 10rpx">
            <!-- background-color: #d6e3f4;border-radius: 60rpx; -->
            <li
              class="flex"
              v-for="(item, index) in source.list"
              style="padding: 0 20rpx; color: #244a7b"
            >
              <view @click="handInstitCLick(item, 'c')" class="BeyondHiding1"
                >{{ index + 1 }}.{{ item.source }}
              </view>
            </li>
          </ul>
        </view>
      </view>
      <!-- 右 -->
      <view
        class="CRight fbox1 flex flex-column relative"
        v-loading="pageLoading"
      >
        <view class="flex" style="width: 100%; margin-bottom: 0.3rem">
          <view style="font-size: 0.14rem; color: #2c2c2c; font-weight: 400"
            >共{{ total }}条</view
          >
          <view class="paixu">
            <el-select v-model="rankVal" @change="selectChange">
              <el-option
                v-for="(item, rankIndex) in rank"
                :key="rankIndex"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </view>
        </view>
        <view class="flex CommodityList">
          <view
            class="rightList"
            @click="ListClick(item, index)"
            v-for="(item, index) in CommodityList"
            :key="item"
          >
            <el-card class="box-card" style="height: 100%">
              <view class="flex flex-start RightListTop">
                <view
                  class="Topzhiwei"
                  style="
                    background-color: #5879a4;
                    text-align: right;
                    color: #fff;
                  "
                  :style="{
                    background: item.post === '职官' ? '#DA7A2B' : '#597AA5'
                  }"
                >
                  {{ item.post }}
                </view>
                <view
                  class="TopName flex"
                  :title="item.name"
                  style="justify-content: left"
                >
                  <view class="title">{{ item.name }}</view>
                  <view class="TopDynasty">
                    {{ item.dynasty }}
                  </view>
                </view>
              </view>
              <view class="desBox" style="padding: 0.14rem 0.2rem 0.23rem">
                <view class="biecheng">
                  <view
                    class="flex"
                    style="flex: 1; justify-content: left; overflow: hidden"
                  >
                    <view>别称：</view>
                    <view
                      class="BeyondHiding1"
                      style="width: 0.75rem; line-height: 1; flex: 1"
                      :title="item.alias"
                    >
                      {{ item.alias || "-" }}
                    </view>
                  </view>
                  <view
                    class="flex"
                    style="flex: 1; justify-content: left; overflow: hidden"
                  >
                    <view>来源：</view>
                    <view
                      class="BeyondHiding1"
                      style="margin-left: 0.1rem; line-height: 1; flex: 1"
                      :title="item.source"
                    >
                      {{ item.source || "-" }}
                    </view>
                  </view>
                </view>
                <view
                  class="describe font-family BeyondHiding2"
                  :title="item.desc"
                >
                  {{ item.desc || "-" }}
                </view>
              </view>
            </el-card>
          </view>
          <view
            class="nullBox"
            v-if="CommodityList.length == 0 && !pageLoading"
          >
            <el-empty description="暂无数据"></el-empty>
          </view>
        </view>
        <!-- 分页 -->
        <el-row
          v-if="CommodityList.length"
          class="fenye"
          style="position: absolute; bottom: 0.1rem"
        >
          <el-pagination
            class="paging"
            :current-page="CurrentPage"
            :total="total"
            :page-size="pageSize"
            @current-change="CurrentChange"
            @prev-click="PrevClick"
            @next-click="NextClick"
            prev-text="上一页"
            next-text="下一页"
            background
            layout="prev, pager, next"
          >
          </el-pagination>
        </el-row>
      </view>
    </view>
    <!-- 弹出层 -->
    <el-dialog class="dialog" :visible.sync="dialogVisible" width="40%">
      <!-- 取消键 -->
      <view
        style="
          padding: 0.16rem;
          position: absolute;
          z-index: 999999;
          left: 0;
          top: 0;
        "
      >
        <img
          @click="dialogVisible = false"
          src="@/static/image/X.png"
          alt=""
          style="width: 100%; height: 100%; cursor: pointer"
          sizes=""
          srcset=""
        />
      </view>
      <view
        class="flex"
        style="position: relative; height: 100%; flex-direction: column"
      >
        <view class="detailImage" style="position: relative">
          <img src="@/static/image/personageBg.png" alt="" />
          <view
            class="flex flex-column"
            style="
              height: 100%;
              justify-content: flex-start;
              position: relative;
              z-index: 999;
            "
          >
            <view class="creatureXinxi1">{{ ListDetails.name }}</view>
            <view class="creatureXinxi2">
              {{ ListDetails.dynasty }}
            </view>
            <ul class="flex creatureXinxi3">
              <li @click="PDFClick(ListDetails, 1)">RDF</li>
              <li @click="PDFClick(ListDetails, 2)">NT</li>
              <li @click="PDFClick(ListDetails, 3)">XML</li>
              <li @click="PDFClick(ListDetails, 4)">JSON</li>
            </ul>
          </view>
        </view>
        <view style="width: 80%; height: 100%; position: relative">
          <view class="pinji flex">
            <view
              >品级：<span> {{ ListDetails.grade || "-" }}</span>
            </view>
            <view
              >别名：<span> {{ ListDetails.alias || "-" }}</span>
            </view>
            <view
              >来源：<span> {{ ListDetails.source || "-" }}</span>
            </view>
          </view>
          <view>
            <view
              style="
                font-size: 0.14rem;
                color: #2c2c2c;
                background-color: #f0f0f0;
                font-weight: 700;
                padding-left: 0.18rem;
                height: 0.34rem;
                line-height: 0.34rem;
              "
            >
              相关描述
            </view>
            <view
              style="
                font-size: 0.14rem;
                color: #2c2c2c;
                margin: 0.1rem 0 0.19rem;
                line-height: 2.3;
              "
            >
              {{ ListDetails.desc || "-" }}
            </view>
            <view>
              <view
                style="
                  font-size: 0.14rem;
                  color: #2c2c2c;
                  background-color: #f0f0f0;
                  font-weight: 700;
                  padding-left: 0.18rem;
                  height: 0.34rem;
                  line-height: 0.34rem;
                "
              >
                备注
              </view>
              <span
                v-for="item in ListDetails.notesList"
                style="
                  font-size: 0.14rem;
                  color: #2c2c2c;
                  margin: 0.1rem 0 0.19rem;
                  line-height: 2.3;
                "
              >
                {{ item.content }}
              </span>
            </view>
          </view>
        </view>
        <view class="flex detailsBtn">
          <el-button
            class="flex btn-prev"
            :disabled="!ListDetails.prev"
            @click="ListClick(ListDetails.prev, ListDetails.prev.index)"
          >
            <view class="flex">
              <view style="width: 0.6rem">上一条</view>
              <view
                class="btn-prev-L"
                style="
                  flex: 1;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                "
                :title="ListDetails.prev ? ListDetails.prev.name : '-'"
              >
                {{
                  ListDetails.prev
                    ? ListDetails.prev.typeName + "：" + ListDetails.prev.name
                    : "-"
                }}
              </view>
            </view>
          </el-button>
          <view class="pageInfo">
            {{ ListDetails.index + 1 }}/{{ total }}
          </view>
          <el-button
            class="flex btn-next"
            :disabled="!ListDetails.next"
            @click="ListClick(ListDetails.next, ListDetails.next.index)"
          >
            <view class="flex">
              <view
                style="
                  flex: 1;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                "
                :title="ListDetails.next ? ListDetails.next.name : '-'"
              >
                {{
                  ListDetails.next
                    ? ListDetails.next.typeName + "：" + ListDetails.next.name
                    : "-"
                }}
              </view>
              <view class="btn-prev-R" style="width: 0.6rem">下一条</view>
            </view>
          </el-button>
        </view>
      </view>
    </el-dialog>

      <Footer1 :isLocation="false" :isMarginTop="0.5" />
   </view>
    <Footer1 :isLocation="false" :isMarginTop="0.5" />
  </view>
</template>

<script>
   import {
      getDataStatistics,
      getMedicalList,
      getMedicalDetails,
      getHotSearch,
      getMedicalDataOutput
   } from '@/api/index.js'
   import Footer1 from '@/components/footer/footer.vue'
   export default {
      components: {
         Footer1
      },
      data() {
         return {
            // 机构统计
            institution: {
               title: '机构统计',
               index: 0,
               list: [ ]
            },
            // 显示多少条职官数据
            institutionIndex:4,
            // 机构和职官的类型 取值：OFFICIAL->职官 INSTITUTION->机构 ALL->职官、机构
            classifyType: 'ALL',
            // 机构和职官的id
            classifyId: 0,
            // 职官统计
            officials: {
               title: '职官统计',
               index: 0,
               list: [ ]
            },
            // 显示多少条职官数据
            officialsIndex:4,
            // 来源
            source: {
               title: '来源',
               index: 0,
               list: [ ]
            },
            // 展开和收缩的按钮需要
            activeBox: null,
            // 标题顶部栏需要的东西
            idIndex: 0,
            // 弹出层
            dialogVisible: false,
            // 搜索的下拉列表
            selectValue: [{
               value: 0,
               text: '医事制度'
            }, {
               value: 1,
               text: '11sd1'
            }, {
               value: 2,
               text: '11sdsd1'
            }],
import {
  getDataStatistics,
  getMedicalList,
  getMedicalDetails,
  getHotSearch,
  getMedicalDataOutput
} from "@/api/index.js";
import Footer1 from "@/components/footer/footer.vue";
export default {
  components: {
    Footer1
  },
  data() {
    return {
      hotAciveIndex: "",
      // 机构统计
      institution: {
        title: "机构统计",
        index: 0,
        list: []
      },
      // 显示多少条职官数据
      institutionIndex: 4,
      // 机构和职官的类型 取值：OFFICIAL->职官 INSTITUTION->机构 ALL->职官、机构
      searchType: "ALL",
      classifyType: "ALL",
      // 机构和职官的id
      classifyId: "",
      // 职官统计
      officials: {
        title: "职官统计",
        index: 0,
        list: []
      },
      // 显示多少条职官数据
      officialsIndex: 4,
      // 来源
      source: {
        title: "来源",
        index: 0,
        list: []
      },
      // 展开和收缩的按钮需要
      activeBox: null,
      // 标题顶部栏需要的东西
      idIndex: 0,
      // 弹出层
      dialogVisible: false,
      // 搜索的下拉列表
      selectValue: [
        {
          value: 0,
          text: "医事制度"
        }
      ],

            // 热门搜索  
            hot: [],
            // 点击的搜索项
            HotBg: false,
            // 排序下拉菜单
            rank: [{
               value: 'CREATE',
               label: '创建时间'
            }, {
               value: 'NAME',
               label: '名称'
            }],
            rankVal: 'NAME',
            // 列表项  
            CommodityList: [ ],
            // 列表的详情数据
            ListDetails: {},
            // 分页的总数
            total: 0,
            // 当前页
            CurrentPage: 1,
            // 一页显示多少条数据
            pageSize: 6,
            // 搜索的value
            SearchValue: ''
         }
      },
      mounted() {
         // 修改两次的高度保持一致
         var box1Height = document.querySelector('.fbox').offsetHeight;
         console.log(box1Height, 'box1Height');
         document.querySelector('.fbox1').style.height = box1Height + 'px';

         // 接口左侧的机构统计等
         this.getStatistics()
         this.getMList()
      },
      onLoad(options) {
         this.idIndex = options.id
         console.log('optionsoptionsoptions', options.id);
      },
      methods: {
         // 接口的数据统计
         async getStatistics() {
            await getHotSearch().then(res => {
               console.log(res, '热门搜索');
               this.hot = Object.keys(res.object).map(key => {
                  return {
                     id: parseInt(key),
                     name: res.object[key]
                  };
               })
            })
            await getDataStatistics().then(res => {
               let totalCount1 = res.object.institutionStatistic.details.reduce((total, item) => total +
                  item.count, 0);
               let totalCount2 = res.object.officialStatistic.details.reduce((total, item) => total + item
                  .count, 0);
               this.institution.list = [
                  // {
                  //    count: totalCount1,
                  //    dynastyId: 0,
                  //    dynastyName: "全部"
                  // },
                  ...res.object.institutionStatistic.details
               ]
               this.institution.index = this.institution.list[0].dynastyId
               this.officials.list = [
                  // {
                  //    count: totalCount2,
                  //    dynastyId: 0,
                  //    dynastyName: "全部"
                  // },
                  ...res.object.officialStatistic.details
               ]
               this.officials.index = this.officials.list[0].dynastyId
               // this.officials.list = res.object.officialStatistic.details
               this.source.list = res.object.sourceStatistic.details
               this.source.index = this.source.list[0].bookId
               // let a = [{count:4,dynastyName:'sdf'}]
               //  [{name:'sdf',number}]
               console.log(res, '接口成功sdsdfsdsfs');
            })
				
         },
         // 右侧的list数据 
         async getMList(obj) {
            let Obj = {
               "type": this.classifyType, //查询类型 取值：OFFICIAL->职官 INSTITUTION->机构 ALL->职官、机构
               "bookId": this.source.index, // 点击来源查询数据时，带上此参数
               "name": this.SearchValue, //搜索框检索
               "dynastyId": this.classifyId, //点击朝代查询数据时，带上此参数
               "sort": this.rankVal, //排序方式 取值：CREATE创建时间，NAME名称
               "page": this.CurrentPage, //第几页
               "pageSize": this.pageSize //每页数量
            }
            await getMedicalList(Obj).then(res => {
               this.CommodityList = res.list.map(item => {
                  return {
                     id: item.id,
                     post: item.type === 'OFFICIAL' ? '职官' : item.type === 'INSTITUTION' ?
                        '机构' : '职官、机构',
                     name: item.name,
                     anotherNamer: item.alias,
                     source: item.source, // 来源
                     dynasty: item.dynasty, // 朝代
                     content: item.desc,
                     ...item
                  }
               })
               // 总数量
               this.total = res.npage.totalCount
               console.log(res, '数据');
            })
         },
         // list数组 获取list里面的详情shuju
         async ListClick(item) {
            console.log(item, 'listsdfdsfsdfs');
            let Obj = {
               id: item.id,
               type: item.type
            }
            await getMedicalDetails(Obj).then(res => {
               this.ListDetails = {
                  ...item,
                  ...res.object
               }
               console.log(res, this.ListDetails, '详情数据');
            })
            this.dialogVisible = !this.dialogVisible
         },
         // 左侧的机构统计等等按钮
         handInstitCLick(item, name) {
            if (name == 'a') {
               this.CurrentPage = 1
               this.institution.index = item.dynastyId
               this.classifyId = item.dynastyId
               this.classifyType = 'INSTITUTION'
               this.getMList()
            } else if (name == 'b') {
               this.CurrentPage = 1
               this.officials.index = item.dynastyId
               this.classifyId = item.dynastyId
               this.classifyType = 'OFFICIAL'
               this.getMList()
            } else if (name == 'c') {
               this.CurrentPage = 1
               this.source.index = item.bookId
               this.getMList()
               console.log();
            }
            console.log(item, name);
         },
         // 展开收缩
         shrinkClick(box,name) {
            console.log(box);
            if(name=='机构'){
               this.institutionIndex = this.institutionIndex < this.institution.list.length ? this.institution.list.length : 4;
               this.officialsIndex=4
               this.activeBox = this.activeBox === 'a' ? null : 'a';
            }else if(name=='职官'){
               this.officialsIndex = this.officialsIndex < this.officials.list.length ? this.officials.list.length : 4;
               this.institutionIndex=4
               this.activeBox = this.activeBox === 'b' ? null : 'b';
            }
            // if (this.activeBox === box) {
            //    console.log('sdfs');
            //    this.activeBox = null;
            // } else {
            //    this.activeBox = box;
            // }
         },
         //取值：RDF、NT、XML、JSON
         async PDFClick(item,index) {
            let Obj = {
               id:item.id,
               type:item.type,
            }
            if (index == 1) {
               Obj.outputType='RDF'
               console.log(Obj);
               let queryString = Object.keys(Obj).map(key => `${encodeURIComponent(key)}=${encodeURIComponent(Obj[key])}`).join('&');
               console.log(queryString);
               // uni.navigateTo({
               //    url:`/pages/RDF/RDF?${queryString}` 
               // })
               window.open(`#/pages/RDF/RDF?${queryString}`)
            }else if(index ==2){
               Obj.outputType='NT'
               let queryString = Object.keys(Obj).map(key => `${encodeURIComponent(key)}=${encodeURIComponent(Obj[key])}`).join('&');
               window.open(`#/pages/NT/NT?${queryString}`)
            }else if(index==3){
               Obj.outputType='XML'
               console.log('XML');
               await getMedicalDataOutput(Obj).then(res=>{
                  console.log(res,'接口XML');
               })
            }else if(index ==4){
               Obj.outputType='JSON'
               console.log('JSON');
               await getMedicalDataOutput(Obj).then(res=>{
                  console.log(res,'接口JSON');
               })
            }
            // console.log(Obj.id,);
         },
         // 搜索按钮
         onSearch(val) {
            this.SearchValue = val
            this.getMList()
            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
               }
            })

         },
         // 按照什么排序
         selectChange(e) {
            this.getMList()
            // console.log(e,this.rankVal);
         },
         // 分页当前页触发事件
         CurrentChange(val) {
            if (this.CurrentPage != val) {
               this.CurrentPage = val
               console.log('当前页', val);
               console.log(this.CurrentPage);
               this.getMList()
            }
         },
         // 上一页
         PrevClick(val) {
            if (this.CurrentPage != val) {
               this.CurrentPage = val
               // console.log('上一页', val);
               // console.log(this.CurrentPage);
               this.getMList()
            }
         },
         // 下一页
         NextClick(val) {
            if (this.CurrentPage != val) {
               // console.log('下一页',val);
               this.CurrentPage = val
               // console.log(this.CurrentPage);
               this.getMList()
            }
         }
      }
   }
      // 热门搜索
      hot: [],
      // 点击的搜索项
      HotBg: false,
      // 排序下拉菜单
      rank: [
        {
          value: "CREATE",
          label: "按创建时间排序"
        },
        {
          value: "NAME",
          label: "按名称排序"
        }
      ],
      rankVal: "NAME",
      // 列表项
      CommodityList: [],
      // 列表的详情数据
      ListDetails: {},
      // 分页的总数
      total: 0,
      // 当前页
      CurrentPage: 1,
      // 一页显示多少条数据
      pageSize: 6,
      // 搜索的value
      SearchValue: "",
      pageLoading: true
    };
  },
  onLoad(options) {
    this.idIndex = options.id;
  },
  mounted() {
    // 修改两次的高度保持一致
    var box1Height = document.querySelector(".fbox").offsetHeight;
    // 接口左侧的机构统计等
    this.getStatistics();
    this.getMList();
  },
  methods: {
    // 接口的数据统计
    getStatistics() {
      getHotSearch().then((res) => {
        this.hot = Object.keys(res.object).map((key) => {
          return {
            id: parseInt(key),
            name: res.object[key]
          };
        });
      });
      getDataStatistics().then((res) => {
        this.institution.list = [
          {
            count: res.object.institutionStatistic.totalCount,
            dynastyId: "",
            dynastyName: "全部"
          },
          ...res.object.institutionStatistic.details
        ];
        // this.institution.index = this.institution.list[0].dynastyId;
        this.officials.list = [
          {
            count: res.object.officialStatistic.totalCount,
            dynastyId: "",
            dynastyName: "全部"
          },
          ...res.object.officialStatistic.details
        ];
        // this.officials.index = this.officials.list[0].dynastyId;
        this.source.list = res.object.sourceStatistic.details;
        this.source.index = this.source.list[0].bookId;
      });
    },
    // 右侧的list数据
    getMList(key, index) {
      if (index !== undefined) {
        this.SearchValue = "";
        this.hotAciveIndex = index;
      } else {
        this.hotAciveIndex = "";
      }
      this.pageLoading = true;
      let Obj = {
        medicalSearchType: this.searchType,
        type: this.classifyType, //查询类型 取值：OFFICIAL->职官 INSTITUTION->机构 ALL->职官、机构
        name: key ? key : this.SearchValue, //搜索框检索
        dynastyId: this.classifyId, //点击朝代查询数据时，带上此参数
        sort: this.rankVal, //排序方式 取值：CREATE创建时间，NAME名称
        page: this.CurrentPage, //第几页
        pageSize: this.pageSize //每页数量
      };
      getMedicalList(Obj).then((res) => {
        this.CommodityList = res.list.map((item) => {
          return {
            requestId: this.searchType == "ALL" ? item.id : item.rowId,
            post:
              item.type === "OFFICIAL"
                ? "职官"
                : item.type === "INSTITUTION"
                ? "机构"
                : "职官、机构",
            ...item
          };
        });
        // 总数量
        this.total = res.npage.totalCount;
        this.pageLoading = false;
      });
    },
    // list数组 获取list里面的详情shuju
    ListClick(item, index) {
      let Obj = {
        rowId: item.requestId,
        medicalSearchType: this.searchType,
        type: this.classifyType, //查询类型 取值：OFFICIAL->职官 INSTITUTION->机构 ALL->职官、机构
        name: this.SearchValue, //搜索框检索
        dynastyId: this.classifyId, //点击朝代查询数据时，带上此参数
        sort: this.rankVal //排序方式 取值：CREATE创建时间，NAME名称
      };
      getMedicalDetails(Obj).then((res) => {
        this.ListDetails = {
          index,
          ...item,
          ...res.object.curr,
          next:
            res.object.next && res.object.next.name
              ? {
                  ...res.object.next,
                  requestId: res.object.next.rowId,
                  index: index + 1,
                  typeName:
                    res.object.next.type === "OFFICIAL" ? "职官" : "机构"
                }
              : null,
          prev:
            res.object.prev && res.object.prev.name
              ? {
                  ...res.object.prev,
                  requestId: res.object.prev.rowId,
                  index: index - 1,
                  typeName:
                    res.object.prev.type === "OFFICIAL" ? "职官" : "机构"
                }
              : null
        };
        this.dialogVisible = true;
      });
    },
    // 左侧的机构统计等等按钮
    handInstitCLick(item, name) {
      if (name == "a") {
        this.CurrentPage = 1;
        this.institution.index = item.dynastyId;
        this.officials.index = 0;
        this.classifyId = item.dynastyId;
        this.classifyType = "INSTITUTION";
        this.getMList();
      } else if (name == "b") {
        this.CurrentPage = 1;
        this.officials.index = item.dynastyId;
        this.institution.index = 0;
        this.classifyId = item.dynastyId;
        this.classifyType = "OFFICIAL";
        this.getMList();
      } else if (name == "c") {
        this.CurrentPage = 1;
        this.source.index = item.bookId;
        this.getMList();
      }
    },
    // 展开收缩
    shrinkClick(box, name) {
      if (name == "机构") {
        this.institutionIndex =
          this.institutionIndex < this.institution.list.length
            ? this.institution.list.length
            : 4;
        this.officialsIndex = 4;
        this.activeBox = this.activeBox === "a" ? null : "a";
      } else if (name == "职官") {
        this.officialsIndex =
          this.officialsIndex < this.officials.list.length
            ? this.officials.list.length
            : 4;
        this.institutionIndex = 4;
        this.activeBox = this.activeBox === "b" ? null : "b";
      }
      // if (this.activeBox === box) {
      //    this.activeBox = null;
      // } else {
      //    this.activeBox = box;
      // }
    },
    //取值：RDF、NT、XML、JSON
    async PDFClick(item, index) {
      let Obj = {
        id: item.dataId,
        type: item.type
      };
      if (index == 1) {
        Obj.outputType = "RDF";
      } else if (index == 2) {
        Obj.outputType = "NT";
      } else if (index == 3) {
        Obj.outputType = "XML";
      } else if (index == 4) {
        Obj.outputType = "JSON";
      }
      let queryString = Object.keys(Obj)
        .map(
          (key) => `${encodeURIComponent(key)}=${encodeURIComponent(Obj[key])}`
        )
        .join("&");
      window.open(`#/pages/fileDetail/index?${queryString}`);
    },
    // 搜索按钮
    onSearch(val) {
      this.SearchValue = val;
      this.getMList();
    },
    // 热门搜索
    HotClick(val, index) {
      // this.SearchValue = val;
      this.getMList(val, index);
    },
    // 按照什么排序
    selectChange(e) {
      this.getMList();
    },
    // 分页当前页触发事件
    CurrentChange(val) {
      if (this.CurrentPage != val) {
        this.CurrentPage = val;
        this.getMList();
      }
    },
    // 上一页
    PrevClick(val) {
      if (this.CurrentPage != val) {
        this.CurrentPage = val;
        this.getMList();
      }
    },
    // 下一页
    NextClick(val) {
      if (this.CurrentPage != val) {
        this.CurrentPage = val;
        this.getMList();
      }
    }
  }
};
</script>

<style scoped>
   @media screen and (min-width:2560px)and (max-width:3840px) {
@media screen and (min-width: 2560px) and (max-width: 3840px) {
  ::v-deep .search {
    height: 0.36rem;
    border-radius: 0.5rem !important;
    align-items: center;
    border-color: #597aa5 !important;
  }
}

      ::v-deep .search {
         height: .36rem;
         border-radius: .5rem !important;
         align-items: center;
         border-color: #597AA5 !important;
      }
   }
@media screen and (min-width: 1366px) and (max-width: 1920px) {
  ::v-deep .search {
    height: 0.36rem;
    border-radius: 0.5rem !important;
    align-items: center;
    border-color: #597aa5 !important;
  }
}

   @media screen and (min-width:1366px) and (max-width:1920px) {
      ::v-deep .search {
         height: .36rem;
         border-radius: .5rem !important;
         align-items: center;
         border-color: #597AA5 !important;
      }
   }
/* 个人信息 */
.creatureXinxi1 {
  font-size: 0.24rem;
  font-weight: 700;
  line-height: 1;
  margin-top: 0.29rem;
}

   /* 个人信息 */
   .creatureXinxi1 {
      font-size: .24rem;
      font-weight: 700;
      line-height: 1;
      margin-top: .29rem;
   }
.creatureXinxi2 {
  line-height: 1;
  font-size: 0.12rem;
  font-weight: 600;
  background-color: #fff;
  padding: 0.02rem 0.04rem;
  margin: 0.15rem 0;
  color: #2c2c2c;
  border: 1px solid #2c2c2c;
  border-radius: 2px;
}

   .creatureXinxi2 {
      /* width: .24rem; */
      height: .17rem;
      line-height: 1;
      font-size: .12rem;
      font-weight: 600;
      background-color: #fff;
      padding: .02rem .04rem;
      margin: .15rem 0;
      color: #2C2C2C;
      border: 1px solid #2C2C2C;
      border-radius: 2px;
   }
.creatureXinxi3 li {
  line-height: 0.16rem;
  background-color: #fff;
  padding: 0 0.08rem;
  margin: 0 0.07rem;
  font-size: 0.12rem;
  color: #2c2c2c;
  border: 1px solid #2c2c2c;
  border-radius: 0.3rem;
  cursor: pointer;
}

   .creatureXinxi3 li {
      height: .16rem;
      line-height: .16rem;
      background-color: #fff;
      padding: 0 .08rem;
      margin: 0 .07rem;
      font-size: .12rem;
      color: #2C2C2C;
      border: 1px solid #2C2C2C;
      border-radius: .3rem;
   }

   /* --------- */
   /* 品级 */
   .pinji {
      box-shadow: 2px 0px 3px #888;
      background-color: #fff;
      width: 100%;
      /* height: .6rem;
/* --------- */
/* 品级 */
.pinji {
  box-shadow: 0 0 3px #888;
  border-radius: 6px;
  background-color: #fff;
  width: 100%;
  /* height: .6rem;
      line-height: .6rem; */
      font-size: .14rem;
      padding: .19rem .28rem .21rem;
      left: 0;
      position: relative;
      top: -.25rem;
      color: #2C2C2C;
   }
  font-size: 0.14rem;
  padding: 0.19rem 0.28rem 0.21rem;
  left: 0;
  position: relative;
  top: -0.25rem;
  color: #2c2c2c;
  font-weight: bold;
  span {
    font-weight: initial;
  }
}

   /* 个人信息的按钮 */
   .detailsBtn {
      padding: .2rem;
      width: 100%;
      margin-bottom: 2rpx;
      position: absolute;
      bottom: 0;
   }
/* 个人信息的按钮 */
.detailsBtn {
  padding: 0.2rem;
  width: 100%;
  margin-bottom: 2rpx;
  position: absolute;
  bottom: 0;
}

   .detailsBtn .btn-prev,
   .detailsBtn .btn-next {
      font-size: .14rem;
      /* padding: .14rem .1rem; */
      border: 1px solid #9E9E9E;
      border-radius: 5px;
      /* height: .32rem; */
      line-height: .32rem;
   }
.detailsBtn .btn-prev,
.detailsBtn .btn-next {
  font-size: 0.14rem;
  /* padding: .14rem .1rem; */
  border: 1px solid #9e9e9e;
  border-radius: 5px;
  /* height: .32rem; */
  line-height: 0.32rem;
  flex: 1;
  overflow: hidden;
}

   .detailsBtn .btn-prev-L,
   .detailsBtn .btn-prev-R {
      border-left: 1px solid #9E9E9E;
      padding-left: .1rem;
   }
.detailsBtn .pageInfo {
  width: 1rem;
  text-align: center;
}

   .detailsBtn>:nth-child(2) {
      font-size: .14rem;
      color: #2C2C2C;
   }
.detailsBtn .btn-prev-L,
.detailsBtn .btn-prev-R {
  border-left: 1px solid #9e9e9e;
  text-align: center;
}

   /* ------ */
   img {
      width: 100%;
      height: 100%;
   }
.detailsBtn > :nth-child(2) {
  font-size: 0.14rem;
  color: #2c2c2c;
}

   .NavTop {
      background-color: #0c274c;
      padding: 25rpx;
      color: #fff !important;
/* ------ */
img {
  width: 100%;
  height: 100%;
}

      img {
         width: 30rpx;
         height: 30rpx;
         vertical-align: middle;
      }
.NavTop {
  background-color: #0c274c;
  padding: 25rpx;
  color: #fff !important;

      .NavTopr {
         img {
            margin-right: 10rpx;
         }
      }
   }
  img {
    width: 30rpx;
    height: 30rpx;
    vertical-align: middle;
  }

   .mImage {
      width: 100%;
      height: 40rpx;
  .NavTopr {
    img {
      margin-right: 10rpx;
    }
  }
}

      img {
         vertical-align: top;
      }
   }
.mImage {
  width: 100%;
  height: 40rpx;

  img {
    vertical-align: top;
  }
}

.centre {
  padding-left: 1.23rem;
  padding-right: 1.17rem;
  align-items: stretch;

   .centre {
      padding-left: 1.23rem;
      padding-right: 1.17rem;
      /* border: 1px solid #000; */
      /* height: 70vh; */
      /* overflow: hidden; */
      align-items: flex-start;
      position: relative;
      z-index: 1;
  .CLeft {
    width: 2.4rem;
    flex-direction: column;
    margin-right: 0.2rem;
    .institution {
      width: 100%;
      border: 1px solid #000;
      padding: 20rpx;
    }
    .institution2 {
      margin: 20rpx 0;
    }
    .institution3 {
      flex-grow: 1;
    }
  }

      .CLeft {
         width: 2.6rem;
         height: 100%;
         vertical-align: top;
         flex-direction: column;
         justify-content: flex-start;
         margin-right: .2rem;
  .CRight {
    flex: 1;
    border: 1px solid #c1d3ea;
    box-sizing: border-box;
    overflow: hidden;
    padding: 0.1rem 0.2rem;
  }
}

         .institution {
            width: 100%;
            border: 1px solid #000;
            padding: 20rpx;
.CommodityList {
  flex-grow: 1;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  align-content: flex-start;
  /* padding: 20rpx 20rpx 0 20rpx; */
  justify-content: space-between;

         }
  > .rightList {
    width: 49%;
    margin-bottom: 20rpx;

         .institution2 {
            margin: 20rpx 0;
         }
    .box-card {
      overflow: visible;
    }
  }
}

         .institution3 {
            flex-grow: 1;
         }
      }

      .CRight {
         /* margin-left: 20rpx; */
         width: 100%;
         height: 100%;
         flex-grow: 1;
         border: 1px solid #c1d3ea;
         box-sizing: border-box;
         overflow: hidden;
         padding: 10rpx 30rpx;
         padding: .1rem .2rem;
         background-color: #fff;
      }
   }

   .CommodityList {
      flex-grow: 1;
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-wrap: wrap;
      align-content: flex-start;
      /* padding: 20rpx 20rpx 0 20rpx; */
      justify-content: space-between;

      >view {
         width: 49%;
         margin-bottom: 20rpx;

         .box-card {
            overflow: visible;
         }
      }
   }

   /* ::v-deep .el-card__body{
/* ::v-deep .el-card__body{
      padding: 30rpx;
   } */
   /* 分页 */
   .paging {
      display: flex;
      align-items: center;
   }
/* 分页 */
.paging {
  display: flex;
  align-items: center;
}

   .paging ::v-deep .btn-prev,
   .paging ::v-deep .btn-next {
      border: 0;
   }
.paging ::v-deep .btn-prev,
.paging ::v-deep .btn-next {
  border: 0;
}

   .paging ::v-deep .btn-prev span,
   .paging ::v-deep .btn-next span {
      font-size: .12rem;
      height: .3rem;
      line-height: .3rem;
      background-color: #fff;
      color: #9E9E9E;
      text-align: center;
      border: 1px solid #9E9E9E;
      padding: 0 .1rem;
   }
.paging ::v-deep .btn-prev span,
.paging ::v-deep .btn-next span {
  font-size: 0.12rem;
  height: 0.36rem;
  line-height: 0.36rem;
  background-color: #fff;
  color: #9e9e9e;
  text-align: center;
  border: 1px solid #9e9e9e;
  padding: 0 0.1rem;
}

   .paging ::v-deep .el-pager li {
      font-size: .1rem;
      width: .28rem;
      height: .3rem;
      line-height: .3rem;
      background-color: #fff;
      color: #9E9E9E;
      text-align: center;
      border: 1px solid #9E9E9E;
   }
.paging ::v-deep .el-pager li {
  font-size: 0.1rem;
  width: 0.36rem;
  height: 0.36rem;
  line-height: 0.36rem;
  background-color: #fff;
  color: #9e9e9e;
  text-align: center;
  border: 1px solid #9e9e9e;
}

   /* ------------ */
   .dialog {
      position: fixed;
      right: 0;
      top: 0;
      z-index: 9999999999999999999999999999999999999999999 !important;
/* ------------ */
.dialog {
  position: fixed;
  right: 0;
  top: 0;
  z-index: 99999 !important;
  > div {
    height: 100%;
    margin: 0 !important;
    position: fixed;
    right: 0;
    top: 86px;

      >div {
         height: 100%;
         margin: 0 !important;
         position: fixed;
         right: 0;
         top: 0;
    > :nth-child(1) {
      display: none;
    }

         > :nth-child(1) {
            display: none;
         }
    > :nth-child(2) {
      padding: 0;
    }
  }
}

::v-deep .el-dialog .el-dialog__body {
  height: 100%;
}

         >:nth-child(2) {
            padding: 0;
         }
      }
   }
.detailImage {
  width: 100%;
  height: 1.94rem;
  color: #000;

   ::v-deep .el-dialog .el-dialog__body {
      height: 100%;
   }
  img {
    position: absolute;
    width: 100%;
    height: 100%;
    vertical-align: top;
  }
}

   .detailImage {
      width: 100%;
      height: 1.94rem;
      color: #000;
/* 搜索按钮 */
.sousuo {
  margin: 0.35rem 0 0.19rem;
}

      img {
         position: absolute;
         width: 100%;
         height: 100%;
         vertical-align: top;
      }
   }
.search1 {
  width: 5rem;
}

::v-deep .search {
  height: 0.36rem;
  border-radius: 0.3rem;
  align-items: center;
  border-color: #597aa5 !important;
}

   /* 搜索按钮 */
   .sousuo {
      margin: .35rem 0 .19rem;
   }
::v-deep .search .content {
  height: 100% !important;
  border: 0;
}

   .search1 {
      width: 5rem;
::v-deep .search .uni-input-placeholder {
  font-size: 0.14rem;
}

   }
::v-deep .search .uni-icons {
  font-size: 0.14rem !important;
  color: #244a7b !important;
}

   ::v-deep .search {
      height: .36rem;
      border-radius: .3rem;
      align-items: center;
      border-color: #597AA5 !important;
   }
::v-deep .search .uni-input-input,
::v-deep .search .uni-select__input-box {
  font-size: 0.14rem;
  line-height: 1;
}

   ::v-deep .search .content {
      height: 100% !important;
      border: 0;
   }
::v-deep .xiala {
  width: 20% !important;
  text-align: center;
}

   ::v-deep .search .uni-input-placeholder {
      font-size: .14rem;
   }
::v-deep .uni-select__input-text {
  color: #244a7b;
}

   ::v-deep .search .uni-icons {
      font-size: .14rem !important;
      color: #244A7B !important;
   }
::v-deep .next-search-more .search {
  border: 2px solid #597aa5 !important;
}

   ::v-deep .search .uni-input-input,
   ::v-deep .search .uni-select__input-box {
      font-size: .14rem;
      line-height: 1;
   }
::v-deep .next-search-more .search .content {
  border-left: 1px solid #597aa5 !important;
}

   ::v-deep .xiala {
      width: 20% !important;
      text-align: center;
   }
.search1 ::v-deep .btnn {
  /* border: 10px solid red; */
  width: 0.74rem !important;
  height: 0.3rem;
  line-height: 0.3rem;
  text-align: center;
  font-size: 0.14rem;
  background-color: #244a7b;
  border-radius: 0.5rem;
  color: #fff;
  margin-right: 0.03rem;
  cursor: pointer;
}

   ::v-deep .uni-select__input-text {
      color: #244A7B;
   }
.search1 ::v-deep .icon-del {
  font-size: 0.24rem !important;
  cursor: pointer;
}

   ::v-deep .next-search-more .search {
      border: 2px solid #597AA5 !important;
   }
.search1 ::v-deep .uni-select__selector-item {
  position: relative;
  z-index: 99999 !important;

   ::v-deep .next-search-more .search .content {
      border-left: 1px solid #597AA5 !important;
   }
  display: flex;
  justify-content: center;
  font-size: 0.14rem;
  height: 0.3rem;
  line-height: 0.3rem;
}

   .search1 ::v-deep .btnn {
      /* border: 10px solid red; */
      width: .74rem !important;
      height: .3rem;
      line-height: .3rem;
      text-align: center;
      font-size: .14rem;
      background-color: #597AA5;
      border-radius: .5rem;
      color: #fff;
      margin-right: .03rem;
   }
/* ------------- */
/* 热门搜索 */
.remen {
  font-size: 0.12rem;
  margin-top: 0.1rem;
  color: #2c2c2c;
}

   .search1 ::v-deep .icon-del {
      font-size: .24rem !important;
   }
/* --------- */

   .search1 ::v-deep .uni-select__selector-item {
      position: relative;
      z-index: 999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999 !important;

      display: flex;
      justify-content: center;
      font-size: .14rem;
      height: .3rem;
      line-height: .3rem;
   }

   /* ------------- */
   /* 热门搜索 */
   .remen {
      font-size: .12rem;
      margin-top: .1rem;
      color: #2C2C2C;
   }

   /* --------- */

   /* .boox {
/* .boox {
      width: 100%;
      padding: .1rem .09rem;
   
@@ -914,141 +1100,162 @@
         font-size: .14rem;
      }
   } */
   .MargB {
      margin-bottom: .2rem;
   }
.MargB {
  margin-bottom: 0.2rem;
}

   /* 左边的 */
   .boox {
      width: 100%;
      padding: .1rem .09rem;
      min-height: 2rem !important;
      position: relative;
      border: 1px solid #c1d3ea !important;
/* 左边的 */
.boox {
  width: 100%;
  padding: 0.1rem 0.09rem;
  min-height: 2rem !important;
  position: relative;
  border: 1px solid #c1d3ea !important;

      ul {
         margin-top: .16rem !important;
      }
  ul {
    margin-top: 0.16rem !important;
  }

      h3 {
         font-size: .14rem;
         margin-left: .1rem;
      }
  h3 {
    font-size: 0.14rem;
    margin-left: 0.1rem;
  }

      li {
         height: .3rem;
         line-height: .3rem;
         padding: 0 .2rem !important;
         margin: .05rem 0 !important;
         border-radius: .3rem !important;
         font-size: .14rem;
      }
  li {
    height: 0.3rem;
    line-height: 0.3rem;
    padding: 0 0.2rem !important;
    margin: 0.05rem 0 !important;
    border-radius: 0.3rem !important;
    font-size: 0.14rem;
  }

      .toggleButton1 {
         position: absolute;
         bottom: .1rem !important;
         left: 40% !important;
      }
  .toggleButton1 {
    position: absolute;
    bottom: 0.1rem !important;
    left: 40% !important;
  }

      .toggleButton {
         font-size: .14rem !important;
      }
   }
  .toggleButton {
    font-size: 0.14rem !important;
  }
}


   .paixu {
      /*    margin-right: .3rem;
.paixu {
  /*    margin-right: .3rem;
      height: .24rem; */
   }
}

   .paixu ::v-deep .el-input__icon {
      font-size: .12rem;
      line-height: .24rem;
      margin-right: .05rem;
   }
.paixu ::v-deep .el-input__icon {
  font-size: 0.12rem;
  line-height: 0.24rem;
  margin-right: 0.05rem;
}

.paixu ::v-deep .el-input__inner {
  width: 1.09rem;
  font-size: 0.12rem;
  padding-left: 0.15rem;
  height: 0.24rem;
  line-height: 0.24rem;
  color: #2c2c2c;
  border-color: #9e9e9e;
}

   .paixu ::v-deep .el-input__inner {
      width: 1.09rem;
      font-size: .12rem;
      padding-left: .15rem;
      height: .24rem;
      line-height: .24rem;
      color: #2C2C2C;
      border-color: #9E9E9E;
   }
.el-select-dropdown__item {
  font-size: 0.12rem;
  height: 0.2rem;
  line-height: 0.2rem;
}

   .el-select-dropdown__item {
      font-size: .12rem;
      height: .2rem;
      line-height: .2rem;
   }
.rightList {
  height: 1.6rem;
  position: relative;
  overflow: hidden;
  margin-bottom: 0.2rem !important;
  cursor: pointer;
}

   .rightList {
      height: 1.6rem;
      position: relative;
      overflow: hidden;
      margin-bottom: .2rem !important;
   }
.rightList ::v-deep .el-card__body {
  padding: 0;
}

   .rightList ::v-deep .el-card__body {
      padding: 0;
   }
.rightList .RightListTop {
  margin: 0.14rem 0;
  font-size: 0.14rem;
  height: 0.24rem;
  line-height: 0.24rem;
  display: flex;
}

   .rightList .RightListTop {
      margin: .14rem 0;
      font-size: .14rem;
      height: .24rem;
      line-height: .24rem;
      display: flex;
   }
.rightList .RightListTop .Topzhiwei {
  min-width: 0.52rem;
  margin-right: 0.08rem;
  padding-right: 0.05rem;
}

   .rightList .RightListTop .Topzhiwei {
      min-width: .52rem;
      margin-right: .08rem;
      padding-right: .05rem;
   }
.rightList .RightListTop .TopName {
  font-weight: 700;
  color: #2c2c2c;
  margin-right: 0.17rem;
  overflow: hidden;
  flex: 1;
}

   .rightList .RightListTop .TopName {
      font-weight: 700;
      color: #2C2C2C;
      margin-right: .17rem;
   }
.rightList .RightListTop .TopName .title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

   .rightList .RightListTop .TopDynasty {
      /* width: .34rem; */
      height: .19rem;
      font-size: .12rem;
      line-height: .19rem;
      text-align: center;
      border-color: #9E9E9E;
      color: #9E9E9E;
   }
.rightList .RightListTop .TopDynasty {
  height: 0.19rem;
  font-size: 0.12rem;
  line-height: 0.19rem;
  text-align: center;
  border-color: #9e9e9e;
  color: #9e9e9e;
  border: 1px solid #d4d4d4;
  font-weight: 500;
  padding: 0 10rpx;
  border-radius: 10rpx;
  margin-left: 0.1rem;
  min-width: max-content;
}

   .rightList .desBox {
      padding: .14rem .2rem .23rem;
.rightList .desBox {
  padding: 0.14rem 0.2rem 0.23rem;

      /* position: relative; */
      .biecheng {
         height: .24rem;
         /* line-height: .24rem; */
         font-size: .12rem;
         padding-left: .1rem;
         background-color: #F0F0F0;
         display: flex;
         align-items: center;
         margin-bottom: .12rem;
      }
  /* position: relative; */
  .biecheng {
    height: 0.24rem;
    /* line-height: .24rem; */
    font-size: 0.12rem;
    padding-left: 0.1rem;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    margin-bottom: 0.12rem;
  }

      .describe {
         position: absolute;
         bottom: .1rem;
         left: 0;
         /* width: 100%; */
         padding: 0 .23rem;
         height: .49rem;
         line-height: .24rem;
         font-size: .12rem;
      }
   }
</style>
  .describe {
    position: absolute;
    bottom: 0.1rem;
    left: 0;
    /* width: 100%; */
    padding: 0 0.23rem;
    height: 0.49rem;
    line-height: 0.24rem;
    font-size: 0.12rem;
  }
}

.nullBox {
  width: 100%;
}

.cursor.active {
  color: #027edc !important;
  font-weight: bold;
}
</style>