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 | 1067 +++++++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 854 insertions(+), 213 deletions(-)
diff --git a/src/views/achievements/index.vue b/src/views/achievements/index.vue
index a2c0031..c1ab2ea 100644
--- a/src/views/achievements/index.vue
+++ b/src/views/achievements/index.vue
@@ -1,118 +1,183 @@
<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 @search="handleSearch" :options="inputOptions" />
+ </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">
-
+ <!-- 鎼滅储缁撴灉 -->
+ <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"
+ @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>
+ <!-- 骞村害 -->
+ <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"
+ @change="subjectChange(item)">{{ item.name }}</el-checkbox>
+ <span class="">{{ item.num }}</span>
+ </div>
+ </li>
+ </ul>
+ </div>
+ <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 @click="removeAssociationList(item.content)" :src="errorIcon" alt="" />
+ </li>
+ </ul>
+ <!-- 鍏眡x鏉� -->
+ <ul class="right-number">
+ <ul class="number-number">
+ 鍏辨壘鍒�<span>{{ this.total }}</span>鏉＄粨鏋�
+ </ul>
+ <ul class="number-time">
+ 鍙戣〃鏃堕棿
+ <span @click="sortChange()"><img :src="!postedSortInfo ? sortBottom : sortTop" 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.id)">璇︽儏</el-button>
+ <el-button>AI鏅鸿兘闃呰</el-button>
+ </p>
+ </li>
+ <li class="main-sources">
+ <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.cleanAbstract" v-if="item.abstract">
+ <span>鎽樿: </span>
+ <span class="page-main-abstract" v-html="item.cleanAbstract"></span>
+ </li>
+ <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"
+ @click="() => handleSearch({ text: citem, type: 'keyWords', label: '鍏抽敭璇�' })">
+ {{ citem }}
+ </span>
+ </li>
+ </ul>
+ <!-- 鍒嗛〉 -->
+ <div class="pagination" v-if="total > 6">
+ <el-pagination @current-change="handleCurrentChange" class="msg-pagination-container"
+ :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>
</div>
@@ -120,41 +185,65 @@
</template>
<script>
-import MyForm from '@/components/form/form.vue'
+import MyForm from "@/components/form/form.vue";
+import SearchBox from "@/views/home/components/searchBox.vue";
+import MG from "@/assets/js/middleGround/WebMiddleGroundApi.js";
+import moment from "moment";
/* eslint-disable vue/no-unused-components */
export default {
- name: 'achievements',
+ name: "achievements",
components: {
- MyForm
+ MyForm,
+ SearchBox,
},
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"),
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: "鏉ユ簮",
},
],
// 褰撳墠椤�
@@ -166,39 +255,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: {
@@ -210,25 +299,29 @@
{
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,
},
- ]
+ ],
},
+ categoryChecList: [],
+ subjectCheckList: [],
+
+ postedSortInfo: true,
// 骞村害
annual: {
title: "骞村害",
@@ -239,41 +332,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: {
@@ -285,34 +376,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: {
@@ -324,55 +415,298 @@
{
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: [],
// 鏌ヨ缁撴灉
- resultList:[
- {
- name:"涓嵂闂告煖鐨勫巻鍙蹭紶鎵夸笌鏂版椂浠ｅ彂灞曟�濊��",
- sources:"鍖椾含涓尰鑽ぇ瀛﹀鎶�",
- time:"2025-02-24 09:21",
- title:"鎽樿: 涓嵂闂告煖鏄紶缁熶腑鑽皟鍓傜殑楂樼骇绠＄悊浜哄憳锛屽湪'鍓嶅簵鍚庡巶寮�'涓嵂鎴垮彂鎸ラ噸瑕佷綔鐢ㄥ拰鍏抽敭鑱岃兘銆備紶鎵夸腑鑽椄鏌滅殑瀹濊吹瀛︽湳缁忛獙涓庝紭绉�鏂囧寲瀵瑰帢娓呬腑鑽瀛︾鍙戝睍鑴夌粶銆佽鑼冧腑鑽皟鍓傛妧鏈搷浣溿�佷績杩涜�佽嵂宸ユ妧鑹�'娲绘�佷紶鎵�'鍏锋湁閲嶈绉戝浠峰�煎拰鐜板疄鎰忎箟銆傞潰鍚戞柊鏃朵唬銆佸紑鍚柊鎬濈淮锛屾湰鏂囧鑰佸瓧鍙蜂腑鑽摵鐨勫叴璧峰拰涓嵂闂告煖杩涜鑰冭瘉锛屽垎鏋愪腑鑽椄鏌滅殑宀椾綅璐ｄ换銆佷紶鎵胯矾寰勫強鏈潵鍙戝睍锛屾彁鍑洪珮绱犺川涓嵂闂告煖浜烘墠鍩瑰吇绛栫暐锛屾棬鍦ㄥ煿鍏荤鍚堝綋浠ｇぞ浼氶渶姹傜殑涓嵂琛屼笟澶嶅悎鍨嬪垱鏂颁汉鎵嶃��",
- keyword:""
-
- }
- ]
- }
+ resultList: [],
+ total: 0,
+ paginationPage: 1,
+ loading: false,
+ labelList: {
+ abstract: "鎽樿",
+ author: "浣滆��",
+ keyword: "鍏抽敭璇�",
+ source: "鏉ユ簮",
+ title: "鏍囬",
+ year: "骞翠唤",
+ },
+ };
+ },
+ mounted() {
+ this.getSelectData();
},
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(id) {
+ this.$router.push({ name: "details", query: { id } });
+ },
+ // 鏀惰捣鍜屽睍绀�
+ 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";
+ }
+ },
+
+ //鑾峰彇涓嬫媺閫夋嫨妗嗙殑鍐呭
+ async getSelectData() {
+ this.loading = true;
+ try {
+ // 鍚屾椂鍙戣捣涓や釜寮傛璇锋眰锛屽苟绛夊緟瀹冧滑鐨勭粨鏋�
+ const [subjectListResult, resourceListResult] = await Promise.all([
+ this.getSelectContent(this.subjectAffiliationRefCode),
+ this.getSelectContent(this.resourceTypeRefCode),
+ ]);
+ 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);
+ }
+ },
+
+ //鑾峰彇閫夋嫨鍐呭
+ getSelectContent(refCode) {
+ let requestData = { refCodes: [refCode] };
+ return MG.store
+ .getProductTypeField(requestData)
+ .then((res) => {
+ const selestList = JSON.parse(res[0].config);
+ return selestList;
+ })
+ .catch((error) => {
+ console.error("鑾峰彇閫夋嫨鍐呭澶辫触:", error);
+ return null;
+ });
+ },
+
+ // 鍒犻櫎
+ removeAssociationList(value) {
+ this.associationList = this.associationList.filter(
+ (item) => item.content !== value
+ );
+ this.inputValue = "";
+ // 閫氱煡鐖剁粍浠舵暟鎹凡鏀瑰彉
+ this.getItemList()
+ },
+
+ // 鎼滅储
+ 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() {
+ 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.paginationPage - 1) * 6,
+ size: 6,
+ },
+ sort: {
+ year: this.postedSortInfo ? "Desc" : "Asc",
+ },
+ fields: {
+ cmsType: ["cmsItem"],
+ "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, "鍏ㄩ儴鍐呭");
+
+ res.datas.forEach((item) => {
+ 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.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>
<style lang="less" scoped>
@@ -381,45 +715,108 @@
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;
}
}
+::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: 1200px;
+ 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 {
+ ::v-deep(.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;
+ 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 {
@@ -431,7 +828,7 @@
font-family: Source Han Sans;
font-size: 14px;
font-weight: bold;
- color: #6F5A3A;
+ color: #6f5a3a;
cursor: pointer;
img {
@@ -445,9 +842,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;
@@ -471,33 +868,29 @@
font-size: 14px;
background-color: transparent;
color: #937950;
- border: 1px solid #6F5A3A;
+ border: 1px solid #937950;
+ ;
+ cursor: pointer;
&:hover {
- background-color: #6F5A3A;
- color: #FFFDF8;
+ background-color: #937950;
+ 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 {
@@ -505,7 +898,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;
@@ -528,21 +922,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;
}
}
@@ -556,7 +952,7 @@
span {
font-family: Source Han Sans;
font-size: 12px;
- color: #8F7A5A;
+ color: #8f7a5a;
}
}
@@ -580,37 +976,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;
@@ -632,20 +1030,263 @@
color: #937950;
}
-
- .content-right{
+ .content-right {
width: 80.5%;
padding: 14px 20px 20px 14px;
- }
+ .right-header {
+ display: flex;
+ flex-wrap: wrap;
+
+ li {
+ background: #ffffff;
+ border: 1px solid #937950;
+ padding: 3px 10px;
+ margin-right: 13px;
+ display: flex;
+ align-items: center;
+ font-family: Poppins;
+ font-size: 13px;
+ color: #937950;
+ line-height: 20px;
+ margin-bottom: 10px;
+
+ img {
+ cursor: pointer;
+ height: 16px;
+ width: auto;
+ margin-left: 5px;
+ }
+ }
+ }
+
+ .right-number {
+ 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;
+ margin-right: 20px;
+
+ span {
+ color: #937950;
+ margin: 0 10px;
+ }
+ }
+
+ .number-time {
+ font-family: Source Han Sans;
+ font-size: 12px;
+ font-weight: 350;
+ color: #2c2c2c;
+
+ span {
+ margin-left: 11px;
+ }
+
+ 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;
+ margin-bottom: 5px;
+
+ p {
+ overflow: hidden;
+ }
+
+ ::v-deep .el-button {
+ font-size: 14px;
+ background-color: transparent;
+ color: #937950;
+ border: 1px solid #937950;
+ border-radius: 0;
+
+ &:hover {
+ background-color: #937950;
+ 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;
+ color: #333;
+ }
+
+ span:nth-child(3) {
+ font-family: Source Han Sans;
+ font-size: 12px;
+ font-weight: 350;
+ padding-left: 10px;
+ padding-right: 10px;
+ color: #333;
+ border-left: 1px solid #2c2c2c;
+ }
+
+ 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 {
+ 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: 3;
+
+ span {
+ font-family: Source Han Sans;
+ font-weight: 700;
+ font-size: 14px;
+ }
+ }
+
+ .page-main-abstract {
+ 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) {
+ 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;
}
+
+: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;
+}
+: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