<!--
 * @Date: 2025-10-30 20:00:25
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-11-02 12:16:55
 * @FilePath: /stdj_h5/src/views/MastersDetail.vue
 * @Description: 文件描述
-->
<template>
  <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">
          <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>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useTitle } from '@vueuse/core';

useTitle('三師七證 - 詳情')

const item = ref({
  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>


<style scoped>
.masters-detail-container {
  padding: 1.5rem;
  background: #F2EBDB;
  min-height: 100vh;
  /* 背景至少覆盖整个视口高度 */
  width: 100%;
  box-sizing: border-box;
}

.single-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1rem;
}

.item-card {
  position: relative;
  padding: 0.5rem;
  background: #F2EBDB;
  border: 2px solid #6B4102;
  overflow: hidden;
  transition: transform 0.2s ease;
}

.item-image {
  width: 100%;
  height: auto;
  display: block;
}

.item-content {
  padding: 0.85rem;
  text-align: center;
  color: #6B4102;
  background: #FCF8F1;
}

.item-role {
  font-size: 0.75rem;
  opacity: 0.95;
}

.item-name {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 0.25rem;
}

.item-desc {
  margin-top: 0.5rem;
}
</style>