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