feat(首页): 添加三师七证模块及响应式设计

添加三师七证模块，包含三个栏目(三师七证、戒子、义工)及其交互功能
实现模块的响应式布局，适配不同屏幕尺寸
优化现有样式和查看更多按钮功能

@@ -91,6 +91,56 @@
           </div>
           </div>
         </div>
         </div>
       </div>
       </div>
+
+      <!-- 三师七证 -->
+      <div class="three-masters-section">
+        <!-- 标题图片 -->
+        <div class="common-title">
+          <img src="/src/assets/images/02 西园戒幢律寺三坛大戒法会/三師七證@2x.png" alt="三师七证" class="title-image">
+        </div>
+
+        <!-- 三个栏目 -->
+        <div class="three-columns">
+          <!-- 三师七证栏目 -->
+          <div class="column-item">
+            <div class="column-content">
+              <div class="column-overlay"></div>
+              <div class="column-text">
+                <h3 class="column-title">三師七證</h3>
+                <div class="more-button" @click="viewMore('masters')">
+                  <span class="more-text">查看更多</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 戒子栏目 -->
+          <div class="column-item">
+            <div class="column-content">
+              <div class="column-overlay"></div>
+              <div class="column-text">
+                <h3 class="column-title">戒子</h3>
+                <div class="more-button" @click="viewMore('students')">
+                  <span class="more-text">查看更多</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 义工栏目 -->
+          <div class="column-item">
+            <div class="column-content">
+              <div class="column-overlay"></div>
+              <div class="column-text">
+                <h3 class="column-title">义工</h3>
+                <div class="more-button" @click="viewMore('volunteers')">
+                  <span class="more-text">查看更多</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
     </div>
   </div>
   </div>
 </template>
 </template>
@@ -222,9 +272,29 @@ watch(currentStep, () => {
 }, { deep: true })
 }, { deep: true })
 
 
 // 查看更多按钮点击事件
 // 查看更多按钮点击事件
-const viewMore = () => {
-  console.log('查看更多:', currentStep.value.name)
-  // 这里可以添加跳转到详情页面的逻辑
+const viewMore = (type) => {
+  if (type) {
+    // 三师七证模块的点击事件
+    console.log('查看更多:', type)
+    switch (type) {
+      case 'masters':
+        console.log('跳转到三师七证页面')
+        // 这里可以添加跳转到三师七证页面的逻辑
+        break
+      case 'students':
+        console.log('跳转到戒子页面')
+        // 这里可以添加跳转到戒子页面的逻辑
+        break
+      case 'volunteers':
+        console.log('跳转到义工页面')
+        // 这里可以添加跳转到义工页面的逻辑
+        break
+    }
+  } else {
+    // 原有的法会流程查看更多
+    console.log('查看更多:', currentStep.value.name)
+    // 这里可以添加跳转到详情页面的逻辑
+  }
 }
 }
 </script>
 </script>
 
 
@@ -291,6 +361,298 @@ const viewMore = () => {
 }
 }
 
 
 /* 响应式设计 */
 /* 响应式设计 */
+@media (max-width: 768px) {
+  .ceremony-process {
+    padding: 2rem 1rem;
+  }
+
+  .ceremony-intro {
+    padding: 1.5rem;
+  }
+
+  .ceremony-title {
+    font-size: 1.5rem;
+  }
+
+  .ceremony-subtitle {
+    font-size: 0.875rem;
+  }
+
+  .ceremony-description {
+    font-size: 0.875rem;
+  }
+
+  .process-steps {
+    gap: 1rem;
+  }
+
+  .step-item {
+    height: 15rem;
+  }
+
+  .step-title-text {
+    font-size: 2rem; /* 从1.5rem调整为2rem */
+  }
+
+  .more-button {
+    height: 2.5rem;
+  }
+
+  .more-text {
+    font-size: 0.75rem;
+  }
+}
+
+/* 三师七证模块样式 */
+.three-masters-section {
+  padding: 2rem 1rem;
+  background: #E5DAC2;
+}
+
+/* 通用标题样式 */
+.common-title {
+  text-align: center;
+  margin-bottom: 2rem;
+}
+
+.common-title img {
+  max-width: 15rem; /* 比原来的12rem更大 */
+  height: auto;
+}
+
+/* 标题图片样式 - 保持向下兼容 */
+.section-title {
+  text-align: center;
+  margin-bottom: 2rem;
+}
+
+.title-image {
+  max-width: 15rem; /* 调整为更大的尺寸 */
+  height: auto;
+}
+
+/* 三个栏目容器 */
+.three-columns {
+  display: flex !important;
+  flex-direction: row !important;
+  gap: 1rem;
+  justify-content: space-between;
+  align-items: stretch;
+}
+
+/* 强制桌面端水平布局 */
+@media (min-width: 481px) {
+  .three-columns {
+    display: flex !important;
+    flex-direction: row !important;
+  }
+}
+
+/* 单个栏目样式 */
+.column-item {
+  flex: 1;
+  min-height: 20rem;
+  height: 20rem;
+}
+
+.column-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 20rem;
+  border-radius: 1.17rem;
+  border: 0.08rem solid #C1A16A;
+  background-image: url('/src/assets/images/02 西园戒幢律寺三坛大戒法会/截图/全家福3_副本.jpg');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  overflow: hidden;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.column-content:hover {
+  transform: translateY(-0.25rem);
+  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
+}
+
+/* 蒙版效果 */
+.column-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(to bottom, transparent 0%, rgba(152, 81, 34, 0.3) 50%, rgba(152, 81, 34, 0.8) 100%);
+  z-index: 1;
+}
+
+/* 栏目文字内容 */
+.column-text {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 1.5rem;
+  z-index: 2;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.column-title {
+  color: white;
+  font-size: 1.25rem;
+  font-weight: 700;
+  margin-bottom: 1rem;
+  text-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.8);
+  width: 100%;
+  text-align: center;
+}
+
+/* 栏目内的查看更多按钮 */
+.column-text .more-button {
+  position: static;
+  margin: 0 auto;
+  height: 2.5rem;
+  width: 6rem;
+  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;
+}
+
+.column-text .more-button:hover {
+  transform: scale(1.05);
+  filter: brightness(1.1);
+}
+
+.column-text .more-text {
+  color: white;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.5);
+}
+
+/* 三师七证模块响应式设计 */
+
+/* 大屏幕 (>1200px) */
+@media (min-width: 1200px) {
+  .column-title {
+    font-size: 1.5rem;
+  }
+
+  .column-text .more-text {
+    font-size: 0.875rem;
+  }
+
+  .column-text .more-button {
+    height: 3rem;
+    width: 7rem;
+  }
+}
+
+/* 中等屏幕 (768px - 1199px) */
+@media (min-width: 768px) and (max-width: 1199px) {
+  .column-title {
+    font-size: 1.25rem;
+  }
+
+  .column-text .more-text {
+    font-size: 0.75rem;
+  }
+
+  .column-text .more-button {
+    height: 2.5rem;
+    width: 6rem;
+  }
+}
+
+/* 小屏幕 (481px - 767px) */
+@media (min-width: 481px) and (max-width: 767px) {
+  .column-title {
+    font-size: 1.125rem;
+  }
+
+  .column-text .more-text {
+    font-size: 0.6875rem;
+  }
+
+  .column-text .more-button {
+    height: 2.25rem;
+    width: 5.5rem;
+  }
+
+  .column-text {
+    padding: 1.25rem;
+  }
+}
+
+/* 超小屏幕 (321px - 480px) */
+@media (min-width: 321px) and (max-width: 480px) {
+  .column-title {
+    font-size: 1rem;
+  }
+
+  .column-text .more-text {
+    font-size: 0.625rem;
+  }
+
+  .column-text .more-button {
+    height: 2rem;
+    width: 5rem;
+  }
+
+  .column-text {
+    padding: 1rem;
+  }
+}
+
+/* 三师七证模块响应式设计 - 只在很小的屏幕上使用垂直布局 */
+@media (max-width: 320px) {
+  .three-masters-section {
+    padding: 2rem 1rem;
+  }
+
+  .three-columns {
+    flex-direction: column !important;
+    gap: 1rem;
+  }
+
+  .column-item {
+    min-height: 15rem;
+    height: 15rem;
+  }
+
+  .title-image {
+    max-width: 10rem; /* 从8rem调整为10rem */
+  }
+
+  .column-title {
+    font-size: 0.875rem;
+  }
+
+  .column-text .more-text {
+    font-size: 0.5rem;
+  }
+
+  .column-text .more-button {
+    height: 1.75rem;
+    width: 4.5rem;
+  }
+
+  .column-text {
+    padding: 0.75rem;
+  }
+}
 @media (max-width: 48rem) {
 @media (max-width: 48rem) {
   .bottom-left-decoration {
   .bottom-left-decoration {
     width: 60%;
     width: 60%;
@@ -309,7 +671,6 @@ const viewMore = () => {
 .ceremony-wrapper {
 .ceremony-wrapper {
   position: relative;
   position: relative;
   width: 100vw;
   width: 100vw;
-  min-height: 100vh;
   background-image: url('/src/assets/images/02 西园戒幢律寺三坛大戒法会/背景@2x.png');
   background-image: url('/src/assets/images/02 西园戒幢律寺三坛大戒法会/背景@2x.png');
   background-size: cover;
   background-size: cover;
   background-position: center;
   background-position: center;
@@ -451,13 +812,20 @@ const viewMore = () => {
 /* 响应式调整 */
 /* 响应式调整 */
 @media (max-width: 48rem) {
 @media (max-width: 48rem) {
   .ceremony-process {
   .ceremony-process {
-    padding: 1.5rem 0.5rem;
+    padding: 2.5rem 0.5rem;
   }
   }
 
 
-  .ceremony-title img {
-    max-width: 10rem;
+.ceremony-title img {
+    max-width: 12.5rem; /* 从10rem调整为12.5rem */
+  }
+
+  .title-image {
+    max-width: 12.5rem; /* 从10rem调整为12.5rem */
   }
   }
 
 
+  .common-title img {
+    max-width: 12.5rem;
+  }
   .step-content {
   .step-content {
     width: 3rem;
     width: 3rem;
     height: 8rem;
     height: 8rem;
@@ -475,13 +843,20 @@ const viewMore = () => {
 
 
 @media (max-width: 30rem) {
 @media (max-width: 30rem) {
   .ceremony-process {
   .ceremony-process {
-    padding: 1rem 0.25rem;
+    padding: 2rem 0.25rem;
+  }
+
+.ceremony-title img {
+    max-width: 10rem; /* 从8rem调整为10rem */
   }
   }
 
 
-  .ceremony-title img {
-    max-width: 8rem;
+  .title-image {
+    max-width: 10rem; /* 从8rem调整为10rem */
   }
   }
 
 
+  .common-title img {
+    max-width: 10rem;
+  }
   .step-content {
   .step-content {
     width: 2.5rem;
     width: 2.5rem;
     height: 6.5rem;
     height: 6.5rem;
@@ -566,7 +941,7 @@ const viewMore = () => {
 
 
 .step-title-text {
 .step-title-text {
   color: white;
   color: white;
-  font-size: 2rem;
+  font-size: 2.5rem; /* 从2rem调整为2.5rem，更大 */
   font-weight: 700;
   font-weight: 700;
   writing-mode: vertical-rl;
   writing-mode: vertical-rl;
   text-orientation: mixed;
   text-orientation: mixed;
@@ -627,11 +1002,7 @@ const viewMore = () => {
   }
   }
 
 
   .step-title-text {
   .step-title-text {
-    font-size: 1.75rem;
-  }
-
-  .decorative-line {
-    /* 响应式下的装饰线样式，位置由JavaScript动态计算 */
+    font-size: 2.25rem; /* 从1.75rem调整为2.25rem */
   }
   }
 
 
   .more-button {
   .more-button {