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 | 218 ++++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 184 insertions(+), 34 deletions(-)
diff --git a/src/views/achievements/index.vue b/src/views/achievements/index.vue
index dcba3bc..c1ab2ea 100644
--- a/src/views/achievements/index.vue
+++ b/src/views/achievements/index.vue
@@ -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,8 +114,8 @@
</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>
@@ -136,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>
<!-- 缁撴灉灞曠ず -->
@@ -159,11 +160,12 @@
</li>
<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" 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>
@@ -174,8 +176,8 @@
:background="isBackground" layout="prev, pager, next" :total="total" :page-size="6">
</el-pagination>
</div>
+ <el-empty v-if="!loading && !resultList.length"></el-empty>
</div>
- <el-empty v-if="!loading && !resultList.length"></el-empty>
</div>
</div>
</div>
@@ -206,6 +208,7 @@
{ value: "all", label: "鍏ㄩ儴" },
{ value: "Name", label: "鏍囬" },
{ value: "author", label: "浣滆��" },
+ // { value: "year", label: "骞翠唤" },
{ value: "keyWords", label: "鍏抽敭璇�" },
{ value: "abstract", label: "鎽樿" },
{ value: "source", label: "鏉ユ簮" },
@@ -315,6 +318,10 @@
},
],
},
+ categoryChecList: [],
+ subjectCheckList: [],
+
+ postedSortInfo: true,
// 骞村害
annual: {
title: "骞村害",
@@ -445,6 +452,14 @@
total: 0,
paginationPage: 1,
loading: false,
+ labelList: {
+ abstract: "鎽樿",
+ author: "浣滆��",
+ keyword: "鍏抽敭璇�",
+ source: "鏉ユ簮",
+ title: "鏍囬",
+ year: "骞翠唤",
+ },
};
},
mounted() {
@@ -452,7 +467,45 @@
},
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("");
@@ -489,14 +542,15 @@
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.resourceTypeValueList.push(item.value);
});
}
- this.getItemList()
+ this.getItemList();
} catch (error) {
console.error("鑾峰彇涓嬫媺妗嗘暟鎹け璐�:", error);
}
@@ -531,13 +585,13 @@
handleSearch(isText) {
this.associationList = []
if (isText.text != "") {
- this.inputValue = isText.text
- this.inputType = isText.type
+ this.inputValue = isText.text;
+ this.inputType = isText.type;
this.associationList.push({
type: isText.label,
content: isText.text,
});
- this.getItemList()
+ this.getItemList();
}
},
@@ -571,11 +625,17 @@
queryType: "*",
paging: {
start: (this.paginationPage - 1) * 6,
- size: 6
+ size: 6,
+ },
+ sort: {
+ year: this.postedSortInfo ? "Desc" : "Asc",
},
fields: {
cmsType: ["cmsItem"],
- "resourceType*": this.resourceTypeValueList,
+ "resourceType*":
+ this.categoryChecList.length > 0
+ ? this.categoryChecList
+ : this.resourceTypeValueList,
source: [],
year: [],
abstract: [],
@@ -585,6 +645,7 @@
AIReading: [],
file: [],
IssueNumber: [],
+ "subjectAffiliation*": this.subjectCheckList,
...searchData,
},
})
@@ -592,21 +653,38 @@
console.log(res, "鍏ㄩ儴鍐呭");
res.datas.forEach((item) => {
- item.year = moment(item.year).format("YYYY-MM-DD")
- if (typeof item.keyWords === 'string') {
+ item.year = moment(item.year).format("YYYY-MM-DD");
+ if (typeof item.keyWords === "string") {
item.keyWords = item.keyWords.split(";;");
} else {
// 璁剧疆涓�涓粯璁ゅ�兼垨鑰呰繘琛屽叾浠栭敊璇鐞�
item.keyWords = [];
}
- // item.cleanAbstract = item.abstract.replace(/<[^>]+>/g, "");
+ 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) {
@@ -623,7 +701,10 @@
}
});
},
-
+ sortChange() {
+ this.postedSortInfo = !this.postedSortInfo;
+ this.getItemList();
+ },
},
};
</script>
@@ -662,6 +743,20 @@
}
}
+::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%;
@@ -685,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 {
@@ -746,11 +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;
}
}
@@ -913,6 +1036,7 @@
.right-header {
display: flex;
+ flex-wrap: wrap;
li {
background: #ffffff;
@@ -924,6 +1048,8 @@
font-family: Poppins;
font-size: 13px;
color: #937950;
+ line-height: 20px;
+ margin-bottom: 10px;
img {
cursor: pointer;
@@ -983,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;
}
}
@@ -1004,7 +1135,6 @@
background-color: #87a8b9;
color: #fff;
margin-right: 10px;
-
}
span:nth-child(2) {
@@ -1013,7 +1143,6 @@
font-weight: 350;
padding-right: 10px;
color: #333;
-
}
span:nth-child(3) {
@@ -1035,9 +1164,7 @@
border-left: 1px solid #2c2c2c;
}
-
-
- margin-bottom: 10px;
+ margin-bottom: 15px;
}
.main-author {
@@ -1058,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;
@@ -1139,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