超真诚婚礼邀请函小程序

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。

相关文章

JAVA智听未来一站式有声阅读平台听书系统小程序源码

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来，一站式有声阅读平台听书系统 🌟&nbsp;开篇：遇见未来，从“智听”开始 在这个快节奏的时代，你是否渴望在忙碌的间隙，找到一片属于自己的宁静角落？是否梦想着能随时随地，沉浸在知识的海洋，或是故事的奇幻世界里？今天，就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统，它正悄悄改变着我们的阅读方式，让未来触手可及！ 📚&nbsp;第一站：海量资源，应有尽有 走进“智听
阅读更多...
EMLOG程序单页友链和标签增加美化

EMLOG程序单页友链和标签增加美化

单页友联效果图： 标签页面效果图： 源码介绍 EMLOG单页友情链接和TAG标签，友链单页文件代码main{width: 58%;是设置宽度 自己把设置成与您的网站宽度一样，如果自适应就填写100%，TAG文件不用修改 安装方法：把Links.php和tag.php上传到网站根目录即可，访问 域名/Links.php、域名/tag.php 所有模板适用，代码就不粘贴出来，已经打
阅读更多...
跨系统环境下LabVIEW程序稳定运行

跨系统环境下LabVIEW程序稳定运行

在LabVIEW开发中，不同电脑的配置和操作系统（如Win11与Win7）可能对程序的稳定运行产生影响。为了确保程序在不同平台上都能正常且稳定运行，需要从兼容性、驱动、以及性能优化等多个方面入手。本文将详细介绍如何在不同系统环境下，使LabVIEW开发的程序保持稳定运行的有效策略。 LabVIEW版本兼容性 LabVIEW各版本对不同操作系统的支持存在差异。因此，在开发程序时，尽量使用
阅读更多...
CSP 2023 提高级第一轮 CSP-S 2023初试题 完善程序第二题解析 未完

CSP 2023 提高级第一轮 CSP-S 2023初试题 完善程序第二题解析 未完

一、题目阅读 （最大值之和）给定整数序列 a0,⋯,an−1，求该序列所有非空连续子序列的最大值之和。上述参数满足 1≤n≤105 和 1≤ai≤108。 一个序列的非空连续子序列可以用两个下标 ll 和 rr（其中0≤l≤r<n0≤l≤r<n）表示，对应的序列为 al,al+1,⋯,ar​。两个非空连续子序列不同，当且仅当下标不同。 例如，当原序列为 [1,2,1,2] 时，要计算子序列 [
阅读更多...
这些心智程序你安装了吗？

这些心智程序你安装了吗？

原文题目：《为什么聪明人也会做蠢事（四）》 心智程序 大脑有两个特征导致人类不够理性，一个是处理信息方面的缺陷，一个是心智程序出了问题。前者可以称为“认知吝啬鬼”，前几篇文章已经讨论了。本期主要讲心智程序这个方面。 心智程序这一概念由哈佛大学认知科学家大卫•帕金斯提出，指个体可以从记忆中提取出的规则、知识、程序和策略，以辅助我们决策判断和解决问题。如果把人脑比喻成计算机，那心智程序就是人脑的
阅读更多...
uniapp设置微信小程序的交互反馈

uniapp设置微信小程序的交互反馈

链接：uni.showToast(OBJECT) | uni-app官网 (dcloud.net.cn) 设置操作成功的弹窗： title是我们弹窗提示的文字 showToast是我们在加载的时候进入就会弹出的提示。 2.设置失败的提示窗口和标签 icon：'error'是设置我们失败的logo 设置的文字上限是7个文字，如果需要设置的提示文字过长就需要设置icon并给
阅读更多...
基于SpringBoot的宠物服务系统+uniapp小程序+LW参考示例

基于SpringBoot的宠物服务系统+uniapp小程序+LW参考示例

系列文章目录 1.基于SSM的洗衣房管理系统+原生微信小程序+LW参考示例 2.基于SpringBoot的宠物摄影网站管理系统+LW参考示例 3.基于SpringBoot+Vue的企业人事管理系统+LW参考示例 4.基于SSM的高校实验室管理系统+LW参考示例 5.基于SpringBoot的二手数码回收系统+原生微信小程序+LW参考示例 6.基于SSM的民宿预订管理系统+LW参考示例 7.基于
阅读更多...
Spring Roo 实站（ 一 ）部署安装 第一个示例程序

Spring Roo 实站（ 一 ）部署安装 第一个示例程序

转自：http://blog.csdn.net/jun55xiu/article/details/9380213 一：安装 注：可以参与官网spring-roo： static.springsource.org/spring-roo/reference/html/intro.html#intro-exploring-sampleROO_OPTS http://stati
阅读更多...
未来工作趋势：零工小程序在共享经济中的作用

未来工作趋势：零工小程序在共享经济中的作用

经济在不断发展的同时，科技也在飞速发展。零工经济作为一种新兴的工作模式，正在全球范围内迅速崛起。特别是在中国，随着数字经济的蓬勃发展和共享经济模式的深入推广，零工小程序在促进就业、提升资源利用效率方面显示出了巨大的潜力和价值。 一、零工经济的定义及现状 零工经济是指通过临时性、自由职业或项目制的工作形式，利用互联网平台快速匹配供需双方的新型经济模式。这种模式打破了传统全职工作的界限，为劳动
阅读更多...
Java程序到CPU上执行 的步骤

Java程序到CPU上执行 的步骤

相信很多的小伙伴在最初学习编程的时候会容易产生一个疑惑❓，那就是编写的Java代码究竟是怎么一步一步到CPU上去执行的呢？CPU又是如何执行的呢？今天跟随小编的脚步去化解开这个疑惑❓。 在学习这个过程之前，我们需要先讲解一些与本内容相关的知识点 指令 指令是指导CPU运行的命令，主要由操作码+被操作数组成。 其中操作码用来表示要做什么动作，被操作数是本条指令要操作的数据，可能是内存地址，也
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2