From c2b7142602445280382b1c1eeefa12601b4801ba Mon Sep 17 00:00:00 2001
From: zhongshujie <2862698242@qq.com>
Date: 星期一, 28 四月 2025 10:48:44 +0800
Subject: [PATCH] 样式优化
---
src/views/honors/index.vue | 41 +++-
src/views/achievements/index.vue | 286 +++++++++++++++--------------------
src/views/achievements/details.vue | 18 +
src/components/form/form.vue | 45 +---
src/views/chronology/index.vue | 13 +
src/views/directory/index.vue | 18 +
6 files changed, 211 insertions(+), 210 deletions(-)
diff --git a/src/components/form/form.vue b/src/components/form/form.vue
index 06c86af..b6bd958 100644
--- a/src/components/form/form.vue
+++ b/src/components/form/form.vue
@@ -1,38 +1,16 @@
-<template >
+<template>
<div>
- <el-form
- size="mini"
- :inline="true"
- style="padding: 0px 10px;
- "
- :model="from"
- class="row demo-form-inline col-xs-12"
- >
+ <el-form size="mini" :inline="true" style="padding: 0px 10px;
+ " :model="from" class="row demo-form-inline col-xs-12">
<el-row :gutter="10">
- <el-form-item
- style="width: 33%"
- v-for="(item, i) in from.from"
- :key="i"
- :label="item.label"
- >
- <el-input
- v-if="item.type === 'input'"
- v-model="item.value"
- :placeholder="item.label"
- ></el-input>
+ <el-form-item style="width: 33%" v-for="(item, i) in from.from" :key="i" :label="item.label">
+ <el-input v-if="item.type === 'input'" v-model="item.value" :placeholder="item.label"></el-input>
</el-form-item>
<!-- 鍏朵粬琛ㄥ崟椤圭渷鐣� -->
<!-- <el-form-item style="display:block; "> -->
<div class="flex flex-center Formbtn">
- <el-button
-
- size="mini"
- @click="handleSubmit"
- >鎼滅储</el-button
- >
- <el-button size="mini" @click="handleReset"
- >閲嶇疆</el-button
- >
+ <el-button size="mini" @click="handleSubmit">鎼滅储</el-button>
+ <el-button size="mini" @click="handleReset">閲嶇疆</el-button>
</div>
<!-- </el-form-item> -->
</el-row>
@@ -42,7 +20,7 @@
<script>
export default {
props: ["from"],
- mounted(){
+ mounted() {
},
methods: {
handleSubmit() {
@@ -80,4 +58,11 @@
::v-deep .el-form-item__content div {
width: 100%;
}
+
+::v-deep.el-form--inline .el-form-item__label {
+ font-family: Source Han Sans;
+ font-size: 14px;
+ font-weight: bold;
+ color: #2C2C2C;
+}
</style>
diff --git a/src/views/achievements/details.vue b/src/views/achievements/details.vue
index 68570c7..c2b8297 100644
--- a/src/views/achievements/details.vue
+++ b/src/views/achievements/details.vue
@@ -29,7 +29,7 @@
<p v-if="details.keyWords && details.keyWords.length > 0">
<span>鍏抽敭璇嶏細</span>
<span class="page-main-keyword" v-for="(item, index) in details.keyWords" :key="index">{{ item
- }}</span>
+ }}</span>
</p>
<p v-if="details.cmsItemType != 'video' && details.cmsItemType != 'audio'">
<el-button @click="openPdf(details.name)">鏌ョ湅鍏ㄦ枃</el-button>
@@ -947,6 +947,19 @@
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">
@@ -977,8 +990,7 @@
.el-dialog__title,
.el-dialog__headerbtn .el-dialog__close {
color: #fff;
- font-weight: 900;
- font-size: 16px;
+ font-weight: 900;font-size: 16px;
}
}
}
diff --git a/src/views/achievements/index.vue b/src/views/achievements/index.vue
index 087462f..eb71247 100644
--- a/src/views/achievements/index.vue
+++ b/src/views/achievements/index.vue
@@ -19,17 +19,12 @@
</ul>
<!-- 楂樼骇鎼滅储 -->
<div v-if="isDisplay" class="page-search">
- <MyForm
- class="myfrom"
- @submit="
- (data) => {
- CurrentPage = 1;
- onSubmit(data);
- }
- "
- @reset="resetForm"
- :from="from"
- />
+ <MyForm class="myfrom" @submit="
+ (data) => {
+ CurrentPage = 1;
+ onSubmit(data);
+ }
+ " @reset="resetForm" :from="from" />
</div>
<!-- 鎼滅储缁撴灉 -->
<div class="page-content">
@@ -39,31 +34,15 @@
<li class="left-title">
<span>{{ category.title }}</span>
<p @click="category.isDisplay = !category.isDisplay">
- <img
- :src="[category.isDisplay ? topIcon : bottomIcon]"
- alt=""
- />
+ <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 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>
@@ -74,50 +53,25 @@
<span>{{ annual.title }}</span>
<span>
鏃堕棿
- <img
- class="sort-Icon"
- :src="[isDisplay ? sortTop : sortBottom]"
- alt=""
- />
+ <img class="sort-Icon" :src="[isDisplay ? sortTop : sortBottom]" alt="" />
</span>
- <span
- >鏂囩尞閲�
- <img
- class="sort-Icon"
- :src="[isDisplay ? sortBottom : sortTop]"
- alt=""
- />
+ <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=""
- />
+ <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
- >
+ <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', '骞村害')"
- >
+ <p class="annual-footer" v-if="annual.list && annual.list.length > 5" @click="shrinkClick('a', '骞村害')">
{{ activeBox !== "a" ? "鏇村 鈭�" : "鏀惰捣 鈭�" }}
</p>
</li>
@@ -129,42 +83,23 @@
<span>{{ sources.title }}</span>
<span>
鏂囩尞閲�
- <img
- class="sort-Icon"
- :src="[isDisplay ? sortBottom : sortTop]"
- alt=""
- />
+ <img class="sort-Icon" :src="[isDisplay ? sortBottom : sortTop]" alt="" />
</span>
</div>
<p @click="sources.isDisplay = !sources.isDisplay">
- <img
- :src="[sources.isDisplay ? topIcon : bottomIcon]"
- alt=""
- />
+ <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
- >
+ <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', '鏂囩尞鏉ユ簮')"
- >
+ <p class="sources-footer" v-if="sources.list && sources.list.length > 5"
+ @click="shrinkClick('b', '鏂囩尞鏉ユ簮')">
{{ activeBox !== "b" ? "鏇村 鈭�" : "鏀惰捣 鈭�" }}
</p>
</li>
@@ -174,67 +109,39 @@
<li class="left-title">
<span>{{ subject.title }}</span>
<p @click="subject.isDisplay = !subject.isDisplay">
- <img
- :src="[subject.isDisplay ? topIcon : bottomIcon]"
- alt=""
- />
+ <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
- >
+ <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)"
- >
+ <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=""
- />
+ <img @click="removeAssociationList(item.content)" :src="errorIcon" alt="" />
</li>
</ul>
<!-- 鍏眡x鏉� -->
<ul class="right-number">
<ul class="number-number">
- 鍏辨壘鍒�<span>{{ this.total }}</span
- >鏉＄粨鏋�
+ 鍏辨壘鍒�<span>{{ this.total }}</span>鏉＄粨鏋�
</ul>
<ul class="number-time">
鍙戣〃鏃堕棿
- <span @click="sortChange()"
- ><img :src="!postedSortInfo ? sortBottom : sortTop" alt=""
- /></span>
+ <span @click="sortChange()"><img :src="!postedSortInfo ? sortBottom : sortTop" alt="" /></span>
</ul>
</ul>
<!-- 缁撴灉灞曠ず -->
- <ul
- class="right-main"
- v-for="(item, index) in resultList"
- :key="index"
- >
+ <ul class="right-main" v-for="(item, index) in resultList" :key="index">
<li class="main-name">
<p>{{ item.name }}</p>
<p>
@@ -257,29 +164,20 @@
</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>
</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 @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>
- <el-empty v-if="!loading && !resultList.length"></el-empty>
</div>
</div>
</div>
@@ -761,7 +659,10 @@
// 璁剧疆涓�涓粯璁ゅ�兼垨鑰呰繘琛屽叾浠栭敊璇鐞�
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 : '';
})
@@ -827,6 +728,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%;
@@ -850,16 +765,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 {
@@ -911,11 +853,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;
}
}
@@ -1039,15 +982,12 @@
border-color: #d1d1d1;
}
- ::v-deep .el-checkbox .el-checkbox__input.is-checked + .el-checkbox__label {
+ ::v-deep .el-checkbox .el-checkbox__input.is-checked+.el-checkbox__label {
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 {
+ ::v-deep .el-checkbox .el-checkbox__input.is-indeterminate .el-checkbox__inner {
border-color: #8f7a5a;
background-color: #8f7a5a;
}
@@ -1081,6 +1021,7 @@
.right-header {
display: flex;
+ flex-wrap: wrap;
li {
background: #ffffff;
@@ -1092,6 +1033,8 @@
font-family: Poppins;
font-size: 13px;
color: #937950;
+ line-height: 20px;
+ margin-bottom: 10px;
img {
cursor: pointer;
@@ -1151,16 +1094,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;
}
}
@@ -1296,13 +1240,31 @@
border: 1px solid #cccccc;
}
-:deep.msg-pagination-container.is-background
- .el-pager
- li:not(.disabled).active {
+:deep.msg-pagination-container.is-background .el-pager li:not(.disabled).active {
/*褰撳墠閫変腑椤垫暟鐨勬牱寮忚繘琛屼慨鏀�*/
background-color: #937950;
color: #fff;
border-radius: 5px;
border: 1px solid #cccccc;
}
+</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
diff --git a/src/views/chronology/index.vue b/src/views/chronology/index.vue
index 57d1426..9a398c5 100644
--- a/src/views/chronology/index.vue
+++ b/src/views/chronology/index.vue
@@ -453,7 +453,18 @@
right: 5px;
z-index: 999;
}
+
::v-deep .el-loading-spinner {
- color: #937950 !important;
+ .el-loading-text {
+
+ font-size: 14px;
+ color: #937950;
+ }
+
+ .el-icon-loading {
+ font-size: 14px;
+ color: #937950;
+ }
}
+
</style>
diff --git a/src/views/directory/index.vue b/src/views/directory/index.vue
index b056e02..61591bc 100644
--- a/src/views/directory/index.vue
+++ b/src/views/directory/index.vue
@@ -169,8 +169,7 @@
<div v-for="(item, index) in universityList" :key="index">
<div
class="table-title"
- v-if="item.studentList && item.studentList.length > 0"
- >
+ v-if="item.studentList && item.studentList.length > 0">
<div class="table-title-left">
<p class="table-title-name">{{ item.unitName }}</p>
<p class="table-title-degree">{{ item.academicDegreeName }}</p>
@@ -180,8 +179,7 @@
</div>
<div
class="table-title-right"
- @click="item.isShow = !item.isShow"
- >
+ @click="item.isShow = !item.isShow">
<img :src="[item.isShow ? topIcon : bottomIcon]" alt="" />
</div>
</div>
@@ -794,4 +792,16 @@
font-size: 14px;
color: #937950;
}
+
+::v-deep .el-loading-spinner {
+ .el-loading-text {
+ font-size: 14px;
+ color: #937950;
+ }
+
+ .el-icon-loading {
+ font-size: 14px;
+ color: #937950;
+ }
+}
</style>
diff --git a/src/views/honors/index.vue b/src/views/honors/index.vue
index ec87051..4e91e52 100644
--- a/src/views/honors/index.vue
+++ b/src/views/honors/index.vue
@@ -11,8 +11,8 @@
<!-- 宸﹁竟鏍囬 -->
<div class="honors-main-title">鑽�<br />瑾�<br />濂�<br />椤�</div>
<!-- 鍙宠竟鍐呭 -->
- <div class="honors-text" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0)" element-loading-text="瀛︾敓鍒楄〃鍔犺浇涓�"
- element-loading-spinner="el-icon-loading">
+ <div class="honors-text" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0)"
+ element-loading-text="瀛︾敓鍒楄〃鍔犺浇涓�" element-loading-spinner="el-icon-loading">
<div style="min-height: 646px;">
<ul>
<li v-for="(item, index) in honorList" :key="index">
@@ -24,14 +24,18 @@
</li>
</ul>
</div>
- <!-- 鍒嗛〉 -->
- <div class="pagination">
- <el-pagination @current-change="handleCurrentChange" class="msg-pagination-container"
- :background="isBackground" layout="prev, pager, next" :total="total">
- </el-pagination>
+ <div class="honor-main-bottom">
+ <!-- 鈥滃北鈥濆浘鐗� -->
+ <img class="honor-Bg" src="../../assets/images/honors/honor-Bg.png" alt="" />
+ <!-- 鍒嗛〉 -->
+ <div class="pagination">
+ <el-pagination @current-change="handleCurrentChange" class="msg-pagination-container"
+ :background="isBackground" layout="prev, pager, next" :total="total">
+ </el-pagination>
+ </div>
</div>
- <!-- 鈥滃北鈥濆浘鐗� -->
- <img class="honor-Bg" src="../../assets/images/honors/honor-Bg.png" alt="" />
+
+
</div>
</div>
</div>
@@ -237,6 +241,23 @@
}
}
+.honor-main-bottom{
+ display: flex;
+ justify-content: space-between
+}
+
+::v-deep .el-loading-spinner {
+ .el-loading-text {
+ font-size: 14px;
+ color: #937950;
+ }
+
+ .el-icon-loading {
+ font-size: 14px;
+ color: #937950;
+ }
+}
+
@font-face {
font-family: "Alimama DongFangDaKai";
src: url("../../assets/font/闃块噷濡堝涓滄柟澶фシ.ttf");
@@ -318,6 +339,6 @@
background-color: #937950;
color: #fff;
border-radius: 5px;
- border: 1px solid #cccccc;
+ border: 1px solid#cccccc;
}
</style>
--
Gitblit v1.9.1