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/details.vue | 102 ++++++++++++++++++++++++++++++--------------------
1 files changed, 61 insertions(+), 41 deletions(-)
diff --git a/src/views/achievements/details.vue b/src/views/achievements/details.vue
index e12fdfa..e3708e1 100644
--- a/src/views/achievements/details.vue
+++ b/src/views/achievements/details.vue
@@ -22,9 +22,9 @@
<p>
<span v-for="(item, index) in details.author" :key="index">{{ item }}</span>
</p>
- <p v-if="details.abstract">
- <span>鎽樿锛�</span>
- <span class="page-main-abstract" v-html="details.abstract"></span>
+ <p v-if="details.cleanAbstract">
+ <span class="abstract-title">鎽樿锛�</span>
+ <span class="page-main-abstract-main" v-html="details.cleanAbstract"></span>
</p>
<p v-if="details.keyWords && details.keyWords.length > 0">
<span>鍏抽敭璇嶏細</span>
@@ -63,9 +63,9 @@
<li class="main-author">
{{ item.author }}
</li>
- <li class="main-title" :title="item.abstract" v-if="item.abstract">
+ <li class="main-title" :title="item.abstract" v-if="item.cleanAbstract">
<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>
@@ -78,14 +78,17 @@
</li>
</ul>
</div>
- <el-dialog v-model="dialogVisible" :title="pdfName" width="60vw" top="2vh" bottom="2vh"
+ <el-empty v-if="!loading && details == ''"></el-empty>
+ <el-dialog v-model="dialogVisible" :title="pdfName" width="60vw" top="3vh" bottom="2vh"
:visible.sync="dialogVisible" class="custom-dialog">
- <div class="pdfInfoBox">
+ <div class="pdfInfoBox" v-loading="pdfLoading" element-loading-text="鍥剧墖鍔犺浇涓�"
+ element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
<div v-for="(item, index) in pdfList" :key="index" class="pdfItem" :page="index + 1">
<img :src="item.showSrc" alt="" style="min-height: 550px" loading="lazy" />
<el-divider content-position="center"> 绗� {{ index + 1 }} 椤� </el-divider>
</div>
</div>
+ <el-empty v-if="!pdfLoading && !pdfList.length"></el-empty>
</el-dialog>
</div>
</template>
@@ -151,14 +154,13 @@
resourceTypeValueList: [],
// 鏌ヨ缁撴灉
resultList: [],
- loading: false,
+ loading: true,
+ pdfLoading: false,
};
},
async mounted() {
await this.getContent(this.$route.query.id);
await this.getSelectData();
- console.log(this.details, "璇锋眰鍑烘潵鐨勬暟鎹�");
-
// 鏌ユ壘鍏抽敭璇嶇浉鍖归厤鐨勬枃绔�
if (this.details.keyWords && this.details.keyWords.length) {
for (let i = 0; i < this.details.keyWords.length; i++) {
@@ -167,6 +169,7 @@
this.inputType = "keyWords"
await this.getItemListOne()
}
+ this.loading = false;
console.log(this.resultList, "澶勭悊濂界殑");
} else {
this.getItemList()
@@ -174,10 +177,12 @@
if (this.resultList.length == 0) {
this.getItemList()
}
+
//澶勭悊鏂囦欢
if (this.details.cmsItemType == "video" || this.details.cmsItemType == "audio") {
if (this.details.file != "") {
this.details.src = await this.getResourcePath(this.details.file)
+ console.log(this.details.src, "瑙嗛鍦板潃");
}
}
@@ -193,6 +198,7 @@
methods: {
// 鏍规嵁id璇锋眰璇ラ〉闈㈡暟鎹�
async getContent(id) {
+ this.loading = true;
const res = await MG.resource
.getItem({
path: "*",
@@ -201,6 +207,7 @@
cmsType: ["cmsItem"],
"Id=": [id + ""],
source: [],
+ isbn: [],
year: [],
abstract: [],
keyWords: [],
@@ -219,14 +226,17 @@
// 璁剧疆涓�涓粯璁ゅ�兼垨鑰呰繘琛屽叾浠栭敊璇鐞�
item.keyWords = [];
}
- if(item.author && item.author.length>0){
+ if (item.author && item.author.length > 0) {
item.author = item.author.split(";");
}
+ 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.details = res.datas[0]
- this.loading = false;
},
// 鍦ㄦ鐐瑰嚮璇︽儏
@@ -248,6 +258,7 @@
if (this.resultList.length == 0) {
this.getItemList()
}
+
//澶勭悊鏂囦欢
if (this.details.cmsItemType == "video" || this.details.cmsItemType == "audio") {
if (this.details.file != "") {
@@ -308,6 +319,7 @@
showSrc: ''
})
}
+ this.pdfLoading = false;
// 鍚姩椤电爜瑙傚療
setTimeout(() => {
this.initObservation()
@@ -355,7 +367,6 @@
//鑾峰彇涓嬫媺閫夋嫨妗嗙殑鍐呭
async getSelectData() {
- this.loading = true;
try {
// 鍚屾椂鍙戣捣涓や釜寮傛璇锋眰锛屽苟绛夊緟瀹冧滑鐨勭粨鏋�
const [resourceListResult] = await Promise.all([
@@ -423,6 +434,7 @@
// 'id=':[this.$route.params.key],
"resourceType*": this.resourceTypeValueList,
source: [],
+ isbn: [],
year: [],
abstract: [],
keyWords: [],
@@ -442,6 +454,9 @@
// 璁剧疆涓�涓粯璁ゅ�兼垨鑰呰繘琛屽叾浠栭敊璇鐞�
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 : '';
console.log(this.details.id, "");
@@ -450,22 +465,10 @@
this.resultList.push(item);
}
});
- // 鎺掗櫎鑷韩涓斿幓閲�
-
- // const relatedList = res.datas.filter((item) => {
- // return item.id !== this.details.id;
- // });
- // this.resultList.push(...relatedList)
- // // 鏍规嵁id鍘婚噸
- // this.resultList = this.uniqueById(this.resultList);
- // //鏈�澶氭樉绀�10鏉�
- // if (this.resultList.length > 10) {
- // this.resultList = this.resultList.slice(0, 10);
- // }
- this.loading = false;
},
async openPdf(name) {
+ this.pdfLoading = true;
this.pdfList = []
this.pdfName = name;
this.dialogVisible = true;
@@ -485,6 +488,7 @@
cmsType: ["cmsItem"],
"resourceType*": this.resourceTypeValueList,
source: [],
+ isbn: [],
year: [],
abstract: [],
keyWords: [],
@@ -503,6 +507,9 @@
} 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 : '';
@@ -589,11 +596,11 @@
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;
}
}
@@ -637,11 +644,11 @@
font-size: 14px;
background-color: #937950;
color: #fff;
- border: 1px solid #6f5a3a;
+ border: 1px solid #937950;
border-radius: 0;
&:hover {
- background-color: #6f5a3a;
+ background-color: #937950;
color: #fffdf8;
}
}
@@ -649,9 +656,9 @@
.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-weight: 100 !important;
}
p:nth-child(1) {
@@ -677,20 +684,22 @@
margin-bottom: 13px;
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;
+
+ .abstract-title {
+ font-weight: bold;
+ }
span {
font-family: Source Han Sans;
font-size: 14px;
- font-weight: bold;
color: #333333;
}
+
}
p:nth-child(3) {
@@ -823,16 +832,17 @@
font-size: 16px;
font-weight: bold;
color: #937950;
+ margin-bottom: 5px;
::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;
}
}
@@ -875,9 +885,7 @@
border-left: 1px solid #2c2c2c;
}
-
-
- margin-bottom: 10px;
+ margin-bottom: 15px;
}
.main-author {
@@ -898,7 +906,7 @@
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
- -webkit-line-clamp: 4;
+ -webkit-line-clamp: 3;
span {
font-family: Source Han Sans;
@@ -923,7 +931,7 @@
}
.keyWord {
- cursor: pointer;
+
padding: 5px 10px;
color: #937950;
border: 1px solid #937950;
@@ -954,6 +962,18 @@
object-fit: contain;
}
}
+
+::v-deep .el-loading-spinner {
+ .el-loading-text {
+ font-size: 14px;
+ color: #937950;
+ }
+
+ .el-icon-loading {
+ font-size: 14px;
+ color: #937950;
+ }
+}
</style>
<style lang="less">
--
Gitblit v1.9.1