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