高僧详细界面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,16 +34,22 @@
       <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>
 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: {
@@ -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 {
+
+}
+
+.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;
+
   }
 }