From f37631dc48856e728ea96ed47d5dfd52fa8583f6 Mon Sep 17 00:00:00 2001
From: 杨磊 <505174330@qq.com>
Date: 星期三, 23 四月 2025 18:23:23 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/wyyDatabase

---
 src/views/achievements/index.vue |  801 ++++++++++++++++++++++++++++++++++++++++----------------
 1 files changed, 573 insertions(+), 228 deletions(-)

diff --git a/src/views/achievements/index.vue b/src/views/achievements/index.vue
index 954e837..71406e4 100644
--- a/src/views/achievements/index.vue
+++ b/src/views/achievements/index.vue
@@ -1,129 +1,177 @@
 <template>
   <div class="page">
     <div class="page-header">
-      <p>鐜嬫案鐐庨櫌澹鏈垚鏋�</p>
+      <p>
+        <span>鐜嬫案鐐庨櫌澹鏈垚鏋�</span>
+      </p>
     </div>
-
-    <div class="page-main">
-      <!-- 鎼滅储妗� -->
-      <ul class="page-input">
-        <li class="input-main">
-          <el-input placeholder="璇疯緭鍏ュ唴瀹�" v-model="input3" class="input-with-select" suffix="鎼滅储">
-            <el-select v-model="select" slot="prepend" placeholder="璇烽�夋嫨">
-              <el-option v-for="(item, index) in optionlist" :key="index" :label="item.lable"
-                :value="item.lable"></el-option>
-            </el-select>
-            <el-button slot="append">鎼滅储</el-button>
-          </el-input>
-        </li>
-        <li class="input-txt" @click="isDisplay = !isDisplay">
-          楂樼骇妫�绱�
-          <img :src="[isDisplay ? topIcon : bottomIcon]" alt="">
-        </li>
-      </ul>
-      <!-- 楂樼骇鎼滅储 -->
-      <div v-if="isDisplay" class="page-search">
-        <MyForm class="myfrom" @submit="
-          (data) => {
-            CurrentPage = 1;
-            onSubmit(data);
-          }
-        " @reset="resetForm" :from="from" />
-      </div>
-      <!-- 鎼滅储缁撴灉 -->
-      <div class="page-content">
-        <div class="content-left">
-          <!-- 绫诲瀷 -->
-          <ul>
-            <li class="left-title">
-              <span>{{ category.title }}</span>
-              <p @click="category.isDisplay = !category.isDisplay">
-                <img :src="[category.isDisplay ? topIcon : bottomIcon]" alt="">
-              </p>
-            </li>
-            <li class="left-main" v-if="category.isDisplay">
-              <div class="category-main" v-for="(item, index) in category.list" :key="index">
-                <el-checkbox class="el-checkbox" v-model="item.checked" :title="item.name">{{ item.name }}</el-checkbox>
-                <span class="">{{ item.num }}</span>
-              </div>
-            </li>
-          </ul>
-          <!-- 骞村害 -->
-          <ul>
-            <li class="left-title">
-              <div>
-                <span>{{ annual.title }}</span>
-                <span>
-                  鏃堕棿
-                  <img class="sort-Icon" :src="[isDisplay ? sortTop : sortBottom]" alt="">
-                </span>
-                <span>鏂囩尞閲�
-                  <img class="sort-Icon" :src="[isDisplay ? sortBottom : sortTop]" alt="">
-                </span>
-              </div>
-              <p @click="annual.isDisplay = !annual.isDisplay">
-                <img :src="[annual.isDisplay ? topIcon : bottomIcon]" alt="">
-              </p>
-            </li>
-            <li class="left-main" v-if="annual.isDisplay">
-              <div class="annual-main" v-for="(item, index) in annual.list" :key="index">
-                <el-checkbox class="el-checkbox" v-model="item.checked" :title="item.years">{{ item.years
-                }}</el-checkbox>
-                <span class="">{{ item.num }}</span>
-              </div>
-              <p class="annual-footer" v-if="annual.list && annual.list.length > 5">灞曞紑</p>
-            </li>
-          </ul>
-          <!-- 鏂囩尞鏉ユ簮 -->
-          <ul>
-            <li class="left-title">
-              <div>
-                <span>{{ sources.title }}</span>
-                <span>
-                  鏂囩尞閲�
-                  <img class="sort-Icon" :src="[isDisplay ? sortBottom : sortTop]" alt="">
-                </span>
-              </div>
-              <p @click="sources.isDisplay = !sources.isDisplay">
-                <img :src="[sources.isDisplay ? topIcon : bottomIcon]" alt="">
-              </p>
-            </li>
-            <li class="left-main" v-if="sources.isDisplay">
-              <div class="sources-main" v-for="(item, index) in sources.list" :key="index">
-                <el-checkbox class="el-checkbox" :title="item.name" v-model="item.checked">{{ item.name }}</el-checkbox>
-                <span class="">{{ item.num }}</span>
-              </div>
-              <p class="sources-footer" v-if="sources.list && sources.list.length > 5">灞曞紑</p>
-            </li>
-          </ul>
-          <!-- 瀛︾ -->
-          <ul>
-            <li class="left-title">
-              <span>{{ subject.title }}</span>
-              <p @click="subject.isDisplay = !subject.isDisplay">
-                <img :src="[subject.isDisplay ? topIcon : bottomIcon]" alt="">
-              </p>
-            </li>
-            <li class="left-main" v-if="subject.isDisplay">
-              <div class="category-main" v-for="(item, index) in subject.list" :key="index">
-                <el-checkbox class="el-checkbox" v-model="item.checked" :title="item.name">{{ item.name }}</el-checkbox>
-                <span class="">{{ item.num }}</span>
-              </div>
-            </li>
-          </ul>
+    <div class="page-main-father">
+      <div class="page-main">
+        <!-- 鎼滅储妗� -->
+        <ul class="page-input">
+          <li class="input-main">
+            <SearchBox />
+          </li>
+          <li class="input-txt" @click="isDisplay = !isDisplay">
+            楂樼骇妫�绱�
+            <img :src="[isDisplay ? topIcon : bottomIcon]" alt="" />
+          </li>
+        </ul>
+        <!-- 楂樼骇鎼滅储 -->
+        <div v-if="isDisplay" class="page-search">
+          <MyForm class="myfrom" @submit="
+            (data) => {
+              CurrentPage = 1;
+              onSubmit(data);
+            }
+          " @reset="resetForm" :from="from" />
         </div>
-        <div class="content-right">
-          <!-- title閮ㄥ垎 -->
-          <ul class="right-header">
-            <li v-for="(item, index) in associationList" :key="index">
-              <p>{{ item.type }} : {{ item.content }}</p>
-              <img :src="errorIcon" alt="">
-            </li>
-          </ul>
-          <ul class="right-number">
-            <ul class="number-number">鍏辨壘鍒�<span>{{ resultList.length }}</span>鏉$粨鏋�</ul>
-            <ul class="number-time">鍙戣〃鏃堕棿 <span><img :src="sortBottom" alt=""></span></ul>
-          </ul>
+        <!-- 鎼滅储缁撴灉 -->
+        <div class="page-content">
+          <div class="content-left">
+            <!-- 绫诲瀷 -->
+            <ul>
+              <li class="left-title">
+                <span>{{ category.title }}</span>
+                <p @click="category.isDisplay = !category.isDisplay">
+                  <img :src="[category.isDisplay ? topIcon : bottomIcon]" alt="" />
+                </p>
+              </li>
+              <li class="left-main" v-if="category.isDisplay">
+                <div class="category-main" v-for="(item, index) in category.list" :key="index">
+                  <el-checkbox class="el-checkbox" style="display: inline-block; vertical-align: middle;"
+                    v-model="item.checked" :title="item.name">{{ item.name }}</el-checkbox>
+                  <span class="" style="display: inline-block; vertical-align: middle;">{{ item.num }}</span>
+                </div>
+              </li>
+            </ul>
+            <!-- 骞村害 -->
+            <ul>
+              <li class="left-title">
+                <div>
+                  <span>{{ annual.title }}</span>
+                  <span>
+                    鏃堕棿
+                    <img class="sort-Icon" :src="[isDisplay ? sortTop : sortBottom]" alt="" />
+                  </span>
+                  <span>鏂囩尞閲�
+                    <img class="sort-Icon" :src="[isDisplay ? sortBottom : sortTop]" alt="" />
+                  </span>
+                </div>
+                <p @click="annual.isDisplay = !annual.isDisplay">
+                  <img :src="[annual.isDisplay ? topIcon : bottomIcon]" alt="" />
+                </p>
+              </li>
+              <li class="left-main" v-if="annual.isDisplay">
+                <div class="annual-main" :style="{
+                  display: index + 1 > professionIndex ? 'none' : '',
+                }" v-for="(item, index) in annual.list" :key="index">
+                  <el-checkbox class="el-checkbox" v-model="item.checked" :title="item.years">{{ item.years
+                  }}</el-checkbox>
+                  <span class="">{{ item.num }}</span>
+                </div>
+                <p class="annual-footer" v-if="annual.list && annual.list.length > 5" @click="shrinkClick('a', '骞村害')">
+                  {{ activeBox !== "a" ? "鏇村 鈭�" : "鏀惰捣 鈭�" }}
+                </p>
+              </li>
+            </ul>
+            <!-- 鏂囩尞鏉ユ簮 -->
+            <ul>
+              <li class="left-title">
+                <div>
+                  <span>{{ sources.title }}</span>
+                  <span>
+                    鏂囩尞閲�
+                    <img class="sort-Icon" :src="[isDisplay ? sortBottom : sortTop]" alt="" />
+                  </span>
+                </div>
+                <p @click="sources.isDisplay = !sources.isDisplay">
+                  <img :src="[sources.isDisplay ? topIcon : bottomIcon]" alt="" />
+                </p>
+              </li>
+              <li class="left-main" v-if="sources.isDisplay">
+                <div class="sources-main" v-for="(item, index) in sources.list" :key="index" :style="{
+                  display: index + 1 > dynastyIndex ? 'none' : '',
+                }">
+                  <el-checkbox class="el-checkbox" :title="item.name" v-model="item.checked">{{ item.name
+                  }}</el-checkbox>
+                  <span class="">{{ item.num }}</span>
+                </div>
+                <p class="sources-footer" v-if="sources.list && sources.list.length > 5"
+                  @click="shrinkClick('b', '鏂囩尞鏉ユ簮')">
+                  {{ activeBox !== "b" ? "鏇村 鈭�" : "鏀惰捣 鈭�" }}
+                </p>
+              </li>
+            </ul>
+            <!-- 瀛︾ -->
+            <ul>
+              <li class="left-title">
+                <span>{{ subject.title }}</span>
+                <p @click="subject.isDisplay = !subject.isDisplay">
+                  <img :src="[subject.isDisplay ? topIcon : bottomIcon]" alt="" />
+                </p>
+              </li>
+              <li class="left-main" v-if="subject.isDisplay">
+                <div class="category-main" v-for="(item, index) in subject.list" :key="index">
+                  <el-checkbox class="el-checkbox" v-model="item.checked" :title="item.name">{{ item.name
+                  }}</el-checkbox>
+                  <span class="">{{ item.num }}</span>
+                </div>
+              </li>
+            </ul>
+          </div>
+          <div class="content-right">
+            <!-- title閮ㄥ垎 -->
+            <ul class="right-header">
+              <li v-for="(item, index) in associationList" :key="index">
+                <p>{{ item.type }} : {{ item.content }}</p>
+                <img :src="errorIcon" alt="" />
+              </li>
+            </ul>
+            <!-- 鍏眡x鏉� -->
+            <ul class="right-number">
+              <ul class="number-number">
+                鍏辨壘鍒�<span>{{ resultList.length }}</span>鏉$粨鏋�
+              </ul>
+              <ul class="number-time">
+                鍙戣〃鏃堕棿
+                <span><img :src="sortBottom" alt="" /></span>
+              </ul>
+            </ul>
+            <!-- 缁撴灉灞曠ず -->
+            <ul class="right-main" v-for="(item, index) in resultList" :key="index">
+              <li class="main-name">
+                <p>{{ item.name }}</p>
+                <p>
+                  <el-button @click="goPage(item)">璇︽儏</el-button>
+                  <el-button>AI鏅鸿兘闃呰</el-button>
+                </p>
+              </li>
+              <li class="main-sources">
+                <span>{{ item.type }}</span>
+                <span>{{ item.sources }}</span>
+                <span>{{ item.time }}</span>
+              </li>
+              <li class="main-author">
+                {{ item.author }}
+              </li>
+              <li class="main-title" :title="item.title">
+                <span>鎽樿: </span>{{ item.title }}
+              </li>
+              <li class="main-keyword">
+                <span>鍏抽敭璇嶏細</span>
+                <span class="keyWord" v-for="(citem, cindex) in item.keyword" :key="cindex">
+                  {{ citem.name }}
+                </span>
+              </li>
+            </ul>
+            <!-- 鍒嗛〉 -->
+            <div class="pagination">
+              <el-pagination class="msg-pagination-container" :background="isBackground" layout="prev, pager, next"
+                :total="200">
+              </el-pagination>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -131,12 +179,14 @@
 </template>
 
 <script>
-import MyForm from '@/components/form/form.vue'
+import MyForm from "@/components/form/form.vue";
+import SearchBox from "@/views/home/components/searchBox.vue";
 /* eslint-disable vue/no-unused-components */
 export default {
-  name: 'achievements',
+  name: "achievements",
   components: {
-    MyForm
+    MyForm,
+    SearchBox,
   },
   data() {
     return {
@@ -145,28 +195,29 @@
       bottomIcon: require("@/assets/images/achievements/bottom-Icon.png"),
       sortTop: require("@/assets/images/achievements/sort-top.png"),
       sortBottom: require("@/assets/images/achievements/sort-bottom.png"),
+      isBackground: true,
       isDisplay: false,
-      input3: '',
-      select: '',
+      input3: "",
+      select: "",
       checked: [],
       optionlist: [
         {
-          lable: "鏍囬"
+          lable: "鏍囬",
         },
         {
-          lable: "浣滆��"
+          lable: "浣滆��",
         },
         {
-          lable: "骞翠唤"
+          lable: "骞翠唤",
         },
         {
-          lable: "鍏抽敭璇�"
+          lable: "鍏抽敭璇�",
         },
         {
-          lable: "鎽樿"
+          lable: "鎽樿",
         },
         {
-          lable: "鏉ユ簮"
+          lable: "鏉ユ簮",
         },
       ],
       // 褰撳墠椤�
@@ -178,39 +229,39 @@
             type: "input",
             label: "鏍囥��棰�",
             name: "title",
-            value: ""
+            value: "",
           },
           {
             type: "input",
             label: "浣溿��鑰�",
             name: "author",
-            value: ""
+            value: "",
           },
           {
             type: "input",
             label: "骞淬��浠�",
             name: "year",
-            value: ""
+            value: "",
           },
           {
             type: "input",
             label: "鍏抽敭璇�",
             name: "keyword",
-            value: ""
+            value: "",
           },
           {
             type: "input",
             label: "鎽樸��瑕�",
             name: "abstract",
-            value: ""
+            value: "",
           },
           {
             type: "input",
             label: "鏉ャ��婧�",
             name: "source",
-            value: ""
+            value: "",
           },
-        ]
+        ],
       },
       // 绫诲瀷
       category: {
@@ -222,24 +273,24 @@
           {
             name: "鏈熷垔",
             num: 190,
-            check: false
+            check: false,
           },
           {
             name: "鍥句功",
             num: 190,
-            check: false
+            check: false,
           },
           {
             name: "瑙嗛",
             num: 190,
-            check: false
+            check: false,
           },
           {
             name: "闊抽",
             num: 190,
-            check: false
+            check: false,
           },
-        ]
+        ],
       },
       // 骞村害
       annual: {
@@ -251,41 +302,39 @@
           {
             years: "2025",
             num: 20,
-            check: false
+            check: false,
           },
           {
             years: "2025",
             num: 20,
-            check: false
+            check: false,
           },
           {
             years: "2025",
             num: 20,
-            check: false
+            check: false,
           },
           {
             years: "2025",
             num: 20,
-            check: false
+            check: false,
           },
           {
             years: "2025",
             num: 20,
-            check: false
+            check: false,
           },
           {
             years: "2025",
             num: 20,
-            check: false
+            check: false,
           },
           {
             years: "2025",
             num: 20,
-            check: false
+            check: false,
           },
-
         ],
-
       },
       // 鏂囩尞鏉ユ簮
       sources: {
@@ -297,34 +346,34 @@
           {
             name: "鍖椾含涓尰鑽ぇ瀛﹀ぇ瀛﹀鎶�",
             num: 190,
-            check: false
+            check: false,
           },
           {
             name: "鍖椾含涓尰鑽ぇ瀛﹀ぇ瀛﹀鎶�",
             num: 190,
-            check: false
+            check: false,
           },
           {
             name: "鍖椾含涓尰鑽ぇ瀛﹀ぇ瀛﹀鎶�",
             num: 190,
-            check: false
+            check: false,
           },
           {
             name: "鍖椾含涓尰鑽ぇ瀛﹀ぇ瀛﹀鎶�",
             num: 190,
-            check: false
+            check: false,
           },
           {
             name: "鍖椾含涓尰鑽ぇ瀛﹀ぇ瀛﹀鎶�",
             num: 190,
-            check: false
+            check: false,
           },
           {
             name: "鍖椾含涓尰鑽ぇ瀛﹀ぇ瀛﹀鎶�",
             num: 190,
-            check: false
+            check: false,
           },
-        ]
+        ],
       },
       // 瀛︾
       subject: {
@@ -336,30 +385,36 @@
           {
             name: "鍖诲",
             num: 190,
-            check: false
+            check: false,
           },
           {
             name: "鍖诲",
             num: 190,
-            check: false
+            check: false,
           },
           {
             name: "鍖诲",
             num: 190,
-            check: false
+            check: false,
           },
           {
             name: "鍖诲",
             num: 190,
-            check: false
+            check: false,
           },
           {
             name: "鍖诲",
             num: 190,
-            check: false
+            check: false,
           },
-        ]
+        ],
       },
+      // 鐜板湪澶氬皯鏉¤亴涓氭暟鎹�
+      professionIndex: 4,
+      // 灞曞紑鍜屾敹缂╃殑鎸夐挳闇�瑕�
+      activeBox: null,
+      // 鐜板湪澶氬皯鏉℃椂鏈熸暟鎹�
+      dynastyIndex: 4,
       // 鎵�鍏宠仈鍐呭
       associationList: [
         {
@@ -383,7 +438,8 @@
           type: "鏈熷垔",
           author: "鏉ㄦ担鑿�  鍖椾含涓尰鑽ぇ瀛︿腑鑽闄紱璧靛ぉ鎴�  鍖椾含甯堣寖澶у",
           time: "2025-02-24 09:21",
-          title: "鎽樿: 涓嵂闂告煖鏄紶缁熶腑鑽皟鍓傜殑楂樼骇绠$悊浜哄憳锛屽湪'鍓嶅簵鍚庡巶寮�'涓嵂鎴垮彂鎸ラ噸瑕佷綔鐢ㄥ拰鍏抽敭鑱岃兘銆備紶鎵夸腑鑽椄鏌滅殑瀹濊吹瀛︽湳缁忛獙涓庝紭绉�鏂囧寲瀵瑰帢娓呬腑鑽瀛︾鍙戝睍鑴夌粶銆佽鑼冧腑鑽皟鍓傛妧鏈搷浣溿�佷績杩涜�佽嵂宸ユ妧鑹�'娲绘�佷紶鎵�'鍏锋湁閲嶈绉戝浠峰�煎拰鐜板疄鎰忎箟銆傞潰鍚戞柊鏃朵唬銆佸紑鍚柊鎬濈淮锛屾湰鏂囧鑰佸瓧鍙蜂腑鑽摵鐨勫叴璧峰拰涓嵂闂告煖杩涜鑰冭瘉锛屽垎鏋愪腑鑽椄鏌滅殑宀椾綅璐d换銆佷紶鎵胯矾寰勫強鏈潵鍙戝睍锛屾彁鍑洪珮绱犺川涓嵂闂告煖浜烘墠鍩瑰吇绛栫暐锛屾棬鍦ㄥ煿鍏荤鍚堝綋浠gぞ浼氶渶姹傜殑涓嵂琛屼笟澶嶅悎鍨嬪垱鏂颁汉鎵嶃��",
+          title:
+            "涓嵂闂告煖鏄紶缁熶腑鑽皟鍓傜殑楂樼骇绠$悊浜哄憳锛屽湪'鍓嶅簵鍚庡巶寮�'涓嵂鎴垮彂鎸ラ噸瑕佷綔鐢ㄥ拰鍏抽敭鑱岃兘銆備紶鎵夸腑鑽椄鏌滅殑瀹濊吹瀛︽湳缁忛獙涓庝紭绉�鏂囧寲瀵瑰帢娓呬腑鑽瀛︾鍙戝睍鑴夌粶銆佽鑼冧腑鑽皟鍓傛妧鏈搷浣溿�佷績杩涜�佽嵂宸ユ妧鑹�'娲绘�佷紶鎵�'鍏锋湁閲嶈绉戝浠峰�煎拰鐜板疄鎰忎箟銆傞潰鍚戞柊鏃朵唬銆佸紑鍚柊鎬濈淮锛屾湰鏂囧鑰佸瓧鍙蜂腑鑽摵鐨勫叴璧峰拰涓嵂闂告煖杩涜鑰冭瘉锛屽垎鏋愪腑鑽椄鏌滅殑宀椾綅璐d换銆佷紶鎵胯矾寰勫強鏈潵鍙戝睍锛屾彁鍑洪珮绱犺川涓嵂闂告煖浜烘墠鍩瑰吇绛栫暐锛屾棬鍦ㄥ煿鍏荤鍚堝綋浠gぞ浼氶渶姹傜殑涓嵂琛屼笟澶嶅悎鍨嬪垱鏂颁汉鎵嶃��",
           keyword: [
             {
               name: "涓嵂闂告煖",
@@ -397,23 +453,157 @@
             {
               name: "涓嵂闂告煖",
             },
-          ]
-
-        }
-      ]
-    }
+          ],
+        },
+        {
+          name: "涓嵂闂告煖鐨勫巻鍙蹭紶鎵夸笌鏂版椂浠e彂灞曟�濊��",
+          sources: "鍖椾含涓尰鑽ぇ瀛﹀鎶�",
+          type: "鏈熷垔",
+          author: "鏉ㄦ担鑿�  鍖椾含涓尰鑽ぇ瀛︿腑鑽闄紱璧靛ぉ鎴�  鍖椾含甯堣寖澶у",
+          time: "2025-02-24 09:21",
+          title:
+            "涓嵂闂告煖鏄紶缁熶腑鑽皟鍓傜殑楂樼骇绠$悊浜哄憳锛屽湪'鍓嶅簵鍚庡巶寮�'涓嵂鎴垮彂鎸ラ噸瑕佷綔鐢ㄥ拰鍏抽敭鑱岃兘銆備紶鎵夸腑鑽椄鏌滅殑瀹濊吹瀛︽湳缁忛獙涓庝紭绉�鏂囧寲瀵瑰帢娓呬腑鑽瀛︾鍙戝睍鑴夌粶銆佽鑼冧腑鑽皟鍓傛妧鏈搷浣溿�佷績杩涜�佽嵂宸ユ妧鑹�'娲绘�佷紶鎵�'鍏锋湁閲嶈绉戝浠峰�煎拰鐜板疄鎰忎箟銆傞潰鍚戞柊鏃朵唬銆佸紑鍚柊鎬濈淮锛屾湰鏂囧鑰佸瓧鍙蜂腑鑽摵鐨勫叴璧峰拰涓嵂闂告煖杩涜鑰冭瘉锛屽垎鏋愪腑鑽椄鏌滅殑宀椾綅璐d换銆佷紶鎵胯矾寰勫強鏈潵鍙戝睍锛屾彁鍑洪珮绱犺川涓嵂闂告煖浜烘墠鍩瑰吇绛栫暐锛屾棬鍦ㄥ煿鍏荤鍚堝綋浠gぞ浼氶渶姹傜殑涓嵂琛屼笟澶嶅悎鍨嬪垱鏂颁汉鎵嶃�備腑鑽椄鏌滄槸浼犵粺涓嵂璋冨墏鐨勯珮绾х鐞嗕汉鍛橈紝鍦�'鍓嶅簵鍚庡巶寮�'涓嵂鎴垮彂鎸ラ噸瑕佷綔鐢ㄥ拰鍏抽敭鑱岃兘銆備紶鎵夸腑鑽椄鏌滅殑瀹濊吹瀛︽湳缁忛獙涓庝紭绉�鏂囧寲瀵瑰帢娓呬腑鑽瀛︾鍙戝睍鑴夌粶銆佽鑼冧腑鑽皟鍓傛妧鏈搷浣溿�佷績杩涜�佽嵂宸ユ妧鑹�'娲绘�佷紶鎵�'鍏锋湁閲嶈绉戝浠峰�煎拰鐜板疄鎰忎箟銆傞潰鍚戞柊鏃朵唬銆佸紑鍚柊鎬濈淮锛屾湰鏂囧鑰佸瓧鍙蜂腑鑽摵鐨勫叴璧峰拰涓嵂闂告煖杩涜鑰冭瘉锛屽垎鏋愪腑鑽椄鏌滅殑宀椾綅璐d换銆佷紶鎵胯矾寰勫強鏈潵鍙戝睍锛屾彁鍑洪珮绱犺川涓嵂闂告煖浜烘墠鍩瑰吇绛栫暐锛屾棬鍦ㄥ煿鍏荤鍚堝綋浠gぞ浼氶渶姹傜殑涓嵂琛屼笟澶嶅悎鍨嬪垱鏂颁汉鎵嶃��",
+          keyword: [
+            {
+              name: "涓嵂闂告煖",
+            },
+            {
+              name: "涓嵂闂告煖",
+            },
+            {
+              name: "涓嵂闂告煖",
+            },
+            {
+              name: "涓嵂闂告煖",
+            },
+          ],
+        },
+        {
+          name: "涓嵂闂告煖鐨勫巻鍙蹭紶鎵夸笌鏂版椂浠e彂灞曟�濊��",
+          sources: "鍖椾含涓尰鑽ぇ瀛﹀鎶�",
+          type: "鏈熷垔",
+          author: "鏉ㄦ担鑿�  鍖椾含涓尰鑽ぇ瀛︿腑鑽闄紱璧靛ぉ鎴�  鍖椾含甯堣寖澶у",
+          time: "2025-02-24 09:21",
+          title:
+            "涓嵂闂告煖鏄紶缁熶腑鑽皟鍓傜殑楂樼骇绠$悊浜哄憳锛屽湪'鍓嶅簵鍚庡巶寮�'涓嵂鎴垮彂鎸ラ噸瑕佷綔鐢ㄥ拰鍏抽敭鑱岃兘銆備紶鎵夸腑鑽椄鏌滅殑瀹濊吹瀛︽湳缁忛獙涓庝紭绉�鏂囧寲瀵瑰帢娓呬腑鑽瀛︾鍙戝睍鑴夌粶銆佽鑼冧腑鑽皟鍓傛妧鏈搷浣溿�佷績杩涜�佽嵂宸ユ妧鑹�'娲绘�佷紶鎵�'鍏锋湁閲嶈绉戝浠峰�煎拰鐜板疄鎰忎箟銆傞潰鍚戞柊鏃朵唬銆佸紑鍚柊鎬濈淮锛屾湰鏂囧鑰佸瓧鍙蜂腑鑽摵鐨勫叴璧峰拰涓嵂闂告煖杩涜鑰冭瘉锛屽垎鏋愪腑鑽椄鏌滅殑宀椾綅璐d换銆佷紶鎵胯矾寰勫強鏈潵鍙戝睍锛屾彁鍑洪珮绱犺川涓嵂闂告煖浜烘墠鍩瑰吇绛栫暐锛屾棬鍦ㄥ煿鍏荤鍚堝綋浠gぞ浼氶渶姹傜殑涓嵂琛屼笟澶嶅悎鍨嬪垱鏂颁汉鎵嶃�備腑鑽椄鏌滄槸浼犵粺涓嵂璋冨墏鐨勯珮绾х鐞嗕汉鍛橈紝鍦�'鍓嶅簵鍚庡巶寮�'涓嵂鎴垮彂鎸ラ噸瑕佷綔鐢ㄥ拰鍏抽敭鑱岃兘銆備紶鎵夸腑鑽椄鏌滅殑瀹濊吹瀛︽湳缁忛獙涓庝紭绉�鏂囧寲瀵瑰帢娓呬腑鑽瀛︾鍙戝睍鑴夌粶銆佽鑼冧腑鑽皟鍓傛妧鏈搷浣溿�佷績杩涜�佽嵂宸ユ妧鑹�'娲绘�佷紶鎵�'鍏锋湁閲嶈绉戝浠峰�煎拰鐜板疄鎰忎箟銆傞潰鍚戞柊鏃朵唬銆佸紑鍚柊鎬濈淮锛屾湰鏂囧鑰佸瓧鍙蜂腑鑽摵鐨勫叴璧峰拰涓嵂闂告煖杩涜鑰冭瘉锛屽垎鏋愪腑鑽椄鏌滅殑宀椾綅璐d换銆佷紶鎵胯矾寰勫強鏈潵鍙戝睍锛屾彁鍑洪珮绱犺川涓嵂闂告煖浜烘墠鍩瑰吇绛栫暐锛屾棬鍦ㄥ煿鍏荤鍚堝綋浠gぞ浼氶渶姹傜殑涓嵂琛屼笟澶嶅悎鍨嬪垱鏂颁汉鎵嶃��",
+          keyword: [
+            {
+              name: "涓嵂闂告煖",
+            },
+            {
+              name: "涓嵂闂告煖",
+            },
+            {
+              name: "涓嵂闂告煖",
+            },
+            {
+              name: "涓嵂闂告煖",
+            },
+          ],
+        },
+        {
+          name: "涓嵂闂告煖鐨勫巻鍙蹭紶鎵夸笌鏂版椂浠e彂灞曟�濊��",
+          sources: "鍖椾含涓尰鑽ぇ瀛﹀鎶�",
+          type: "鏈熷垔",
+          author: "鏉ㄦ担鑿�  鍖椾含涓尰鑽ぇ瀛︿腑鑽闄紱璧靛ぉ鎴�  鍖椾含甯堣寖澶у",
+          time: "2025-02-24 09:21",
+          title:
+            "涓嵂闂告煖鏄紶缁熶腑鑽皟鍓傜殑楂樼骇绠$悊浜哄憳锛屽湪'鍓嶅簵鍚庡巶寮�'涓嵂鎴垮彂鎸ラ噸瑕佷綔鐢ㄥ拰鍏抽敭鑱岃兘銆備紶鎵夸腑鑽椄鏌滅殑瀹濊吹瀛︽湳缁忛獙涓庝紭绉�鏂囧寲瀵瑰帢娓呬腑鑽瀛︾鍙戝睍鑴夌粶銆佽鑼冧腑鑽皟鍓傛妧鏈搷浣溿�佷績杩涜�佽嵂宸ユ妧鑹�'娲绘�佷紶鎵�'鍏锋湁閲嶈绉戝浠峰�煎拰鐜板疄鎰忎箟銆傞潰鍚戞柊鏃朵唬銆佸紑鍚柊鎬濈淮锛屾湰鏂囧鑰佸瓧鍙蜂腑鑽摵鐨勫叴璧峰拰涓嵂闂告煖杩涜鑰冭瘉锛屽垎鏋愪腑鑽椄鏌滅殑宀椾綅璐d换銆佷紶鎵胯矾寰勫強鏈潵鍙戝睍锛屾彁鍑洪珮绱犺川涓嵂闂告煖浜烘墠鍩瑰吇绛栫暐锛屾棬鍦ㄥ煿鍏荤鍚堝綋浠gぞ浼氶渶姹傜殑涓嵂琛屼笟澶嶅悎鍨嬪垱鏂颁汉鎵嶃�備腑鑽椄鏌滄槸浼犵粺涓嵂璋冨墏鐨勯珮绾х鐞嗕汉鍛橈紝鍦�'鍓嶅簵鍚庡巶寮�'涓嵂鎴垮彂鎸ラ噸瑕佷綔鐢ㄥ拰鍏抽敭鑱岃兘銆備紶鎵夸腑鑽椄鏌滅殑瀹濊吹瀛︽湳缁忛獙涓庝紭绉�鏂囧寲瀵瑰帢娓呬腑鑽瀛︾鍙戝睍鑴夌粶銆佽鑼冧腑鑽皟鍓傛妧鏈搷浣溿�佷績杩涜�佽嵂宸ユ妧鑹�'娲绘�佷紶鎵�'鍏锋湁閲嶈绉戝浠峰�煎拰鐜板疄鎰忎箟銆傞潰鍚戞柊鏃朵唬銆佸紑鍚柊鎬濈淮锛屾湰鏂囧鑰佸瓧鍙蜂腑鑽摵鐨勫叴璧峰拰涓嵂闂告煖杩涜鑰冭瘉锛屽垎鏋愪腑鑽椄鏌滅殑宀椾綅璐d换銆佷紶鎵胯矾寰勫強鏈潵鍙戝睍锛屾彁鍑洪珮绱犺川涓嵂闂告煖浜烘墠鍩瑰吇绛栫暐锛屾棬鍦ㄥ煿鍏荤鍚堝綋浠gぞ浼氶渶姹傜殑涓嵂琛屼笟澶嶅悎鍨嬪垱鏂颁汉鎵嶃��",
+          keyword: [
+            {
+              name: "涓嵂闂告煖",
+            },
+            {
+              name: "涓嵂闂告煖",
+            },
+            {
+              name: "涓嵂闂告煖",
+            },
+            {
+              name: "涓嵂闂告煖",
+            },
+          ],
+        },
+        {
+          name: "涓嵂闂告煖鐨勫巻鍙蹭紶鎵夸笌鏂版椂浠e彂灞曟�濊��",
+          sources: "鍖椾含涓尰鑽ぇ瀛﹀鎶�",
+          type: "鏈熷垔",
+          author: "鏉ㄦ担鑿�  鍖椾含涓尰鑽ぇ瀛︿腑鑽闄紱璧靛ぉ鎴�  鍖椾含甯堣寖澶у",
+          time: "2025-02-24 09:21",
+          title:
+            "涓嵂闂告煖鏄紶缁熶腑鑽皟鍓傜殑楂樼骇绠$悊浜哄憳锛屽湪'鍓嶅簵鍚庡巶寮�'涓嵂鎴垮彂鎸ラ噸瑕佷綔鐢ㄥ拰鍏抽敭鑱岃兘銆備紶鎵夸腑鑽椄鏌滅殑瀹濊吹瀛︽湳缁忛獙涓庝紭绉�鏂囧寲瀵瑰帢娓呬腑鑽瀛︾鍙戝睍鑴夌粶銆佽鑼冧腑鑽皟鍓傛妧鏈搷浣溿�佷績杩涜�佽嵂宸ユ妧鑹�'娲绘�佷紶鎵�'鍏锋湁閲嶈绉戝浠峰�煎拰鐜板疄鎰忎箟銆傞潰鍚戞柊鏃朵唬銆佸紑鍚柊鎬濈淮锛屾湰鏂囧鑰佸瓧鍙蜂腑鑽摵鐨勫叴璧峰拰涓嵂闂告煖杩涜鑰冭瘉锛屽垎鏋愪腑鑽椄鏌滅殑宀椾綅璐d换銆佷紶鎵胯矾寰勫強鏈潵鍙戝睍锛屾彁鍑洪珮绱犺川涓嵂闂告煖浜烘墠鍩瑰吇绛栫暐锛屾棬鍦ㄥ煿鍏荤鍚堝綋浠gぞ浼氶渶姹傜殑涓嵂琛屼笟澶嶅悎鍨嬪垱鏂颁汉鎵嶃�備腑鑽椄鏌滄槸浼犵粺涓嵂璋冨墏鐨勯珮绾х鐞嗕汉鍛橈紝鍦�'鍓嶅簵鍚庡巶寮�'涓嵂鎴垮彂鎸ラ噸瑕佷綔鐢ㄥ拰鍏抽敭鑱岃兘銆備紶鎵夸腑鑽椄鏌滅殑瀹濊吹瀛︽湳缁忛獙涓庝紭绉�鏂囧寲瀵瑰帢娓呬腑鑽瀛︾鍙戝睍鑴夌粶銆佽鑼冧腑鑽皟鍓傛妧鏈搷浣溿�佷績杩涜�佽嵂宸ユ妧鑹�'娲绘�佷紶鎵�'鍏锋湁閲嶈绉戝浠峰�煎拰鐜板疄鎰忎箟銆傞潰鍚戞柊鏃朵唬銆佸紑鍚柊鎬濈淮锛屾湰鏂囧鑰佸瓧鍙蜂腑鑽摵鐨勫叴璧峰拰涓嵂闂告煖杩涜鑰冭瘉锛屽垎鏋愪腑鑽椄鏌滅殑宀椾綅璐d换銆佷紶鎵胯矾寰勫強鏈潵鍙戝睍锛屾彁鍑洪珮绱犺川涓嵂闂告煖浜烘墠鍩瑰吇绛栫暐锛屾棬鍦ㄥ煿鍏荤鍚堝綋浠gぞ浼氶渶姹傜殑涓嵂琛屼笟澶嶅悎鍨嬪垱鏂颁汉鎵嶃��",
+          keyword: [
+            {
+              name: "涓嵂闂告煖",
+            },
+            {
+              name: "涓嵂闂告煖",
+            },
+            {
+              name: "涓嵂闂告煖",
+            },
+            {
+              name: "涓嵂闂告煖",
+            },
+          ],
+        },
+        {
+          name: "涓嵂闂告煖鐨勫巻鍙蹭紶鎵夸笌鏂版椂浠e彂灞曟�濊��",
+          sources: "鍖椾含涓尰鑽ぇ瀛﹀鎶�",
+          type: "鏈熷垔",
+          author: "鏉ㄦ担鑿�  鍖椾含涓尰鑽ぇ瀛︿腑鑽闄紱璧靛ぉ鎴�  鍖椾含甯堣寖澶у",
+          time: "2025-02-24 09:21",
+          title:
+            "涓嵂闂告煖鏄紶缁熶腑鑽皟鍓傜殑楂樼骇绠$悊浜哄憳锛屽湪'鍓嶅簵鍚庡巶寮�'涓嵂鎴垮彂鎸ラ噸瑕佷綔鐢ㄥ拰鍏抽敭鑱岃兘銆備紶鎵夸腑鑽椄鏌滅殑瀹濊吹瀛︽湳缁忛獙涓庝紭绉�鏂囧寲瀵瑰帢娓呬腑鑽瀛︾鍙戝睍鑴夌粶銆佽鑼冧腑鑽皟鍓傛妧鏈搷浣溿�佷績杩涜�佽嵂宸ユ妧鑹�'娲绘�佷紶鎵�'鍏锋湁閲嶈绉戝浠峰�煎拰鐜板疄鎰忎箟銆傞潰鍚戞柊鏃朵唬銆佸紑鍚柊鎬濈淮锛屾湰鏂囧鑰佸瓧鍙蜂腑鑽摵鐨勫叴璧峰拰涓嵂闂告煖杩涜鑰冭瘉锛屽垎鏋愪腑鑽椄鏌滅殑宀椾綅璐d换銆佷紶鎵胯矾寰勫強鏈潵鍙戝睍锛屾彁鍑洪珮绱犺川涓嵂闂告煖浜烘墠鍩瑰吇绛栫暐锛屾棬鍦ㄥ煿鍏荤鍚堝綋浠gぞ浼氶渶姹傜殑涓嵂琛屼笟澶嶅悎鍨嬪垱鏂颁汉鎵嶃�備腑鑽椄鏌滄槸浼犵粺涓嵂璋冨墏鐨勯珮绾х鐞嗕汉鍛橈紝鍦�'鍓嶅簵鍚庡巶寮�'涓嵂鎴垮彂鎸ラ噸瑕佷綔鐢ㄥ拰鍏抽敭鑱岃兘銆備紶鎵夸腑鑽椄鏌滅殑瀹濊吹瀛︽湳缁忛獙涓庝紭绉�鏂囧寲瀵瑰帢娓呬腑鑽瀛︾鍙戝睍鑴夌粶銆佽鑼冧腑鑽皟鍓傛妧鏈搷浣溿�佷績杩涜�佽嵂宸ユ妧鑹�'娲绘�佷紶鎵�'鍏锋湁閲嶈绉戝浠峰�煎拰鐜板疄鎰忎箟銆傞潰鍚戞柊鏃朵唬銆佸紑鍚柊鎬濈淮锛屾湰鏂囧鑰佸瓧鍙蜂腑鑽摵鐨勫叴璧峰拰涓嵂闂告煖杩涜鑰冭瘉锛屽垎鏋愪腑鑽椄鏌滅殑宀椾綅璐d换銆佷紶鎵胯矾寰勫強鏈潵鍙戝睍锛屾彁鍑洪珮绱犺川涓嵂闂告煖浜烘墠鍩瑰吇绛栫暐锛屾棬鍦ㄥ煿鍏荤鍚堝綋浠gぞ浼氶渶姹傜殑涓嵂琛屼笟澶嶅悎鍨嬪垱鏂颁汉鎵嶃��",
+          keyword: [
+            {
+              name: "涓嵂闂告煖",
+            },
+            {
+              name: "涓嵂闂告煖",
+            },
+            {
+              name: "涓嵂闂告煖",
+            },
+            {
+              name: "涓嵂闂告煖",
+            },
+          ],
+        },
+      ],
+    };
   },
 
   methods: {
-    async onSubmit(val) {
-
-    },
+    async onSubmit(val) { },
     //閲嶇疆鎼滅储缁撴灉
     resetForm() {
       // this.onSearch("");
     },
-  }
-}
+    // 椤甸潰璺宠浆
+    goPage(key) {
+      this.$router.push({ name: "details", params: { key: key } });
+    },
+    // 鏀惰捣鍜屽睍绀�
+    shrinkClick(key, name) {
+      if (name == "骞村害") {
+        this.professionIndex =
+          this.professionIndex < this.annual.list.length
+            ? this.annual.list.length
+            : 4;
+        this.dynastyIndex = 4;
+        this.activeBox = this.activeBox === "a" ? null : "a";
+      } else {
+        this.dynastyIndex =
+          this.dynastyIndex < this.sources.list.length
+            ? this.sources.list.length
+            : 4;
+        this.professionIndex = 4;
+        this.activeBox = this.activeBox === "b" ? null : "b";
+      }
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
@@ -422,41 +612,62 @@
   height: 100%;
   box-sizing: border-box;
   background-color: #e9e1d4;
-  overflow: auto;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
 .page-header {
-  height: 102px;
+  padding: 8px 0;
+  height: 9.4%;
   width: 100%;
   text-align: left;
-  margin-bottom: 8px;
   border-bottom: 2px solid #937950;
+  background-color: #e9e1d4;
+  position: sticky;
+  top: 0;
+  z-index: 100;
 
   p {
-    padding: 35px 0 34px 0;
+    height: 100%;
     font-family: Alimama DongFangDaKai;
     font-size: 30px;
     text-indent: 1em;
     border-bottom: 1px solid #937950;
+    display: flex;
+    align-items: center;
   }
 }
 
+.page-main-father {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  padding-top: 1%;
+  padding-bottom: 2%;
+}
+
 .page-main {
-  width: 1330px;
+  width: 77.3%;
   margin: 0 auto;
+  margin-top: 1%;
+  margin-bottom: 1%;
 }
 
 .page-input {
   width: 100%;
   display: flex;
   background-color: #fefbf5;
-  border: 1px solid #E4DACE;
+  border: 1px solid #e4dace;
 
   .input-main {
     padding: 15px 0;
-    text-align: center;
+    display: flex;
+    justify-content: center;
     width: 90%;
-    border-right: 2px solid #E4DACE;
+    border-right: 2px solid #e4dace;
 
     .input-with-select {
       width: 50%;
@@ -472,7 +683,7 @@
     font-family: Source Han Sans;
     font-size: 14px;
     font-weight: bold;
-    color: #6F5A3A;
+    color: #6f5a3a;
     cursor: pointer;
 
     img {
@@ -486,9 +697,9 @@
 .page-search {
   width: 100%;
   background-color: #fefbf5;
-  border-bottom: 1px solid #E4DACE;
-  border-left: 1px solid #E4DACE;
-  border-right: 1px solid #E4DACE;
+  border-bottom: 1px solid #e4dace;
+  border-left: 1px solid #e4dace;
+  border-right: 1px solid #e4dace;
   padding: 13px 0px;
   display: flex;
   justify-content: center;
@@ -512,33 +723,27 @@
         font-size: 14px;
         background-color: transparent;
         color: #937950;
-        border: 1px solid #6F5A3A;
+        border: 1px solid #6f5a3a;
 
         &:hover {
-          background-color: #6F5A3A;
-          color: #FFFDF8;
+          background-color: #6f5a3a;
+          color: #fffdf8;
         }
       }
     }
   }
-
-
-
 }
-
 
 .page-content {
   width: 100%;
   margin-top: 20px;
   background-color: #fefbf5;
-  border: 1px solid #E4DACE;
+  border: 1px solid #e4dace;
   display: flex;
-
 
   .content-left {
     width: 19.5%;
-    border-right: 1px solid #E4DACE;
-    border-bottom: 1px solid #E4DACE;
+    border-bottom: 1px solid #e4dace;
   }
 
   .left-title {
@@ -546,7 +751,8 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    border-bottom: 1px solid #E4DACE;
+    border-right: 1px solid #e4dace;
+    border-bottom: 1px solid #e4dace;
 
     span {
       margin-right: 20px;
@@ -569,21 +775,23 @@
   }
 
   .left-main {
-    border-bottom: 1px solid #E4DACE;
+    border-right: 1px solid #e4dace;
+    border-bottom: 1px solid #e4dace;
     padding: 10px;
     display: flex;
-    align-items: center;
     flex-wrap: wrap;
   }
 
   .category-main {
     width: 50%;
     margin-bottom: 10px;
+    display: flex;
+    align-items: center;
 
     span {
       font-family: Source Han Sans;
       font-size: 12px;
-      color: #8F7A5A;
+      color: #8f7a5a;
     }
   }
 
@@ -597,7 +805,7 @@
     span {
       font-family: Source Han Sans;
       font-size: 12px;
-      color: #8F7A5A;
+      color: #8f7a5a;
     }
   }
 
@@ -621,37 +829,39 @@
     span {
       font-family: Source Han Sans;
       font-size: 12px;
-      color: #8F7A5A;
+      color: #8f7a5a;
     }
   }
 
   .el-checkbox {
+    vertical-align: middle;
+    font-family: "Tahoma";
     width: 70%;
+    vertical-align: middle;
   }
 
   /* 璁剧疆榧犳爣缁忚繃瀵瑰嬀妗嗭紝瀵瑰嬀妗嗚竟妗嗙殑棰滆壊 */
   ::v-deep .el-checkbox .el-checkbox__inner:hover {
-    border-color: #D1D1D1;
+    border-color: #d1d1d1;
   }
 
   /* 璁剧疆checkbox鑾峰緱鐒︾偣鍚庯紝瀵瑰嬀妗嗙殑杈规棰滆壊 */
   ::v-deep .el-checkbox .el-checkbox__input.is-focus .el-checkbox__inner {
-    border-color: #D1D1D1;
+    border-color: #d1d1d1;
   }
 
   ::v-deep .el-checkbox .el-checkbox__input.is-checked+.el-checkbox__label {
-    color: #2C2C2C;
+    color: #2c2c2c;
   }
 
   ::v-deep .el-checkbox .el-checkbox__input.is-checked .el-checkbox__inner,
   ::v-deep .el-checkbox .el-checkbox__input.is-indeterminate .el-checkbox__inner {
-    border-color: #8F7A5A;
-    background-color: #8F7A5A;
+    border-color: #8f7a5a;
+    background-color: #8f7a5a;
   }
 
-
   ::v-deep .el-checkbox__label {
-    color: #2C2C2C;
+    color: #2c2c2c;
     width: 100%;
     font-family: Source Han Sans;
     font-size: 12px;
@@ -673,7 +883,6 @@
     color: #937950;
   }
 
-
   .content-right {
     width: 80.5%;
     padding: 14px 20px 20px 14px;
@@ -682,7 +891,7 @@
       display: flex;
 
       li {
-        background: #FFFFFF;
+        background: #ffffff;
         border: 1px solid #937950;
         padding: 3px 10px;
         margin-right: 13px;
@@ -705,16 +914,18 @@
       display: flex;
       justify-content: flex-end;
       align-items: flex-start;
+      margin-bottom: 12px;
 
       .number-number {
         font-family: Source Han Sans;
         font-weight: 350;
         font-size: 14px;
-        color: #2C2C2C;
+        color: #2c2c2c;
         margin-right: 20px;
 
-        span{
+        span {
           color: #937950;
+          margin: 0 10px;
         }
       }
 
@@ -722,30 +933,164 @@
         font-family: Source Han Sans;
         font-size: 12px;
         font-weight: 350;
-        color: #2C2C2C;
-        
-        span{
+        color: #2c2c2c;
+
+        span {
           margin-left: 11px;
         }
 
-        img{
-            height: 12px;
-            width: auto;
+        img {
+          height: 12px;
+          width: auto;
+        }
+      }
+    }
+
+    .right-main {
+      margin-bottom: 20px;
+      padding: 19px 30px 15px 30px;
+      border: 1px solid #decaac;
+
+      .main-name {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-family: Source Han Sans;
+        font-size: 16px;
+        font-weight: bold;
+        color: #937950;
+
+        ::v-deep .el-button {
+          font-size: 14px;
+          background-color: transparent;
+          color: #937950;
+          border: 1px solid #6f5a3a;
+          border-radius: 0;
+
+          &:hover {
+            background-color: #6f5a3a;
+            color: #fffdf8;
+          }
         }
       }
 
+      .main-sources {
+        span:nth-child(1) {
+          padding: 3px 5px;
+          background-color: #87a8b9;
+          color: #fff;
+          margin-right: 10px;
+        }
 
+        span:nth-child(2) {
+          font-family: Source Han Sans;
+          font-size: 12px;
+          font-weight: 350;
+          padding-right: 10px;
+          border-right: 1px solid #2c2c2c;
+          color: #333;
+        }
+
+        span:nth-child(3) {
+          font-family: Source Han Sans;
+          font-size: 12px;
+          font-weight: 350;
+          padding-left: 10px;
+          color: #333;
+        }
+
+        margin-bottom: 10px;
+      }
+
+      .main-author {
+        margin-bottom: 12px;
+        font-family: Source Han Sans;
+        font-size: 12px;
+        font-weight: 350;
+        color: #333;
+      }
+
+      .main-title {
+        margin-bottom: 15px;
+        font-family: Source Han Sans;
+        font-size: 14px;
+        font-weight: 350;
+        line-height: 26px;
+        color: #333333;
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 4;
+
+        span {
+          font-family: Source Han Sans;
+          font-weight: 700;
+          font-size: 14px;
+        }
+      }
+
+      .main-keyword {
+        span:nth-child(1) {
+          font-family: Source Han Sans;
+          font-weight: 700;
+          font-size: 14px;
+        }
+
+        .keyWord {
+          cursor: pointer;
+          padding: 5px 10px;
+          color: #937950;
+          border: 1px solid #937950;
+          font-family: Source Han Sans;
+          font-size: 12px;
+          font-weight: 350;
+          line-height: 28px;
+          margin-right: 13px;
+        }
+      }
     }
   }
-
 }
 
-
-
-
+.pagination {
+  display: flex;
+  justify-content: center;
+}
 
 el-input__suffix {
   right: 22px;
   color: #999;
 }
-</style>
\ No newline at end of file
+
+:deep .msg-pagination-container.is-background .el-pager li {
+  /*瀵归〉鏁扮殑鏍峰紡杩涜淇敼*/
+  background-color: transparent;
+  color: #333333;
+  border-radius: 5px;
+  border: 1px solid #cccccc;
+}
+
+:deep.msg-pagination-container.is-background .btn-next {
+  /*瀵逛笅涓�椤电殑鎸夐挳鏍峰紡杩涜淇敼*/
+  background-color: transparent;
+  color: #333333;
+  border-radius: 5px;
+  border: 1px solid #cccccc;
+}
+
+:deep.msg-pagination-container.is-background .btn-prev {
+  /*瀵逛笂涓�椤电殑鎸夐挳鏍峰紡杩涜淇敼*/
+  background-color: transparent;
+  color: #333333;
+  border-radius: 5px;
+  border: 1px solid #cccccc;
+}
+
+:deep.msg-pagination-container.is-background .el-pager li:not(.disabled).active {
+  /*褰撳墠閫変腑椤垫暟鐨勬牱寮忚繘琛屼慨鏀�*/
+  background-color: #937950;
+  color: #fff;
+  border-radius: 5px;
+  border: 1px solid #cccccc;
+}
+</style>

--
Gitblit v1.9.1