From 34c4d498b69f746b98ff71afa14a9804e43afcf8 Mon Sep 17 00:00:00 2001 From: zhongshujie <2862698242@qq.com> Date: 星期五, 25 四月 2025 16:55:06 +0800 Subject: [PATCH] 学术成果检索 --- src/views/achievements/index.vue | 914 +++++++++++++++++++++++++++++++++++++++++++------------- 1 files changed, 699 insertions(+), 215 deletions(-) diff --git a/src/views/achievements/index.vue b/src/views/achievements/index.vue index a2c0031..d4cab66 100644 --- a/src/views/achievements/index.vue +++ b/src/views/achievements/index.vue @@ -1,118 +1,180 @@ <template> <div class="page"> <div class="page-header"> - <p>鐜嬫案鐐庨櫌澹鏈垚鏋�</p> + <p> + <span>鐜嬫案鐐庨櫌澹鏈垚鏋�</span> + </p> </div> - - <div class="page-main"> - <!-- 鎼滅储妗� --> - <ul class="page-input"> - <li class="input-main"> - <el-input placeholder="璇疯緭鍏ュ唴瀹�" v-model="input3" class="input-with-select" suffix="鎼滅储"> - <el-select v-model="select" slot="prepend" placeholder="璇烽�夋嫨"> - <el-option v-for="(item, index) in optionlist" :key="index" :label="item.lable" - :value="item.lable"></el-option> - </el-select> - <el-button slot="append">鎼滅储</el-button> - </el-input> - </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">{{ item.name }}</el-checkbox> - <span class="">{{ 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" 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">灞曞紑</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"> - <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">灞曞紑</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">{{ item.name }}</el-checkbox> - <span class="">{{ item.num }}</span> - </div> - </li> - </ul> + <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="content-right"> - + <!-- 鎼滅储缁撴灉 --> + <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" 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> + </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">{{ 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><img :src="sortBottom" 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)">璇︽儏</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.abstract"> + <span>鎽樿: </span> + <span class="page-main-abstract" v-html="item.abstract"></span> + </li> + <li class="main-keyword"> + <span>鍏抽敭璇嶏細</span> + <span class="keyWord" v-for="(citem, cindex) in item.keyWords" :key="cindex"> + {{ 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> + </div> </div> </div> </div> @@ -120,41 +182,63 @@ </template> <script> -import MyForm from '@/components/form/form.vue' +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', + name: "achievements", components: { - MyForm + MyForm, + SearchBox, }, data() { return { + // 杈撳叆妗嗙殑鍐呭 + inputValue: "", + // 閫夋嫨鐨勭被鍨� + inputType: "", + //绫诲瀷閫夋嫨 + inputOptions: [ + { value: "all", label: "鍏ㄩ儴" }, + { value: "Name", label: "鏍囬" }, + { value: "author", 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: '', + input3: "", + select: "", checked: [], optionlist: [ { - lable: "鏍囬" + lable: "鏍囬", }, { - lable: "浣滆��" + lable: "浣滆��", }, { - lable: "骞翠唤" + lable: "骞翠唤", }, { - lable: "鍏抽敭璇�" + lable: "鍏抽敭璇�", }, { - lable: "鎽樿" + lable: "鎽樿", }, { - lable: "鏉ユ簮" + lable: "鏉ユ簮", }, ], // 褰撳墠椤� @@ -166,39 +250,39 @@ type: "input", label: "鏍囥��棰�", name: "title", - value: "" + value: "", }, { type: "input", label: "浣溿��鑰�", name: "author", - value: "" + value: "", }, { type: "input", label: "骞淬��浠�", name: "year", - value: "" + value: "", }, { type: "input", label: "鍏抽敭璇�", name: "keyword", - value: "" + value: "", }, { type: "input", label: "鎽樸��瑕�", name: "abstract", - value: "" + value: "", }, { type: "input", label: "鏉ャ��婧�", name: "source", - value: "" + value: "", }, - ] + ], }, // 绫诲瀷 category: { @@ -210,24 +294,24 @@ { name: "鏈熷垔", num: 190, - check: false + check: false, }, { name: "鍥句功", num: 190, - check: false + check: false, }, { name: "瑙嗛", num: 190, - check: false + check: false, }, { name: "闊抽", num: 190, - check: false + check: false, }, - ] + ], }, // 骞村害 annual: { @@ -239,41 +323,39 @@ { years: "2025", num: 20, - check: false + check: false, }, { years: "2025", num: 20, - check: false + check: false, }, { years: "2025", num: 20, - check: false + check: false, }, { years: "2025", num: 20, - check: false + check: false, }, { years: "2025", num: 20, - check: false + check: false, }, { years: "2025", num: 20, - check: false + check: false, }, { years: "2025", num: 20, - check: false + check: false, }, - ], - }, // 鏂囩尞鏉ユ簮 sources: { @@ -285,34 +367,34 @@ { name: "鍖椾含涓尰鑽ぇ瀛﹀ぇ瀛﹀鎶�", num: 190, - check: false + check: false, }, { name: "鍖椾含涓尰鑽ぇ瀛﹀ぇ瀛﹀鎶�", num: 190, - check: false + check: false, }, { name: "鍖椾含涓尰鑽ぇ瀛﹀ぇ瀛﹀鎶�", num: 190, - check: false + check: false, }, { name: "鍖椾含涓尰鑽ぇ瀛﹀ぇ瀛﹀鎶�", num: 190, - check: false + check: false, }, { name: "鍖椾含涓尰鑽ぇ瀛﹀ぇ瀛﹀鎶�", num: 190, - check: false + check: false, }, { name: "鍖椾含涓尰鑽ぇ瀛﹀ぇ瀛﹀鎶�", num: 190, - check: false + check: false, }, - ] + ], }, // 瀛︾ subject: { @@ -324,55 +406,220 @@ { name: "鍖诲", num: 190, - check: false + check: false, }, { name: "鍖诲", num: 190, - check: false + check: false, }, { name: "鍖诲", num: 190, - check: false + check: false, }, { name: "鍖诲", num: 190, - check: false + check: false, }, { name: "鍖诲", num: 190, - check: false + check: false, }, - ] + ], }, - + // 鐜板湪澶氬皯鏉¤亴涓氭暟鎹� + professionIndex: 4, + // 灞曞紑鍜屾敹缂╃殑鎸夐挳闇�瑕� + activeBox: null, + // 鐜板湪澶氬皯鏉℃椂鏈熸暟鎹� + dynastyIndex: 4, + // 鎵�鍏宠仈鍐呭 + associationList: [], // 鏌ヨ缁撴灉 - resultList:[ - { - name:"涓嵂闂告煖鐨勫巻鍙蹭紶鎵夸笌鏂版椂浠e彂灞曟�濊��", - sources:"鍖椾含涓尰鑽ぇ瀛﹀鎶�", - time:"2025-02-24 09:21", - title:"鎽樿: 涓嵂闂告煖鏄紶缁熶腑鑽皟鍓傜殑楂樼骇绠$悊浜哄憳锛屽湪'鍓嶅簵鍚庡巶寮�'涓嵂鎴垮彂鎸ラ噸瑕佷綔鐢ㄥ拰鍏抽敭鑱岃兘銆備紶鎵夸腑鑽椄鏌滅殑瀹濊吹瀛︽湳缁忛獙涓庝紭绉�鏂囧寲瀵瑰帢娓呬腑鑽瀛︾鍙戝睍鑴夌粶銆佽鑼冧腑鑽皟鍓傛妧鏈搷浣溿�佷績杩涜�佽嵂宸ユ妧鑹�'娲绘�佷紶鎵�'鍏锋湁閲嶈绉戝浠峰�煎拰鐜板疄鎰忎箟銆傞潰鍚戞柊鏃朵唬銆佸紑鍚柊鎬濈淮锛屾湰鏂囧鑰佸瓧鍙蜂腑鑽摵鐨勫叴璧峰拰涓嵂闂告煖杩涜鑰冭瘉锛屽垎鏋愪腑鑽椄鏌滅殑宀椾綅璐d换銆佷紶鎵胯矾寰勫強鏈潵鍙戝睍锛屾彁鍑洪珮绱犺川涓嵂闂告煖浜烘墠鍩瑰吇绛栫暐锛屾棬鍦ㄥ煿鍏荤鍚堝綋浠gぞ浼氶渶姹傜殑涓嵂琛屼笟澶嶅悎鍨嬪垱鏂颁汉鎵嶃��", - keyword:"" - - } - ] - } + resultList: [], + total: 0, + paginationPage: 1, + loading: false, + }; + }, + mounted() { + this.getSelectContent(); + this.getLeftCheckbox() + this.getSelectData(); }, methods: { - async onSubmit(val) { - - }, + async onSubmit(val) { }, //閲嶇疆鎼滅储缁撴灉 resetForm() { // this.onSearch(""); }, - } -} + // 椤甸潰璺宠浆 + goPage(key) { + console.log(key, "key"); + this.$router.push({ name: "details", params: { key: key } }); + }, + // 鏀惰捣鍜屽睍绀� + 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"; + } + }, + // 鑾峰彇宸︿晶checkbox鏁版嵁 + getLeftCheckbox() { + + + }, + + //鑾峰彇涓嬫媺閫夋嫨妗嗙殑鍐呭 + async getSelectData() { + this.loading = true; + try { + // 鍚屾椂鍙戣捣涓や釜寮傛璇锋眰锛屽苟绛夊緟瀹冧滑鐨勭粨鏋� + const [subjectListResult, resourceListResult] = await Promise.all([ + this.getSelectContent(this.subjectAffiliationRefCode), + this.getSelectContent(this.resourceTypeRefCode), + ]); + 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); + console.log(selestList, "涓嬫媺妗嗘暟鎹�"); + 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) { + console.log(1234); + console.log(isText, "鎼滅储123"); + if (isText.text != "") { + this.inputValue = isText.text + this.inputType = isText.type + this.associationList.push({ + type: isText.label, + content: isText.text, + }); + this.getItemList() + } + }, + + // getTtem + getItemList() { + let searchData = {}; + if (this.inputValue) { + if (this.inputType != "all") { + searchData[this.inputType + "*"] = this.inputValue; + } else { + for (let index = 0; index < this.inputOptions.length; index++) { + const item = this.inputOptions[index]; + if (item.value !== "all" ) { + console.log(item.value, "987"); + if (!Object.keys(searchData).length) { + searchData[item.value + "*"] = this.inputValue + } else { + searchData["||" + item.value + "*"] = this.inputValue + } + } + } + } + + console.log(searchData, "鎼滅储鏁版嵁123"); + } + debugger + MG.resource + .getItem({ + path: "*", + queryType: "*", + paging: { + start: (this.paginationPage - 1) * 6, + size: 6 + }, + fields: { + cmsType: ["cmsItem"], + "resourceType*": this.resourceTypeValueList, + source: [], + year: [], + abstract: [], + keyWords: [], + author: [], + DOI: [], + AIReading: [], + file: [], + IssueNumber: [], + ...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 = []; + } + item.resourceTypeName = this.category.list.find((citem) => citem.value == item.cmsItemType).name + }) + this.resultList = res.datas + this.total = res.total; + this.loading = false; + }) + }, + + // 澶勭悊椤电爜鍙樺寲 + handleCurrentChange(newPage) { + this.paginationPage = newPage; + this.getItemList(); // 閲嶆柊鑾峰彇鏁版嵁 + }, + + }, +}; </script> <style lang="less" scoped> @@ -381,41 +628,63 @@ height: 100%; box-sizing: border-box; background-color: #e9e1d4; - overflow: auto; + position: relative; + overflow: hidden; + display: flex; + flex-direction: column; } .page-header { - height: 102px; + padding: 8px 0; + height: 9.4%; width: 100%; text-align: left; - margin-bottom: 8px; border-bottom: 2px solid #937950; + background-color: #e9e1d4; + position: sticky; + top: 0; + z-index: 100; p { - padding: 35px 0 34px 0; + height: 100%; font-family: Alimama DongFangDaKai; font-size: 30px; text-indent: 1em; border-bottom: 1px solid #937950; + display: flex; + align-items: center; } } +.page-main-father { + flex: 1; + width: 100%; + height: 100%; + min-width: 1292px; + overflow: auto; + padding-top: 1%; + padding-bottom: 2%; +} + .page-main { - width: 1330px; + 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; + border: 1px solid #e4dace; .input-main { padding: 15px 0; - text-align: center; + display: flex; + justify-content: center; width: 90%; - border-right: 2px solid #E4DACE; + border-right: 2px solid #e4dace; .input-with-select { width: 50%; @@ -431,7 +700,7 @@ font-family: Source Han Sans; font-size: 14px; font-weight: bold; - color: #6F5A3A; + color: #6f5a3a; cursor: pointer; img { @@ -445,9 +714,9 @@ .page-search { width: 100%; background-color: #fefbf5; - border-bottom: 1px solid #E4DACE; - border-left: 1px solid #E4DACE; - border-right: 1px solid #E4DACE; + border-bottom: 1px solid #e4dace; + border-left: 1px solid #e4dace; + border-right: 1px solid #e4dace; padding: 13px 0px; display: flex; justify-content: center; @@ -471,33 +740,27 @@ font-size: 14px; background-color: transparent; color: #937950; - border: 1px solid #6F5A3A; + border: 1px solid #6f5a3a; &:hover { - background-color: #6F5A3A; - color: #FFFDF8; + background-color: #6f5a3a; + color: #fffdf8; } } } } - - - } - .page-content { width: 100%; margin-top: 20px; background-color: #fefbf5; - border: 1px solid #E4DACE; + border: 1px solid #e4dace; display: flex; - .content-left { width: 19.5%; - border-right: 1px solid #E4DACE; - border-bottom: 1px solid #E4DACE; + border-bottom: 1px solid #e4dace; } .left-title { @@ -505,7 +768,8 @@ display: flex; align-items: center; justify-content: space-between; - border-bottom: 1px solid #E4DACE; + border-right: 1px solid #e4dace; + border-bottom: 1px solid #e4dace; span { margin-right: 20px; @@ -528,21 +792,23 @@ } .left-main { - border-bottom: 1px solid #E4DACE; + border-right: 1px solid #e4dace; + border-bottom: 1px solid #e4dace; padding: 10px; display: flex; - align-items: center; 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; + color: #8f7a5a; } } @@ -556,7 +822,7 @@ span { font-family: Source Han Sans; font-size: 12px; - color: #8F7A5A; + color: #8f7a5a; } } @@ -580,37 +846,39 @@ span { font-family: Source Han Sans; font-size: 12px; - color: #8F7A5A; + 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; + border-color: #d1d1d1; } /* 璁剧疆checkbox鑾峰緱鐒︾偣鍚庯紝瀵瑰嬀妗嗙殑杈规棰滆壊 */ ::v-deep .el-checkbox .el-checkbox__input.is-focus .el-checkbox__inner { - border-color: #D1D1D1; + border-color: #d1d1d1; } ::v-deep .el-checkbox .el-checkbox__input.is-checked+.el-checkbox__label { - color: #2C2C2C; + 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; + border-color: #8f7a5a; + background-color: #8f7a5a; } - ::v-deep .el-checkbox__label { - color: #2C2C2C; + color: #2c2c2c; width: 100%; font-family: Source Han Sans; font-size: 12px; @@ -632,20 +900,236 @@ color: #937950; } - - .content-right{ + .content-right { width: 80.5%; padding: 14px 20px 20px 14px; - } + .right-header { + display: flex; + + 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; + + 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; + + ::v-deep .el-button { + font-size: 14px; + background-color: transparent; + color: #937950; + border: 1px solid #6f5a3a; + border-radius: 0; + + &:hover { + background-color: #6f5a3a; + 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: 10px; + } + + .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: 4; + + 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; } -</style> \ No newline at end of file + +: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; +} +</style> -- Gitblit v1.9.1