feat(Home): 重构法会流程页面并添加动态装饰线效果

- 移除全屏背景图，优化页面结构
- 添加法会流程内容展示区域，包含步骤标题和装饰线
- 实现装饰线动态计算位置功能，根据标题和按钮位置自动调整
- 为流程步骤添加详细描述内容
- 优化响应式设计，适配不同屏幕尺寸

 <template>
 <template>
   <div class="home-container">
   <div class="home-container">
-    <!-- 全屏背景图 - 海报@2x.png -->
-    <div class="full-background"></div>
 
 
     <!-- 左下角背景装饰图 - bg@2x.png -->
     <!-- 左下角背景装饰图 - bg@2x.png -->
     <div class="bottom-left-decoration"></div>
     <div class="bottom-left-decoration"></div>
@@ -27,6 +25,8 @@
         />
         />
       </div>
       </div>
 
 
+      <!-- 法会流程容器 -->
+      <div class="ceremony-wrapper">
         <!-- 法会流程 -->
         <!-- 法会流程 -->
         <div class="ceremony-process">
         <div class="ceremony-process">
           <!-- 标题 -->
           <!-- 标题 -->
@@ -64,12 +64,39 @@
             </div>
             </div>
           </div>
           </div>
         </div>
         </div>
+
+        <!-- 法会流程内容 -->
+        <div class="ceremony-intro">
+          <div class="intro-container">
+            <!-- 背景图片 -->
+            <div class="intro-background"></div>
+
+            <!-- 步骤标题 -->
+            <div class="step-title" ref="stepTitleRef">
+              <span class="step-title-text">{{ currentStep.name }}</span>
+            </div>
+
+            <!-- 装饰线 -->
+            <div class="decorative-line" :style="decorativeLineStyle"></div>
+
+            <!-- 查看更多按钮 -->
+            <div class="more-button" @click="viewMore">
+              <span class="more-text">查看更多</span>
+            </div>
+
+            <!-- 步骤描述（可选显示） -->
+            <div class="step-description">
+              <p>{{ currentStep.description }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
     </div>
   </div>
   </div>
 </template>
 </template>
 
 
 <script setup>
 <script setup>
-import { ref } from 'vue'
+import { ref, computed, nextTick, onMounted, watch } from 'vue'
 import VideoPlayer from '@/components/VideoPlayer.vue'
 import VideoPlayer from '@/components/VideoPlayer.vue'
 
 
 // 视频配置
 // 视频配置
@@ -91,20 +118,113 @@ const videoOptions = ref({
 
 
 // 法会流程步骤数据
 // 法会流程步骤数据
 const processSteps = ref([
 const processSteps = ref([
-  { name: '准 备', active: true },
-  { name: '正式开堂', active: false },
-  { name: '封堂洒净', active: false },
-  { name: '正授沙弥戒', active: false },
-  { name: '二坛比丘戒', active: false },
-  { name: '三坛菩萨戒', active: false },
-  { name: '圆 满', active: false }
+  {
+    name: '准备',
+    active: true,
+    description: '法会前的各项准备工作，包括场地布置、法器准备、戒子报到等重要环节。'
+  },
+  {
+    name: '正式开堂',
+    active: false,
+    description: '三坛大戒法会正式开始，举行庄严的开堂仪式，宣布戒期开始。'
+  },
+  {
+    name: '封堂洒净',
+    active: false,
+    description: '封闭戒堂，进行洒净仪式，为戒子们营造清净庄严的受戒环境。'
+  },
+  {
+    name: '正授沙弥戒',
+    active: false,
+    description: '第一坛沙弥戒的正式传授，戒子们受持沙弥十戒，成为正式的沙弥。'
+  },
+  {
+    name: '二坛比丘戒',
+    active: false,
+    description: '第二坛比丘戒的庄严传授，戒子们受持比丘二百五十戒，成为比丘僧。'
+  },
+  {
+    name: '三坛菩萨戒',
+    active: false,
+    description: '第三坛菩萨戒的殊胜传授，戒子们受持菩萨戒，发菩提心，行菩萨道。'
+  },
+  {
+    name: '圆满',
+    active: false,
+    description: '三坛大戒法会圆满结束，戒子们正式成为具足戒的僧人，功德圆满。'
+  }
 ])
 ])
 
 
+// 获取当前选中的步骤
+const currentStep = computed(() => {
+  return processSteps.value.find(step => step.active) || processSteps.value[0]
+})
+
+// 步骤标题的ref引用
+const stepTitleRef = ref(null)
+
+// 装饰线的动态样式
+const decorativeLineStyle = ref({
+  top: '4.5rem',
+  bottom: '4rem'
+})
+
+// 计算装饰线位置的函数
+const calculateLinePosition = async () => {
+  await nextTick()
+  if (stepTitleRef.value) {
+    const titleElement = stepTitleRef.value
+    const containerElement = titleElement.closest('.intro-container')
+    const moreButton = containerElement?.querySelector('.more-button')
+
+    if (containerElement && moreButton) {
+      // 获取标题和按钮的位置信息
+      const titleRect = titleElement.getBoundingClientRect()
+      const buttonRect = moreButton.getBoundingClientRect()
+      const containerRect = containerElement.getBoundingClientRect()
+
+      // 计算相对于容器的位置
+      const titleBottom = titleRect.bottom - containerRect.top
+      const buttonTop = buttonRect.top - containerRect.top
+
+      // 装饰线从标题底部开始，留0.5rem间距
+      const spacing = 8 // 0.5rem = 8px (基准字体16px)
+      const lineTop = titleBottom + spacing
+
+      // 装饰线到按钮上方，留0.5rem间距
+      const lineBottom = containerRect.height - (buttonTop - spacing)
+
+      decorativeLineStyle.value = {
+        top: `${lineTop}px`,
+        bottom: `${lineBottom}px`
+      }
+    }
+  }
+}
+
 // 点击切换步骤状态
 // 点击切换步骤状态
 const selectStep = (index) => {
 const selectStep = (index) => {
   processSteps.value.forEach((step, i) => {
   processSteps.value.forEach((step, i) => {
     step.active = i === index
     step.active = i === index
   })
   })
+  // 切换步骤后重新计算装饰线位置
+  calculateLinePosition()
+}
+
+// 组件挂载后计算装饰线位置
+onMounted(() => {
+  calculateLinePosition()
+})
+
+// 监听当前步骤变化，重新计算装饰线位置
+watch(currentStep, () => {
+  calculateLinePosition()
+}, { deep: true })
+
+// 查看更多按钮点击事件
+const viewMore = () => {
+  console.log('查看更多:', currentStep.value.name)
+  // 这里可以添加跳转到详情页面的逻辑
 }
 }
 </script>
 </script>
 
 
@@ -116,20 +236,6 @@ const selectStep = (index) => {
   overflow-x: hidden;
   overflow-x: hidden;
 }
 }
 
 
-/* 全屏背景图 - 海报@2x.png */
-.full-background {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-image: url('@/assets/images/02 西园戒幢律寺三坛大戒法会/海报@2x.png');
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  z-index: -2;
-}
-
 /* 左下角背景装饰图 - bg@2x.png */
 /* 左下角背景装饰图 - bg@2x.png */
 .bottom-left-decoration {
 .bottom-left-decoration {
   position: fixed;
   position: fixed;
@@ -199,6 +305,19 @@ const selectStep = (index) => {
   }
   }
 }
 }
 
 
+/* 法会流程容器 */
+.ceremony-wrapper {
+  position: relative;
+  width: 100vw;
+  min-height: 100vh;
+  background-image: url('/src/assets/images/02 西园戒幢律寺三坛大戒法会/背景@2x.png');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  overflow: hidden;
+}
+
 /* 法会流程模块 */
 /* 法会流程模块 */
 .ceremony-process {
 .ceremony-process {
   width: 100%;
   width: 100%;
@@ -308,8 +427,8 @@ const selectStep = (index) => {
   top: 0.5rem;
   top: 0.5rem;
   left: 50%;
   left: 50%;
   transform: translateX(-50%);
   transform: translateX(-50%);
-  width: 0.5rem;
-  height: 0.5rem;
+  width: 0.45rem;
+  height: 0.45rem;
   background: white;
   background: white;
   border-radius: 50%;
   border-radius: 50%;
   z-index: 3;
   z-index: 3;
@@ -373,8 +492,8 @@ const selectStep = (index) => {
   }
   }
 
 
   .top-circle {
   .top-circle {
-    width: 0.75rem;
-    height: 0.75rem;
+    width: 0.5rem;
+    height: 0.5rem;
   }
   }
 
 
   .bottom-arrow img {
   .bottom-arrow img {
@@ -386,4 +505,171 @@ const selectStep = (index) => {
     gap: 0.125rem;
     gap: 0.125rem;
   }
   }
 }
 }
+
+/* 介绍容器样式 */
+.ceremony-intro {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.intro-container {
+  position: relative;
+  width: 100%;
+  margin: 1rem;
+  border-radius: 1.17rem;
+  border: 0.08rem solid #C1A16A;
+  overflow: hidden;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  aspect-ratio: 28.75 / 16.18;
+}
+
+.intro-container:hover {
+  transform: translateY(-0.125rem);
+  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
+}
+
+/* 背景图片 */
+.intro-background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: url('/src/assets/images/02 西园戒幢律寺三坛大戒法会/截图/全家福3_副本.jpg');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  opacity: 0.8;
+  z-index: 1;
+}
+
+.intro-background::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, rgba(152, 81, 34, 0.75) 0%, rgba(152, 81, 34, 0.45) 30%, rgba(65, 44, 12, 0.15) 70%, transparent 100%);
+  z-index: 2;
+}
+
+/* 步骤标题 */
+.step-title {
+  position: absolute;
+  top: 1.5rem;
+  left: 1.5rem;
+  z-index: 3;
+}
+
+.step-title-text {
+  color: white;
+  font-size: 2rem;
+  font-weight: 700;
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+  text-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.8);
+  letter-spacing: 0.1rem;
+  line-height: 1.2;
+}
+
+/* 装饰线 */
+.decorative-line {
+  position: absolute;
+  left: 2.2rem;
+  width: 0.125rem;
+  border-left: 0.125rem dotted #C1A16A;
+  z-index: 3;
+}
+
+/* 查看更多按钮 */
+.more-button {
+  position: absolute;
+  bottom: 1.5rem;
+  left: 1.5rem;
+  height: 3rem;
+  aspect-ratio: 3 / 1;
+  background-image: url('/src/assets/images/02 西园戒幢律寺三坛大戒法会/button-bg@2x.png');
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 3;
+  transition: all 0.3s ease;
+}
+
+.more-button:hover {
+  transform: scale(1.05);
+  filter: brightness(1.1);
+}
+
+.more-text {
+  color: white;
+  font-size: 0.875rem;
+  font-weight: 600;
+  text-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.5);
+}
+
+/* 步骤描述（隐藏，可用于后续扩展） */
+.step-description {
+  display: none;
+}
+
+/* 响应式设计 */
+@media (max-width: 48rem) {
+  .intro-container {
+    padding: 0.875rem;
+  }
+
+  .step-title-text {
+    font-size: 1.75rem;
+  }
+
+  .decorative-line {
+    /* 响应式下的装饰线样式，位置由JavaScript动态计算 */
+  }
+
+  .more-button {
+    height: 1.75rem;
+  }
+
+  .more-text {
+    font-size: 0.75rem;
+  }
+}
+
+@media (max-width: 30rem) {
+  .intro-container {
+    padding: 0.75rem;
+  }
+
+  .step-title {
+    top: 1rem;
+    left: 1rem;
+  }
+
+  .step-title-text {
+    font-size: 1.5rem;
+  }
+
+  .decorative-line {
+    left: 1.8rem;
+    /* 小屏幕下的装饰线样式，位置由JavaScript动态计算 */
+  }
+
+  .more-button {
+    bottom: 1rem;
+    left: 1rem;
+    height: 1.5rem;
+  }
+
+  .more-text {
+    font-size: 0.7rem;
+  }
+}
 </style>
 </style>