Hooke / stdj_h5

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
e3282581 1 parent d898cc53

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

- 移除全屏背景图，优化页面结构
- 添加法会流程内容展示区域，包含步骤标题和装饰线
- 实现装饰线动态计算位置功能，根据标题和按钮位置自动调整
- 为流程步骤添加详细描述内容
- 优化响应式设计，适配不同屏幕尺寸
Inline Side-by-side
Showing 4 changed files with 314 additions and 28 deletions
<template>
<div class="home-container">
<!-- 全屏背景图 - 海报@2x.png -->
<div class="full-background"></div>
<!-- 左下角背景装饰图 - bg@2x.png -->
<div class="bottom-left-decoration"></div>
......@@ -27,6 +25,8 @@
/>
</div>
<!-- 法会流程容器 -->
<div class="ceremony-wrapper">
<!-- 法会流程 -->
<div class="ceremony-process">
<!-- 标题 -->
......@@ -64,12 +64,39 @@
</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>
</template>
<script setup>
import { ref } from 'vue'
import { ref, computed, nextTick, onMounted, watch } from 'vue'
import VideoPlayer from '@/components/VideoPlayer.vue'
// 视频配置
......@@ -91,20 +118,113 @@ const videoOptions = 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) => {
processSteps.value.forEach((step, i) => {
step.active = i === index
})
// 切换步骤后重新计算装饰线位置
calculateLinePosition()
}
// 组件挂载后计算装饰线位置
onMounted(() => {
calculateLinePosition()
})
// 监听当前步骤变化，重新计算装饰线位置
watch(currentStep, () => {
calculateLinePosition()
}, { deep: true })
// 查看更多按钮点击事件
const viewMore = () => {
console.log('查看更多:', currentStep.value.name)
// 这里可以添加跳转到详情页面的逻辑
}
</script>
......@@ -116,20 +236,6 @@ const selectStep = (index) => {
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 */
.bottom-left-decoration {
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 {
width: 100%;
......@@ -308,8 +427,8 @@ const selectStep = (index) => {
top: 0.5rem;
left: 50%;
transform: translateX(-50%);
width: 0.5rem;
height: 0.5rem;
width: 0.45rem;
height: 0.45rem;
background: white;
border-radius: 50%;
z-index: 3;
......@@ -373,8 +492,8 @@ const selectStep = (index) => {
}
.top-circle {
width: 0.75rem;
height: 0.75rem;
width: 0.5rem;
height: 0.5rem;
}
.bottom-arrow img {
......@@ -386,4 +505,171 @@ const selectStep = (index) => {
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>
......