feat(视图): 添加大师详情页内容并优化姓名显示样式

在MastersDetail.vue中添加图片和内容展示区域
在Masters.vue中为姓名添加上标效果并调整字体大小

@@ -13,7 +13,7 @@
         </div>
         <div class="item-caption">
           <div class="item-role">{{ item.role }}</div>
-          <div class="item-name">{{ item.name }}</div>
+          <div class="item-name" v-html="formatNameWithSuperscript(item.name)"></div>
         </div>
       </div>
     </section>
@@ -31,7 +31,7 @@
         </div>
         <div class="item-caption">
           <div class="item-role">{{ item.role }}</div>
-          <div class="item-name">{{ item.name }}</div>
+          <div class="item-name small" v-html="formatNameWithSuperscript(item.name)"></div>
         </div>
       </div>
     </section>
@@ -116,6 +116,20 @@ const goDetail = (item) => {
   router.push(`/masters/${item.id}`)
 }
 
+/**
+ * 为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}`
+}
+
 const pid = ref(router.currentRoute.value.query.pid)
 
 onMounted(async () => {
@@ -200,11 +214,16 @@ onMounted(async () => {
 }
 
 .item-name {
-  font-size: 0.875rem;
+  font-size: 1.5rem;
   font-weight: 600;
   margin-top: 0.25rem;
 }
 
+.item-name.small {
+  font-size: 1.25rem;
+}
+
+
 /* 响应式调整 */
 @media (max-width: 48rem) {
   .item-caption {
@@ -222,7 +241,10 @@ onMounted(async () => {
     margin: 0.5rem;
   }
   .item-name {
-    font-size: 0.8125rem;
+    font-size: 1.25rem;
+  }
+  .item-name.small {
+    font-size: 1rem;
   }
 }
 
@@ -235,7 +257,10 @@ onMounted(async () => {
     margin: 0.5rem;
   }
   .item-name {
-    font-size: 0.75rem;
+    font-size: 1rem;
+  }
+  .item-name.small {
+    font-size: 0.875rem;
   }
 }
 </style>

 <!--
  * @Date: 2025-10-30 20:00:25
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-10-30 20:50:36
+ * @LastEditTime: 2025-10-31 14:50:05
  * @FilePath: /stdj_h5/src/views/MastersDetail.vue
  * @Description: 文件描述
 -->
@@ -9,7 +9,15 @@
   <div class="masters-detail-container">
     <section class="single-list">
       <div class="item-card">
-
+        <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>
       </div>
     </section>
   </div>
@@ -20,6 +28,12 @@ import { ref } from 'vue'
 import { useTitle } from '@vueuse/core';
 
 useTitle('三師七證 - 詳情')
+
+const item = ref({
+  src: 'https://via.placeholder.com/300x400?text=三師七證',
+  title: '三師七證 - 詳情',
+  description: '三師七證是三師七證的詳情，包含三師七證的所有內容。'
+})
 </script>
 
 
@@ -48,4 +62,35 @@ useTitle('三師七證 - 詳情')
   padding: 0.5rem;
 }
 
+.item-image {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
+.item-content {
+  padding: 0.5rem;
+}
+
+.item-title {
+  font-size: 1.2rem;
+  font-weight: 600;
+  color: #333;
+  line-height: 1.4;
+  margin-bottom: 0.5rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.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;
+}
 </style>