573 lines
13 KiB
Vue
573 lines
13 KiB
Vue
<template>
|
||
<view class="container">
|
||
<!-- 背景音乐 -->
|
||
<audio id="bgmAudio" :src="audioUrl" loop controls style="display:none;"></audio>
|
||
|
||
<!-- 音乐按钮 -->
|
||
<view class="bgm-btn" :class="{ muted: !isPlaying }" @click="toggleBgm">
|
||
<text class="icon-play">🎵</text>
|
||
</view>
|
||
|
||
<!-- 轮播图 -->
|
||
<swiper class="swiper" :current="currentSlide" @change="onSwiperChange" :vertical="true" :circular="false" :duration="500">
|
||
<!-- 第1页：欢迎页 -->
|
||
<swiper-item>
|
||
<view class="slide page-welcome">
|
||
<canvas type="2d" id="fireworks-canvas" class="fireworks-canvas"></canvas>
|
||
<image class="caihua caihua-1" src="/static/elements/caihua1.webp" mode="aspectFit"></image>
|
||
<image class="caihua caihua-2" src="/static/elements/caihua1.webp" mode="aspectFit"></image>
|
||
|
||
<view class="page-content">
|
||
<view class="main-title">【我们结婚啦】</view>
|
||
<image class="ref-image" src="/static/Images/image1-1.webp" mode="aspectFill"></image>
|
||
|
||
<view class="couple-row">
|
||
<view class="person-block">
|
||
<view class="brush-bg">
|
||
<text class="person-label">新郎</text>
|
||
</view>
|
||
<text class="person-name">王超凡</text>
|
||
</view>
|
||
<text class="and-amp">&</text>
|
||
<view class="person-block">
|
||
<view class="brush-bg">
|
||
<text class="person-label">新娘</text>
|
||
</view>
|
||
<text class="person-name">祖苏雅</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="invite-wrap">
|
||
<text class="invite-line">诚邀您及家人光临</text>
|
||
</view>
|
||
|
||
<view class="msg-lines">
|
||
<text class="msg-line">见证我们生命中最重要的时刻</text>
|
||
<text class="msg-line">分享这份爱的喜悦</text>
|
||
<text class="msg-line">共启幸福新征程</text>
|
||
</view>
|
||
|
||
<view class="info-lines">
|
||
<text class="info-line">2026年5月16日 午宴</text>
|
||
<text class="info-line">泗洪县滋禧酒店</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</swiper-item>
|
||
|
||
<!-- 第2页：照片1 -->
|
||
<swiper-item>
|
||
<view class="slide photo-page">
|
||
<view class="page-content">
|
||
<text class="section-label">壹 · PHOTO</text>
|
||
<text class="blessing-title">执子之手，与子偕老</text>
|
||
<view class="photo-frame-wrap">
|
||
<image class="frame-deco" src="/static/elements/frame2.webp" mode="widthFix"></image>
|
||
<view class="photo-inside">
|
||
<image src="/static/photo/photo1.jpg" mode="aspectFill"></image>
|
||
</view>
|
||
</view>
|
||
<text class="blessing-text">
|
||
从相遇到相守，从相知到相爱
|
||
感谢命运让我们相遇
|
||
愿你我往后余生
|
||
冷暖相知，喜乐同享
|
||
同量天地宽，共度日月长
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</swiper-item>
|
||
|
||
<!-- 第3页：照片2 -->
|
||
<swiper-item>
|
||
<view class="slide photo-page">
|
||
<view class="page-content">
|
||
<text class="section-label">贰 · PHOTO</text>
|
||
<text class="blessing-title">死生契阔，与子成说</text>
|
||
<view class="photo-frame-wrap">
|
||
<image class="frame-deco" src="/static/elements/frame2.webp" mode="widthFix"></image>
|
||
<view class="photo-inside">
|
||
<image src="/static/photo/photo2.jpg" mode="aspectFill"></image>
|
||
</view>
|
||
</view>
|
||
<text class="blessing-text">
|
||
每一次心跳都是因为你
|
||
每一个明天都想要你参与
|
||
愿得一人心，白首不相离
|
||
从此以后
|
||
你是我的唯一
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</swiper-item>
|
||
|
||
<!-- 第4页：照片3 -->
|
||
<swiper-item>
|
||
<view class="slide photo-page">
|
||
<view class="page-content">
|
||
<text class="section-label">叁 · PHOTO</text>
|
||
<text class="blessing-title">琴瑟在御，莫不静好</text>
|
||
<view class="photo-frame-wrap">
|
||
<image class="frame-deco" src="/static/elements/frame2.webp" mode="widthFix"></image>
|
||
<view class="photo-inside">
|
||
<image src="/static/photo/photo3.jpg" mode="aspectFill"></image>
|
||
</view>
|
||
</view>
|
||
<text class="blessing-text">
|
||
感谢生命中每一次相遇
|
||
让平凡的日子有了意义
|
||
愿与你一起
|
||
看遍世间所有风景
|
||
走过岁月年年岁岁
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</swiper-item>
|
||
|
||
<!-- 第5页：酬谢 -->
|
||
<swiper-item>
|
||
<view class="slide page-thanks">
|
||
<view class="page-content">
|
||
<text class="thanks-title">酬谢词</text>
|
||
<text class="thanks-sub">THANKS & GRATITUDE</text>
|
||
<text class="thanks-text">
|
||
感谢您百忙之中
|
||
拨冗出席我们的婚礼
|
||
见证我们人生中最重要的时刻
|
||
|
||
您的祝福与到来
|
||
是我们最珍贵的礼物
|
||
愿您一切顺遂，幸福安康
|
||
</text>
|
||
<text class="names-sign">王超凡 & 祖苏雅</text>
|
||
</view>
|
||
</view>
|
||
</swiper-item>
|
||
|
||
<!-- 第6页：婚礼信息 -->
|
||
<swiper-item>
|
||
<view class="slide page-info">
|
||
<view class="page-content">
|
||
<text class="info-title">婚礼信息</text>
|
||
<view class="info-divider"></view>
|
||
<text class="info-date">2026.05.16</text>
|
||
<text class="info-lunar">农历三月三十 · 星期六</text>
|
||
<text class="info-time">中午 12:00</text>
|
||
|
||
<view class="info-detail">
|
||
<view class="highlight" style="font-size:32rpx;">滋禧酒店</view>
|
||
<text>江苏省泗洪县洪泽湖东大街16号</text>
|
||
<text style="font-size:24rpx;color:#c9a86c;">滋禧酒店（宿迁泗洪香港花园店）</text>
|
||
</view>
|
||
|
||
<view class="map-wrap" @click="openMap">
|
||
<map id="qqmap" style="width:100%;height:400rpx;"
|
||
:latitude="latitude" :longitude="longitude"
|
||
:markers="markers" :scale="15">
|
||
</map>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
|
||
<!-- 页码指示器 -->
|
||
<view class="page-indicator">
|
||
<view v-for="i in 6" :key="i" class="dot" :class="{ active: currentSlide === i - 1 }" @click="goTo(i - 1)"></view>
|
||
</view>
|
||
|
||
<!-- 滑动提示 -->
|
||
<view class="swipe-hint" v-if="currentSlide < 5">
|
||
<text>上滑</text>
|
||
<view class="swipe-hint-arrow"></view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
currentSlide: 0,
|
||
isPlaying: false,
|
||
audioUrl: '/static/Audio/bgm.mp3',
|
||
latitude: 33.470412,
|
||
longitude: 118.22323,
|
||
markers: [{
|
||
latitude: 33.470412,
|
||
longitude: 118.22323,
|
||
title: '滋禧酒店',
|
||
callout: { content: '滋禧酒店', color: '#8B6914', fontSize: 14, borderRadius: 10, padding: 10 }
|
||
}]
|
||
}
|
||
},
|
||
methods: {
|
||
toggleBgm() {
|
||
const audio = uni.createInnerAudioContext();
|
||
audio.src = this.audioUrl;
|
||
if (this.isPlaying) {
|
||
audio.pause();
|
||
} else {
|
||
audio.play();
|
||
}
|
||
this.isPlaying = !this.isPlaying;
|
||
},
|
||
onSwiperChange(e) {
|
||
this.currentSlide = e.detail.current;
|
||
},
|
||
goTo(index) {
|
||
this.currentSlide = index;
|
||
},
|
||
openMap() {
|
||
uni.openLocation({
|
||
latitude: this.latitude,
|
||
longitude: this.longitude,
|
||
name: '滋禧酒店',
|
||
address: '江苏省泗洪县洪泽湖东大街16号'
|
||
});
|
||
}
|
||
},
|
||
onLoad() {
|
||
// 首次点击自动播放
|
||
uni.showToast({ title: '点击任意位置开始', icon: 'none' });
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
page {
|
||
background-color: #faf6f0;
|
||
height: 100%;
|
||
}
|
||
.container {
|
||
height: 100vh;
|
||
position: relative;
|
||
}
|
||
|
||
/* 音乐按钮 */
|
||
.bgm-btn {
|
||
position: fixed;
|
||
top: 20rpx;
|
||
right: 20rpx;
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
background: rgba(255,255,255,0.9);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 999;
|
||
box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
|
||
}
|
||
.bgm-btn.muted {
|
||
opacity: 0.6;
|
||
}
|
||
|
||
/* 轮播 */
|
||
.swiper {
|
||
height: 100vh;
|
||
width: 100%;
|
||
}
|
||
|
||
/* 页面通用 */
|
||
.slide {
|
||
height: 100vh;
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: linear-gradient(180deg, #faf6f0 0%, #f5efe6 100%);
|
||
}
|
||
.page-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
padding: 40rpx;
|
||
}
|
||
|
||
/* 欢迎页 */
|
||
.page-welcome {
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.fireworks-canvas {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
pointer-events: none;
|
||
}
|
||
.caihua {
|
||
position: absolute;
|
||
pointer-events: none;
|
||
opacity: 0.7;
|
||
}
|
||
.caihua-1 {
|
||
width: 320rpx;
|
||
top: -20rpx;
|
||
right: -40rpx;
|
||
transform: rotate(15deg);
|
||
}
|
||
.caihua-2 {
|
||
width: 280rpx;
|
||
bottom: 160rpx;
|
||
left: -60rpx;
|
||
transform: rotate(-20deg);
|
||
}
|
||
.main-title {
|
||
font-size: 72rpx;
|
||
color: #8B6914;
|
||
letter-spacing: 8rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
.ref-image {
|
||
width: 520rpx;
|
||
height: 360rpx;
|
||
border-radius: 24rpx;
|
||
margin: 12rpx 0;
|
||
}
|
||
.couple-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 32rpx;
|
||
margin: 20rpx 0;
|
||
}
|
||
.person-block {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
.brush-bg {
|
||
background: linear-gradient(135deg, #fece6c 0%, #f5d78e 100%);
|
||
padding: 8rpx 24rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
.person-label {
|
||
font-size: 36rpx;
|
||
color: #8B4513;
|
||
letter-spacing: 4rpx;
|
||
}
|
||
.person-name {
|
||
font-size: 36rpx;
|
||
color: #8B4513;
|
||
letter-spacing: 6rpx;
|
||
margin-top: 8rpx;
|
||
}
|
||
.and-amp {
|
||
font-size: 52rpx;
|
||
color: #c9a86c;
|
||
}
|
||
.invite-wrap {
|
||
margin: 16rpx 0;
|
||
}
|
||
.invite-line {
|
||
font-size: 40rpx;
|
||
color: #8B4513;
|
||
letter-spacing: 6rpx;
|
||
}
|
||
.msg-lines {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8rpx;
|
||
margin: 8rpx 0;
|
||
}
|
||
.msg-line {
|
||
font-size: 28rpx;
|
||
color: #8B4513;
|
||
letter-spacing: 4rpx;
|
||
line-height: 1.6;
|
||
}
|
||
.info-lines {
|
||
margin-top: 12rpx;
|
||
}
|
||
.info-line {
|
||
font-size: 32rpx;
|
||
color: #8B4513;
|
||
letter-spacing: 4rpx;
|
||
line-height: 1.8;
|
||
}
|
||
|
||
/* 照片页 */
|
||
.photo-page {
|
||
background: #faf6f0;
|
||
}
|
||
.section-label {
|
||
font-size: 24rpx;
|
||
color: #c9a86c;
|
||
letter-spacing: 12rpx;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
.blessing-title {
|
||
font-size: 52rpx;
|
||
color: #8B6914;
|
||
letter-spacing: 6rpx;
|
||
line-height: 1.4;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
.photo-frame-wrap {
|
||
position: relative;
|
||
width: 560rpx;
|
||
}
|
||
.frame-deco {
|
||
width: 100%;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
.photo-inside {
|
||
position: absolute;
|
||
top: 8%;
|
||
left: 8%;
|
||
right: 8%;
|
||
bottom: 8%;
|
||
z-index: 1;
|
||
border-radius: 8rpx;
|
||
overflow: hidden;
|
||
}
|
||
.photo-inside image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.blessing-text {
|
||
font-size: 27rpx;
|
||
color: #7a5a42;
|
||
line-height: 2.0;
|
||
letter-spacing: 1px;
|
||
max-width: 640rpx;
|
||
margin-top: 16rpx;
|
||
}
|
||
|
||
/* 酬谢页 */
|
||
.page-thanks {
|
||
background: #faf6f0;
|
||
}
|
||
.thanks-title {
|
||
font-size: 84rpx;
|
||
color: #8B6914;
|
||
letter-spacing: 8rpx;
|
||
}
|
||
.thanks-sub {
|
||
font-size: 26rpx;
|
||
color: #c9a86c;
|
||
letter-spacing: 8rpx;
|
||
margin-top: 16rpx;
|
||
}
|
||
.thanks-text {
|
||
font-size: 28rpx;
|
||
color: #7a5a42;
|
||
line-height: 2.4;
|
||
letter-spacing: 2rpx;
|
||
max-width: 640rpx;
|
||
margin-top: 40rpx;
|
||
}
|
||
.names-sign {
|
||
font-size: 56rpx;
|
||
color: #8B6914;
|
||
letter-spacing: 8rpx;
|
||
margin-top: 32rpx;
|
||
}
|
||
|
||
/* 信息页 */
|
||
.page-info {
|
||
background: #faf6f0;
|
||
}
|
||
.info-title {
|
||
font-size: 76rpx;
|
||
color: #8B6914;
|
||
letter-spacing: 8rpx;
|
||
}
|
||
.info-divider {
|
||
width: 120rpx;
|
||
height: 4rpx;
|
||
background: #c9a86c;
|
||
margin: 16rpx 0;
|
||
}
|
||
.info-date {
|
||
font-size: 88rpx;
|
||
color: #8B6914;
|
||
letter-spacing: 8rpx;
|
||
line-height: 1.3;
|
||
}
|
||
.info-lunar {
|
||
font-size: 26rpx;
|
||
color: #c9a86c;
|
||
letter-spacing: 6rpx;
|
||
margin-top: 8rpx;
|
||
}
|
||
.info-time {
|
||
font-size: 40rpx;
|
||
color: #8B6914;
|
||
letter-spacing: 4rpx;
|
||
margin-top: 12rpx;
|
||
}
|
||
.info-detail {
|
||
display: flex;
|
||
flex-direction: column;
|
||
font-size: 30rpx;
|
||
color: #7a5a42;
|
||
line-height: 2.0;
|
||
letter-spacing: 2rpx;
|
||
margin-top: 24rpx;
|
||
}
|
||
.info-detail .highlight {
|
||
color: #8B6914;
|
||
font-weight: 500;
|
||
}
|
||
.map-wrap {
|
||
width: 100%;
|
||
max-width: 680rpx;
|
||
border-radius: 32rpx;
|
||
overflow: hidden;
|
||
border: 4rpx solid #e8d4a8;
|
||
box-shadow: 0 12rpx 48rpx rgba(139,105,20,0.12);
|
||
margin-top: 12rpx;
|
||
}
|
||
|
||
/* 页码指示器 */
|
||
.page-indicator {
|
||
position: fixed;
|
||
right: 20rpx;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16rpx;
|
||
z-index: 100;
|
||
}
|
||
.dot {
|
||
width: 16rpx;
|
||
height: 16rpx;
|
||
border-radius: 50%;
|
||
background: rgba(139,105,20,0.3);
|
||
}
|
||
.dot.active {
|
||
background: #8B6914;
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
}
|
||
|
||
/* 滑动提示 */
|
||
.swipe-hint {
|
||
position: fixed;
|
||
bottom: 40rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
color: #c9a86c;
|
||
font-size: 24rpx;
|
||
letter-spacing: 4rpx;
|
||
z-index: 100;
|
||
}
|
||
.swipe-hint-arrow {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
border-left: 4rpx solid #c9a86c;
|
||
border-bottom: 4rpx solid #c9a86c;
|
||
transform: rotate(-45deg);
|
||
margin-top: 8rpx;
|
||
}
|
||
</style> |