From 428519bd36af8e719e56abbc5f1ba0b37cdadb8c Mon Sep 17 00:00:00 2001
From: zhongshujie <2862698242@qq.com>
Date: 星期一, 28 四月 2025 14:49:32 +0800
Subject: [PATCH] 样式调整

---
 src/views/achievements/index.vue |  526 ++++++++++++++++++++++++++++++++++------------------------
 1 files changed, 308 insertions(+), 218 deletions(-)

diff --git a/src/views/achievements/index.vue b/src/views/achievements/index.vue
index 6f655ea..c1ab2ea 100644
--- a/src/views/achievements/index.vue
+++ b/src/views/achievements/index.vue
@@ -10,7 +10,7 @@
         <!-- 鎼滅储妗� -->
         <ul class="page-input">
           <li class="input-main">
-            <SearchBox @search="handleSearch" />
+            <SearchBox @search="handleSearch" :options="inputOptions" />
           </li>
           <li class="input-txt" @click="isDisplay = !isDisplay">
             楂樼骇妫�绱�
@@ -39,9 +39,10 @@
               </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>
+                  <el-checkbox class="el-checkbox" v-model="item.checked" :title="item.name"
+                    @change="categoryChange(item)" style="display: inline-block; vertical-align: middle">{{ item.name
+                    }}</el-checkbox>
+                  <span class="" style="display: inline-block; vertical-align: middle">{{ item.num }}</span>
                 </div>
               </li>
             </ul>
@@ -113,19 +114,20 @@
               </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>
+                  <el-checkbox class="el-checkbox" v-model="item.checked" :title="item.name"
+                    @change="subjectChange(item)">{{ item.name }}</el-checkbox>
                   <span class="">{{ item.num }}</span>
                 </div>
               </li>
             </ul>
           </div>
-          <div class="content-right">
+          <div class="content-right" v-loading="loading" element-loading-text="妫�绱㈢粨鏋滃姞杞戒腑"
+            element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
             <!-- title閮ㄥ垎 -->
             <ul class="right-header">
               <li v-for="(item, index) in associationList" :key="index">
                 <p>{{ item.type }} : {{ item.content }}</p>
-                <img :src="errorIcon" alt="" />
+                <img @click="removeAssociationList(item.content)" :src="errorIcon" alt="" />
               </li>
             </ul>
             <!-- 鍏眡x鏉� -->
@@ -135,7 +137,7 @@
               </ul>
               <ul class="number-time">
                 鍙戣〃鏃堕棿
-                <span><img :src="sortBottom" alt="" /></span>
+                <span @click="sortChange()"><img :src="!postedSortInfo ? sortBottom : sortTop" alt="" /></span>
               </ul>
             </ul>
             <!-- 缁撴灉灞曠ず -->
@@ -143,7 +145,7 @@
               <li class="main-name">
                 <p>{{ item.name }}</p>
                 <p>
-                  <el-button @click="goPage(item)">璇︽儏</el-button>
+                  <el-button @click="goPage(item.id)">璇︽儏</el-button>
                   <el-button>AI鏅鸿兘闃呰</el-button>
                 </p>
               </li>
@@ -151,27 +153,30 @@
                 <span>{{ item.resourceTypeName }}</span>
                 <span>{{ item.source }}</span>
                 <span>{{ item.year }}</span>
+                <span v-if="item.DOI">doi锛歿{ item.DOI }}</span>
               </li>
               <li class="main-author">
                 {{ item.author }}
               </li>
-              <li class="main-title" :title="item.abstract">
+              <li class="main-title" :title="item.cleanAbstract" v-if="item.abstract">
                 <span>鎽樿: </span>
-                <span class="page-main-abstract" v-html="item.abstract"></span>
+                <span class="page-main-abstract" v-html="item.cleanAbstract"></span>
               </li>
-              <li class="main-keyword">
+              <li class="main-keyword" v-if="item.keyWords && item.keyWords.length > 0">
                 <span>鍏抽敭璇嶏細</span>
-                <span class="keyWord" v-for="(citem, cindex) in item.keyWords" :key="cindex">
+                <span class="keyWord" v-for="(citem, cindex) in item.keyWords" :key="cindex"
+                  @click="() => handleSearch({ text: citem, type: 'keyWords', label: '鍏抽敭璇�' })">
                   {{ citem }}
                 </span>
               </li>
             </ul>
             <!-- 鍒嗛〉 -->
-            <div class="pagination">
+            <div class="pagination" v-if="total > 6">
               <el-pagination @current-change="handleCurrentChange" class="msg-pagination-container"
-                :background="isBackground" layout="prev, pager, next" :total="total">
+                :background="isBackground" layout="prev, pager, next" :total="total" :page-size="6">
               </el-pagination>
             </div>
+            <el-empty v-if="!loading && !resultList.length"></el-empty>
           </div>
         </div>
       </div>
@@ -193,8 +198,24 @@
   },
   data() {
     return {
+      relatedList: [],
+      // 杈撳叆妗嗙殑鍐呭
+      inputValue: "",
+      // 閫夋嫨鐨勭被鍨�
+      inputType: "",
+      //绫诲瀷閫夋嫨
+      inputOptions: [
+        { value: "all", label: "鍏ㄩ儴" },
+        { value: "Name", label: "鏍囬" },
+        { value: "author", label: "浣滆��" },
+        // { value: "year", label: "骞翠唤" },
+        { value: "keyWords", label: "鍏抽敭璇�" },
+        { value: "abstract", label: "鎽樿" },
+        { value: "source", label: "鏉ユ簮" },
+      ],
       subjectAffiliationRefCode: "subjectAffiliation",
       resourceTypeRefCode: "resourceType",
+      resourceTypeValueList: [],
       errorIcon: require("@/assets/images/achievements/errorIcon.png"),
       topIcon: require("@/assets/images/achievements/top-Icon.png"),
       bottomIcon: require("@/assets/images/achievements/bottom-Icon.png"),
@@ -297,6 +318,10 @@
           },
         ],
       },
+      categoryChecList: [],
+      subjectCheckList: [],
+
+      postedSortInfo: true,
       // 骞村害
       annual: {
         title: "骞村害",
@@ -421,183 +446,73 @@
       // 鐜板湪澶氬皯鏉℃椂鏈熸暟鎹�
       dynastyIndex: 4,
       // 鎵�鍏宠仈鍐呭
-      associationList: [
-        {
-          type: "浣滆��",
-          content: "闄堣 鍝�",
-        },
-        {
-          type: "浣滆��",
-          content: "闄堣 鍝�",
-        },
-        {
-          type: "浣滆��",
-          content: "闄堣 鍝�",
-        },
-      ],
+      associationList: [],
       // 鏌ヨ缁撴灉
-      resultList: [
-        {
-          name: "涓嵂闂告煖鐨勫巻鍙蹭紶鎵夸笌鏂版椂浠e彂灞曟�濊��",
-          sources: "鍖椾含涓尰鑽ぇ瀛﹀鎶�",
-          type: "鏈熷垔",
-          author: "鏉ㄦ担鑿�  鍖椾含涓尰鑽ぇ瀛︿腑鑽闄紱璧靛ぉ鎴�  鍖椾含甯堣寖澶у",
-          time: "2025-02-24 09:21",
-          title:
-            "涓嵂闂告煖鏄紶缁熶腑鑽皟鍓傜殑楂樼骇绠$悊浜哄憳锛屽湪'鍓嶅簵鍚庡巶寮�'涓嵂鎴垮彂鎸ラ噸瑕佷綔鐢ㄥ拰鍏抽敭鑱岃兘銆備紶鎵夸腑鑽椄鏌滅殑瀹濊吹瀛︽湳缁忛獙涓庝紭绉�鏂囧寲瀵瑰帢娓呬腑鑽瀛︾鍙戝睍鑴夌粶銆佽鑼冧腑鑽皟鍓傛妧鏈搷浣溿�佷績杩涜�佽嵂宸ユ妧鑹�'娲绘�佷紶鎵�'鍏锋湁閲嶈绉戝浠峰�煎拰鐜板疄鎰忎箟銆傞潰鍚戞柊鏃朵唬銆佸紑鍚柊鎬濈淮锛屾湰鏂囧鑰佸瓧鍙蜂腑鑽摵鐨勫叴璧峰拰涓嵂闂告煖杩涜鑰冭瘉锛屽垎鏋愪腑鑽椄鏌滅殑宀椾綅璐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: "涓嵂闂告煖",
-            },
-          ],
-        },
-        {
-          name: "涓嵂闂告煖鐨勫巻鍙蹭紶鎵夸笌鏂版椂浠e彂灞曟�濊��",
-          sources: "鍖椾含涓尰鑽ぇ瀛﹀鎶�",
-          type: "鏈熷垔",
-          author: "鏉ㄦ担鑿�  鍖椾含涓尰鑽ぇ瀛︿腑鑽闄紱璧靛ぉ鎴�  鍖椾含甯堣寖澶у",
-          time: "2025-02-24 09:21",
-          title:
-            "涓嵂闂告煖鏄紶缁熶腑鑽皟鍓傜殑楂樼骇绠$悊浜哄憳锛屽湪'鍓嶅簵鍚庡巶寮�'涓嵂鎴垮彂鎸ラ噸瑕佷綔鐢ㄥ拰鍏抽敭鑱岃兘銆備紶鎵夸腑鑽椄鏌滅殑瀹濊吹瀛︽湳缁忛獙涓庝紭绉�鏂囧寲瀵瑰帢娓呬腑鑽瀛︾鍙戝睍鑴夌粶銆佽鑼冧腑鑽皟鍓傛妧鏈搷浣溿�佷績杩涜�佽嵂宸ユ妧鑹�'娲绘�佷紶鎵�'鍏锋湁閲嶈绉戝浠峰�煎拰鐜板疄鎰忎箟銆傞潰鍚戞柊鏃朵唬銆佸紑鍚柊鎬濈淮锛屾湰鏂囧鑰佸瓧鍙蜂腑鑽摵鐨勫叴璧峰拰涓嵂闂告煖杩涜鑰冭瘉锛屽垎鏋愪腑鑽椄鏌滅殑宀椾綅璐d换銆佷紶鎵胯矾寰勫強鏈潵鍙戝睍锛屾彁鍑洪珮绱犺川涓嵂闂告煖浜烘墠鍩瑰吇绛栫暐锛屾棬鍦ㄥ煿鍏荤鍚堝綋浠gぞ浼氶渶姹傜殑涓嵂琛屼笟澶嶅悎鍨嬪垱鏂颁汉鎵嶃�備腑鑽椄鏌滄槸浼犵粺涓嵂璋冨墏鐨勯珮绾х鐞嗕汉鍛橈紝鍦�'鍓嶅簵鍚庡巶寮�'涓嵂鎴垮彂鎸ラ噸瑕佷綔鐢ㄥ拰鍏抽敭鑱岃兘銆備紶鎵夸腑鑽椄鏌滅殑瀹濊吹瀛︽湳缁忛獙涓庝紭绉�鏂囧寲瀵瑰帢娓呬腑鑽瀛︾鍙戝睍鑴夌粶銆佽鑼冧腑鑽皟鍓傛妧鏈搷浣溿�佷績杩涜�佽嵂宸ユ妧鑹�'娲绘�佷紶鎵�'鍏锋湁閲嶈绉戝浠峰�煎拰鐜板疄鎰忎箟銆傞潰鍚戞柊鏃朵唬銆佸紑鍚柊鎬濈淮锛屾湰鏂囧鑰佸瓧鍙蜂腑鑽摵鐨勫叴璧峰拰涓嵂闂告煖杩涜鑰冭瘉锛屽垎鏋愪腑鑽椄鏌滅殑宀椾綅璐d换銆佷紶鎵胯矾寰勫強鏈潵鍙戝睍锛屾彁鍑洪珮绱犺川涓嵂闂告煖浜烘墠鍩瑰吇绛栫暐锛屾棬鍦ㄥ煿鍏荤鍚堝綋浠gぞ浼氶渶姹傜殑涓嵂琛屼笟澶嶅悎鍨嬪垱鏂颁汉鎵嶃��",
-          keyword: [
-            {
-              name: "涓嵂闂告煖",
-            },
-            {
-              name: "涓嵂闂告煖",
-            },
-            {
-              name: "涓嵂闂告煖",
-            },
-            {
-              name: "涓嵂闂告煖",
-            },
-          ],
-        },
-      ],
+      resultList: [],
       total: 0,
-      currentPage: 1,
+      paginationPage: 1,
       loading: false,
+      labelList: {
+        abstract: "鎽樿",
+        author: "浣滆��",
+        keyword: "鍏抽敭璇�",
+        source: "鏉ユ簮",
+        title: "鏍囬",
+        year: "骞翠唤",
+      },
     };
   },
   mounted() {
-    this.getSelectContent();
-    this.getLeftCheckbox()
     this.getSelectData();
-    this.getItemList()
   },
 
   methods: {
-    async onSubmit(val) { },
+    categoryChange(val) {
+      console.log(val, "val");
+      if (val.checked) {
+        this.categoryChecList.push(val.value);
+      } else {
+        const index = this.categoryChecList.findIndex(
+          (item) => item === val.value
+        );
+        this.categoryChecList.splice(index, 1);
+      }
+      this.getItemList();
+    },
+
+    subjectChange(val) {
+      console.log(val, "val");
+      if (val.checked) {
+        this.subjectCheckList.push(val.value);
+      } else {
+        const index = this.subjectCheckList.findIndex(
+          (item) => item === val.value
+        );
+        this.subjectCheckList.splice(index, 1);
+      }
+      this.getItemList();
+    },
+
+    async onSubmit(val) {
+      for (let key in val) {
+        if (val[key] != "") {
+          this.associationList.push({
+            type: this.labelList[key],
+            content: val[key],
+            value: key,
+          });
+        }
+      }
+      console.log(this.associationList, "this.associationList");
+      this.getItemList();
+    },
     //閲嶇疆鎼滅储缁撴灉
     resetForm() {
       // this.onSearch("");
     },
     // 椤甸潰璺宠浆
-    goPage(key) {
-      console.log(key,"key");
-      this.$router.push({ name: "details", params: { key: key } });
+    goPage(id) {
+      this.$router.push({ name: "details", query: { id } });
     },
     // 鏀惰捣鍜屽睍绀�
     shrinkClick(key, name) {
@@ -617,22 +532,25 @@
         this.activeBox = this.activeBox === "b" ? null : "b";
       }
     },
-    // 鑾峰彇宸︿晶checkbox鏁版嵁
-    getLeftCheckbox() {
-
-
-    },
 
     //鑾峰彇涓嬫媺閫夋嫨妗嗙殑鍐呭
     async getSelectData() {
+      this.loading = true;
       try {
         // 鍚屾椂鍙戣捣涓や釜寮傛璇锋眰锛屽苟绛夊緟瀹冧滑鐨勭粨鏋�
         const [subjectListResult, resourceListResult] = await Promise.all([
           this.getSelectContent(this.subjectAffiliationRefCode),
           this.getSelectContent(this.resourceTypeRefCode),
         ]);
-        this.subject.list = subjectListResult.option
+        console.log(subjectListResult.option);
+        this.subject.list = subjectListResult.option;
         this.category.list = resourceListResult.option;
+        if (this.category.list && this.category.list.length) {
+          this.category.list.forEach((item) => {
+            this.resourceTypeValueList.push(item.value);
+          });
+        }
+        this.getItemList();
       } catch (error) {
         console.error("鑾峰彇涓嬫媺妗嗘暟鎹け璐�:", error);
       }
@@ -645,60 +563,148 @@
         .getProductTypeField(requestData)
         .then((res) => {
           const selestList = JSON.parse(res[0].config);
-          this.getLeftCheckbox()
           return selestList;
         })
         .catch((error) => {
-          console.error("鑾峰彇鑽h獕澶辫触:", error);
+          console.error("鑾峰彇閫夋嫨鍐呭澶辫触:", error);
           return null;
         });
     },
 
-    // 鎼滅储
-    handleSearch(text, type) {
-      console.log(1234);
-      console.log(text, type, "鎼滅储123");
+    // 鍒犻櫎
+    removeAssociationList(value) {
+      this.associationList = this.associationList.filter(
+        (item) => item.content !== value
+      );
+      this.inputValue = "";
+      // 閫氱煡鐖剁粍浠舵暟鎹凡鏀瑰彉
+      this.getItemList()
     },
 
-    // getTtem
+    // 鎼滅储
+    handleSearch(isText) {
+      this.associationList = []
+      if (isText.text != "") {
+        this.inputValue = isText.text;
+        this.inputType = isText.type;
+        this.associationList.push({
+          type: isText.label,
+          content: isText.text,
+        });
+        this.getItemList();
+      }
+    },
+
+    // 璇锋眰鏁版嵁
     getItemList() {
-      this.loading = true;
+      let searchData = {}; // 鍒濆鍖栦竴涓┖瀵硅薄鏉ュ瓨鍌ㄦ悳绱㈡暟鎹�
+      if (this.inputValue) { // 濡傛灉杈撳叆鍊煎瓨鍦�
+        if (this.inputType != "all") { // 濡傛灉杈撳叆绫诲瀷涓嶆槸"all"
+          // 灏嗚緭鍏ュ�间笌杈撳叆绫诲瀷鍏宠仈锛屽苟娣诲姞涓�涓槦鍙�(*)浣滀负鍚庣紑
+          searchData[this.inputType + "*"] = this.inputValue;
+        } else { // 濡傛灉杈撳叆绫诲瀷鏄�"all"
+          // 閬嶅巻杈撳叆閫夐」
+          for (let index = 0; index < this.inputOptions.length; index++) {
+            const item = this.inputOptions[index]; // 鑾峰彇褰撳墠閫夐」
+            if (item.value !== "all") { // 濡傛灉褰撳墠閫夐」鐨勫�间笉鏄�"all"
+              if (!Object.keys(searchData).length) { // 濡傛灉searchData鏄┖鐨�
+                // 灏嗙涓�涓�夐」鐨勫�间笌杈撳叆鍊煎叧鑱旓紝骞舵坊鍔犱竴涓槦鍙�(*)浣滀负鍚庣紑
+                searchData[item.value + "*"] = this.inputValue;
+              } else { // 濡傛灉searchData涓嶆槸绌虹殑
+                // 浣跨敤"||"浣滀负鍓嶇紑锛屽皢鍚庣画閫夐」鐨勫�间笌杈撳叆鍊煎叧鑱旓紝骞舵坊鍔犱竴涓槦鍙�(*)浣滀负鍚庣紑
+                // 杩欓�氬父鐢ㄤ簬鏋勫缓涓�涓�昏緫鎴栵紙OR锛夋煡璇�
+                searchData["||" + item.value + "*"] = this.inputValue;
+              }
+            }
+          }
+        }
+      }
       MG.resource
         .getItem({
           path: "*",
           queryType: "*",
           paging: {
-            start: (this.currentPage - 1) * 6,
-            size: 6
+            start: (this.paginationPage - 1) * 6,
+            size: 6,
+          },
+          sort: {
+            year: this.postedSortInfo ? "Desc" : "Asc",
           },
           fields: {
             cmsType: ["cmsItem"],
-            resourceType: [],
+            "resourceType*":
+              this.categoryChecList.length > 0
+                ? this.categoryChecList
+                : this.resourceTypeValueList,
             source: [],
             year: [],
             abstract: [],
             keyWords: [],
+            author: [],
+            DOI: [],
+            AIReading: [],
+            file: [],
+            IssueNumber: [],
+            "subjectAffiliation*": this.subjectCheckList,
+            ...searchData,
           },
         })
         .then((res) => {
-          console.log(res, "鍏ㄩ儴鏁版嵁");
+          console.log(res, "鍏ㄩ儴鍐呭");
+
           res.datas.forEach((item) => {
-            item.year = moment(item.year).format("YYYY-MM-DD")
-            item.keyWords = item.keyWords.split(";;")
-            item.resourceTypeName = this.category.list.find((citem) => citem.value == item.resourceType).name
+            item.year = moment(item.year).format("YYYY-MM-DD");
+            if (typeof item.keyWords === "string") {
+              item.keyWords = item.keyWords.split(";;");
+            } else {
+              // 璁剧疆涓�涓粯璁ゅ�兼垨鑰呰繘琛屽叾浠栭敊璇鐞�
+              item.keyWords = [];
+            }
+            if (item.abstract) {
+              item.cleanAbstract = item.abstract.replace(/<[^>]+>/g, "");
+            }
+
+            const foundItem = this.category.list.find((citem) => citem.value == item.cmsItemType);
+            item.resourceTypeName = foundItem ? foundItem.name : '';
           })
           this.resultList = res.datas
           this.total = res.total;
           this.loading = false;
-        })
-    },
+        }).catch((error) => {
+          // 鎵撳嵃閿欒淇℃伅
+          console.error("鑾峰彇鏁版嵁澶辫触:", error);
+        });
 
+      // 婊氬姩鍒伴〉闈㈤《閮�
+      this.$nextTick(() => {
+        const pageMain = document.querySelector('.page-main-father');
+        if (pageMain) {
+          pageMain.scrollTo({
+            top: 0,
+            behavior: 'smooth'
+          });
+        }
+      });
+    },
     // 澶勭悊椤电爜鍙樺寲
     handleCurrentChange(newPage) {
-      this.currentPage = newPage;
+      this.paginationPage = newPage;
       this.getItemList(); // 閲嶆柊鑾峰彇鏁版嵁
+      // 婊氬姩鍒伴〉闈㈤《閮�
+      this.$nextTick(() => {
+        const pageMain = document.querySelector('.page-main-father');
+        if (pageMain) {
+          pageMain.scrollTo({
+            top: 0,
+            behavior: 'smooth'
+          });
+        }
+      });
     },
-
+    sortChange() {
+      this.postedSortInfo = !this.postedSortInfo;
+      this.getItemList();
+    },
   },
 };
 </script>
@@ -737,11 +743,25 @@
   }
 }
 
+::v-deep .el-loading-spinner {
+  .el-loading-text {
+
+    font-size: 14px;
+    color: #937950;
+  }
+
+  .el-icon-loading {
+    font-size: 14px;
+    color: #937950;
+  }
+}
+
+
 .page-main-father {
   flex: 1;
   width: 100%;
   height: 100%;
-  min-width: 1292px;
+  min-width: 1200px;
   overflow: auto;
   padding-top: 1%;
   padding-bottom: 2%;
@@ -760,16 +780,43 @@
   background-color: #fefbf5;
   border: 1px solid #e4dace;
 
-  .input-main {
+  ::v-deep(.input-main) {
     padding: 15px 0;
     display: flex;
     justify-content: center;
     width: 90%;
     border-right: 2px solid #e4dace;
+    font-weight: bold;
 
     .input-with-select {
       width: 50%;
+      font-weight: bold;
     }
+
+    .el-select .el-input.is-focus .el-input__inner {
+      color: #937950 !important;
+      border-color: #937950 !important;
+      font-weight: bold;
+    }
+
+    .el-select-dropdown__item.selected {
+      color: #937950 !important;
+      font-weight: bold;
+    }
+
+    .el-select .el-input__inner:focus {
+      border-color: #937950;
+      font-weight: bold;
+    }
+
+    .el-select .el-input__inner {
+      font-family: Source Han Sans;
+      font-size: 14px;
+      font-weight: bold;
+      color: #2C2C2C;
+
+    }
+
   }
 
   .input-txt {
@@ -821,10 +868,12 @@
         font-size: 14px;
         background-color: transparent;
         color: #937950;
-        border: 1px solid #6f5a3a;
+        border: 1px solid #937950;
+        ;
+        cursor: pointer;
 
         &:hover {
-          background-color: #6f5a3a;
+          background-color: #937950;
           color: #fffdf8;
         }
       }
@@ -987,6 +1036,7 @@
 
     .right-header {
       display: flex;
+      flex-wrap: wrap;
 
       li {
         background: #ffffff;
@@ -998,6 +1048,8 @@
         font-family: Poppins;
         font-size: 13px;
         color: #937950;
+        line-height: 20px;
+        margin-bottom: 10px;
 
         img {
           cursor: pointer;
@@ -1057,16 +1109,21 @@
         font-size: 16px;
         font-weight: bold;
         color: #937950;
+        margin-bottom: 5px;
+
+        p {
+          overflow: hidden;
+        }
 
         ::v-deep .el-button {
           font-size: 14px;
           background-color: transparent;
           color: #937950;
-          border: 1px solid #6f5a3a;
+          border: 1px solid #937950;
           border-radius: 0;
 
           &:hover {
-            background-color: #6f5a3a;
+            background-color: #937950;
             color: #fffdf8;
           }
         }
@@ -1085,7 +1142,6 @@
           font-size: 12px;
           font-weight: 350;
           padding-right: 10px;
-          border-right: 1px solid #2c2c2c;
           color: #333;
         }
 
@@ -1094,10 +1150,21 @@
           font-size: 12px;
           font-weight: 350;
           padding-left: 10px;
+          padding-right: 10px;
           color: #333;
+          border-left: 1px solid #2c2c2c;
         }
 
-        margin-bottom: 10px;
+        span:nth-child(4) {
+          font-family: Source Han Sans;
+          font-size: 12px;
+          font-weight: 350;
+          padding-left: 10px;
+          color: #333;
+          border-left: 1px solid #2c2c2c;
+        }
+
+        margin-bottom: 15px;
       }
 
       .main-author {
@@ -1118,7 +1185,7 @@
         overflow: hidden;
         display: -webkit-box;
         -webkit-box-orient: vertical;
-        -webkit-line-clamp: 4;
+        -webkit-line-clamp: 3;
 
         span {
           font-family: Source Han Sans;
@@ -1128,12 +1195,12 @@
       }
 
       .page-main-abstract {
-      font-family: Source Han Sans !important;
-      font-size: 14px !important;
-      font-weight: 350 !important;
-      line-height: 26px !important;
-      color: #333333 !important;
-    }
+        font-family: Source Han Sans !important;
+        font-size: 14px !important;
+        font-weight: 350 !important;
+        line-height: 26px !important;
+        color: #333333 !important;
+      }
 
       .main-keyword {
         span:nth-child(1) {
@@ -1199,4 +1266,27 @@
   border-radius: 5px;
   border: 1px solid #cccccc;
 }
+:deep.el-pagination.is-background .el-pager li:not(.disabled):hover{
+  color: #937950
+}
 </style>
+
+<style>
+.el-input.is-focus .el-input__inner {
+  color: #937950 !important;
+  border-color: #937950 !important;
+  font-weight: bold;
+
+}
+
+
+.el-select-dropdown__item.selected {
+  color: #937950 !important;
+  font-weight: bold;
+}
+
+.el-select .el-input__inner:focus {
+  border-color: #937950;
+  font-weight: bold;
+}
+</style>
\ No newline at end of file

--
Gitblit v1.9.1