三

mh-two-thousand-and-two

2024-04-03 29a02350b873fa6339a7535fa929697fec9a8f84

 pages/TcmSystem/TcmSystem.vue

@@ -1,144 +1,122 @@
<template>
   <view>
      <view class="NavTop flex">
         <view class=""><img src="../../static/中医人物知识库0201/三条杠.png" alt="" /></view>
         <view class="">中医医事制度</view>
         <view class="NavTopr">
            <img src="../../static/中医人物知识库0201/三条杠.png" alt="" />
            <img src="../../static/中医人物知识库0201/三条杠.png" alt="" />
            <img src="../../static/中医人物知识库0201/三条杠.png" alt="" />
         </view>
      </view>
      <view class="mImage">
         <img src="https://img0.baidu.com/it/u=3838093562,4126749835&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1710522000&t=a986064700deada5ec74d05e02abd8b5"
            alt="" />
      </view>
      <view class="flex flex-center" style="flex-direction: column;">
         <view class="search">
            <next-search-more :selectValue="selectValue">
      <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">
         <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 10rpx;"
                  :style="{color:item.bgColor==true?'#5879a4':'#000'}">
               <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">
            <ul class="institution">
               <view class="" style="font-weight: 700;padding-bottom: 6rpx;">机构统计10</view>
               <li v-for="ietm1 in 7" :key="item1" class="flex">
                  <view class="">item</view>
                  <view class="">112</view>
               </li>
            </ul>
            <ul class="institution institution2">
               <view class="" style="font-weight: 700;padding-bottom: 6rpx;">机构统计10</view>
               <li v-for="ietm1 in 4" :key="item1" class="flex">
                  <view class="">item</view>
                  <view class="">112</view>
               </li>
            </ul>
            <ul class="institution institution3 ">
               <view class="" style="font-weight: 700;padding-bottom: 6rpx;">机构统计10</view>
               <li v-for="ietm1 in 1   " :key="item1" class="flex">
                  <view class="">item</view>
                  <view class="">112</view>
               </li>
            </ul>
         </view>
         <view class="CRight flex flex-column relative">
            <el-row style="height: 50rpx;width: 100%;">
               <view class="flex">
                  <view class="">共{{total}}条</view>
                  <view class="">
                     <uni-data-select style="width: 250rpx;" v-model="rankVal" :localdata="rank" :clear="false"
                        @change="selectChange">
                     </uni-data-select>
         <!-- 左 -->
         <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 === index ?  '#DDE8F6' :'','borderRadius': institution.index === index ?  '60rpx' :''}"
                     v-for="(item,index) in institution.list" style="padding:0 20rpx;color: #2C2C2C;">
                     <view class="">{{item.name}}</view>
                     <view class="">{{item.number}}</view>
                  </li>
               </ul>
               <view class="flex flex-center toggleButton1">
                  <view class="toggleButton" style="color: #244A7B;" @click="shrinkClick('a')">
                     {{ activeBox !== 'a' ? '更多  ﹀' : '收起  ︿' }}
                  </view>
               </view>
            </el-row>
            <view style="flex-grow: 1;" class="flex CommodityList">
               <view class="" v-for="item in CommodityList" :key="item" style="height:28% ;">
            </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 === index ?  '#DDE8F6' :'','borderRadius': officials.index == index ?  '10rem' :''}"
                     v-for="(item,index) in officials.list" :key="index" style="padding:0 20rpx;">
                     <view class="">{{item.name}}</view>
                     <view class="">{{item.number}}</view>
                  </li>
               </ul>
               <view class="flex flex-center toggleButton1">
                  <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 class="">{{index+1}}.{{item.name}}</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="item" :label="item.text"
                        :value="item.value"></el-option>
                     <!-- <el-option label="区域二" value="beijing"></el-option> -->
                  </el-select>
               </view>
            </view>
            <!-- </el-row> flex-grow: 1;-->
            <view style="" class="flex CommodityList">
               <view class="rightList" @click="ListClick" v-for="item in CommodityList" :key="item">
                  <el-card class="box-card" style="height:  100%;">
                     <view class="flex flex-start">
                        <view class=""
                           style="background-color: #5879a4;text-align: right;transform:translateX(-50rpx);color: #fff;padding:0 10rpx 0 50rpx;">
                     <view class="flex flex-start RightListTop">
                        <view class="Topzhiwei"
                           style="background-color: #5879a4;text-align: right;;color: #fff;"
                           :style="{background:item.color}">
                           {{item.post}}
                        </view>
                        <view class="" style="margin-right:  20rpx;">{{item.name}}</view>
                        <view class=""
                        <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=""
                        style="background-color: #f6f6f6;padding: 5rpx 10rpx;color: #777777; margin: 15rpx 0;">
                        {{item.anotherNamer}}
                     </view>
                     <view class=""
                        style="font-weight: 600; font-size: 20rpx;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;">
                        {{item.content}}
                     <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;">一</view>
                           </view>
                           <view class="flex " style="">来源:
                              <view class="BeyondHiding1" style="margin-left: .1rem;line-height: 1">
                                 中医医事大全
                              </view>
                           </view>
                        </view>
                        <view class="describe font-family BeyondHiding2">
                           {{item.content}}
                        </view>
                     </view>
                  </el-card>
               </view>
            </view>
            <!-- 弹出层 -->
            <el-dialog title="" class="dialog" :visible.sync="dialogVisible" width="40%">
               <!-- 取消键 -->
               <view class="" @click="dialogVisible=false"
                  style="padding: 20rpx;position: absolute;left: 0;top: 0;font-size: 40rpx;z-index: 999;">X</view>
               <view class="flex" style="height: 100%;flex-direction: column;">
                  <view class="detailImage" style="position: relative;">
                     <img style="opacity: .5;" src="https://img0.baidu.com/it/u=3628503530,464378779&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1710608400&t=42d653b0f525a8de1d45825ea8b45f66"
                        alt="" />
                     <view class=" flex flex-column " style="height: 100%;justify-content: center; position: relative;z-index: 999;">
                        <view class="" style="font-size: 40rpx;font-weight: 900;">御医</view>
                        <view class="" style="font-size: 20rpx;font-weight: 800; border: 2rpx solid #000;margin: 30rpx 0;background-color: #fff;border-radius: 10rpx;padding: 0 10rpx;">御医</view>
                        <ul class="flex">
                           <li v-for="item in 3" style="background-color: #fff;color: #415c7a; border: 2rpx solid #415c7a;border-radius: 30rpx;padding: 0 15rpx;margin-right: 10rpx;" >ssdf</li>
                        </ul>
                     </view>
                  </view> 
                  <view class="" style="width: 80%; height: 100%;position: relative;">
                     <view class=" flex flex-content"
                        style=" box-shadow: 4px 4px 8px #888; background-color: #fff; width: 100%;left: 0; position: relative;top: -50rpx;padding:  30rpx 0; ">
                        <view class="">品级: <span>二品</span> </view>
                        <view class="">品级: <span>二品</span> </view>
                        <view class="">品级: <span>二品</span> </view>
                     </view>
                     <view class="" style="background-color: #f4f4f4;font-weight: 700;padding: 10rpx;">
                        相关描述
                     </view>
                     <view class="" style="font-size: 23rpx;font-weight: 600;margin: 30rpx 0;">按摩博士是古代太医署职称，负责掌管按摩正骨专业的教授考核，官阶在从九品下[1]。按摩博士，隋代设二人，品位不详。唐代设一人，官阶为从九品下，按摩博士负责掌管按摩、正骨专业的教学，下设按摩师、按摩工等作为助手。</view>
                     <view class="" style="background-color: #f4f4f4;font-weight: 700;padding: 10rpx;">
                        相关描述
                     </view>
                     <view class="" style="font-size: 23rpx;font-weight: 600;margin: 30rpx 0;">按摩博士是古代太医署职称，负责掌管按摩正骨专业的教授考核，官阶在从九品下[1]。按摩博士，隋代设二人，品位不详。唐代设一人，官阶为从九品下，按摩博士负责掌管按摩、正骨专业的教学，下设按摩师、按摩工等作为助手。</view>
                  </view>
                  <view class="flex" style="padding: 20rpx; box-sizing: border-box; width: 100%;margin-bottom: 2rpx;">
                     <el-button class="flex">
                        <view class="flex">
                           <view class="" style="margin-right: 40rpx;">上一条</view>
                           <view class="">机构: 太医院 </view>
                        </view>
                     </el-button>
                     <el-button class="flex">
                        <view class="flex">
                           <view class="" style="margin-right: 40rpx;">机构: 太医院 </view>
                           <view class="" >下一条</view>
                        </view>
                     </el-button>
                  </view>
               </view>
            </el-dialog>
            <!-- 分页 -->
            <el-row style="height: 50rpx;position: absolute;bottom: 50rpx;">
            <el-row class="fenye" style="position: absolute;bottom: .1rem;">
               <el-pagination class="paging" :current-page="CurrentPage" :total="total" :page-size="6"
                  @current-change="CurrentChange" @prev-click="PrevClick" @next-click="NextClick" prev-text="上一页"
                  next-text="下一页" background layout="prev, pager, next">
@@ -147,21 +125,158 @@
            </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">御医</view>
                  <view class="creatureXinxi2">
                     唐朝</view>
                  <ul class="flex creatureXinxi3">
                     <li v-for="item in 4">JSF</li>
                  </ul>
               </view>
            </view>
            <view class="" style="width: 80%; height: 100%;position: relative;">
               <view class="pinji flex ">
                  <view class="">品级: <span> 二品</span> </view>
                  <view class="">别名: <span> 五</span> </view>
                  <view class="">来源: <span> 中国历代医家辞典</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;">
                     按摩博士是古代太医署职称，负责掌管按摩正骨专业的教授考核，官阶在从九品下[1]。按摩博士，隋代设二人，品位不详。唐代设一人，官阶为从九品下，按摩博士负责掌管按摩、正骨专业的教学，下设按摩师、按摩工等作为助手。
                  </view>
                  <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;">
                     按摩博士是古代太医署职称，负责掌管按摩正骨专业的教授考核，官阶在从九品下。
                  </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>


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

<script>
   import Footer1 from '@/components/footer/footer.vue'
   export default {
      components: {
         Footer1
      },
      data() {
         return {

            // 机构统计
            institution: {
               title: '机构统计',
               index: 0,
               list: [{
                     name: '全部',
                     id: 1,
                     number: 829
                  },
                  {
                     name: '医家',
                     id: 2,
                     number: 90
                  }, {
                     name: '世医',
                     id: 3,
                     number: 81
                  }, {
                     name: '宫廷医',
                     id: 4,
                     number: 83
                  },
               ]
            },
            // 职官统计
            officials: {
               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: '来源',
               index: 0,
               list: [{
                     name: '中国医事制度辞典',
                     id: 1,
                  },
                  {
                     name: '中医医事大全',
                     id: 2,
                  }, {
                     name: '中国医事制度研究',
                     id: 3,
                  }
               ]
            },
            // 展开和收缩的按钮需要
            activeBox: null,
            // 标题顶部栏需要的东西
            idIndex: 0,
            // 弹出层
            dialogVisible: true,
            dialogVisible: false,
            // 搜索的下拉列表
            selectValue: [{
               value: 0,
               text: '是否'
               text: '医事制度'
            }, {
               value: 1,
               text: '11sd1'
@@ -169,6 +284,7 @@
               value: 2,
               text: '11sdsd1'
            }],

            // 热门搜索
            hot: [{
               id: 1,
@@ -188,7 +304,7 @@
            // 排序下拉菜单
            rank: [{
               value: 0,
               text: '排序'
               text: '按提名排序'
            }, {
               value: 1,
               text: '排序s'
@@ -199,14 +315,25 @@
                  id: 1,
                  post: '机构',
                  name: '太医院',
                  color: '#597AA5',
                  dynasty: '唐朝',
                  anotherNamer: '别称----------',
                  content: '内容++++++++++++++++++++++++++++++'
                  content: '古代医疗机构名称，太医院名称始于金代，承袭于唐宋的太医署、太医局，以后历代均立有太医院机构历代均立有太医院机构'
               },
               {
                  id: 2,
                  post: '职官',
                  name: '太医院',
                  dynasty: '唐朝',
                  color: '#DA7A2B',
                  anotherNamer: '别称----------',
                  content: '古代医疗机构名称，太医院名称始于金代，古代医疗机构名称，太医院名称始于金代，古代医疗机构名称，太医院名称始于金代，古代医疗机构名称，太医院名称始于金代，古代医疗机构名称，太医院名称始于金代，'
               },
               {
                  id: 3,
                  post: '机构',
                  name: '太医院',
                  color: '#597AA5',
                  dynasty: '唐朝',
                  anotherNamer: '别称----------',
                  content: '内容++++++++++++++++++++++++++++++'
@@ -215,6 +342,25 @@
                  id: 3,
                  post: '机构',
                  name: '太医院',
                  color: '#597AA5',
                  dynasty: '唐朝',
                  anotherNamer: '别称----------',
                  content: '内容++++++++++++++++++++++++++++++'
               },
               {
                  id: 3,
                  post: '机构',
                  name: '太医院',
                  color: '#597AA5',
                  dynasty: '唐朝',
                  anotherNamer: '别称----------',
                  content: '内容++++++++++++++++++++++++++++++'
               },
               {
                  id: 3,
                  post: '机构',
                  name: '太医院',
                  color: '#597AA5',
                  dynasty: '唐朝',
                  anotherNamer: '别称----------',
                  content: '内容++++++++++++++++++++++++++++++'
@@ -227,7 +373,35 @@

         }
      },
      mounted() {
         // 修改两次的高度保持一致
         var box1Height = document.querySelector('.fbox').offsetHeight;
         console.log(box1Height, 'box1Height');
         document.querySelector('.fbox1').style.height = box1Height + 'px';
      },
      onLoad(options) {
         this.idIndex = options.id
         console.log('optionsoptionsoptions', options.id);
      },
      methods: {
         // 展开收缩
         shrinkClick(box) {
            console.log(box);
            if (this.activeBox === box) {
               console.log('sdfs');
               this.activeBox = null;
            } else {
               this.activeBox = box;
            }
         },
         // list数组
         ListClick() {
            this.dialogVisible = !this.dialogVisible
         },
         // 搜索按钮
         onSearch(val) {
            console.log(val);
         },
         // 热门搜索
         HotClick(id) {
            this.hot.forEach(item => {
@@ -275,7 +449,104 @@
   }
</script>

<style>
<style scoped>
	
   @media screen and (min-width:2560px)and (max-width:3840px) {
	
      ::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: .36rem;
         border-radius: .5rem !important;
         align-items: center;
         border-color: #597AA5 !important;
      }
   }
	
   /* 个人信息 */
   .creatureXinxi1 {
      font-size: .24rem;
      font-weight: 700;
      line-height: 1;
      margin-top: .29rem;
   }

   .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 {
      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;
      line-height: .6rem; */
      font-size: .14rem;
      padding: .19rem .28rem .21rem;
      left: 0;
      position: relative;
      top: -.25rem;
      color: #2C2C2C;
   }

   /* 个人信息的按钮 */
   .detailsBtn {
      padding: .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-L,.detailsBtn .btn-prev-R{
      border-left: 1px solid #9E9E9E;
      padding-left: .1rem;
   }
   .detailsBtn>:nth-child(2) {
      font-size: .14rem;
      color: #2C2C2C;
   }

   /* ------ */
   img {
      width: 100%;
      height: 100%;
@@ -308,24 +579,28 @@
      }
   }

   .search {
      width: 50%;
   }


   .centre {
      padding: 0 30rpx;
      padding-left: 1.23rem;
      padding-right: 1.17rem;
      /* border: 1px solid #000; */
      height: 70vh;
      /* height: 70vh; */
      /* overflow: hidden; */
      align-items: flex-start;
      position: relative;
      z-index: 1;

      .CLeft {
         width: 2.6rem;
         height: 100%;
         vertical-align: top;
         flex-direction: column;
         justify-content: flex-start;
         margin-right: .2rem;

         .institution {
            width: 300rpx;
            width: 100%;
            border: 1px solid #000;
            padding: 20rpx;

@@ -341,13 +616,16 @@
      }

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

@@ -359,7 +637,7 @@
      align-items: flex-start;
      flex-wrap: wrap;
      align-content: flex-start;
      padding: 20rpx 20rpx 0 20rpx;
      /* padding: 20rpx 20rpx 0 20rpx; */
      justify-content: space-between;

      >view {
@@ -375,15 +653,46 @@
   /* ::v-deep .el-card__body{
      padding: 30rpx;
   } */
   /* 分页 */
   .paging {
      display: flex;
      align-items: center;
   }

   .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 .el-pager li {
      font-size: .12rem;
      width: .28rem;
      height: .3rem;
      line-height: .3rem;
      background-color: #fff;
      color: #9E9E9E;
      text-align: center;
      border: 1px solid #9E9E9E;
   }

   /* ------------ */
   .dialog {
      position: fixed;
      right: 0;
      top: 0;
      z-index: 9999999999999999999999999999999999999999999 !important;

      >div {
         height: 100%;
@@ -409,13 +718,257 @@

   .detailImage {
      width: 100%;
      height: 450rpx;
      height: 1.94rem;
      color: #000;
      img{

      img {
         position: absolute;
         width: 100%;
         height: 100%;
         vertical-align: top;
      }
   }


   /* 搜索按钮 */
   .sousuo {
      margin: .35rem 0 .19rem;
   }

   .search1 {
      width: 5rem;

   }

   ::v-deep .search {
      height: .36rem;
      border-radius: .3rem;
      align-items: center;
      border-color: #597AA5 !important;
   }

   ::v-deep .search .content {
      height: 100% !important;
      border: 0;
   }

   ::v-deep .search .uni-input-placeholder {
      font-size: .14rem;
   }

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

   ::v-deep .search .uni-input-input,
   ::v-deep .search .uni-select__input-box {
      font-size: .14rem;
      line-height: 1;
   }

   ::v-deep .xiala {
      width: 20% !important;
      text-align: center;
   }

   ::v-deep .uni-select__input-text {
      color: #244A7B;
   }

   ::v-deep .next-search-more .search {
      border: 2px solid #597AA5 !important;
   }

   ::v-deep .next-search-more .search .content {
      border-left: 1px solid #597AA5 !important;
   }

   .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;
   }

   .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 {
      width: 100%;
      padding: .1rem .09rem;
	
      h3 {
         font-size: .14rem;
      }
   } */
   .MargB {
      margin-bottom: .2rem;
   }

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

      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;
         font-size: .14rem;
      }

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

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

   .a,
   .b {
      min-height: 3rem !important;
   }

   .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__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: .12rem;
      height: .2rem;
      line-height: .2rem;
   }

   .rightList {
      height: 1.6rem;
      position: relative;
      overflow: hidden;
      margin-bottom: .2rem !important;
   }

   .rightList ::v-deep .el-card__body {
      padding: 0;
   }

   .rightList .RightListTop {
      margin: .14rem 0;
      font-size: .14rem;
      height: .24rem;
      line-height: .24rem;
      display: flex;
   }

   .rightList .RightListTop .Topzhiwei {
      width: .52rem;
      margin-right: .08rem;
      padding-right: .05rem;
   }

   .rightList .RightListTop .TopName {
      font-weight: 700;
      color: #2C2C2C;
      margin-right: .17rem;
   }

   .rightList .RightListTop .TopDynasty {
      width: .34rem;
      height: .19rem;
      font-size: .12rem;
      line-height: .19rem;
      text-align: center;
      border-color: #9E9E9E;
      color: #9E9E9E;
   }

   .rightList .desBox {
      padding: .14rem .2rem .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;
      }

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