From 3c1660594d3b64c4b3997c3e2c5fca7d5c558755 Mon Sep 17 00:00:00 2001
From: minimaxagent1 <minimaxagent1@gmail.com>
Date: Wed, 30 Jul 2025 16:37:13 +0800
Subject: [PATCH] =?UTF-8?q?=E9=AB=98=E5=83=A7=E8=AF=A6=E7=BB=86=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A22.0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/monk/monkDetail.vue | 272 ++++++++++++++++++++------------------
 1 file changed, 141 insertions(+), 131 deletions(-)

diff --git a/pages/monk/monkDetail.vue b/pages/monk/monkDetail.vue
index 16c937c..88b97d9 100644
--- a/pages/monk/monkDetail.vue
+++ b/pages/monk/monkDetail.vue
@@ -1,129 +1,127 @@
 <template>
-	<view class="monk-detail-page">
-		<!-- 背景图 -->
-		<image class="bg-image" src="https://api.ccttiot.com/smartmeter/img/static/uz3vQk44WkGnJPVjKrw1"
-			mode="aspectFill"></image>
+  <view class="monk-detail-page">
+    <!-- 背景图 -->
+    <image class="bg-image" src="https://api.ccttiot.com/smartmeter/img/static/uz3vQk44WkGnJPVjKrw1"
+           mode="aspectFill"></image>
+
+    <u-navbar title="高僧详情" :border-bottom="false" back-icon-color="#262B37" title-color='#695347' title-size='36'
+              height='50' id="navbar">
+    </u-navbar>
+    <view class="container">
+      <view class="header">
+        <view class="content">
+          <image class="background-image" :src="CommonEnum.BACKGROUND" mode="aspectFill"></image>
+          <image class="monk-image" :src="monkInfo.imgUrl" mode="aspectFill"></image>
+        </view>
+      </view>
+    </view>
+
+    <!-- 导航标签 -->
+    <view class="nav-tabs">
+      <view
+          v-for="(tab, index) in tabs"
+          :key="index"
+          class="nav-tab"
+          :class="{ active: activeTab === index }"
+          @click="switchTab(index)"
+      >
+        {{ tab.title }}
+      </view>
+    </view>
+
+    <!-- 内容区域 -->
+    <view class="detail-section">
+      <view class="section-title">
+        {{ tabs[activeTab].title }}
+      </view>
+      <view class="monk-basic" v-if="activeTab === 0">
+        <text class="monk-name">{{ monkInfo.name }}</text>
+        <view class="duties-wrapper">
+          <text class="monk-duties">{{ monkInfo.duties }}</text>
+        </view>
+      </view>
+      <view class="section-content" v-html="tabs[activeTab].content"></view>
+    </view>
+  </view>
 
-		<u-navbar title="高僧详情" :border-bottom="false" back-icon-color="#262B37" title-color='#695347' title-size='36'
-			height='50' id="navbar">
-		</u-navbar>
-		<view class="container">
-			<view class="header">
-				<view class="content">
-					<image class="background-image" :src="CommonEnum.BACKGROUND" mode="aspectFill"></image>
-					<image class="monk-image" :src="monkInfo.imgUrl" mode="aspectFill"></image>
-				</view>
-			</view>
-			
-			<!-- 高僧基本信息 -->
-			<view class="monk-info" v-if="monkInfo.name">
-				<image class="monk-avatar" :src="monkInfo.imgUrl || 'https://api.ccttiot.com/image-1753687164375.png'" mode="aspectFill"></image>
-				<view class="monk-basic">
-					<text class="monk-name">{{ monkInfo.name }}</text>
-					<text class="monk-duties">{{ monkInfo.duties }}</text>
-				</view>
-			</view>
-			
-			<!-- 导航标签 -->
-			<view class="nav-tabs">
-				<view 
-					v-for="(tab, index) in tabs" 
-					:key="index"
-					class="nav-tab"
-					:class="{ active: activeTab === index }"
-					@click="switchTab(index)"
-				>
-					{{ tab.title }}
-				</view>
-			</view>
-			
-			<!-- 内容区域 -->
-			<view class="detail-section">
-				<view class="section-title">
-					{{ tabs[activeTab].title }}
-				</view>
-				<view class="section-content" v-html="tabs[activeTab].content"></view>
-			</view>
-		</view>
-	</view>
 </template>
 
 <script>
 import CommonEnum from "../../enum/common";
 import MonkEnum from "../../enum/monk";
-import { getMonkDetail } from "../../api/monkDetail.js";
+import {getMonkDetail} from "../../api/monkDetail.js";
 
 export default {
-	computed: {
-		MonkEnum() {
-			return MonkEnum
-		},
-		CommonEnum() {
-			return CommonEnum
-		}
-	},
-	data() {
-		return {
-			activeTab: 0, // 当前激活的标签索引
-			tabs: [],
-			monkInfo: {}
-		}
-	},
-	onLoad(options) {
-		// 获取传递的参数
-		if (options.id) {
-			this.getMonkDetail(options.id);
-		}
-	},
-	methods: {
-		// 切换标签
-		switchTab(index) {
-			this.activeTab = index;
-		},
-		// 获取高僧详情
-		async getMonkDetail(id) {
-			try {
-				const res = await getMonkDetail(id);
-				if (res.code === 200 && res.data) {
-					this.monkInfo = res.data;
-					// 更新标签内容
-					this.updateTabsContent();
-				} else {
-					uni.showToast({
-						title: res.msg || '获取详情失败',
-						icon: 'none'
-					});
-				}
-			} catch (error) {
-				console.error('获取高僧详情失败:', error);
-				uni.showToast({
-					title: '网络错误',
-					icon: 'none'
-				});
-			}
-		},
-		// 更新标签内容
-		updateTabsContent() {
-			this.tabs = [
-				{
-					title: '人物简介',
-					content: this.monkInfo.profile || '暂无简介'
-				},
-				{
-					title: '人物经历',
-					content: this.monkInfo.experience || '暂无经历'
-				},
-				{
-					title: '慈善事迹',
-					content: this.monkInfo.deeds || '暂无事迹'
-				},
-				{
-					title: '寺庙贡献',
-					content: this.monkInfo.contribution || '暂无贡献'
-				}
-			];
-		}
-	}
+  computed: {
+    MonkEnum() {
+      return MonkEnum
+    },
+    CommonEnum() {
+      return CommonEnum
+    }
+  },
+  data() {
+    return {
+      activeTab: 0, // 当前激活的标签索引
+      tabs: [],
+      monkInfo: {}
+    }
+  },
+  onLoad(options) {
+    // 获取传递的参数
+    if (options.id) {
+      this.getMonkDetail(options.id);
+    }
+  },
+  methods: {
+    // 切换标签
+    switchTab(index) {
+      this.activeTab = index;
+    },
+    // 获取高僧详情
+    async getMonkDetail(id) {
+      try {
+        const res = await getMonkDetail(id);
+        if (res.code === 200 && res.data) {
+          this.monkInfo = res.data;
+          // 更新标签内容
+          this.updateTabsContent();
+        } else {
+          uni.showToast({
+            title: res.msg || '获取详情失败',
+            icon: 'none'
+          });
+        }
+      } catch (error) {
+        console.error('获取高僧详情失败:', error);
+        uni.showToast({
+          title: '网络错误',
+          icon: 'none'
+        });
+      }
+    },
+    // 更新标签内容
+    updateTabsContent() {
+      this.tabs = [
+        {
+          title: '人物简介',
+          content: this.monkInfo.profile || '暂无简介'
+        },
+        {
+          title: '人物经历',
+          content: this.monkInfo.experience || '暂无经历'
+        },
+        {
+          title: '慈善事迹',
+          content: this.monkInfo.deeds || '暂无事迹'
+        },
+        {
+          title: '寺庙贡献',
+          content: this.monkInfo.contribution || '暂无贡献'
+        }
+      ];
+    }
+  }
 }
 </script>
 
@@ -141,6 +139,7 @@ export default {
 .monk-detail-page {
   min-height: 100vh;
   position: relative;
+  background-color: rgba(255, 255, 255, 0.95);
 }
 
 .bg-image {
@@ -197,22 +196,33 @@ export default {
     border: 4rpx solid #695347;
   }
 
-  .monk-basic {
-    flex: 1;
 
-    .monk-name {
-      font-size: 36rpx;
-      font-weight: bold;
-      color: #695347;
-      display: block;
-      margin-bottom: 10rpx;
-    }
+}
+
+.monk-basic {
+  flex: 1;
+
+  .monk-name {
+    font-size: 48rpx;
+    font-weight: bold;
+    color: #695347;
+    display: block;
+    margin-bottom: 10rpx;
+  }
+
+  .monk-duties {
+    font-size: 28rpx;
+    color: #8B7355;
+    display: block;
+  }
+
+  .duties-wrapper {
+    display: inline-block;
+    background-color: #f5f5f5;
+    border-radius: 8rpx;
+    padding: 8rpx 16rpx;
+    margin-top: 10rpx;
 
-    .monk-duties {
-      font-size: 28rpx;
-      color: #8B7355;
-      display: block;
-    }
   }
 }