From 8bffcbb7f5fca4e1e7a308f6f786b63d0773704c Mon Sep 17 00:00:00 2001
From: zhongshujie <2862698242@qq.com>
Date: 星期一, 28 四月 2025 19:28:29 +0800
Subject: [PATCH] 页面优化
---
src/views/achievements/index.vue | 139 +++++++++++++++++++++++++++++++++++-----------
1 files changed, 105 insertions(+), 34 deletions(-)
diff --git a/src/views/achievements/index.vue b/src/views/achievements/index.vue
index 5042a2b..37c181e 100644
--- a/src/views/achievements/index.vue
+++ b/src/views/achievements/index.vue
@@ -150,7 +150,7 @@
</p>
</li>
<li class="main-sources">
- <span>{{ item.resourceTypeName }}</span>
+ <span :class="getResourceTypeClass(item.cmsItemType)">{{ item.resourceTypeName }}</span>
<span>{{ item.source }}</span>
<span>{{ item.year }}</span>
<span v-if="item.DOI">doi锛歿{ item.DOI }}</span>
@@ -164,8 +164,14 @@
</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: '鍏抽敭璇�' })">
+ <span class="keyWord" v-for="(citem, cindex) in item.keyWords" :key="cindex" @click="
+ () =>
+ handleSearch({
+ text: citem,
+ type: 'keyWords',
+ label: '鍏抽敭璇�',
+ })
+ ">
{{ citem }}
</span>
</li>
@@ -173,7 +179,7 @@
<!-- 鍒嗛〉 -->
<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">
+ :background="isBackground" layout="prev, pager, next" :total="total" :page-size="10">
</el-pagination>
</div>
<el-empty v-if="!loading && !resultList.length"></el-empty>
@@ -450,7 +456,7 @@
resultList: [],
total: 0,
paginationPage: 1,
- loading: false,
+ loading: true,
labelList: {
abstract: "鎽樿",
author: "浣滆��",
@@ -467,14 +473,21 @@
methods: {
categoryChange(val) {
- console.log(val, "val");
if (val.checked) {
this.categoryChecList.push(val.value);
+ this.associationList.push({
+ type: "绫诲瀷",
+ content: val.name,
+ });
} else {
const index = this.categoryChecList.findIndex(
(item) => item === val.value
);
+ const index2 = this.associationList.findIndex(
+ (item) => item.name === val.name
+ );
this.categoryChecList.splice(index, 1);
+ this.associationList.splice(index2, 1);
}
this.getItemList();
},
@@ -534,7 +547,6 @@
//鑾峰彇涓嬫媺閫夋嫨妗嗙殑鍐呭
async getSelectData() {
- this.loading = true;
try {
// 鍚屾椂鍙戣捣涓や釜寮傛璇锋眰锛屽苟绛夊緟瀹冧滑鐨勭粨鏋�
const [subjectListResult, resourceListResult] = await Promise.all([
@@ -577,18 +589,20 @@
);
this.inputValue = "";
// 閫氱煡鐖剁粍浠舵暟鎹凡鏀瑰彉
- this.getItemList()
+ this.getItemList();
},
// 鎼滅储
handleSearch(isText) {
- this.associationList = []
+ this.associationList = [];
+ console.log(isText, "isText");
if (isText.text != "") {
this.inputValue = isText.text;
this.inputType = isText.type;
this.associationList.push({
type: isText.label,
content: isText.text,
+ value: isText.type,
});
this.getItemList();
}
@@ -596,20 +610,27 @@
// 璇锋眰鏁版嵁
getItemList() {
+ this.loading = true;
let searchData = {}; // 鍒濆鍖栦竴涓┖瀵硅薄鏉ュ瓨鍌ㄦ悳绱㈡暟鎹�
- if (this.inputValue) { // 濡傛灉杈撳叆鍊煎瓨鍦�
- if (this.inputType != "all") { // 濡傛灉杈撳叆绫诲瀷涓嶆槸"all"
+ if (this.inputValue) {
+ // 濡傛灉杈撳叆鍊煎瓨鍦�
+ if (this.inputType != "all") {
+ // 濡傛灉杈撳叆绫诲瀷涓嶆槸"all"
// 灏嗚緭鍏ュ�间笌杈撳叆绫诲瀷鍏宠仈锛屽苟娣诲姞涓�涓槦鍙�(*)浣滀负鍚庣紑
searchData[this.inputType + "*"] = this.inputValue;
- } else { // 濡傛灉杈撳叆绫诲瀷鏄�"all"
+ } 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鏄┖鐨�
+ if (item.value !== "all") {
+ // 濡傛灉褰撳墠閫夐」鐨勫�间笉鏄�"all"
+ if (!Object.keys(searchData).length) {
+ // 濡傛灉searchData鏄┖鐨�
// 灏嗙涓�涓�夐」鐨勫�间笌杈撳叆鍊煎叧鑱旓紝骞舵坊鍔犱竴涓槦鍙�(*)浣滀负鍚庣紑
searchData[item.value + "*"] = this.inputValue;
- } else { // 濡傛灉searchData涓嶆槸绌虹殑
+ } else {
+ // 濡傛灉searchData涓嶆槸绌虹殑
// 浣跨敤"||"浣滀负鍓嶇紑锛屽皢鍚庣画閫夐」鐨勫�间笌杈撳叆鍊煎叧鑱旓紝骞舵坊鍔犱竴涓槦鍙�(*)浣滀负鍚庣紑
// 杩欓�氬父鐢ㄤ簬鏋勫缓涓�涓�昏緫鎴栵紙OR锛夋煡璇�
searchData["||" + item.value + "*"] = this.inputValue;
@@ -618,13 +639,26 @@
}
}
}
+ // if (this.associationList && this.associationList.length) {
+ // this.associationList.forEach((item) => {
+ // if (item.value == "year") {
+ // const endDate = item.content.split("/")[0] + "/12/31 23:59:59";
+ // const startDate = item.content.split("/")[0] + "/01/01 00:00:00";
+ // searchData[item.value + ">="] = startDate;
+ // searchData[item.value + "<="] = endDate;
+ // } else {
+ // searchData["||" + item.value + "*"] = item.content;
+ // }
+ // });
+ // }
+ console.log(searchData, "searchData");
MG.resource
.getItem({
path: "*",
queryType: "*",
paging: {
- start: (this.paginationPage - 1) * 6,
- size: 6,
+ start: (this.paginationPage - 1) * 10,
+ size: 10,
},
sort: {
year: this.postedSortInfo ? "Desc" : "Asc",
@@ -636,6 +670,7 @@
? this.categoryChecList
: this.resourceTypeValueList,
source: [],
+ isbn: [],
year: [],
abstract: [],
keyWords: [],
@@ -663,10 +698,12 @@
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
+ 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) => {
@@ -691,11 +728,11 @@
this.getItemList(); // 閲嶆柊鑾峰彇鏁版嵁
// 婊氬姩鍒伴〉闈㈤《閮�
this.$nextTick(() => {
- const pageMain = document.querySelector('.page-main-father');
+ const pageMain = document.querySelector(".page-main-father");
if (pageMain) {
pageMain.scrollTo({
top: 0,
- behavior: 'smooth'
+ behavior: "smooth",
});
}
});
@@ -704,6 +741,22 @@
this.postedSortInfo = !this.postedSortInfo;
this.getItemList();
},
+ getResourceTypeClass(typeName) {
+ switch (typeName) {
+ case 'journal':
+ return 'journal-color';
+ case 'books':
+ return 'books-color';
+ case 'video':
+ return 'video-color';
+ case 'audio':
+ return 'audio-color';
+ case 'newspaper':
+ return 'newspaper-color';
+ default:
+ return 'other-color';
+ }
+ }
},
};
</script>
@@ -744,7 +797,6 @@
::v-deep .el-loading-spinner {
.el-loading-text {
-
font-size: 14px;
color: #937950;
}
@@ -754,7 +806,6 @@
color: #937950;
}
}
-
.page-main-father {
flex: 1;
@@ -812,10 +863,8 @@
font-family: Source Han Sans;
font-size: 14px;
font-weight: bold;
- color: #2C2C2C;
-
+ color: #2c2c2c;
}
-
}
.input-txt {
@@ -868,7 +917,6 @@
background-color: transparent;
color: #937950;
border: 1px solid #937950;
- ;
cursor: pointer;
&:hover {
@@ -1128,10 +1176,31 @@
}
}
+ .journal-color {
+ background-color: #87a8b9;
+ }
+ .books-color {
+ background-color: #C48787;
+ }
+ .video-color {
+ background-color: #6F8F5A;
+ }
+ .audio-color {
+ background-color: #937950;
+ }
+ .newspaper-color {
+ background-color: #8D77B3;
+ }
+ .other-color {
+ background-color: #009F9F;
+ }
+
+
+
.main-sources {
span:nth-child(1) {
padding: 3px 5px;
- background-color: #87a8b9;
+
color: #fff;
margin-right: 10px;
}
@@ -1184,7 +1253,7 @@
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
- -webkit-line-clamp: 4;
+ -webkit-line-clamp: 3;
span {
font-family: Source Han Sans;
@@ -1265,6 +1334,10 @@
border-radius: 5px;
border: 1px solid #cccccc;
}
+
+:deep.el-pagination.is-background .el-pager li:not(.disabled):hover {
+ color: #937950
+}
</style>
<style>
@@ -1272,9 +1345,7 @@
color: #937950 !important;
border-color: #937950 !important;
font-weight: bold;
-
}
-
.el-select-dropdown__item.selected {
color: #937950 !important;
@@ -1285,4 +1356,4 @@
border-color: #937950;
font-weight: bold;
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.1