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/details.vue | 648 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 648 insertions(+), 0 deletions(-) diff --git a/src/views/achievements/details.vue b/src/views/achievements/details.vue new file mode 100644 index 0000000..4fab097 --- /dev/null +++ b/src/views/achievements/details.vue @@ -0,0 +1,648 @@ +<template> + <div class="page"> + <div class="page-header"> + <p>鐜嬫案鐐庨櫌澹鏈垚鏋�</p> + </div> + <div class="page-main-father"> + <ul class="page-main"> + <li class="page-main-name"> + <p> + <el-button icon="el-icon-arrow-left" @click="goBack()" + >杩斿洖</el-button + > + </p> + <p>{{ detailsList.name }}</p> + </li> + <li class="page-main-time"> + <p> + <span>{{ detailsList.sources }}</span> + <span>{{ detailsList.time }}</span> + </p> + </li> + <li class="page-main-title"> + <p> + <span + v-for="(item, index) in detailsList.characterList" + :key="index" + >{{ item.name }}</span + > + </p> + <p><span>鎽樿锛�</span>{{ detailsList.title }}</p> + <p> + <span>鍏抽敭璇嶏細</span> + <span + class="page-main-keyword" + v-for="(item, index) in detailsList.keyword" + :key="index" + >{{ item.name }}</span + > + </p> + <p v-if="!isDisplay"> + <el-button @click="isDisplay = !isDisplay">鏌ョ湅鍏ㄦ枃</el-button> + </p> + <p class="page-main-video" v-if="isDisplay"> + <video + :src="detailsList.videoUrl" + controls + autoplay + class="video" + width="70%" + ></video> + </p> + <p class="page-main-audio" v-if="isDisplay"> + <audio + :src="detailsList.videoUrl" + controls + autoplay + class="video" + width="100%" + ></audio> + </p> + </li> + <li class="page-main-literature"> + <p class="literature-header">鐩稿叧鏂囩尞</p> + <div class="content-right"> + <!-- 缁撴灉灞曠ず --> + <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> + </li> + </ul> + </div> + </div> +</template> + +<script> +export default { + data() { + return { + isDisplay: false, + detailsList: { + name: "涓嵂闂告煖鐨勫巻鍙蹭紶鎵夸笌鏂版椂浠e彂灞曟�濊��", + sources: "鍖椾含涓尰鑽ぇ瀛﹀鎶�", + time: "2025-02-24", + characterList: [ + { + name: "鏉ㄦ担鑿�", + }, + { + name: "鏉ㄦ担鑿�", + }, + { + name: "鏉ㄦ担鑿�", + }, + { + name: "鏉ㄦ担鑿�", + }, + ], + title: + "涓嵂闂告煖鏄紶缁熶腑鑽皟鍓傜殑楂樼骇绠$悊浜哄憳锛屽湪'鍓嶅簵鍚庡巶寮�'涓嵂鎴垮彂鎸ラ噸瑕佷綔鐢ㄥ拰鍏抽敭鑱岃兘銆備紶鎵夸腑鑽椄鏌滅殑瀹濊吹瀛︽湳缁忛獙涓庝紭绉�鏂囧寲瀵瑰帢娓呬腑鑽瀛︾鍙戝睍鑴夌粶銆佽鑼冧腑鑽皟鍓傛妧鏈搷浣溿�佷績杩涜�佽嵂宸ユ妧鑹�'娲绘�佷紶鎵�'鍏锋湁閲嶈绉戝浠峰�煎拰鐜板疄鎰忎箟銆傞潰鍚戞柊鏃朵唬銆佸紑鍚柊鎬濈淮锛屾湰鏂囧鑰佸瓧鍙蜂腑鑽摵鐨勫叴璧峰拰涓嵂闂告煖杩涜鑰冭瘉锛屽垎鏋愪腑鑽椄鏌滅殑宀椾綅璐d换銆佷紶鎵胯矾寰勫強鏈潵鍙戝睍锛屾彁鍑洪珮绱犺川涓嵂闂告煖浜烘墠鍩瑰吇绛栫暐锛屾棬鍦ㄥ煿鍏荤鍚堝綋浠gぞ浼氶渶姹傜殑涓嵂琛屼笟澶嶅悎鍨嬪垱鏂颁汉鎵嶃�備腑鑽椄鏌滄槸浼犵粺涓嵂璋冨墏鐨勯珮绾х鐞嗕汉鍛橈紝鍦�'鍓嶅簵鍚庡巶寮�'涓嵂鎴垮彂鎸ラ噸瑕佷綔鐢ㄥ拰鍏抽敭鑱岃兘銆備紶鎵夸腑鑽椄鏌滅殑瀹濊吹瀛︽湳缁忛獙涓庝紭绉�鏂囧寲瀵瑰帢娓呬腑鑽瀛︾鍙戝睍鑴夌粶銆佽鑼冧腑鑽皟鍓傛妧鏈搷浣溿�佷績杩涜�佽嵂宸ユ妧鑹�'娲绘�佷紶鎵�'鍏锋湁閲嶈绉戝浠峰�煎拰鐜板疄鎰忎箟銆傞潰鍚戞柊鏃朵唬銆佸紑鍚柊鎬濈淮锛屾湰鏂囧鑰佸瓧鍙蜂腑鑽摵鐨勫叴璧峰拰涓嵂闂告煖杩涜鑰冭瘉锛屽垎鏋愪腑鑽椄鏌滅殑宀椾綅璐d换銆佷紶鎵胯矾寰勫強鏈潵鍙戝睍锛屾彁鍑洪珮绱犺川涓嵂闂告煖浜烘墠鍩瑰吇绛栫暐锛屾棬鍦ㄥ煿鍏荤鍚堝綋浠gぞ浼氶渶姹傜殑涓嵂琛屼笟澶嶅悎鍨嬪垱鏂颁汉鎵嶃��", + keyword: [ + { + name: "涓嵂闂告煖", + }, + { + name: "涓嵂闂告煖", + }, + { + name: "涓嵂闂告煖", + }, + { + name: "涓嵂闂告煖", + }, + ], + videoUrl: "https://www.w3schools.com/html/mov_bbb.mp4", + audioMd5: "", + }, + // 鏌ヨ缁撴灉 + 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: "涓嵂闂告煖", + }, + ], + }, + ], + }; + }, + methods: { + goPage(key) {}, + + goBack() { + this.$router.go(-1); + }, + }, +}; +</script> + +<style lang="less" scoped> +.page { + width: 100%; + height: 100%; + box-sizing: border-box; + background-color: #e9e1d4; + position: relative; + overflow: hidden; +} + +.page-header { + height: 9.4%; + width: 100%; + text-align: left; + border-bottom: 2px solid #937950; + background-color: #e9e1d4; + position: sticky; + top: 0; + z-index: 100; + p { + padding: 1.6% 0 1.55% 0; + font-family: Alimama DongFangDaKai; + font-size: 30px; + text-indent: 1em; + border-bottom: 1px solid #937950; + } +} +.page-main-father{ + height: calc(100% - 9.4%); + width: 100%; + overflow: auto; +} + + +.page-main { + background-color: #fcfaf3; + width: 77.3%; + margin: 0 auto; + margin-top: 1%; + + .page-main-name { + display: flex; + align-items: center; + padding: 21px 28px; + border-bottom: 1px solid #d8cbb6; + + ::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; + } + } + + p:nth-child(1) { + width: 8%; + } + + p:nth-child(2) { + width: 92%; + text-align: center; + font-family: Source Han Sans; + font-size: 32px; + font-weight: 350; + color: #937950; + } + } + + .page-main-time { + padding: 8px 0 16px 0; + display: flex; + justify-content: center; + font-family: Source Han Sans; + font-size: 14px; + font-weight: normal; + line-height: 22px; + border-bottom: 1px solid #d8cbb6; + + p { + span { + margin-right: 20px; + } + } + } + + .page-main-title { + padding: 13px 185px 25px 185px; + border-bottom: 1px solid #d8cbb6; + + ::v-deep .el-button { + font-size: 14px; + background-color: #937950; + color: #fff; + border: 1px solid #6f5a3a; + border-radius: 0; + + &:hover { + background-color: #6f5a3a; + color: #fffdf8; + } + } + + p:nth-child(1) { + display: flex; + justify-content: center; + margin-bottom: 13px; + + span { + font-family: Source Han Sans; + font-size: 14px; + font-weight: 350; + color: #604d2f; + border-right: 1px solid #937950; + padding: 0 21px; + } + + span:last-child { + border: none; + } + } + + p:nth-child(2) { + margin-bottom: 13px; + font-family: Source Han Sans; + font-size: 14px; + font-weight: 350; + line-height: 26px; + color: #333333; + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + + span { + font-family: Source Han Sans; + font-size: 14px; + font-weight: bold; + color: #333333; + } + } + + p:nth-child(3) { + margin-bottom: 24px; + + span:nth-child(1) { + font-family: Source Han Sans; + font-weight: 700; + font-size: 14px; + } + + .page-main-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; + } + } + } + + .page-main-video { + padding: 10px; + height: 377px; + width: auto; + display: flex; + justify-content: center; + + video { + border-radius: 10px; + border: 1px solid #dcdcdc; + box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); + } + } + + .page-main-audio { + padding: 10px; + display: flex; + justify-content: center; + + audio { + } + } + + .page-main-literature { + padding: 10px 93px 20px 185px; + + .literature-header { + font-family: Source Han Sans; + font-size: 14px; + font-weight: bold; + line-height: 26px; + } + + .content-right { + 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; + } + } + + .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; + } + } + } + } + } +} +</style> -- Gitblit v1.9.1