Hooke / stdj_h5

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
37693a05 1 parent e3282581

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

添加三师七证模块，包含三个栏目(三师七证、戒子、义工)及其交互功能
实现模块的响应式布局，适配不同屏幕尺寸
优化现有样式和查看更多按钮功能
Inline Side-by-side
Showing 2 changed files with 385 additions and 14 deletions
......@@ -91,6 +91,56 @@
</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>
</template>
......@@ -222,9 +272,29 @@ watch(currentStep, () => {
}, { deep: true })
// 查看更多按钮点击事件
const viewMore = () => {
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>
......@@ -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) {
.bottom-left-decoration {
width: 60%;
......@@ -309,7 +671,6 @@ const viewMore = () => {
.ceremony-wrapper {
position: relative;
width: 100vw;
min-height: 100vh;
background-image: url('/src/assets/images/02 西园戒幢律寺三坛大戒法会/背景@2x.png');
background-size: cover;
background-position: center;
......@@ -451,13 +812,20 @@ const viewMore = () => {
/* 响应式调整 */
@media (max-width: 48rem) {
.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 {
width: 3rem;
height: 8rem;
......@@ -475,13 +843,20 @@ const viewMore = () => {
@media (max-width: 30rem) {
.ceremony-process {
padding: 1rem 0.25rem;
padding: 2rem 0.25rem;
}
.ceremony-title img {
max-width: 8rem;
.ceremony-title img {
max-width: 10rem; /* 从8rem调整为10rem */
}
.title-image {
max-width: 10rem; /* 从8rem调整为10rem */
}
.common-title img {
max-width: 10rem;
}
.step-content {
width: 2.5rem;
height: 6.5rem;
......@@ -566,7 +941,7 @@ const viewMore = () => {
.step-title-text {
color: white;
font-size: 2rem;
font-size: 2.5rem; /* 从2rem调整为2.5rem，更大 */
font-weight: 700;
writing-mode: vertical-rl;
text-orientation: mixed;
......@@ -627,11 +1002,7 @@ const viewMore = () => {
}
.step-title-text {
font-size: 1.75rem;
}
.decorative-line {
/* 响应式下的装饰线样式，位置由JavaScript动态计算 */
font-size: 2.25rem; /* 从1.75rem调整为2.25rem */
}
.more-button {
......