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 | 1286 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 1,282 insertions(+), 4 deletions(-) diff --git a/src/views/achievements/index.vue b/src/views/achievements/index.vue index ffd9204..c1ab2ea 100644 --- a/src/views/achievements/index.vue +++ b/src/views/achievements/index.vue @@ -1,14 +1,1292 @@ - <template> - <div>瀛︽湳鎴愭灉</div> + <div class="page"> + <div class="page-header"> + <p> + <span>鐜嬫案鐐庨櫌澹鏈垚鏋�</span> + </p> + </div> + <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="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> + </div> </template> <script> +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", + components: { + 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: "", + checked: [], + optionlist: [ + { + lable: "鏍囬", + }, + { + lable: "浣滆��", + }, + { + lable: "骞翠唤", + }, + { + lable: "鍏抽敭璇�", + }, + { + lable: "鎽樿", + }, + { + lable: "鏉ユ簮", + }, + ], + // 褰撳墠椤� + CurrentPage: 1, + // 楂樼骇鎼滅储 + from: { + from: [ + { + type: "input", + label: "鏍囥��棰�", + name: "title", + value: "", + }, + { + type: "input", + label: "浣溿��鑰�", + name: "author", + value: "", + }, + { + type: "input", + label: "骞淬��浠�", + name: "year", + value: "", + }, + { + type: "input", + label: "鍏抽敭璇�", + name: "keyword", + value: "", + }, + { + type: "input", + label: "鎽樸��瑕�", + name: "abstract", + value: "", + }, + { + type: "input", + label: "鏉ャ��婧�", + name: "source", + value: "", + }, + ], + }, + // 绫诲瀷 + category: { + title: "绫诲瀷", + isDisplay: true, + id: "", + index: "", + list: [ + { + name: "鏈熷垔", + num: 190, + check: false, + }, + { + name: "鍥句功", + num: 190, + check: false, + }, + { + name: "瑙嗛", + num: 190, + check: false, + }, + { + name: "闊抽", + num: 190, + check: false, + }, + ], + }, + categoryChecList: [], + subjectCheckList: [], -} + postedSortInfo: true, + // 骞村害 + annual: { + title: "骞村害", + isDisplay: true, + id: "", + index: "", + list: [ + { + years: "2025", + num: 20, + check: false, + }, + { + years: "2025", + num: 20, + check: false, + }, + { + years: "2025", + num: 20, + check: false, + }, + { + years: "2025", + num: 20, + check: false, + }, + { + years: "2025", + num: 20, + check: false, + }, + { + years: "2025", + num: 20, + check: false, + }, + { + years: "2025", + num: 20, + check: false, + }, + ], + }, + // 鏂囩尞鏉ユ簮 + sources: { + title: "鏂囩尞鏉ユ簮", + isDisplay: true, + id: "", + index: "", + list: [ + { + name: "鍖椾含涓尰鑽ぇ瀛﹀ぇ瀛﹀鎶�", + num: 190, + check: false, + }, + { + name: "鍖椾含涓尰鑽ぇ瀛﹀ぇ瀛﹀鎶�", + num: 190, + check: false, + }, + { + name: "鍖椾含涓尰鑽ぇ瀛﹀ぇ瀛﹀鎶�", + num: 190, + check: false, + }, + { + name: "鍖椾含涓尰鑽ぇ瀛﹀ぇ瀛﹀鎶�", + num: 190, + check: false, + }, + { + name: "鍖椾含涓尰鑽ぇ瀛﹀ぇ瀛﹀鎶�", + num: 190, + check: false, + }, + { + name: "鍖椾含涓尰鑽ぇ瀛﹀ぇ瀛﹀鎶�", + num: 190, + check: false, + }, + ], + }, + // 瀛︾ + subject: { + title: "瀛︾", + isDisplay: true, + id: "", + index: "", + list: [ + { + name: "鍖诲", + num: 190, + check: false, + }, + { + name: "鍖诲", + num: 190, + check: false, + }, + { + name: "鍖诲", + num: 190, + check: false, + }, + { + name: "鍖诲", + num: 190, + check: false, + }, + { + name: "鍖诲", + num: 190, + check: false, + }, + ], + }, + // 鐜板湪澶氬皯鏉¤亴涓氭暟鎹� + professionIndex: 4, + // 灞曞紑鍜屾敹缂╃殑鎸夐挳闇�瑕� + activeBox: null, + // 鐜板湪澶氬皯鏉℃椂鏈熸暟鎹� + dynastyIndex: 4, + // 鎵�鍏宠仈鍐呭 + associationList: [], + // 鏌ヨ缁撴灉 + resultList: [], + total: 0, + paginationPage: 1, + loading: false, + labelList: { + abstract: "鎽樿", + author: "浣滆��", + keyword: "鍏抽敭璇�", + source: "鏉ユ簮", + title: "鏍囬", + year: "骞翠唤", + }, + }; + }, + mounted() { + this.getSelectData(); + }, + + methods: { + 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> +<style lang="less" scoped> +.page { + width: 100%; + height: 100%; + box-sizing: border-box; + background-color: #e9e1d4; + position: relative; + overflow: hidden; + display: flex; + flex-direction: column; +} +.page-header { + padding: 8px 0; + height: 9.4%; + width: 100%; + text-align: left; + border-bottom: 2px solid #937950; + background-color: #e9e1d4; + position: sticky; + top: 0; + z-index: 100; + + p { + 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: 77.3%; + margin: 0 auto; + margin-top: 1%; + margin-bottom: 1%; +} + +.page-input { + width: 100%; + display: flex; + background-color: #fefbf5; + border: 1px solid #e4dace; + + ::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 { + display: flex; + align-items: center; + justify-content: center; + width: 10%; + padding: 15px 0; + font-family: Source Han Sans; + font-size: 14px; + font-weight: bold; + color: #6f5a3a; + cursor: pointer; + + img { + width: 10px; + height: auto; + margin-left: 5px; + } + } +} + +.page-search { + width: 100%; + background-color: #fefbf5; + border-bottom: 1px solid #e4dace; + border-left: 1px solid #e4dace; + border-right: 1px solid #e4dace; + padding: 13px 0px; + display: flex; + justify-content: center; + + .myfrom { + width: 80%; + + ::v-deep .flex-center { + height: 80% !important; + } + + ::v-deep .Formbtn { + width: 100% !important; + display: flex; + justify-content: center; + align-items: center; + + .el-button { + width: 68px !important; + height: 32px !important; + font-size: 14px; + background-color: transparent; + color: #937950; + border: 1px solid #937950; + ; + cursor: pointer; + + &:hover { + background-color: #937950; + color: #fffdf8; + } + } + } + } +} + +.page-content { + width: 100%; + margin-top: 20px; + background-color: #fefbf5; + border: 1px solid #e4dace; + display: flex; + + .content-left { + width: 19.5%; + border-bottom: 1px solid #e4dace; + } + + .left-title { + padding: 7px 7px 9px 10px; + display: flex; + align-items: center; + justify-content: space-between; + border-right: 1px solid #e4dace; + border-bottom: 1px solid #e4dace; + + span { + margin-right: 20px; + font-family: Source Han Sans; + font-size: 14px; + font-weight: bold; + } + + .sort-Icon { + cursor: pointer; + height: 12px; + width: auto; + } + + img { + cursor: pointer; + height: 4px; + width: auto; + } + } + + .left-main { + border-right: 1px solid #e4dace; + border-bottom: 1px solid #e4dace; + padding: 10px; + display: flex; + 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; + } + } + + .annual-main { + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 10px; + + span { + font-family: Source Han Sans; + font-size: 12px; + color: #8f7a5a; + } + } + + .annual-footer { + cursor: pointer; + width: 100%; + text-align: center; + font-family: Source Han Sans; + font-size: 12px; + font-weight: 350; + color: #937950; + } + + .sources-main { + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 10px; + + span { + font-family: Source Han Sans; + font-size: 12px; + 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; + } + + /* 璁剧疆checkbox鑾峰緱鐒︾偣鍚庯紝瀵瑰嬀妗嗙殑杈规棰滆壊 */ + ::v-deep .el-checkbox .el-checkbox__input.is-focus .el-checkbox__inner { + border-color: #d1d1d1; + } + + ::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 { + border-color: #8f7a5a; + background-color: #8f7a5a; + } + + ::v-deep .el-checkbox__label { + color: #2c2c2c; + width: 100%; + font-family: Source Han Sans; + font-size: 12px; + font-weight: bold; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + /* 瓒呭嚭閮ㄥ垎鏄剧ず鐪佺暐鍙� */ + vertical-align: middle; + } + + .sources-footer { + cursor: pointer; + width: 100%; + text-align: center; + font-family: Source Han Sans; + font-size: 12px; + font-weight: 350; + color: #937950; + } + + .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