Hooke / stdj_h5

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

feat(首页): 添加新闻轮播组件并优化页面布局 

移除左下角背景装饰图，新增新闻轮播功能及相关样式
设置页面标题为'西园戒幢律寺三坛大戒法会'
Inline Side-by-side
Showing 2 changed files with 284 additions and 31 deletions
<template>
<div class="home-container">
<!-- 左下角背景装饰图 - bg@2x.png -->
<div class="bottom-left-decoration"></div>
<!-- 主要内容区域 -->
<div class="main-content">
<!-- 顶部Banner图片 -->
......@@ -141,6 +138,47 @@
</div>
</div>
</div>
<!-- 相关新闻 -->
<div class="news-section">
<!-- 标题 -->
<div class="common-title">
<img src="/src/assets/images/02 西园戒幢律寺三坛大戒法会/相关新聞@2x.png" alt="相关新闻" class="title-image">
</div>
<!-- 轮播容器 -->
<div class="news-carousel-container">
<div class="news-carousel" ref="newsCarousel">
<div class="news-item" v-for="(item, index) in newsItems" :key="index" @click="handleNewsClick(item)">
<div class="news-image">
<img :src="item.image" :alt="item.title">
</div>
<div class="news-content">
<div class="news-title">{{ item.title }}</div>
<div class="news-date">{{ item.date }}</div>
</div>
</div>
</div>
<!-- 导航按钮 -->
<div class="carousel-nav">
<img
class="nav-btn prev-btn"
src="/src/assets/images/02 西园戒幢律寺三坛大戒法会/上@2x.png"
alt="上一张"
@click="prevSlide"
:class="{ disabled: currentSlide === 0 }"
>
<img
class="nav-btn next-btn"
src="/src/assets/images/02 西园戒幢律寺三坛大戒法会/下@2x.png"
alt="下一张"
@click="nextSlide"
:class="{ disabled: currentSlide >= maxSlide }"
>
</div>
</div>
</div>
</div>
</div>
</template>
......@@ -148,6 +186,10 @@
<script setup>
import { ref, computed, nextTick, onMounted, watch } from 'vue'
import VideoPlayer from '@/components/VideoPlayer.vue'
import { useTitle } from '@vueuse/core';
// 页面标题
useTitle('西园戒幢律寺三坛大戒法会');
// 视频配置
const videoUrl = ref('/src/assets/images/02 西园戒幢律寺三坛大戒法会/sample-10s.mp4')
......@@ -296,6 +338,91 @@ const viewMore = (type) => {
// 这里可以添加跳转到详情页面的逻辑
}
}
// 新闻轮播相关逻辑
const newsCarousel = ref(null)
const currentSlide = ref(0)
// 新闻数据
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 maxSlide = computed(() => {
return Math.max(0, newsItems.value.length - 1)
})
// 上一张
const prevSlide = () => {
if (currentSlide.value > 0) {
currentSlide.value--
updateCarouselPosition()
}
}
// 下一张
const nextSlide = () => {
if (currentSlide.value < maxSlide.value) {
currentSlide.value++
updateCarouselPosition()
}
}
// 更新轮播位置：按卡片宽度+间距进行像素级位移
const updateCarouselPosition = () => {
const carouselEl = newsCarousel.value
if (!carouselEl) return
const containerEl = carouselEl.parentElement
const containerWidth = containerEl ? containerEl.clientWidth : 0
const firstItem = carouselEl.querySelector('.news-item')
if (!firstItem) return
const itemWidth = firstItem.getBoundingClientRect().width
// 读取gap像素值，回退到0.5rem（8px）
let gapStr = getComputedStyle(carouselEl).gap
if (!gapStr || gapStr === 'normal') {
gapStr = '8px'
}
const gapPx = parseFloat(gapStr) || 8
let distance = currentSlide.value * (itemWidth + gapPx)
// 最后一张时，保证完整显示（居中显示，无下一张时不被裁切）
if (currentSlide.value === maxSlide.value) {
const lastOffset = (newsItems.value.length - 1) * (itemWidth + gapPx)
const centerOffset = Math.max(0, (containerWidth - itemWidth) / 2)
distance = lastOffset - centerOffset
}
carouselEl.style.transform = `translateX(-${distance}px)`
}
// 处理新闻点击事件
const handleNewsClick = (item) => {
console.log('点击新闻:', item)
// 这里可以添加跳转到新闻详情页面的逻辑
}
</script>
<style scoped>
......@@ -306,21 +433,6 @@ const viewMore = (type) => {
overflow-x: hidden;
}
/* 左下角背景装饰图 - bg@2x.png */
.bottom-left-decoration {
position: fixed;
bottom: 0;
left: 0;
width: 50%;
height: 50%;
background-image: url('@/assets/images/02 西园戒幢律寺三坛大戒法会/bg@2x.png');
background-size: contain;
background-position: bottom left;
background-repeat: no-repeat;
z-index: -1;
pointer-events: none;
}
/* 主要内容区域 */
.main-content {
position: relative;
......@@ -413,6 +525,8 @@ const viewMore = (type) => {
.common-title {
text-align: center;
margin-bottom: 2rem;
position: relative;
z-index: 3;
}
.common-title img {
......@@ -653,19 +767,6 @@ const viewMore = (type) => {
padding: 0.75rem;
}
}
@media (max-width: 48rem) {
.bottom-left-decoration {
width: 60%;
height: 40%;
}
}
@media (max-width: 30rem) {
.bottom-left-decoration {
width: 70%;
height: 35%;
}
}
/* 法会流程容器 */
.ceremony-wrapper {
......@@ -1043,4 +1144,156 @@ const viewMore = (type) => {
font-size: 0.7rem;
}
}
/* 相关新闻样式 */
.news-section {
padding: 3rem 1.5rem;
position: relative;
background-image: url('/src/assets/images/02 西园戒幢律寺三坛大戒法会/背景@2x.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* 左下角装饰图片 */
.news-section::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%; /* 可根据实际图片大小调整 */
height: 200px; /* 可根据实际图片大小调整 */
background-image: url('/src/assets/images/02 西园戒幢律寺三坛大戒法会/bg@2x.png');
background-size: cover;
background-repeat: no-repeat;
z-index: 1;
pointer-events: none; /* 确保不影响交互 */
}
.news-carousel-container {
position: relative;
overflow: hidden;
margin-top: 2rem;
z-index: 2; /* 确保轮播容器在背景图片之上 */
}
.news-carousel {
display: flex;
transition: transform 0.3s ease;
gap: 0.5rem; /* 减小间距 */
}
.news-item {
flex: 0 0 75%; /* 调整宽度为75% */
background: white;
border-radius: 0.75rem;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.news-image {
width: 100%;
height: 12rem;
overflow: hidden;
}
.news-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.news-content {
padding: 1rem;
background: white;
}
.news-title {
font-size: 1rem;
font-weight: 600;
color: #333;
line-height: 1.4;
margin-bottom: 0.5rem;
}
.news-date {
font-size: 0.875rem;
color: #999;
}
.carousel-nav {
display: flex;
justify-content: center;
gap: 1rem;
margin-top: 1.5rem;
position: relative;
z-index: 3; /* 确保导航按钮在最上层 */
}
.nav-btn {
width: 3rem;
height: 3rem;
cursor: pointer;
transition: all 0.3s ease;
object-fit: contain;
}
.nav-btn:hover:not(.disabled) {
transform: scale(1.1);
}
.nav-btn.disabled {
opacity: 0.3;
cursor: not-allowed;
}
/* 响应式设计 */
@media (max-width: 48rem) {
.news-section {
padding: 3rem 1rem;
}
.news-item {
flex: 0 0 78%; /* 调整中等屏幕宽度 */
}
.news-image {
height: 10rem;
}
.news-title {
font-size: 0.9rem;
}
.nav-btn {
width: 2.5rem;
height: 2.5rem;
}
}
@media (max-width: 30rem) {
.news-section {
padding: 3rem 0.75rem;
}
.news-item {
flex: 0 0 82%; /* 调整小屏幕宽度 */
}
.news-image {
height: 8rem;
}
.news-content {
padding: 0.75rem;
}
.news-title {
font-size: 0.85rem;
}
.news-date {
font-size: 0.75rem;
}
}
</style>
......