超真诚婚礼邀请函小程序

结婚了,自己写个婚礼邀请函小程序,含泪省下¥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.mzph.cn/news/705428.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于HT32的智能家居demo(蓝牙上位机)

参加合泰杯作品的部分展示&#xff0c;基于HT32的智能家居&#xff0c;这里展示灯光的相关控制&#xff0c;是用蓝牙进行的数据透传&#xff0c;参考了一些资料&#xff0c;美化封装了一下之前的上位机界面。 成果展示 点击主界面的蓝牙设置&#xff0c;进行连接&#xff0c;下…

Rust调用同级目录中的rs文件和调用下级目录中的rs文件

一、Rust调用同级目录中的rs文件 Rust新建工程demo02&#xff0c;src文件夹下面新建test.rs文件&#xff0c;这样main.rs文件与它属于同级目录中。 关键点&#xff1a;导入test文件和test文件中的Ellipse模块 mod test;//导入test模块&#xff08;文件&#xff09; use test…

iview碰到的一些问题总结

iview tabs嵌套使用问题 tabs嵌套使用的时候不是直接套用行了&#xff0c;直接套用会出现内层tab都集成到一级tab去&#xff0c;需要设置该属性指向对应 Tabs 的 name 字段(需要版本大于3.3.1) <Tabs name"tab1" ><TabPane label"标签1" tab&qu…

【程序员英语】【美语从头学】初级篇(入门)(笔记)Lesson 16 At the Shoe Store 在鞋店

《美语从头学初级入门篇》 注意&#xff1a;被 删除线 划掉的不一定不正确&#xff0c;只是不是标准答案。 文章目录 Lesson 16 At the Shoe Store 在鞋店对话A对话B笔记会话A会话B替换 Lesson 16 At the Shoe Store 在鞋店 对话A A: Do you have these shoes in size 8? B:…

FL Studio All Plugins Edition2024中文完整版Win/Mac

FL Studio All Plugins Edition&#xff0c;常被誉为数字音频工作站&#xff08;DAW&#xff09;的佼佼者&#xff0c;是音乐制作人和声音工程师钟爱的工具。它集音频录制、编辑、混音以及MIDI制作为一体&#xff0c;为用户提供了从创作到最终作品输出的完整工作流程。这个版本…

第 1 章 微信小程序与云开发从入门到实践从零开始做小程序——开发认识微信小程序

小北的参考工具书 小程序开发的图书并不少&#xff0c;这本书仍然值得你拥有&#xff01; 首先&#xff0c;这是一本全栈小程序开发教程&#xff0c;循序渐进&#xff0c;由浅入深&#xff0c;介绍了小程序开发你想了解的方方面面&#xff0c;包括近其小程序开发的各种新技术应…

如何避免在绩效考核评分时“脸盲”

对于大型企业来说&#xff0c;如何保证在绩效考核评分时准确快速地回忆起员工的日常表现&#xff0c;已经成为困扰管理者的难题。由于大型企业员工数量众多且业务模块繁杂&#xff0c;公司领导很难对每个员工的工作情况都了如指掌。这导致在绩效考核评分时&#xff0c;公司领导…

利用R语言进行典型相关分析实战

&#x1f349;CSDN小墨&晓末:https://blog.csdn.net/jd1813346972 个人介绍: 研一&#xff5c;统计学&#xff5c;干货分享          擅长Python、Matlab、R等主流编程软件          累计十余项国家级比赛奖项&#xff0c;参与研究经费10w、40w级横向 文…

Python爬虫实战:从API获取数据

引言 在现代软件开发中&#xff0c;API已经成为获取数据的主要方式之一。API允许不同的软件应用程序相互通信&#xff0c;共享数据和功能。在本文中&#xff0c;我们将学习如何使用Python从API获取数据&#xff0c;并探讨其在实际应用中的价值。 目录 引言 二、API基础知识 …

辽宁博学优晨教育视频剪辑培训探索学习新意义

在当今数字化快速发展的时代&#xff0c;视频已成为信息传达的重要载体。辽宁博学优晨教育视频剪辑培训应运而生&#xff0c;不仅为学员提供了专业的学习平台&#xff0c;更在探索学习的意义方面赋予了新的内涵。 视频剪辑作为现代媒体行业的重要技能&#xff0c;其学习意义不仅…

【计算机图形学】Where2Act: From Pixels to Actions for Articulated 3D Objects

文章目录 1.论文做了件什么事儿2. 论文为什么要做这件事3. 介绍Introduction4. 相关工作预测语义表达推理几何和物体属性从被动观察中学习Affordance从交互中学习感知 5. 问题陈述6. 方法6.1 网络模块主干特征提取器可运动性评分模块运动建议模块运动评分模块 6.2 训练数据收集…

编曲学习:高叠和弦 挂留和弦 和弦实战应用

高叠和弦 挂留和弦 和弦实战应用小鹅通-专注内容付费的技术服务商https://app8epdhy0u9502.pc.xiaoe-tech.com/live_pc/l_65d4826fe4b04c10a1310517?course_id=course_2XLKtQnQx9GrQHac7OPmHD9tqbv 七和弦 以三和弦举例,三和弦上面叠一个三度的音,就变成了七和弦。 从下到…

消息中间件篇之Kafka-高可用机制

一、 集群模式 1. Kafka的服务器端由被称为Broker的服务进程构成&#xff0c;即一个Kafka集群由多个Broker组成。 2. 这样如果集群中某一台机器宕机&#xff0c;其他机器上的 Broker 也依然能够对外提供服务。这其实就是 Kafka 提供高可用的手段之一。 二、分区备份机制 1. 一个…

英语四级,求职的必备项?【文章底部添加可得内推码汇总表】

目录 英语四级&#xff1a;求职的砝码 提升职业竞争力 国内外机会双丰收 系统备考英语四级 实际运用英语 强调英语四级证书 在当今全球化的职场中&#xff0c;英语四级证书愈发成为求职的必备项。它不仅仅是一张证书&#xff0c;更是通向更广阔职业世界的关键通行证。本文…

【自然语言处理四-从矩阵操作角度看 自注意self attention】

自然语言处理四-从矩阵操作角度看 自注意self attention 从矩阵角度看self attention获取Q K V矩阵注意力分数softmax注意力的输出再来分析整体的attention的矩阵操作过程从矩阵操作角度看&#xff0c;self attention如何解决问题的&#xff1f;W^q^ W^k^ W^v^这三个矩阵怎么获…

前后端分离nodejs+vue高校教材征订系统47nia

本教材管理网站是为了提高用户查阅信息的效率和管理人员管理信息的工作效率&#xff0c;可以快速存储大量数据&#xff0c;还有信息检索功能&#xff0c;这大大的满足了学生、教师和管理员这三者的需求。操作简单易懂&#xff0c;合理分析各个模块的功能&#xff0c;尽可能优化…

Window系统本地搭建LightPicture网站并实现远程上传下载本地图片

文章目录 1.前言2. Lightpicture网站搭建2.1. Lightpicture下载和安装2.2. Lightpicture网页测试2.3.cpolar的安装和注册 3.本地网页发布3.1.Cpolar云端设置3.2.Cpolar本地设置 4.公网访问测试5.结语 1.前言 现在的手机越来越先进&#xff0c;功能也越来越多&#xff0c;而手机…

leetcode 2867. 统计树中的合法路径数目【筛质数+贡献法】

原题链接&#xff1a;2867. 统计树中的合法路径数目 题目描述&#xff1a; 给你一棵 n 个节点的无向树&#xff0c;节点编号为 1 到 n 。给你一个整数 n 和一个长度为 n - 1 的二维整数数组 edges &#xff0c;其中 edges[i] [ui, vi] 表示节点 ui 和 vi 在树中有一条边。 …

【服务器数据恢复】ext3文件系统下硬盘坏道掉线的数据恢复案例

服务器数据恢复环境&#xff1a; 一台IBM某型号服务器上有16块FC硬盘组建RAID阵列。上层linux操作系统&#xff0c;ext3文件系统&#xff0c;部署有oracle数据库。 服务器故障&检测&#xff1a; 服务器上跑的业务突然崩溃&#xff0c;管理员发现服务器上有2块磁盘的指示灯…

PyQt6的开发流程(密码生成小程序为例)

PyQt6的开发流程&#xff08;密码生成小程序为例&#xff09; 文章目录 PyQt6的开发流程&#xff08;密码生成小程序为例&#xff09;一、流程介绍与概览1. 界面与逻辑分离的开发流程2. PyQt6的开发流程 二、打开 designer.exe 创建文件三、用QT设计师绘制界面保存成ui1. QT常用…