Hooke / stdj_h5

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
d22d3338 1 parent ffcc90e0

feat: 重构首页并迁移静态资源到CDN 

- 将本地静态图片资源迁移到CDN服务器
- 重构首页组件，使用动态数据替代硬编码
- 优化法会流程、三师七证和新闻模块的数据处理
- 修复样式问题和添加新功能交互
Inline Side-by-side
Showing 4 changed files with 79 additions and 153 deletions
......@@ -357,7 +357,7 @@ defineExpose({
left: 0;
width: 100%;
height: 100%;
background-image: url('@/assets/images/02 西园戒幢律寺三坛大戒法会/视频@2x.png');
background-image: url('https://cdn.ipadbiz.cn/stdj/images/home/%E8%A7%86%E9%A2%91@2x.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
......
......@@ -48,4 +48,4 @@ html, body {
.content-container {
padding: 16px;
}
\ No newline at end of file
}
......
......@@ -6,7 +6,7 @@
<!-- 顶部Banner图片 -->
<div class="banner-section">
<img
src="@/assets/images/02 西园戒幢律寺三坛大戒法会/banner@2x.png"
src="https://cdn.ipadbiz.cn/stdj/images/home/banner@2x.png"
alt="三坛大戒法会Banner"
class="banner-image"
/>
......@@ -28,7 +28,7 @@
<div class="ceremony-process">
<!-- 标题 -->
<div class="ceremony-title">
<img src="/src/assets/images/02 西园戒幢律寺三坛大戒法会/法會流程@2x.png" alt="法会流程" />
<img src="https://cdn.ipadbiz.cn/stdj/images/home/%E6%B3%95%E6%9C%83%E6%B5%81%E7%A8%8B@2x.png" alt="法会流程" />
</div>
<!-- 流程步骤 -->
......@@ -55,7 +55,7 @@
<!-- 底部箭头（选中状态） -->
<div v-if="step.active" class="bottom-arrow">
<img src="/src/assets/images/02 西园戒幢律寺三坛大戒法会/点@2x.png" alt="选中" />
<img src="https://cdn.ipadbiz.cn/stdj/images/home/%E7%82%B9@2x.png" alt="选中" />
</div>
</div>
</div>
......@@ -63,10 +63,10 @@
</div>
<!-- 法会流程内容 -->
<div class="ceremony-intro">
<div v-if="currentStep" class="ceremony-intro">
<div class="intro-container">
<!-- 背景图片 -->
<div class="intro-background"></div>
<div class="intro-background" :style="{ backgroundImage: `url(${currentStep?.cover})` }"></div>
<!-- 步骤标题 -->
<div class="step-title" ref="stepTitleRef">
......@@ -77,14 +77,9 @@
<div class="decorative-line" :style="decorativeLineStyle"></div>
<!-- 查看更多按钮 -->
<div class="more-button" @click="viewMore">
<div class="more-button" @click="viewMore('法会流程')">
<span class="more-text">查看更多</span>
</div>
<!-- 步骤描述（可选显示） -->
<div class="step-description">
<p>{{ currentStep.description }}</p>
</div>
</div>
</div>
</div>
......@@ -93,44 +88,18 @@
<div class="three-masters-section">
<!-- 标题图片 -->
<div class="common-title">
<img src="/src/assets/images/02 西园戒幢律寺三坛大戒法会/三師七證@2x.png" alt="三师七证" class="title-image">
<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">
</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-item" v-for="(item, index) in mastersList" :key="index">
<div class="column-content" :style="{ backgroundImage: `url(${item.cover})` }">
<div class="column-overlay"></div>
<div class="column-text">
<h3 class="column-title">义工</h3>
<div class="more-button" @click="viewMore('volunteers')">
<h3 class="column-title">{{ item.name }}</h3>
<div class="more-button" @click="viewMore(item.name)">
<span class="more-text">查看更多</span>
</div>
</div>
......@@ -143,7 +112,7 @@
<div class="news-section">
<!-- 标题 -->
<div class="common-title">
<img src="/src/assets/images/02 西园戒幢律寺三坛大戒法会/相关新聞@2x.png" alt="相关新闻" class="title-image">
<img src="https://cdn.ipadbiz.cn/stdj/images/home/%E7%9B%B8%E5%85%B3%E6%96%B0%E8%81%9E@2x.png" alt="相关新闻" class="title-image">
</div>
<!-- 轮播容器 -->
......@@ -164,14 +133,14 @@
<div class="carousel-nav">
<img
class="nav-btn prev-btn"
src="/src/assets/images/02 西园戒幢律寺三坛大戒法会/上@2x.png"
src="https://cdn.ipadbiz.cn/stdj/images/home/%E4%B8%8A@2x.png"
alt="上一张"
@click="prevSlide"
:class="{ disabled: currentSlide === 0 }"
>
<img
class="nav-btn next-btn"
src="/src/assets/images/02 西园戒幢律寺三坛大戒法会/下@2x.png"
src="https://cdn.ipadbiz.cn/stdj/images/home/%E4%B8%8B@2x.png"
alt="下一张"
@click="nextSlide"
:class="{ disabled: isTransitioning }"
......@@ -215,43 +184,7 @@ const videoOptions = ref({
})
// 法会流程步骤数据
const processSteps = ref([
{
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 processSteps = ref([])
// 获取当前选中的步骤
const currentStep = computed(() => {
......@@ -309,13 +242,39 @@ const selectStep = (index) => {
calculateLinePosition()
}
// 三师七证数据列表
const mastersList = ref([])
// 组件挂载后计算装饰线位置
onMounted(async () => {
await calculateLinePosition();
// 调用接口获取首页数据
const { code, list } = await homePageAPI();
if (code) {
console.warn(list);
// 法会流程
processSteps.value = list?.STDJFHLC?.map(item => ({
id: item.id,
parent_sn: item.parent_sn,
name: item.category_name,
cover: item.cover || '',
active: false,
})) || [];
processSteps.value[0].active = true;
// 三师七证
mastersList.value = list?.STDJSSQZ?.map(item => ({
id: item.id,
parent_sn: item.parent_sn,
name: item.category_name,
cover: item.cover || '',
})) || [];
// 相关新闻
newsItems.value = list?.STDJXGXW?.map(item => ({
id: item.id,
parent_sn: item.parent_sn,
title: item.post_title,
date: item.post_date,
image: item.photo || '',
})) || [];
}
})
......@@ -326,30 +285,22 @@ watch(currentStep, () => {
// 查看更多按钮点击事件
const viewMore = (type) => {
if (type) {
// 三师七证模块的点击事件
console.log('查看更多:', type)
switch (type) {
case 'masters':
console.log('跳转到三师七证页面')
// 这里可以添加跳转到三师七证页面的逻辑
router.push('/masters')
break
case 'students':
console.log('跳转到戒子页面')
// 这里可以添加跳转到戒子页面的逻辑
router.push('/students')
break
case 'volunteers':
console.log('跳转到义工页面')
// 这里可以添加跳转到义工页面的逻辑
router.push('/volunteers')
break
}
} else {
// 原有的法会流程查看更多
console.log('查看更多:', currentStep.value.name)
// 这里可以添加跳转到详情页面的逻辑
switch (type) {
case '法会流程':
console.log('法会流程', currentStep.value);
break
case '三师七证':
// 跳转到三师七证页面的逻辑
router.push('/masters')
break
case '戒子':
// 跳转到戒子页面的逻辑
router.push('/students')
break
case '义工':
// 跳转到义工页面的逻辑
router.push('/volunteers')
break
}
}
......@@ -360,37 +311,11 @@ const isTransitioning = ref(false)
const hasTailClone = ref(false)
// 新闻数据
const newsItems = ref([
{
image: '/src/assets/images/02 西园戒幢律寺三坛大戒法会/截图/全家福3_副本.jpg',
title: '三坛大戒 | 护戒胜福田 成就最上因',
date: '2025-10-01'
},
{
image: '/src/assets/images/02 西园戒幢律寺三坛大戒法会/截图/全家福3_副本.jpg',
title: '西园戒幢律寺三坛大戒法会圆满举行',
date: '2025-09-28'
},
{
image: '/src/assets/images/02 西园戒幢律寺三坛大戒法会/截图/全家福3_副本.jpg',
title: '戒子们庄严受戒 功德圆满',
date: '2025-09-25'
},
{
image: '/src/assets/images/02 西园戒幢律寺三坛大戒法会/截图/全家福3_副本.jpg',
title: '三师七证齐聚 传承佛法精神',
date: '2025-09-22'
}
])
const newsItems = ref([])
// 原始长度用于判断“最后一张”的逻辑
const initialLength = ref(newsItems.value.length)
// 计算最大滑动位置
const maxSlide = computed(() => {
return Math.max(0, newsItems.value.length - 1)
})
// 上一张
const prevSlide = () => {
if (currentSlide.value > 0) {
......@@ -636,7 +561,6 @@ const handleNewsClick = (item) => {
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;
......@@ -692,7 +616,7 @@ const handleNewsClick = (item) => {
margin: 0 auto;
height: 2.5rem;
width: 6rem;
background-image: url('/src/assets/images/02 西园戒幢律寺三坛大戒法会/button-bg@2x.png');
background-image: url('https://cdn.ipadbiz.cn/stdj/images/home/button-bg@2x.png');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
......@@ -832,7 +756,7 @@ const handleNewsClick = (item) => {
.ceremony-wrapper {
position: relative;
width: 100vw;
background-image: url('/src/assets/images/02 西园戒幢律寺三坛大戒法会/背景@2x.png');
background-image: url('https://cdn.ipadbiz.cn/stdj/images/home/%E8%83%8C%E6%99%AF@2x.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
......@@ -874,7 +798,7 @@ const handleNewsClick = (item) => {
left: 0;
right: 0;
height: 0.3rem;
background-image: url('@/assets/images/02 西园戒幢律寺三坛大戒法会/麻绳@2x.png');
background-image: url('https://cdn.ipadbiz.cn/stdj/images/home/%E9%BA%BB%E7%BB%B3@2x.png');
background-size: cover;
background-position: top;
background-repeat: repeat-x;
......@@ -1073,7 +997,6 @@ const handleNewsClick = (item) => {
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;
......@@ -1116,7 +1039,7 @@ const handleNewsClick = (item) => {
position: absolute;
left: 2.2rem;
width: 0.125rem;
border-left: 0.125rem dotted #C1A16A;
border-left: 0.125rem dotted #FFF;
z-index: 3;
}
......@@ -1127,7 +1050,7 @@ const handleNewsClick = (item) => {
left: 1.5rem;
height: 3rem;
aspect-ratio: 3 / 1;
background-image: url('/src/assets/images/02 西园戒幢律寺三坛大戒法会/button-bg@2x.png');
background-image: url('https://cdn.ipadbiz.cn/stdj/images/home/button-bg@2x.png');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
......@@ -1273,7 +1196,7 @@ const handleNewsClick = (item) => {
.news-section {
padding: 3rem 1.5rem;
position: relative;
background-image: url('/src/assets/images/02 西园戒幢律寺三坛大戒法会/背景@2x.png');
background-image: url('https://cdn.ipadbiz.cn/stdj/images/home/%E8%83%8C%E6%99%AF@2x.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
......@@ -1287,7 +1210,7 @@ const handleNewsClick = (item) => {
left: 0;
width: 100%; /* 可根据实际图片大小调整 */
height: 200px; /* 可根据实际图片大小调整 */
background-image: url('/src/assets/images/02 西园戒幢律寺三坛大戒法会/bg@2x.png');
background-image: url('https://cdn.ipadbiz.cn/stdj/images/home/bg@2x.png');
background-size: cover;
background-repeat: no-repeat;
z-index: 1;
......@@ -1338,6 +1261,9 @@ const handleNewsClick = (item) => {
color: #333;
line-height: 1.4;
margin-bottom: 0.5rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.news-date {
......
......@@ -2,10 +2,10 @@
<div class="splash-container" :class="{ 'fade-out': isExiting }">
<!-- 背景图片 -->
<div class="background-image"></div>
<!-- 黑色半透明蒙板 -->
<div class="overlay"></div>
<!-- 初始加载指示器 - 水滴波纹效果 -->
<div class="initial-loader">
<div class="water-drop"></div>
......@@ -14,18 +14,18 @@
<div class="ripple ripple-3"></div>
<div class="ripple ripple-4"></div>
</div>
<!-- 内容层 -->
<div class="splash-content">
<!-- 左上角Logo -->
<div class="logo-section animate-fade-in-up">
<img src="/src/assets/images/01启动页/logo@2x.png" alt="三坛大戒" class="logo-image" />
<img src="https://cdn.ipadbiz.cn/stdj/icon/%E5%90%AF%E5%8A%A8%E9%A1%B5logo@2x.png" alt="三坛大戒" class="logo-image" />
</div>
<!-- 底部按钮 -->
<div class="bottom-section animate-fade-in-up-delay">
<div class="enter-button" @click="enterApp">
<img src="/src/assets/images/01启动页/进入传戒现场@2x.png" alt="进入传戒现场" class="enter-image" />
<img src="https://cdn.ipadbiz.cn/stdj/icon/%E8%BF%9B%E5%85%A5%E4%BC%A0%E6%88%92%E7%8E%B0%E5%9C%BA@2x.png" alt="进入传戒现场" class="enter-image" />
</div>
</div>
</div>
......@@ -78,7 +78,7 @@ onMounted(() => {
left: 0;
right: 0;
bottom: 0;
background-image: url('/src/assets/images/01启动页/海报@2x.png');
background-image: url('https://cdn.ipadbiz.cn/stdj/images/%E5%90%AF%E5%8A%A8%E9%A1%B5%E6%B5%B7%E6%8A%A5%E8%83%8C%E6%99%AF@2x.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
......@@ -123,7 +123,7 @@ onMounted(() => {
background: radial-gradient(circle, #fbbf24 0%, #f59e0b 70%, #d97706 100%);
border-radius: 50%;
transform: translate(-50%, -50%);
box-shadow:
box-shadow:
0 0 0.625rem rgba(251, 191, 36, 0.8),
0 0 1.25rem rgba(251, 191, 36, 0.4),
0 0 1.875rem rgba(251, 191, 36, 0.2);
......