超真诚婚礼邀请函小程序

2024-02-27 13:44
文章标签 程序 婚礼 真诚 邀请函

本文主要是介绍超真诚婚礼邀请函小程序,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

结婚了,自己写个婚礼邀请函小程序,含泪省下¥49.9;程序员的浪漫!

1、定位直达

2、背景音乐

3、倒计时

4、CSDN图床

页面代码如下:

<cu-custom bgColor="bg-yellow-light" isBack="{{false}}"><view slot="backText">返回</view><view slot="content"></view>
</cu-custom><image src="{{checked?'../../image/music_off.png':'../../image/music_on.png'}}" class="music {{!checked && 'circle'}}" catchtap="checkMusic"></image><view class="bg-yellow-light padding-sm"><view class="flex justify-between text-black"><view><text class="text-xxl-60 font-myFont">婚礼邀请函</text></view><view class="text-right"><text class="text-bold text-darkred"></text><text class="cuIcon-likefill text-bold text-darkred"></text><!-- <text class="text-bold">Invitation</text> --></view></view><view class="margin-top-xl"></view><view><view class="position_absolute bg-img radius" style="background-image: url('{{pageConfig.img_TOP_top}}');height: 520rpx;width: 420rpx;margin-left: 240rpx;margin-top: 80rpx;"></view><!-- 底部 --><view class="position_absolute bg-img radius" style="background-image: url('{{pageConfig.img_TOP_bottom}}');height: 420rpx;width: 320rpx;margin-left: 280rpx;  "></view><!-- 双向奔赴 --><view class="position_absolute bg-img" style="background-image: url('{{pageConfig.img_TOP_left}}');height: 100rpx;width: 504rpx; margin-top: 280rpx; "></view><view class="flex-sub align-center text-center position_absolute" style="margin-top: 450rpx;"><text class="font-myFont text-sl text-bold">welcome to our wedding</text></view></view><!-- <view class="view_top cu-avatar round xxl bg-red-dark" style="margin-top: 680rpx;margin-left: 30rpx;"><text class="text-yellow text-xsl" style="font-family: STSong;">囍</text></view> --><view class="flex justify-between padding" style="margin-top: 800rpx;  "><view class="flex flex-direction" style="margin-top: 100rpx;  "><text class="text-red text-bold"></text><text class="text-black" style="font-family: STSong;">{{pageConfig.top_txt}}</text></view><view class="flex flex-direction"><view class="bg-red-dark cu-avatar lg radius margin-xs flex-direction"><text class="text-white text-xl">{{left_time_list[0]}}</text><text class="text-white text-xs"></text></view><view class="bg-red-dark cu-avatar lg radius margin-xs flex-direction"><text class="text-white text-xl">{{left_time_list[1]}}</text><text class="text-white text-xs"></text></view><view class="bg-red-dark cu-avatar lg radius margin-xs flex-direction"><text class="text-white text-xl">{{left_time_list[2]}}</text><text class="text-white text-xs"></text></view><view class="bg-red-dark cu-avatar lg radius margin-xs flex-direction"><text class="text-white text-xl">{{left_time_list[3]}}</text><text class="text-white text-xs"></text></view></view></view><view class="flex align-center"><view class="bg-red-dark" style="height: 4rpx;width: 280rpx; margin-top: 50rpx;margin-bottom: 50rpx;"></view><view class="margin-left text-darkred text-bold">关于我们</view></view><view class="padding flex flex-direction flex-sub align-center text-center"><text class="text-lg">六年前的喜欢你\n六年后的我愿意</text></view><image class="radius" src='{{pageConfig.img_20172023}}' mode='widthFix' style='width:100%;'></image><view><view class="padding flex flex-direction flex-sub align-center text-center"><text class="text-bold text-lg">2017</text></view><view class="flex"><view class="flex-sub"><image class="radius" src='{{pageConfig.img_left_2017}}' mode='widthFix' style='width:100%;'></image><view style='margin-top: 40rpx;'><text>{{pageConfig.txt_left_2017}}</text></view></view><view class="flex-sub" style="margin-left: 10rpx;"><view class="text-right"><text>{{pageConfig.txt_right_2017}}</text></view><image class="radius" src='{{pageConfig.img_right_2017}}' mode='widthFix' style='width:100%; margin-top: 70rpx;'></image></view></view></view><view class="padding flex flex-direction flex-sub align-center text-center"><text class="text-bold text-lg">2018</text></view><view class="flex"><view class="flex-sub"><image class="radius" src='{{pageConfig.img_left_2018}}' mode='widthFix' style='width:100%;'></image></view><view class="flex-twice" style="margin-left: 10rpx;"><image class="radius" src='{{pageConfig.img_right_2018}}' mode='widthFix' style='width:100%;'></image></view></view><view class="flex flex-direction" style="margin-top: 10rpx;  "><text>{{pageConfig.txt_2018}}</text></view><view class="padding flex flex-direction flex-sub align-center text-center"><text class="text-bold text-lg">2019</text></view><view class="flex"><view class="flex-sub"><image class="radius" src='{{pageConfig.img_left_2019}}' mode='widthFix' style='width:100%;'></image></view><view class="flex-sub" style="margin-left: 10rpx;"><image class="radius" src='{{pageConfig.img_right_2019}}' mode='widthFix' style='width:100%;'></image></view></view><view class="flex flex-direction" style="margin-top: 10rpx;  "><text>{{pageConfig.txt_2019}}</text></view><view class="padding flex flex-direction flex-sub align-center text-center"><text class="text-bold text-lg">2020</text></view><view class="flex"><view class="flex-sub"><image class="radius" src='{{pageConfig.img_left_2020}}' mode='widthFix' style='width:100%;'></image><view style='margin-top: 40rpx;'><text>{{pageConfig.txt_left_2020}}</text></view></view><view class="flex-sub" style="margin-left: 10rpx;"><view class="text-right"><text>{{pageConfig.txt_right_2020}}</text></view><image class="radius" src='{{pageConfig.img_right_2020}}' mode='widthFix' style='width:100%; margin-top: 70rpx;'></image></view></view><view class="padding flex flex-direction flex-sub align-center text-center"><text class="text-bold text-lg">2021</text></view><view class="flex"><image class="radius" src='{{pageConfig.img_2021}}' mode='widthFix' style='width:100%;'></image></view><view class="flex flex-direction" style="margin-top: 10rpx;  "><text>{{pageConfig.txt_2021}}</text></view><view class="padding flex flex-direction flex-sub align-center text-center"><text class="text-bold text-lg">2022</text></view><view class="flex"><view class="flex-sub"><image class="radius" src='{{pageConfig.img_left_top_2022}}' mode='widthFix' style='width: 100%;'></image><image class="radius" src='{{pageConfig.img_left_bottom_2022}}' mode='widthFix' style='width:100%;'></image></view><view class="flex-twice" style="margin-left: 10rpx;"><image class="radius" src='{{pageConfig.img_right_2022}}' mode='widthFix' style='width:100%;'></image><view class="bg-red-dark" style="height: 8rpx;margin-left: 150rpx; "></view><view class="text-right"><text class="text-red-dark"></text></view></view></view><view class="flex flex-direction" style="margin-top: 10rpx;  "><text>{{pageConfig.txt_2022}}</text></view><view><view class="padding flex flex-direction flex-sub align-center text-center"><text class="text-bold text-lg">2023</text></view><view class="flex"><view class="flex-sub"><image class="radius" src='{{pageConfig.img_left_top_2023}}' mode='widthFix' style='width:100%; '></image><image class="radius" src='{{pageConfig.img_left_bottom_2023}}' mode='widthFix' style='width:100%; '></image><view style='margin-top: 40rpx;'><text>{{pageConfig.txt_left_2023}}</text></view></view><view class="flex-sub" style="margin-left: 10rpx;margin-top: 80rpx;"><view class="text-right"><text>{{pageConfig.txt_right_2023}}</text></view><image class="radius" src='{{pageConfig.img_right_top_2023}}' mode='widthFix' style='width:100%;margin-top: 60rpx;'></image><image class="radius" src='{{pageConfig.img_right_bottom_2023}}' mode='widthFix' style='width:100%;'></image></view></view></view><view class="flex align-center"><view class="bg-red-dark" style="height: 4rpx;width: 280rpx; margin-top: 100rpx;margin-bottom: 100rpx;"></view><view class="margin-left text-darkred text-bold">关于婚礼</view></view><view class="flex justify-between padding"><view class="flex flex-direction"><text class="text-black">{{pageConfig.wedding_title}}</text></view></view><view class="flex" style="margin-top: 60rpx;"><view class="flex-sub" style="margin-top: 10rpx;"><image class="radius" src='{{pageConfig.wedding_1_img_left_top}}' mode='widthFix' style='width:90%;margin-left: 30rpx;'></image><image class="radius" src='{{pageConfig.wedding_1_img_left_bottom}}' mode='widthFix' style='width:90%;margin-left: 30rpx;'></image><view class="bg-red-dark" style="height: 8rpx;width: 100%;margin-right: 30rpx; "></view><view><text class="text-red-dark"></text></view></view><view class="flex-sub" style="margin-left: 10rpx;"><image class="radius" src='{{pageConfig.wedding_1_img_right}}' mode='widthFix' style='width:100%;'></image></view></view><view class="flex justify-between padding" style="margin-top: 20rpx;"><view class="flex flex-direction"><text class="text-black">{{pageConfig.wedding_1_txt}}</text></view></view><view class="flex" style="margin-top: 60rpx;"><view class="flex-sub" style="margin-top: 10rpx;"><image class="radius" src='{{pageConfig.wedding_2_img_left}}' mode='widthFix' style='width:100%;'></image></view><view class="flex-sub" style="margin-left: 10rpx;margin-top: 100rpx;"><image class="radius" src='{{pageConfig.wedding_2_img_right}}' mode='widthFix' style='width:100%;'></image><view class="flex flex-direction text-right" style="margin-top: 60rpx;"><text>{{pageConfig.wedding_2_txt_right}}</text></view></view><view class="bg-red-dark radius cu-avatar sm" style="position: absolute; right: 0;margin-right: 30rpx;margin-top: 30rpx;"></view></view><view class="flex justify-between padding" style="margin-top: 60rpx;"><view class="flex flex-direction"><text class="text-black">{{pageConfig.wedding_2_txt_left}}</text></view></view><view class="flex" style="margin-top: 80rpx;margin-bottom: 20rpx;"><view class="flex-sub"><view class="flex"><view class='flex basis-xxs ' style="align-items: flex-end;"><image src='{{pageConfig.wedding_3_img_FALLIN}}' mode='widthFix' style='width:100%;'></image></view><view class='basis-xxl' style="margin-left: 10rpx;"><!-- 沙滩1 --><image class="radius" src='{{pageConfig.wedding_3_img_left_top}}' mode='widthFix' style='width:100%;'></image></view></view><view class="flex"><image class="radius" src='{{pageConfig.wedding_3_img_left_bottom}}' mode='widthFix' style='width:100%;'></image></view></view><view class="flex-sub" style="margin-left: 10rpx;margin-top: 60rpx;"><image class="radius" src='{{pageConfig.wedding_3_img_right}}' mode='widthFix' style='width:100%;'></image><view style="position: relative;"><view class="bg-red-dark radius cu-avatar sm" style="position: absolute; right: 0;margin-right: 30rpx;margin-top: 30rpx;"></view></view></view></view><view class="flex justify-between padding" style="margin-top: 20rpx;"><view class="flex flex-direction"><text class="text-black">{{pageConfig.wedding_3_txt}}</text></view></view><view style="margin-top: 60rpx;"><image class="radius" src='{{pageConfig.wedding_4_img_TOP}}' mode='widthFix' style='width:100%;'></image></view><view class="flex"><view class="flex-sub radius"><image class="radius" src='{{pageConfig.wedding_4_img_left}}' mode='widthFix' style='width:100%;'></image><view style='margin-top: 120rpx;'><text>{{pageConfig.wedding_4_txt_left}}</text></view></view><view class="flex-sub radius" style="margin-left: 10rpx;  "><view class="text-right"><text>{{pageConfig.wedding_4_txt_right}}</text></view><image class="radius" src='{{pageConfig.wedding_4_img_right}}' mode='widthFix' style='width:100%; margin-top: 100rpx;'></image></view></view><view class="margin padding-sm bg-orange.light" style=" margin-top: 100rpx;"><view class="bg-yellow-light padding"><view class="flex-sub flex flex-direction align-center text-center" style="padding: 5rpx;"><view class="cu-avatar round xxl bg-red-dark"><text class="text-yellow text-xsl"></text></view><text class="text-xxl font-myFont">-----婚礼邀请-----</text></view><view class="flex-sub flex flex-direction align-center text-center" style="padding: 60rpx;"><text class="text-darkred text-xxl font-myFont" style="padding: 20rpx;">婚礼时间</text><text>2023年12月24日(星期日)</text><text class="text-sm">农历:癸卯年 冬月十二</text></view><view class="flex flex-direction flex-sub align-center text-center" style="padding: 10rpx;"><text class="text-darkred text-xxl font-myFont" style="padding: 20rpx;">婚礼地点</text><text class="text-xs">福建省泉州市安溪县湖头镇许前村登铭居</text><text class="text-black text-bold text-xxxs">(点击位置导航直达)</text></view><view class="flex image shadow justify-center"><image class="radius" src="{{pageConfig.wedding_img_location}}" mode="widthFix" bindtap="navigate"></image></view><view class="flex-sub flex flex-direction align-center text-center" style="padding: 60rpx;"><text class="text-darkred text-xxl font-myFont" style="padding: 20rpx;">婚礼流程</text><text>10:00 AM</text><text>婚礼迎宾</text><text class="padding text-xxl">|</text><text>11:30 AM</text><text>婚礼仪式</text><text class="padding text-xxl">|</text><text>12:00 PM</text><text>婚礼午宴</text></view></view></view><view class="flex flex-direction flex-sub align-center text-center text-content" style="padding: 10rpx;"><text class="text-xs">{{pageConfig.wedding_txt_last1}}</text></view><image class="radius" src='{{pageConfig.wedding_img_last}}' mode='widthFix' style='width:100%;'></image><view class="flex flex-direction flex-sub align-center text-center text-content" style="padding: 10rpx;"><text class="text-xs ">{{pageConfig.wedding_txt_last1}}</text><text class="cuIcon-likefill text-bold text-darkred"></text><text class="text-bold">--- The End ---</text></view><view class="flex justify-between padding" style="margin-top: 640rpx;"></view></view>

这篇关于超真诚婚礼邀请函小程序的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/752594

相关文章

golang程序打包成脚本部署到Linux系统方式

《golang程序打包成脚本部署到Linux系统方式》Golang程序通过本地编译(设置GOOS为linux生成无后缀二进制文件),上传至Linux服务器后赋权执行,使用nohup命令实现后台运行,完... 目录本地编译golang程序上传Golang二进制文件到linux服务器总结本地编译Golang程序

使用Docker构建Python Flask程序的详细教程

《使用Docker构建PythonFlask程序的详细教程》在当今的软件开发领域,容器化技术正变得越来越流行,而Docker无疑是其中的佼佼者,本文我们就来聊聊如何使用Docker构建一个简单的Py... 目录引言一、准备工作二、创建 Flask 应用程序三、创建 dockerfile四、构建 Docker

python编写朋克风格的天气查询程序

《python编写朋克风格的天气查询程序》这篇文章主要为大家详细介绍了一个基于Python的桌面应用程序,使用了tkinter库来创建图形用户界面并通过requests库调用Open-MeteoAPI... 目录工具介绍工具使用说明python脚本内容如何运行脚本工具介绍这个天气查询工具是一个基于 Pyt

Ubuntu设置程序开机自启动的操作步骤

《Ubuntu设置程序开机自启动的操作步骤》在部署程序到边缘端时,我们总希望可以通电即启动我们写好的程序,本篇博客用以记录如何在ubuntu开机执行某条命令或者某个可执行程序,需要的朋友可以参考下... 目录1、概述2、图形界面设置3、设置为Systemd服务1、概述测试环境:Ubuntu22.04 带图

Python程序打包exe,单文件和多文件方式

《Python程序打包exe,单文件和多文件方式》:本文主要介绍Python程序打包exe,单文件和多文件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录python 脚本打成exe文件安装Pyinstaller准备一个ico图标打包方式一(适用于文件较少的程

Python程序的文件头部声明小结

《Python程序的文件头部声明小结》在Python文件的顶部声明编码通常是必须的,尤其是在处理非ASCII字符时,下面就来介绍一下两种头部文件声明,具有一定的参考价值,感兴趣的可以了解一下... 目录一、# coding=utf-8二、#!/usr/bin/env python三、运行Python程序四、

无法启动此程序因为计算机丢失api-ms-win-core-path-l1-1-0.dll修复方案

《无法启动此程序因为计算机丢失api-ms-win-core-path-l1-1-0.dll修复方案》:本文主要介绍了无法启动此程序,详细内容请阅读本文,希望能对你有所帮助... 在计算机使用过程中,我们经常会遇到一些错误提示,其中之一就是"api-ms-win-core-path-l1-1-0.dll丢失

SpringBoot后端实现小程序微信登录功能实现

《SpringBoot后端实现小程序微信登录功能实现》微信小程序登录是开发者通过微信提供的身份验证机制,获取用户唯一标识(openid)和会话密钥(session_key)的过程,这篇文章给大家介绍S... 目录SpringBoot实现微信小程序登录简介SpringBoot后端实现微信登录SpringBoo

uniapp小程序中实现无缝衔接滚动效果代码示例

《uniapp小程序中实现无缝衔接滚动效果代码示例》:本文主要介绍uniapp小程序中实现无缝衔接滚动效果的相关资料,该方法可以实现滚动内容中字的不同的颜色更改,并且可以根据需要进行艺术化更改和自... 组件滚动通知只能实现简单的滚动效果,不能实现滚动内容中的字进行不同颜色的更改,下面实现一个无缝衔接的滚动

Java使用WebView实现桌面程序的技术指南

《Java使用WebView实现桌面程序的技术指南》在现代软件开发中,许多应用需要在桌面程序中嵌入Web页面,例如,你可能需要在Java桌面应用中嵌入一部分Web前端,或者加载一个HTML5界面以增强... 目录1、简述2、WebView 特点3、搭建 WebView 示例3.1 添加 JavaFX 依赖3