feat(首页): 新增三坛大戒模块并优化命名

- 新增三坛大戒模块展示（垂直布局） - 将"三师七证"更名为"临坛十师"（更符合佛教规范） - 优化法会流程跳转逻辑（使用 parent_sn 跳转） - 更新 API 文档注释（新增三坛大戒字段说明） - 添加工单目录到 .gitignore Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

feat(首页): 新增三坛大戒模块并优化命名
- 新增三坛大戒模块展示（垂直布局） - 将"三师七证"更名为"临坛十师"（更符合佛教规范） - 优化法会流程跳转逻辑（使用 parent_sn 跳转） - 更新 API 文档注释（新增三坛大戒字段说明） - 添加工单目录到 .gitignore Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
hookehuyr
Commit 94c2d55115464172a745c0d75cc8421b7a6201c7 94c2d551 1 parent bad7006f
Showing 3 changed files with 156 additions and 23 deletions
.gitignore
src/api/index.js
src/views/Home.vue
--- a/.gitignore
View file @94c2d55
+++ b/.gitignore
View file @94c2d55
@@ -45,3 +45,5 @@ coverage/
 stdj
 dist.tar.gz
+
+工单/
--- a/src/api/index.js
View file @94c2d55
+++ b/src/api/index.js
View file @94c2d55
 /*
  * @Date: 2023-08-24 09:42:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-11-12 14:53:22
+ * @LastEditTime: 2026-03-06 11:41:04
  * @FilePath: /stdj_h5/src/api/index.js
  * @Description: 文件描述
  */
@@ -16,23 +16,40 @@ const Api = {
 };
 /**
- * @description: 首页数据
+ * @description: 首页数据, 接口里面给的STDJ字段忽略掉, 后端说不知道怎么出来的.
  * @returns {Object} list
- * @property [Object] list.STDJSSQZ 三师七证
+ * @property [Object] list.STDJSSQZ 临坛十师
  * @property integer list.STDJSSQZ.id 分类id
  * @property string list.STDJSSQZ.category_name 分类名称
  * @property string list.STDJSSQZ.cover 封面图
- * @property string list.STDJSSQZ.parent_sn 父分类id
+ * @property string list.STDJSSQZ.parent_sn 父级sn
+ * @property string list.STDJSSQZ.category_sn 当前sn
  * @property [Object] list.STDJFHLC 法会流程
  * @property integer list.STDJFHLC.id 分类id
  * @property string list.STDJFHLC.category_name 分类名称
  * @property string list.STDJFHLC.cover 封面图
- * @property string list.STDJFHLC.parent_sn 父分类id
+ * @property string list.STDJFHLC.category_link 分类链接
+ * @property string list.STDJFHLC.parent_sn 父级sn
+ * @property string list.STDJFHLC.category_sn 当前sn
+ * @property [Object] list.STDJFHLC.articles 文章列表
+ * @property integer list.STDJFHLC.articles.id 文章id
+ * @property string list.STDJFHLC.articles.post_title 文章标题
  * @property [Object] list.STDJXGXW 新闻
  * @property integer list.STDJXGXW.id 分类id
  * @property string list.STDJXGXW.post_title 新闻标题
  * @property string list.STDJXGXW.post_date 发布日期
  * @property string list.STDJXGXW.photo 封面图
+ * @property string list.STDJXGXW.post_link 文章链接
+ * @property [Object] list.STDJXQ 三坛大戒
+ * @property integer list.STDJXQ.id 分类id
+ * @property string list.STDJXQ.category_name 分类名称
+ * @property string list.STDJXQ.category_link 分类链接
+ * @property string list.STDJXQ.cover 封面图
+ * @property string list.STDJXQ.parent_sn 父级sn
+ * @property string list.STDJXQ.category_sn 当前sn
+ * @property [Object] list.STDJXQ.articles 文章列表
+ * @property integer list.STDJXQ.articles.id 文章id
+ * @property string list.STDJXQ.articles.post_title 文章标题
  */
 export const homePageAPI = (params) => fn(fetch.get(Api.GET_HOME, params));
--- a/src/views/Home.vue
View file @94c2d55
+++ b/src/views/Home.vue
View file @94c2d55
@@ -90,23 +90,48 @@
             <div class="decorative-line" :style="decorativeLineStyle"></div>
             <!-- 查看更多按钮 -->
-            <div class="more-button" @click="viewMore('法会流程')">
+            <div class="more-button" @click="viewMore('法会流程', currentStep)">
               <span class="more-text">查看更多</span>
             </div>
           </div>
         </div>
       </div>
-      <!-- 三师七证 -->
+
+      <!-- 三坛大戒 -->
+      <div class="three-masters-section">
+        <!-- 标题图片 -->
+        <div class="common-title">
+          <img src="https://cdn.ipadbiz.cn/stdj/images/home/%E4%B8%89%E5%9D%9B%E5%A4%A7%E6%88%92@2x.png" alt="三坛大戒" class="title-image">
+        </div>
+
+        <!-- 三个栏目 -->
+        <div class="vertical-masters-list">
+          <!-- 三坛大戒栏目 -->
+          <div class="vertical-item" v-for="(item, index) in threeMastersList" :key="index">
+            <div class="vertical-content" :style="{ backgroundImage: `url(${item.cover + '?imageMogr2/thumbnail/400x/strip/quality/70'})` }">
+              <div class="vertical-overlay"></div>
+              <div class="vertical-text">
+                <h3 class="vertical-title">{{ item.name }}</h3>
+                <div class="vertical-more-btn" @click="viewMore(item.name, item)">
+                  <span class="more-text">查看更多</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 临坛十师 -->
       <div class="three-masters-section">
         <!-- 标题图片 -->
         <div class="common-title">
-          <img src="https://cdn.ipadbiz.cn/stdj/images/home/%E4%B8%89%E5%B8%AB%E4%B8%83%E8%AD%89@2x.png" alt="三师七证" class="title-image">
+          <img src="https://cdn.ipadbiz.cn/stdj/images/home/%E4%B8%B4%E5%9D%9B%E5%8D%81%E5%B8%88@2x.png" alt="临坛十师" class="title-image">
         </div>
         <!-- 三个栏目 -->
         <div class="three-columns">
-          <!-- 三师七证栏目 -->
+          <!-- 临坛十师栏目 -->
           <div class="column-item" v-for="(item, index) in mastersList" :key="index">
             <div class="column-content" :style="{ backgroundImage: `url(${item.cover + '?imageMogr2/thumbnail/100x/strip/quality/70'})` }">
               <div class="column-overlay"></div>
@@ -357,7 +382,9 @@ const scrollToPage = (pageIndex) => {
   container.scrollTo({ left: pageIndex * pageWidth, behavior: 'smooth' })
 }
-// 三师七证数据列表
+// 三坛大戒数据列表
+const threeMastersList = ref([])
+// 临坛十师数据列表
 const mastersList = ref([])
 // 组件挂载后计算装饰线位置
@@ -393,9 +420,19 @@ onMounted(async () => {
     processSteps.value[0].active = true;
     // 首次默认选中，立即显示箭头，避免首次点击前不显示
     arrow_visible.value = true;
-    // 三师七证
+    // 三坛大戒
+    threeMastersList.value = list?.STDJXQ?.map(item => ({
+      id: item.id,
+      category_sn: item.category_sn,
+      parent_sn: item.parent_sn,
+      name: item.category_name,
+      cover: item.cover || '',
+      category_link: item.category_link || '',
+    })) || [];
+    // 临坛十师
     mastersList.value = list?.STDJSSQZ?.map(item => ({
       id: item.id,
+      category_sn: item.category_sn,
       parent_sn: item.parent_sn,
       name: item.category_name,
       cover: item.cover || '',
@@ -446,16 +483,11 @@ watch(currentStep, () => {
 const viewMore = (type, item) => {
   switch (type) {
     case '法会流程':
-      // 跳转页面
+      // 使用 parent_sn 作为 id 跳转到新闻详情页
-      if (currentStep.value?.category_link) {
+      router.push({ name: 'NewsDetail', params: { id: item.parent_sn || item.id } })
-        location.href = currentStep.value?.category_link;
-      } else {
-        // 提示用户没有详情页
-        showToast('该法会流程没有跳转链接')
-      }
       break
-    case '三师七证':
+    case '临坛十师':
-      // 跳转到三师七证页面的逻辑
+      // 跳转到临坛十师页面的逻辑
       if (item?.category_link) {
         location.href = item?.category_link;
       } else {
@@ -748,7 +780,7 @@ const handlePhotoClick = () => {
   }
 }
-/* 三师七证模块样式 */
+/* 临坛十师模块样式 */
 .three-masters-section {
   padding: 2rem 1rem;
   background: #E5DAC2;
@@ -932,7 +964,7 @@ const handlePhotoClick = () => {
   text-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.5);
 }
-/* 三师七证模块响应式设计 */
+/* 临坛十师模块响应式设计 */
 /* 大屏幕 (>1200px) */
 @media (min-width: 1200px) {
@@ -1006,7 +1038,7 @@ const handlePhotoClick = () => {
   }
 }
-/* 三师七证模块响应式设计 - 只在很小的屏幕上使用垂直布局 */
+/* 临坛十师模块响应式设计 - 只在很小的屏幕上使用垂直布局 */
 @media (max-width: 320px) {
   .three-masters-section {
     padding: 2rem 1rem;
@@ -1737,4 +1769,86 @@ const handlePhotoClick = () => {
     font-size: 0.75rem;
   }
 }
+
+/* 新增垂直列表样式 - 三坛大戒 */
+.vertical-masters-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.vertical-item {
+  width: 100%;
+  height: 9rem; /* 约144px，高度适中 */
+}
+
+.vertical-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border-radius: 1rem;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  overflow: hidden;
+  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
+  border: 0.08rem solid #C1A16A; /* 保持与原有风格一致的边框颜色 */
+}
+
+.vertical-overlay {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 70%; /* 覆盖下半部分 */
+  background: linear-gradient(to top, rgba(152, 81, 34, 0.95) 0%, rgba(152, 81, 34, 0.5) 60%, transparent 100%);
+  z-index: 1;
+  pointer-events: none;
+}
+
+.vertical-text {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 0 1.25rem;
+  height: 3.5rem; /* 固定高度区域 */
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  z-index: 2;
+}
+
+.vertical-title {
+  color: white;
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin: 0;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+  letter-spacing: 0.05rem;
+}
+
+.vertical-more-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.35rem 1rem;
+  border: 1px solid rgba(255, 255, 255, 0.9);
+  border-radius: 1.5rem;
+  background-color: rgba(0, 0, 0, 0.15);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.vertical-more-btn:active {
+  background-color: rgba(0, 0, 0, 0.3);
+  transform: scale(0.98);
+}
+
+.vertical-more-btn .more-text {
+  color: white;
+  font-size: 0.85rem;
+  font-weight: 500;
+  line-height: 1;
+}
 </style>