feat(views): 更新大师详情页样式和内容展示

重构大师详情页的布局和样式，添加角色字段和姓名格式化功能
为背景添加统一颜色，优化卡片内容和排版

@@ -764,6 +764,7 @@ const handleNewsClick = (item) => {
   background-repeat: no-repeat;
   background-attachment: fixed;
   overflow: hidden;
+  background-color: #F2EBDB;
 }
 
 /* 法会流程模块 */
@@ -1202,6 +1203,7 @@ const handleNewsClick = (item) => {
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
+  background-color: #F2EBDB;
 }
 
 /* 左下角装饰图片 */

 <!--
  * @Date: 2025-10-30 20:00:25
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-10-31 14:50:05
+ * @LastEditTime: 2025-10-31 16:01:53
  * @FilePath: /stdj_h5/src/views/MastersDetail.vue
  * @Description: 文件描述
 -->
@@ -9,14 +9,11 @@
   <div class="masters-detail-container">
     <section class="single-list">
       <div class="item-card">
-        <img
-          :src="item.src"
-          :alt="item.title"
-          class="item-image"
-        />
+        <img :src="item.src" :alt="item.title" class="item-image" />
         <div class="item-content">
-          <h3 class="item-title">{{ item.title }}</h3>
-          <p class="item-text">{{ item.description }}</p>
+          <div class="item-role">{{ item.role }}</div>
+          <div class="item-name" v-html="formatNameWithSuperscript(item.name)"></div>
+          <div class="item-desc">{{ item.desc }}</div>
         </div>
       </div>
     </section>
@@ -30,10 +27,26 @@ import { useTitle } from '@vueuse/core';
 useTitle('三師七證 - 詳情')
 
 const item = ref({
-  src: 'https://via.placeholder.com/300x400?text=三師七證',
-  title: '三師七證 - 詳情',
-  description: '三師七證是三師七證的詳情，包含三師七證的所有內容。'
+  id: 101,
+  role: '中国·戒幢律寺',
+  name: '上明仁传师',
+  src: '/src/assets/images/02 西园戒幢律寺三坛大戒法会/截图/全家福3_副本.jpg',
+  desc: '师法名宗思。字向愿。一九六五年出生，福建泉州人。一九八五年于虎溪岩寺，礼上广下平法师剃度出家。一九八九年于莆田广化寺，依止上妙下湛老和尚求受具足戒。先后任中国佛教协会副秘书长、福建省佛教协会常务副会长、泉州市佛教协会会长、晋江市佛教协会会长、泉州承天寺方丈、晋江庆莲寺住持、龙山寺寺务委员会主任、泉州佛学苑苑长、泉州市人大常委。 二〇一〇年，为承天寺三坛大戒教授律师，主持编修《泉州佛教梵刹文化综览》、《廋松集》「再版」、『传敏法师东西塔浮雕白描』总策划等。'
 })
+
+/**
+ * 为name字段的第一个文字添加上标效果
+ * @param {string} name - 原始姓名
+ * @returns {string} - 带上标的HTML字符串
+ */
+const formatNameWithSuperscript = (name) => {
+  if (!name || name.length === 0) return name
+
+  const firstChar = name.charAt(0)
+  const restChars = name.slice(1)
+
+  return `<sup style="font-size: 0.6rem;">上</sup>${firstChar}<sup style="font-size: 0.6rem;">下</sup>${restChars}`
+}
 </script>
 
 
@@ -41,7 +54,8 @@ const item = ref({
 .masters-detail-container {
   padding: 1.5rem;
   background: #F2EBDB;
-  min-height: 100vh; /* 背景至少覆盖整个视口高度 */
+  min-height: 100vh;
+  /* 背景至少覆盖整个视口高度 */
   width: 100%;
   box-sizing: border-box;
 }
@@ -59,7 +73,6 @@ const item = ref({
   border: 2px solid #6B4102;
   overflow: hidden;
   transition: transform 0.2s ease;
-  padding: 0.5rem;
 }
 
 .item-image {
@@ -69,28 +82,23 @@ const item = ref({
 }
 
 .item-content {
-  padding: 0.5rem;
+  padding: 0.85rem;
+  text-align: center;
+  color: #6B4102;
 }
 
-.item-title {
-  font-size: 1.2rem;
+.item-role {
+  font-size: 0.75rem;
+  opacity: 0.95;
+}
+
+.item-name {
+  font-size: 1.25rem;
   font-weight: 600;
-  color: #333;
-  line-height: 1.4;
-  margin-bottom: 0.5rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  margin-top: 0.25rem;
 }
 
-.item-text {
-  font-size: 1rem;
-  color: #666;
-  line-height: 1.4;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
+.item-desc {
+  margin-top: 0.5rem;
 }
 </style>