Hooke / stdj_h5

Go to a project
Toggle navigation Toggle navigation pinning
You need to sign in or sign up before continuing.
hookehuyr
94c2d551 1 parent bad7006f

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

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

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Inline Side-by-side
Showing 3 changed files with 156 additions and 23 deletions
......@@ -45,3 +45,5 @@ coverage/
stdj
dist.tar.gz
工单/
......
/*
* @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));
......
......@@ -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 '法会流程':
// 跳转页面
if (currentStep.value?.category_link) {
location.href = currentStep.value?.category_link;
} else {
// 提示用户没有详情页
showToast('该法会流程没有跳转链接')
}
// 使用 parent_sn 作为 id 跳转到新闻详情页
router.push({ name: 'NewsDetail', params: { id: item.parent_sn || item.id } })
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>
......