From dc161b8ff89d1a2791ba0c08e30aa278ea5ace47 Mon Sep 17 00:00:00 2001 From: zhongshujie <2862698242@qq.com> Date: 星期二, 08 四月 2025 18:35:25 +0800 Subject: [PATCH] bug修改 --- src/views/achievements/index.vue | 792 ++++++++++++++++++++++++++++++++++++++++++++++---------- 1 files changed, 651 insertions(+), 141 deletions(-) diff --git a/src/views/achievements/index.vue b/src/views/achievements/index.vue index a2c0031..06dc4a5 100644 --- a/src/views/achievements/index.vue +++ b/src/views/achievements/index.vue @@ -3,32 +3,31 @@ <div class="page-header"> <p>鐜嬫案鐐庨櫌澹鏈垚鏋�</p> </div> - + <div class="page-main-father"> <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> + <SearchBox /> </li> <li class="input-txt" @click="isDisplay = !isDisplay"> 楂樼骇妫�绱� - <img :src="[isDisplay ? topIcon : bottomIcon]" alt=""> + <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" /> + <MyForm + class="myfrom" + @submit=" + (data) => { + CurrentPage = 1; + onSubmit(data); + } + " + @reset="resetForm" + :from="from" + /> </div> <!-- 鎼滅储缁撴灉 --> <div class="page-content"> @@ -38,12 +37,24 @@ <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">{{ item.name }}</el-checkbox> + <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> @@ -55,22 +66,49 @@ <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" 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">灞曞紑</p> + <p + class="annual-footer" + v-if="annual.list && annual.list.length > 5" + @click="shrinkClick('a', '骞村害')" + > + {{ activeBox !== "a" ? "鏇村 鈭�" : "鏀惰捣 鈭�" }} + </p> </li> </ul> <!-- 鏂囩尞鏉ユ簮 --> @@ -80,19 +118,41 @@ <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"> - <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">灞曞紑</p> + <p + class="sources-footer" + v-if="sources.list && sources.list.length > 5" + @click="shrinkClick('b', '鏂囩尞鏉ユ簮')" + > + {{ activeBox !== "b" ? "鏇村 鈭�" : "鏀惰捣 鈭�" }} + </p> </li> </ul> <!-- 瀛︾ --> @@ -100,61 +160,137 @@ <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">{{ 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" + >{{ item.name }}</el-checkbox + > <span class="">{{ item.num }}</span> </div> </li> </ul> </div> <div class="content-right"> - + <!-- title閮ㄥ垎 --> + <ul class="right-header"> + <li v-for="(item, index) in associationList" :key="index"> + <p>{{ item.type }} : {{ item.content }}</p> + <img :src="errorIcon" alt="" /> + </li> + </ul> + <!-- 鍏眡x鏉� --> + <ul class="right-number"> + <ul class="number-number"> + 鍏辨壘鍒�<span>{{ resultList.length }}</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.type }}</span> + <span>{{ item.sources }}</span> + <span>{{ item.time }}</span> + </li> + <li class="main-author"> + {{ item.author }} + </li> + <li class="main-title" :title="item.title"> + <span>鎽樿: </span>{{ item.title }} + </li> + <li class="main-keyword"> + <span>鍏抽敭璇嶏細</span> + <span + class="keyWord" + v-for="(citem, cindex) in item.keyword" + :key="cindex" + > + {{ citem.name }} + </span> + </li> + </ul> + <!-- 鍒嗛〉 --> + <div class="pagination"> + <el-pagination + class="msg-pagination-container" + :background="isBackground" + layout="prev, pager, next" + :total="200" + > + </el-pagination> + </div> </div> </div> </div> </div> + </div> </template> <script> -import MyForm from '@/components/form/form.vue' +import MyForm from "@/components/form/form.vue"; +import SearchBox from "@/views/home/components/searchBox.vue"; /* eslint-disable vue/no-unused-components */ export default { - name: 'achievements', + name: "achievements", components: { - MyForm + MyForm, + SearchBox, }, data() { return { + 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 +302,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 +346,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 +375,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 +419,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 +458,225 @@ { 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, }, - ] + ], }, - - // 鏌ヨ缁撴灉 - resultList:[ + // 鐜板湪澶氬皯鏉¤亴涓氭暟鎹� + professionIndex: 4, + // 灞曞紑鍜屾敹缂╃殑鎸夐挳闇�瑕� + activeBox: null, + // 鐜板湪澶氬皯鏉℃椂鏈熸暟鎹� + dynastyIndex: 4, + // 鎵�鍏宠仈鍐呭 + associationList: [ { - name:"涓嵂闂告煖鐨勫巻鍙蹭紶鎵夸笌鏂版椂浠e彂灞曟�濊��", - sources:"鍖椾含涓尰鑽ぇ瀛﹀鎶�", - time:"2025-02-24 09:21", - title:"鎽樿: 涓嵂闂告煖鏄紶缁熶腑鑽皟鍓傜殑楂樼骇绠$悊浜哄憳锛屽湪'鍓嶅簵鍚庡巶寮�'涓嵂鎴垮彂鎸ラ噸瑕佷綔鐢ㄥ拰鍏抽敭鑱岃兘銆備紶鎵夸腑鑽椄鏌滅殑瀹濊吹瀛︽湳缁忛獙涓庝紭绉�鏂囧寲瀵瑰帢娓呬腑鑽瀛︾鍙戝睍鑴夌粶銆佽鑼冧腑鑽皟鍓傛妧鏈搷浣溿�佷績杩涜�佽嵂宸ユ妧鑹�'娲绘�佷紶鎵�'鍏锋湁閲嶈绉戝浠峰�煎拰鐜板疄鎰忎箟銆傞潰鍚戞柊鏃朵唬銆佸紑鍚柊鎬濈淮锛屾湰鏂囧鑰佸瓧鍙蜂腑鑽摵鐨勫叴璧峰拰涓嵂闂告煖杩涜鑰冭瘉锛屽垎鏋愪腑鑽椄鏌滅殑宀椾綅璐d换銆佷紶鎵胯矾寰勫強鏈潵鍙戝睍锛屾彁鍑洪珮绱犺川涓嵂闂告煖浜烘墠鍩瑰吇绛栫暐锛屾棬鍦ㄥ煿鍏荤鍚堝綋浠gぞ浼氶渶姹傜殑涓嵂琛屼笟澶嶅悎鍨嬪垱鏂颁汉鎵嶃��", - keyword:"" - - } - ] - } + type: "浣滆��", + content: "闄堣 鍝�", + }, + { + type: "浣滆��", + content: "闄堣 鍝�", + }, + { + type: "浣滆��", + content: "闄堣 鍝�", + }, + ], + // 鏌ヨ缁撴灉 + resultList: [ + { + name: "涓嵂闂告煖鐨勫巻鍙蹭紶鎵夸笌鏂版椂浠e彂灞曟�濊��", + sources: "鍖椾含涓尰鑽ぇ瀛﹀鎶�", + type: "鏈熷垔", + author: "鏉ㄦ担鑿� 鍖椾含涓尰鑽ぇ瀛︿腑鑽闄紱璧靛ぉ鎴� 鍖椾含甯堣寖澶у", + time: "2025-02-24 09:21", + title: + "涓嵂闂告煖鏄紶缁熶腑鑽皟鍓傜殑楂樼骇绠$悊浜哄憳锛屽湪'鍓嶅簵鍚庡巶寮�'涓嵂鎴垮彂鎸ラ噸瑕佷綔鐢ㄥ拰鍏抽敭鑱岃兘銆備紶鎵夸腑鑽椄鏌滅殑瀹濊吹瀛︽湳缁忛獙涓庝紭绉�鏂囧寲瀵瑰帢娓呬腑鑽瀛︾鍙戝睍鑴夌粶銆佽鑼冧腑鑽皟鍓傛妧鏈搷浣溿�佷績杩涜�佽嵂宸ユ妧鑹�'娲绘�佷紶鎵�'鍏锋湁閲嶈绉戝浠峰�煎拰鐜板疄鎰忎箟銆傞潰鍚戞柊鏃朵唬銆佸紑鍚柊鎬濈淮锛屾湰鏂囧鑰佸瓧鍙蜂腑鑽摵鐨勫叴璧峰拰涓嵂闂告煖杩涜鑰冭瘉锛屽垎鏋愪腑鑽椄鏌滅殑宀椾綅璐d换銆佷紶鎵胯矾寰勫強鏈潵鍙戝睍锛屾彁鍑洪珮绱犺川涓嵂闂告煖浜烘墠鍩瑰吇绛栫暐锛屾棬鍦ㄥ煿鍏荤鍚堝綋浠gぞ浼氶渶姹傜殑涓嵂琛屼笟澶嶅悎鍨嬪垱鏂颁汉鎵嶃��", + keyword: [ + { + name: "涓嵂闂告煖", + }, + { + name: "涓嵂闂告煖", + }, + { + name: "涓嵂闂告煖", + }, + { + name: "涓嵂闂告煖", + }, + ], + }, + { + name: "涓嵂闂告煖鐨勫巻鍙蹭紶鎵夸笌鏂版椂浠e彂灞曟�濊��", + sources: "鍖椾含涓尰鑽ぇ瀛﹀鎶�", + type: "鏈熷垔", + author: "鏉ㄦ担鑿� 鍖椾含涓尰鑽ぇ瀛︿腑鑽闄紱璧靛ぉ鎴� 鍖椾含甯堣寖澶у", + time: "2025-02-24 09:21", + title: + "涓嵂闂告煖鏄紶缁熶腑鑽皟鍓傜殑楂樼骇绠$悊浜哄憳锛屽湪'鍓嶅簵鍚庡巶寮�'涓嵂鎴垮彂鎸ラ噸瑕佷綔鐢ㄥ拰鍏抽敭鑱岃兘銆備紶鎵夸腑鑽椄鏌滅殑瀹濊吹瀛︽湳缁忛獙涓庝紭绉�鏂囧寲瀵瑰帢娓呬腑鑽瀛︾鍙戝睍鑴夌粶銆佽鑼冧腑鑽皟鍓傛妧鏈搷浣溿�佷績杩涜�佽嵂宸ユ妧鑹�'娲绘�佷紶鎵�'鍏锋湁閲嶈绉戝浠峰�煎拰鐜板疄鎰忎箟銆傞潰鍚戞柊鏃朵唬銆佸紑鍚柊鎬濈淮锛屾湰鏂囧鑰佸瓧鍙蜂腑鑽摵鐨勫叴璧峰拰涓嵂闂告煖杩涜鑰冭瘉锛屽垎鏋愪腑鑽椄鏌滅殑宀椾綅璐d换銆佷紶鎵胯矾寰勫強鏈潵鍙戝睍锛屾彁鍑洪珮绱犺川涓嵂闂告煖浜烘墠鍩瑰吇绛栫暐锛屾棬鍦ㄥ煿鍏荤鍚堝綋浠gぞ浼氶渶姹傜殑涓嵂琛屼笟澶嶅悎鍨嬪垱鏂颁汉鎵嶃�備腑鑽椄鏌滄槸浼犵粺涓嵂璋冨墏鐨勯珮绾х鐞嗕汉鍛橈紝鍦�'鍓嶅簵鍚庡巶寮�'涓嵂鎴垮彂鎸ラ噸瑕佷綔鐢ㄥ拰鍏抽敭鑱岃兘銆備紶鎵夸腑鑽椄鏌滅殑瀹濊吹瀛︽湳缁忛獙涓庝紭绉�鏂囧寲瀵瑰帢娓呬腑鑽瀛︾鍙戝睍鑴夌粶銆佽鑼冧腑鑽皟鍓傛妧鏈搷浣溿�佷績杩涜�佽嵂宸ユ妧鑹�'娲绘�佷紶鎵�'鍏锋湁閲嶈绉戝浠峰�煎拰鐜板疄鎰忎箟銆傞潰鍚戞柊鏃朵唬銆佸紑鍚柊鎬濈淮锛屾湰鏂囧鑰佸瓧鍙蜂腑鑽摵鐨勫叴璧峰拰涓嵂闂告煖杩涜鑰冭瘉锛屽垎鏋愪腑鑽椄鏌滅殑宀椾綅璐d换銆佷紶鎵胯矾寰勫強鏈潵鍙戝睍锛屾彁鍑洪珮绱犺川涓嵂闂告煖浜烘墠鍩瑰吇绛栫暐锛屾棬鍦ㄥ煿鍏荤鍚堝綋浠gぞ浼氶渶姹傜殑涓嵂琛屼笟澶嶅悎鍨嬪垱鏂颁汉鎵嶃��", + keyword: [ + { + name: "涓嵂闂告煖", + }, + { + name: "涓嵂闂告煖", + }, + { + name: "涓嵂闂告煖", + }, + { + name: "涓嵂闂告煖", + }, + ], + }, + { + name: "涓嵂闂告煖鐨勫巻鍙蹭紶鎵夸笌鏂版椂浠e彂灞曟�濊��", + sources: "鍖椾含涓尰鑽ぇ瀛﹀鎶�", + type: "鏈熷垔", + author: "鏉ㄦ担鑿� 鍖椾含涓尰鑽ぇ瀛︿腑鑽闄紱璧靛ぉ鎴� 鍖椾含甯堣寖澶у", + time: "2025-02-24 09:21", + title: + "涓嵂闂告煖鏄紶缁熶腑鑽皟鍓傜殑楂樼骇绠$悊浜哄憳锛屽湪'鍓嶅簵鍚庡巶寮�'涓嵂鎴垮彂鎸ラ噸瑕佷綔鐢ㄥ拰鍏抽敭鑱岃兘銆備紶鎵夸腑鑽椄鏌滅殑瀹濊吹瀛︽湳缁忛獙涓庝紭绉�鏂囧寲瀵瑰帢娓呬腑鑽瀛︾鍙戝睍鑴夌粶銆佽鑼冧腑鑽皟鍓傛妧鏈搷浣溿�佷績杩涜�佽嵂宸ユ妧鑹�'娲绘�佷紶鎵�'鍏锋湁閲嶈绉戝浠峰�煎拰鐜板疄鎰忎箟銆傞潰鍚戞柊鏃朵唬銆佸紑鍚柊鎬濈淮锛屾湰鏂囧鑰佸瓧鍙蜂腑鑽摵鐨勫叴璧峰拰涓嵂闂告煖杩涜鑰冭瘉锛屽垎鏋愪腑鑽椄鏌滅殑宀椾綅璐d换銆佷紶鎵胯矾寰勫強鏈潵鍙戝睍锛屾彁鍑洪珮绱犺川涓嵂闂告煖浜烘墠鍩瑰吇绛栫暐锛屾棬鍦ㄥ煿鍏荤鍚堝綋浠gぞ浼氶渶姹傜殑涓嵂琛屼笟澶嶅悎鍨嬪垱鏂颁汉鎵嶃�備腑鑽椄鏌滄槸浼犵粺涓嵂璋冨墏鐨勯珮绾х鐞嗕汉鍛橈紝鍦�'鍓嶅簵鍚庡巶寮�'涓嵂鎴垮彂鎸ラ噸瑕佷綔鐢ㄥ拰鍏抽敭鑱岃兘銆備紶鎵夸腑鑽椄鏌滅殑瀹濊吹瀛︽湳缁忛獙涓庝紭绉�鏂囧寲瀵瑰帢娓呬腑鑽瀛︾鍙戝睍鑴夌粶銆佽鑼冧腑鑽皟鍓傛妧鏈搷浣溿�佷績杩涜�佽嵂宸ユ妧鑹�'娲绘�佷紶鎵�'鍏锋湁閲嶈绉戝浠峰�煎拰鐜板疄鎰忎箟銆傞潰鍚戞柊鏃朵唬銆佸紑鍚柊鎬濈淮锛屾湰鏂囧鑰佸瓧鍙蜂腑鑽摵鐨勫叴璧峰拰涓嵂闂告煖杩涜鑰冭瘉锛屽垎鏋愪腑鑽椄鏌滅殑宀椾綅璐d换銆佷紶鎵胯矾寰勫強鏈潵鍙戝睍锛屾彁鍑洪珮绱犺川涓嵂闂告煖浜烘墠鍩瑰吇绛栫暐锛屾棬鍦ㄥ煿鍏荤鍚堝綋浠gぞ浼氶渶姹傜殑涓嵂琛屼笟澶嶅悎鍨嬪垱鏂颁汉鎵嶃��", + keyword: [ + { + name: "涓嵂闂告煖", + }, + { + name: "涓嵂闂告煖", + }, + { + name: "涓嵂闂告煖", + }, + { + name: "涓嵂闂告煖", + }, + ], + }, + { + name: "涓嵂闂告煖鐨勫巻鍙蹭紶鎵夸笌鏂版椂浠e彂灞曟�濊��", + sources: "鍖椾含涓尰鑽ぇ瀛﹀鎶�", + type: "鏈熷垔", + author: "鏉ㄦ担鑿� 鍖椾含涓尰鑽ぇ瀛︿腑鑽闄紱璧靛ぉ鎴� 鍖椾含甯堣寖澶у", + time: "2025-02-24 09:21", + title: + "涓嵂闂告煖鏄紶缁熶腑鑽皟鍓傜殑楂樼骇绠$悊浜哄憳锛屽湪'鍓嶅簵鍚庡巶寮�'涓嵂鎴垮彂鎸ラ噸瑕佷綔鐢ㄥ拰鍏抽敭鑱岃兘銆備紶鎵夸腑鑽椄鏌滅殑瀹濊吹瀛︽湳缁忛獙涓庝紭绉�鏂囧寲瀵瑰帢娓呬腑鑽瀛︾鍙戝睍鑴夌粶銆佽鑼冧腑鑽皟鍓傛妧鏈搷浣溿�佷績杩涜�佽嵂宸ユ妧鑹�'娲绘�佷紶鎵�'鍏锋湁閲嶈绉戝浠峰�煎拰鐜板疄鎰忎箟銆傞潰鍚戞柊鏃朵唬銆佸紑鍚柊鎬濈淮锛屾湰鏂囧鑰佸瓧鍙蜂腑鑽摵鐨勫叴璧峰拰涓嵂闂告煖杩涜鑰冭瘉锛屽垎鏋愪腑鑽椄鏌滅殑宀椾綅璐d换銆佷紶鎵胯矾寰勫強鏈潵鍙戝睍锛屾彁鍑洪珮绱犺川涓嵂闂告煖浜烘墠鍩瑰吇绛栫暐锛屾棬鍦ㄥ煿鍏荤鍚堝綋浠gぞ浼氶渶姹傜殑涓嵂琛屼笟澶嶅悎鍨嬪垱鏂颁汉鎵嶃�備腑鑽椄鏌滄槸浼犵粺涓嵂璋冨墏鐨勯珮绾х鐞嗕汉鍛橈紝鍦�'鍓嶅簵鍚庡巶寮�'涓嵂鎴垮彂鎸ラ噸瑕佷綔鐢ㄥ拰鍏抽敭鑱岃兘銆備紶鎵夸腑鑽椄鏌滅殑瀹濊吹瀛︽湳缁忛獙涓庝紭绉�鏂囧寲瀵瑰帢娓呬腑鑽瀛︾鍙戝睍鑴夌粶銆佽鑼冧腑鑽皟鍓傛妧鏈搷浣溿�佷績杩涜�佽嵂宸ユ妧鑹�'娲绘�佷紶鎵�'鍏锋湁閲嶈绉戝浠峰�煎拰鐜板疄鎰忎箟銆傞潰鍚戞柊鏃朵唬銆佸紑鍚柊鎬濈淮锛屾湰鏂囧鑰佸瓧鍙蜂腑鑽摵鐨勫叴璧峰拰涓嵂闂告煖杩涜鑰冭瘉锛屽垎鏋愪腑鑽椄鏌滅殑宀椾綅璐d换銆佷紶鎵胯矾寰勫強鏈潵鍙戝睍锛屾彁鍑洪珮绱犺川涓嵂闂告煖浜烘墠鍩瑰吇绛栫暐锛屾棬鍦ㄥ煿鍏荤鍚堝綋浠gぞ浼氶渶姹傜殑涓嵂琛屼笟澶嶅悎鍨嬪垱鏂颁汉鎵嶃��", + keyword: [ + { + name: "涓嵂闂告煖", + }, + { + name: "涓嵂闂告煖", + }, + { + name: "涓嵂闂告煖", + }, + { + name: "涓嵂闂告煖", + }, + ], + }, + { + name: "涓嵂闂告煖鐨勫巻鍙蹭紶鎵夸笌鏂版椂浠e彂灞曟�濊��", + sources: "鍖椾含涓尰鑽ぇ瀛﹀鎶�", + type: "鏈熷垔", + author: "鏉ㄦ担鑿� 鍖椾含涓尰鑽ぇ瀛︿腑鑽闄紱璧靛ぉ鎴� 鍖椾含甯堣寖澶у", + time: "2025-02-24 09:21", + title: + "涓嵂闂告煖鏄紶缁熶腑鑽皟鍓傜殑楂樼骇绠$悊浜哄憳锛屽湪'鍓嶅簵鍚庡巶寮�'涓嵂鎴垮彂鎸ラ噸瑕佷綔鐢ㄥ拰鍏抽敭鑱岃兘銆備紶鎵夸腑鑽椄鏌滅殑瀹濊吹瀛︽湳缁忛獙涓庝紭绉�鏂囧寲瀵瑰帢娓呬腑鑽瀛︾鍙戝睍鑴夌粶銆佽鑼冧腑鑽皟鍓傛妧鏈搷浣溿�佷績杩涜�佽嵂宸ユ妧鑹�'娲绘�佷紶鎵�'鍏锋湁閲嶈绉戝浠峰�煎拰鐜板疄鎰忎箟銆傞潰鍚戞柊鏃朵唬銆佸紑鍚柊鎬濈淮锛屾湰鏂囧鑰佸瓧鍙蜂腑鑽摵鐨勫叴璧峰拰涓嵂闂告煖杩涜鑰冭瘉锛屽垎鏋愪腑鑽椄鏌滅殑宀椾綅璐d换銆佷紶鎵胯矾寰勫強鏈潵鍙戝睍锛屾彁鍑洪珮绱犺川涓嵂闂告煖浜烘墠鍩瑰吇绛栫暐锛屾棬鍦ㄥ煿鍏荤鍚堝綋浠gぞ浼氶渶姹傜殑涓嵂琛屼笟澶嶅悎鍨嬪垱鏂颁汉鎵嶃�備腑鑽椄鏌滄槸浼犵粺涓嵂璋冨墏鐨勯珮绾х鐞嗕汉鍛橈紝鍦�'鍓嶅簵鍚庡巶寮�'涓嵂鎴垮彂鎸ラ噸瑕佷綔鐢ㄥ拰鍏抽敭鑱岃兘銆備紶鎵夸腑鑽椄鏌滅殑瀹濊吹瀛︽湳缁忛獙涓庝紭绉�鏂囧寲瀵瑰帢娓呬腑鑽瀛︾鍙戝睍鑴夌粶銆佽鑼冧腑鑽皟鍓傛妧鏈搷浣溿�佷績杩涜�佽嵂宸ユ妧鑹�'娲绘�佷紶鎵�'鍏锋湁閲嶈绉戝浠峰�煎拰鐜板疄鎰忎箟銆傞潰鍚戞柊鏃朵唬銆佸紑鍚柊鎬濈淮锛屾湰鏂囧鑰佸瓧鍙蜂腑鑽摵鐨勫叴璧峰拰涓嵂闂告煖杩涜鑰冭瘉锛屽垎鏋愪腑鑽椄鏌滅殑宀椾綅璐d换銆佷紶鎵胯矾寰勫強鏈潵鍙戝睍锛屾彁鍑洪珮绱犺川涓嵂闂告煖浜烘墠鍩瑰吇绛栫暐锛屾棬鍦ㄥ煿鍏荤鍚堝綋浠gぞ浼氶渶姹傜殑涓嵂琛屼笟澶嶅悎鍨嬪垱鏂颁汉鎵嶃��", + keyword: [ + { + name: "涓嵂闂告煖", + }, + { + name: "涓嵂闂告煖", + }, + { + name: "涓嵂闂告煖", + }, + { + name: "涓嵂闂告煖", + }, + ], + }, + { + name: "涓嵂闂告煖鐨勫巻鍙蹭紶鎵夸笌鏂版椂浠e彂灞曟�濊��", + sources: "鍖椾含涓尰鑽ぇ瀛﹀鎶�", + type: "鏈熷垔", + author: "鏉ㄦ担鑿� 鍖椾含涓尰鑽ぇ瀛︿腑鑽闄紱璧靛ぉ鎴� 鍖椾含甯堣寖澶у", + time: "2025-02-24 09:21", + title: + "涓嵂闂告煖鏄紶缁熶腑鑽皟鍓傜殑楂樼骇绠$悊浜哄憳锛屽湪'鍓嶅簵鍚庡巶寮�'涓嵂鎴垮彂鎸ラ噸瑕佷綔鐢ㄥ拰鍏抽敭鑱岃兘銆備紶鎵夸腑鑽椄鏌滅殑瀹濊吹瀛︽湳缁忛獙涓庝紭绉�鏂囧寲瀵瑰帢娓呬腑鑽瀛︾鍙戝睍鑴夌粶銆佽鑼冧腑鑽皟鍓傛妧鏈搷浣溿�佷績杩涜�佽嵂宸ユ妧鑹�'娲绘�佷紶鎵�'鍏锋湁閲嶈绉戝浠峰�煎拰鐜板疄鎰忎箟銆傞潰鍚戞柊鏃朵唬銆佸紑鍚柊鎬濈淮锛屾湰鏂囧鑰佸瓧鍙蜂腑鑽摵鐨勫叴璧峰拰涓嵂闂告煖杩涜鑰冭瘉锛屽垎鏋愪腑鑽椄鏌滅殑宀椾綅璐d换銆佷紶鎵胯矾寰勫強鏈潵鍙戝睍锛屾彁鍑洪珮绱犺川涓嵂闂告煖浜烘墠鍩瑰吇绛栫暐锛屾棬鍦ㄥ煿鍏荤鍚堝綋浠gぞ浼氶渶姹傜殑涓嵂琛屼笟澶嶅悎鍨嬪垱鏂颁汉鎵嶃�備腑鑽椄鏌滄槸浼犵粺涓嵂璋冨墏鐨勯珮绾х鐞嗕汉鍛橈紝鍦�'鍓嶅簵鍚庡巶寮�'涓嵂鎴垮彂鎸ラ噸瑕佷綔鐢ㄥ拰鍏抽敭鑱岃兘銆備紶鎵夸腑鑽椄鏌滅殑瀹濊吹瀛︽湳缁忛獙涓庝紭绉�鏂囧寲瀵瑰帢娓呬腑鑽瀛︾鍙戝睍鑴夌粶銆佽鑼冧腑鑽皟鍓傛妧鏈搷浣溿�佷績杩涜�佽嵂宸ユ妧鑹�'娲绘�佷紶鎵�'鍏锋湁閲嶈绉戝浠峰�煎拰鐜板疄鎰忎箟銆傞潰鍚戞柊鏃朵唬銆佸紑鍚柊鎬濈淮锛屾湰鏂囧鑰佸瓧鍙蜂腑鑽摵鐨勫叴璧峰拰涓嵂闂告煖杩涜鑰冭瘉锛屽垎鏋愪腑鑽椄鏌滅殑宀椾綅璐d换銆佷紶鎵胯矾寰勫強鏈潵鍙戝睍锛屾彁鍑洪珮绱犺川涓嵂闂告煖浜烘墠鍩瑰吇绛栫暐锛屾棬鍦ㄥ煿鍏荤鍚堝綋浠gぞ浼氶渶姹傜殑涓嵂琛屼笟澶嶅悎鍨嬪垱鏂颁汉鎵嶃��", + keyword: [ + { + name: "涓嵂闂告煖", + }, + { + name: "涓嵂闂告煖", + }, + { + name: "涓嵂闂告煖", + }, + { + name: "涓嵂闂告煖", + }, + ], + }, + ], + }; }, methods: { - async onSubmit(val) { - - }, + async onSubmit(val) {}, //閲嶇疆鎼滅储缁撴灉 resetForm() { // this.onSearch(""); }, - } -} + // 椤甸潰璺宠浆 + goPage(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"; + } + }, + }, +}; </script> <style lang="less" scoped> @@ -381,18 +685,21 @@ height: 100%; box-sizing: border-box; background-color: #e9e1d4; - overflow: auto; + position: relative; + overflow: hidden; } .page-header { - height: 102px; + background-color: #e9e1d4; + height: 9.4%; width: 100%; text-align: left; - margin-bottom: 8px; border-bottom: 2px solid #937950; - + position: sticky; + top: 0; + z-index: 10; p { - padding: 35px 0 34px 0; + padding: 1.6% 0 1.55% 0; font-family: Alimama DongFangDaKai; font-size: 30px; text-indent: 1em; @@ -400,22 +707,31 @@ } } +.page-main-father{ + height: calc(100% - 9.4%); + width: 100%; + overflow: auto; +} + .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 +747,7 @@ font-family: Source Han Sans; font-size: 14px; font-weight: bold; - color: #6F5A3A; + color: #6f5a3a; cursor: pointer; img { @@ -445,9 +761,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 +787,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 +815,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,7 +839,8 @@ } .left-main { - border-bottom: 1px solid #E4DACE; + border-right: 1px solid #e4dace; + border-bottom: 1px solid #e4dace; padding: 10px; display: flex; align-items: center; @@ -542,7 +854,7 @@ span { font-family: Source Han Sans; font-size: 12px; - color: #8F7A5A; + color: #8f7a5a; } } @@ -556,7 +868,7 @@ span { font-family: Source Han Sans; font-size: 12px; - color: #8F7A5A; + color: #8f7a5a; } } @@ -580,7 +892,7 @@ span { font-family: Source Han Sans; font-size: 12px; - color: #8F7A5A; + color: #8f7a5a; } } @@ -590,27 +902,29 @@ /* 璁剧疆榧犳爣缁忚繃瀵瑰嬀妗嗭紝瀵瑰嬀妗嗚竟妗嗙殑棰滆壊 */ ::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; + ::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 + .el-checkbox__input.is-indeterminate + .el-checkbox__inner { + 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 +946,216 @@ 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; + border-right: 1px solid #2c2c2c; + color: #333; + } + + span:nth-child(3) { + font-family: Source Han Sans; + font-size: 12px; + font-weight: 350; + padding-left: 10px; + color: #333; + } + + 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; + } + } + + .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