feat(Home): 添加法会流程组件并实现步骤切换功能

refactor(vite): 修改开发服务器端口为5573
chore: 添加法会相关图片资源

@@ -26,6 +26,44 @@
           :options="videoOptions"
           :options="videoOptions"
         />
         />
       </div>
       </div>
+
+      <!-- 法会流程 -->
+      <div class="ceremony-process">
+        <!-- 标题 -->
+        <div class="ceremony-title">
+          <img src="/src/assets/images/02 西园戒幢律寺三坛大戒法会/法會流程@2x.png" alt="法会流程" />
+        </div>
+
+        <!-- 流程步骤 -->
+        <div class="process-container">
+          <!-- 麻绳背景 -->
+          <div class="rope-background"></div>
+
+          <!-- 流程步骤 -->
+          <div class="process-steps">
+            <div
+            v-for="(step, index) in processSteps"
+            :key="index"
+            class="process-step"
+            :class="{ active: step.active }"
+            @click="selectStep(index)"
+          >
+              <!-- 顶部白色圆形占位（选中状态） -->
+              <div class="top-circle"></div>
+
+              <!-- 步骤内容 -->
+              <div class="step-content">
+                <span class="step-text">{{ step.name }}</span>
+              </div>
+
+              <!-- 底部箭头（选中状态） -->
+              <div v-if="step.active" class="bottom-arrow">
+                <img src="/src/assets/images/02 西园戒幢律寺三坛大戒法会/点@2x.png" alt="选中" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
     </div>
   </div>
   </div>
 </template>
 </template>
@@ -50,6 +88,24 @@ const videoOptions = ref({
     type: 'video/mp4'
     type: 'video/mp4'
   }]
   }]
 })
 })
+
+// 法会流程步骤数据
+const processSteps = ref([
+  { name: '准 备', active: true },
+  { name: '正式开堂', active: false },
+  { name: '封堂洒净', active: false },
+  { name: '正授沙弥戒', active: false },
+  { name: '二坛比丘戒', active: false },
+  { name: '三坛菩萨戒', active: false },
+  { name: '圆 满', active: false }
+])
+
+// 点击切换步骤状态
+const selectStep = (index) => {
+  processSteps.value.forEach((step, i) => {
+    step.active = i === index
+  })
+}
 </script>
 </script>
 
 
 <style scoped>
 <style scoped>
@@ -142,4 +198,192 @@ const videoOptions = ref({
     height: 35%;
     height: 35%;
   }
   }
 }
 }
+
+/* 法会流程模块 */
+.ceremony-process {
+  width: 100%;
+  padding: 2rem 1rem;
+  position: relative;
+  z-index: 2;
+}
+
+/* 标题部分 */
+.ceremony-title {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 2rem;
+}
+
+.ceremony-title img {
+  max-width: 12rem;
+  height: auto;
+}
+
+/* 流程容器 */
+.process-container {
+  position: relative;
+  width: 100%;
+}
+
+/* 麻绳背景 */
+.rope-background {
+  position: absolute;
+  top: 10%;
+  left: 0;
+  right: 0;
+  height: 0.3rem;
+  background-image: url('@/assets/images/02 西园戒幢律寺三坛大戒法会/麻绳@2x.png');
+  background-size: cover;
+  background-position: top;
+  background-repeat: repeat-x;
+  transform: translateY(-10%);
+  z-index: 1;
+}
+
+/* 流程步骤容器 */
+.process-steps {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+  z-index: 2;
+  padding: 0 0.5rem;
+  gap: 0.5rem;
+}
+
+/* 单个流程步骤 */
+.process-step {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+  cursor: pointer;
+  transition: transform 0.2s ease;
+}
+
+.process-step:hover {
+  transform: scale(1.05);
+}
+
+/* 步骤内容 */
+.step-content {
+  width: 4rem;
+  height: 10rem;
+  background: linear-gradient(180deg, #DAC39E 0%, #BE9C63 100%);
+  border-radius: 0.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  transition: all 0.3s ease;
+  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
+}
+
+/* 选中状态的步骤内容 */
+.process-step.active .step-content {
+  background: linear-gradient(180deg, #C8916C 0%, #975021 100%);
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
+}
+
+/* 步骤文字 */
+.step-text {
+  color: white;
+  font-size: 1rem;
+  font-weight: 600;
+  text-align: center;
+  line-height: 1.3;
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+  text-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
+  margin-top: 0.85rem;
+  /* 文字间隔 */
+  letter-spacing: 0.05rem;
+}
+
+/* 顶部白色圆形占位 */
+.top-circle {
+  position: absolute;
+  top: 0.5rem;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 0.5rem;
+  height: 0.5rem;
+  background: white;
+  border-radius: 50%;
+  z-index: 3;
+}
+
+/* 底部箭头 */
+.bottom-arrow {
+  position: absolute;
+  bottom: -1.25rem;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 3;
+}
+
+.bottom-arrow img {
+  width: 1rem;
+  height: 1rem;
+}
+
+/* 响应式调整 */
+@media (max-width: 48rem) {
+  .ceremony-process {
+    padding: 1.5rem 0.5rem;
+  }
+
+  .ceremony-title img {
+    max-width: 10rem;
+  }
+
+  .step-content {
+    width: 3rem;
+    height: 8rem;
+  }
+
+  .step-text {
+    font-size: 0.9rem;
+  }
+
+  .process-steps {
+    padding: 0 0.25rem;
+    gap: 0.25rem;
+  }
+}
+
+@media (max-width: 30rem) {
+  .ceremony-process {
+    padding: 1rem 0.25rem;
+  }
+
+  .ceremony-title img {
+    max-width: 8rem;
+  }
+
+  .step-content {
+    width: 2.5rem;
+    height: 6.5rem;
+  }
+
+  .step-text {
+    font-size: 0.8rem;
+  }
+
+  .top-circle {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+
+  .bottom-arrow img {
+    width: 1rem;
+    height: 0.75rem;
+  }
+
+  .process-steps {
+    gap: 0.125rem;
+  }
+}
 </style>
 </style>

 /*
 /*
  * @Date: 2025-10-30 10:27:43
  * @Date: 2025-10-30 10:27:43
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-10-30 13:55:18
+ * @LastEditTime: 2025-10-30 15:24:36
  * @FilePath: /stdj_h5/vite.config.js
  * @FilePath: /stdj_h5/vite.config.js
  * @Description: 文件描述
  * @Description: 文件描述
  */
  */
@@ -66,7 +66,7 @@ export default defineConfig({
   },
   },
   server: {
   server: {
     host: '0.0.0.0',
     host: '0.0.0.0',
-    port: 5173,
+    port: 5573,
     open: true,
     open: true,
     proxy: {
     proxy: {
       '/api': {
       '/api': {