Initial commit: 婚礼请柬微信小程序（代码）
This commit is contained in:
admin
10
.gitignore
vendored
Normal file
10
.gitignore
vendored
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
node_modules/
|
||||||
|
dist/
|
||||||
|
*.mp3
|
||||||
|
*.aac
|
||||||
|
*.jpg
|
||||||
|
*.png
|
||||||
|
*.webp
|
||||||
|
*.ttf
|
||||||
|
*.woff
|
||||||
|
*.woff2
|
||||||
17
App.vue
Normal file
17
App.vue
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
onLaunch() {
|
||||||
|
console.log('App Launch')
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
console.log('App Show')
|
||||||
|
},
|
||||||
|
onHide() {
|
||||||
|
console.log('App Hide')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@import './styles/global.css';
|
||||||
|
</style>
|
||||||
40
README.md
Normal file
40
README.md
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
# 婚礼请柬小程序 (marry-wx)
|
||||||
|
|
||||||
|
基于 uni-app 构建的微信小程序婚礼请柬
|
||||||
|
|
||||||
|
## 功能特性
|
||||||
|
|
||||||
|
- ✅ 6 页轮播展示（欢迎页、3 页照片、酬谢页、信息页）
|
||||||
|
- ✅ 背景音乐播放
|
||||||
|
- ✅ 微信地图定位
|
||||||
|
- ✅ 上下滑动切换页面
|
||||||
|
- ✅ 页码指示器
|
||||||
|
|
||||||
|
## 开发
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# 安装依赖
|
||||||
|
npm install
|
||||||
|
|
||||||
|
# 开发模式（微信小程序）
|
||||||
|
npm run dev:mp-weixin
|
||||||
|
|
||||||
|
# 构建生产版本
|
||||||
|
npm run build:mp-weixin
|
||||||
|
```
|
||||||
|
|
||||||
|
## 使用微信开发者工具导入
|
||||||
|
|
||||||
|
1. 克隆/复制项目到本地
|
||||||
|
2. 打开微信开发者工具
|
||||||
|
3. 导入项目，选择 `marry-wx` 目录
|
||||||
|
4. AppID 可以使用测试号或填写自己的 AppID
|
||||||
|
5. 编译预览
|
||||||
|
|
||||||
|
## 注意事项
|
||||||
|
|
||||||
|
- 静态资源在 `/static` 目录
|
||||||
|
- 音乐文件：`/static/Audio/bgm.mp3`
|
||||||
|
- 图片文件：`/static/photo/photo1.jpg`、`/static/photo/photo2.jpg`、`/static/photo/photo3.jpg`
|
||||||
|
- 装饰元素：`/static/elements/` 目录
|
||||||
|
- 需要在微信公众平台配置服务器域名（如果需要线上访问）
|
||||||
11
main.js
Normal file
11
main.js
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import App from './App'
|
||||||
|
|
||||||
|
Vue.config.productionTip = false
|
||||||
|
|
||||||
|
App.mpType = 'app'
|
||||||
|
|
||||||
|
const app = new Vue({
|
||||||
|
...App
|
||||||
|
})
|
||||||
|
app.$mount()
|
||||||
18
manifest.json
Normal file
18
manifest.json
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
{
|
||||||
|
"name": "marry-wx",
|
||||||
|
"appid": "__UNI__MARRIAGE",
|
||||||
|
"description": "婚礼请柬小程序",
|
||||||
|
"versionName": "1.0.0",
|
||||||
|
"versionCode": "100",
|
||||||
|
"transformPx": false,
|
||||||
|
"mp-weixin": {
|
||||||
|
"appid": "",
|
||||||
|
"setting": {
|
||||||
|
"urlCheck": false,
|
||||||
|
"es6": true,
|
||||||
|
"postcss": true,
|
||||||
|
"minified": true
|
||||||
|
},
|
||||||
|
"usingComponents": true
|
||||||
|
}
|
||||||
|
}
|
||||||
16
package.json
Normal file
16
package.json
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
{
|
||||||
|
"name": "marry-wx",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev:mp-weixin": "uni -p mp-weixin",
|
||||||
|
"build:mp-weixin": "uni build -p mp-weixin"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@dcloudio/uni-cli": "^3.0.0",
|
||||||
|
"@dcloudio/uni-app": "^3.0.0",
|
||||||
|
"@dcloudio/uni-components": "^3.0.0",
|
||||||
|
"@dcloudio/vite-plugin-uni": "^3.0.0",
|
||||||
|
"vite": "^5.0.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
18
pages.json
Normal file
18
pages.json
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
{
|
||||||
|
"pages": [
|
||||||
|
{
|
||||||
|
"path": "pages/index/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "婚礼请柬",
|
||||||
|
"navigationBarBackgroundColor": "#faf6f0",
|
||||||
|
"navigationBarTextStyle": "black"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"globalStyle": {
|
||||||
|
"navigationBarTextStyle": "black",
|
||||||
|
"navigationBarTitleText": "婚礼请柬",
|
||||||
|
"navigationBarBackgroundColor": "#faf6f0",
|
||||||
|
"backgroundColor": "#faf6f0"
|
||||||
|
}
|
||||||
|
}
|
||||||
573
pages/index/index.vue
Normal file
573
pages/index/index.vue
Normal file
@@ -0,0 +1,573 @@
|
|||||||
|
<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>
|
||||||
8
project.config.json
Normal file
8
project.config.json
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"name": "marry-wx",
|
||||||
|
"appid": "__UNI__MARRIAGE",
|
||||||
|
"description": "婚礼请柬小程序",
|
||||||
|
"versionName": "1.0.0",
|
||||||
|
"versionCode": "100",
|
||||||
|
"transformPx": false
|
||||||
|
}
|
||||||
1
static/SVG/静音-F.svg
Normal file
1
static/SVG/静音-F.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1776612283536" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1988" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M115.52 55.168a42.688 42.688 0 0 0-60.352 60.352L266.112 326.4a356.608 356.608 0 0 1-31.168 1.152c-28.544 0-54.08 0-73.408 1.984-20.224 2.112-39.04 6.72-56 18.24-32.192 22.016-44.544 54.208-49.28 83.84-3.456 22.08-3.072 46.272-2.752 65.856v28.928c-0.32 19.52-0.64 43.712 2.816 65.792 4.672 29.632 17.024 61.824 49.28 83.84 16.896 11.52 35.712 16.128 55.936 18.24 19.328 1.984 44.864 1.984 73.408 1.984 32.96 0 51.84 2.752 67.392 9.152 15.488 6.4 30.72 17.792 53.76 41.28 44.8 45.76 82.88 84.672 112.896 107.648 29.312 22.528 64.128 40.832 101.312 25.088 36.864-15.616 48.64-53.12 53.76-90.048 3.712-26.496 4.8-59.968 5.12-99.904l279.296 279.296a42.688 42.688 0 1 0 60.352-60.352L115.52 55.168zM570.304 144.448c-37.12-15.68-72.064 2.56-101.376 25.088-17.088 13.184-36.928 31.488-59.072 53.376-8.512 8.384-12.8 12.608-12.8 17.92 0 5.312 4.224 9.6 12.8 18.112L585.6 434.752c18.56 18.56 27.904 27.904 35.84 24.64 7.872-3.264 7.872-16.448 7.872-42.752V389.12c0-64.704 0-116.736-5.248-154.56-5.12-36.928-16.896-74.432-53.76-90.048zM883.2 310.912a42.688 42.688 0 0 0-59.776 60.8C869.952 417.536 896 473.792 896 533.376c0 41.6-12.608 81.216-35.776 116.864a42.688 42.688 0 0 0 71.552 46.464c31.36-48.256 49.536-103.872 49.536-163.328 0-85.888-37.824-163.2-98.048-222.4zM758.336 399.616a42.688 42.688 0 1 0-65.92 54.144c21.12 25.792 32.896 56.448 32.896 88.96v2.048a42.688 42.688 0 1 0 85.376-2.048 224.64 224.64 0 0 0-52.352-143.104z" fill="#333333" p-id="1989"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.8 KiB |
1
static/SVG/音量-F.svg
Normal file
1
static/SVG/音量-F.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1776612235713" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1679" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M468.992 169.536c29.312-22.528 64.128-40.768 101.312-25.088 36.864 15.616 48.64 53.12 53.76 90.048 5.248 37.824 5.248 89.92 5.248 154.688v245.568c0 64.768 0 116.864-5.184 154.752-5.12 36.864-16.96 74.368-53.76 89.984-37.248 15.744-72.064-2.56-101.376-25.088-30.016-23.04-68.032-61.888-112.832-107.584-23.04-23.552-38.336-34.944-53.76-41.28-15.616-6.4-34.496-9.152-67.456-9.152-28.544 0-54.08 0-73.408-2.048-20.224-2.112-39.04-6.656-56-18.24-32.192-22.016-44.544-54.208-49.28-83.84C52.864 570.24 53.248 545.984 53.568 526.464v-28.928c-0.32-19.52-0.64-43.776 2.816-65.92 4.672-29.568 17.024-61.76 49.28-83.776 16.896-11.52 35.712-16.128 55.936-18.24 19.328-1.984 44.8-1.984 73.344-1.984 33.024 0 51.904-2.752 67.456-9.152 15.488-6.4 30.72-17.792 53.76-41.28 44.8-45.696 82.88-84.608 112.896-107.648zM699.52 350.08a42.688 42.688 0 0 1 59.776 8.064c32.256 42.24 51.392 95.872 51.392 153.856 0 57.92-19.136 111.552-51.392 153.856a42.688 42.688 0 1 1-67.84-51.712c21.056-27.648 33.92-63.104 33.92-102.144 0-39.04-12.864-74.496-33.92-102.144a42.688 42.688 0 0 1 8-59.776z" fill="#333333" p-id="1680"></path><path d="M884.8 269.824a42.688 42.688 0 1 0-62.912 57.6C868.736 378.688 896 442.88 896 512c0 69.12-27.264 133.312-74.112 184.512a42.688 42.688 0 0 0 62.912 57.6c59.904-65.344 96.512-149.632 96.512-242.112 0-92.48-36.608-176.768-96.512-242.176z" fill="#333333" p-id="1681"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.7 KiB |
1
static/favicon.svg
Normal file
1
static/favicon.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.3 KiB |
24
static/icons.svg
Normal file
24
static/icons.svg
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<symbol id="bluesky-icon" viewBox="0 0 16 17">
|
||||||
|
<g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
|
||||||
|
<defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="discord-icon" viewBox="0 0 20 19">
|
||||||
|
<path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="documentation-icon" viewBox="0 0 21 20">
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="github-icon" viewBox="0 0 19 19">
|
||||||
|
<path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="social-icon" viewBox="0 0 20 20">
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="x-icon" viewBox="0 0 19 19">
|
||||||
|
<path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
|
||||||
|
</symbol>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 4.9 KiB |
15
styles/global.css
Normal file
15
styles/global.css
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
/* 全局样式 */
|
||||||
|
page {
|
||||||
|
background-color: #faf6f0;
|
||||||
|
font-family: 'WeddingFont', 'Noto Serif SC', 'Source Han Serif SC', 'STSong', 'SimSun', serif;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #7a5a42;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--red: #8B4513;
|
||||||
|
--text-golden: #8B6914;
|
||||||
|
--text-muted: #7a5a42;
|
||||||
|
--gold: #c9a86c;
|
||||||
|
--gold-light: #e8d4a8;
|
||||||
|
}
|
||||||
6
uni.scss
Normal file
6
uni.scss
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
/* uni-app 变量 */
|
||||||
|
$red: #8B4513;
|
||||||
|
$text-golden: #8B6914;
|
||||||
|
$text-muted: #7a5a42;
|
||||||
|
$gold: #c9a86c;
|
||||||
|
$gold-light: #e8d4a8;
|
||||||
6
vite.config.js
Normal file
6
vite.config.js
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import uni from '@dcloudio/vite-plugin-uni'
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [uni()]
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user