高僧详细界面2.0

pages/monk/monkDetail.vue

@@ -14,14 +14,6 @@
           <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>
 
     <!-- 导航标签 -->
@@ -42,10 +34,16 @@
       <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>
-	</view>
+
 </template>
 
 <script>
@@ -72,7 +70,7 @@ export default {
   onLoad(options) {
     // 获取传递的参数
     if (options.id) {
-			this.getMonkDetail(options.id);
+      this.fetchMonkDetail(options.id);
     }
   },
   methods: {
@@ -81,9 +79,9 @@ export default {
       this.activeTab = index;
     },
     // 获取高僧详情
-		async getMonkDetail(id) {
+    async fetchMonkDetail(monkId) {
       try {
-				const res = await getMonkDetail(id);
+        const res = await getMonkDetail(monkId);
         if (res.code === 200 && res.data) {
           this.monkInfo = res.data;
           // 更新标签内容
@@ -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,11 +196,14 @@ export default {
     border: 4rpx solid #695347;
   }
 
+
+}
+
 .monk-basic {
   flex: 1;
 
   .monk-name {
-      font-size: 36rpx;
+    font-size: 48rpx;
     font-weight: bold;
     color: #695347;
     display: block;
@@ -213,6 +215,14 @@ export default {
     color: #8B7355;
     display: block;
   }
+
+  .duties-wrapper {
+    display: inline-block;
+    background-color: #f5f5f5;
+    border-radius: 8rpx;
+    padding: 8rpx 16rpx;
+    margin-top: 10rpx;
+
   }
 }