超真诚婚礼邀请函小程序

结婚了，自己写个婚礼邀请函小程序，含泪省下￥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://xiahunao.cn/news/2812730.html

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

AxureCloud配置文件详细介绍

AxureCloud配置文件详细介绍

AxureCloud配置文件详细介绍 原文地址&#xff1a;https://docs.axure.com/axure-cloud/business/custom-settings-json/ 通过修改 customsettings.json 可以修改AxureCloud私有部署的域名、端口、HTTPS、存储目录、是否开启插件等, 默认安装的路径为: C:\Program Files\Axure…
阅读更多...
斯元Z-ONE-China Cybersecurity Tech Landscape·中国网络安全全景图-百度网盘下载

斯元Z-ONE-China Cybersecurity Tech Landscape·中国网络安全全景图-百度网盘下载

面向全球&#xff0c;斯元Z-ONE正式发布首版「China Cybersecurity Tech Landscape中国网络安全全景图」。 为了提升海外市场对中国网络安全行业的全局认识&#xff0c;方便国际客户及合作伙伴了解中国网络安全科技的赛道分布和国内外厂商对标&#xff0c;助力中国网安厂商出海…
阅读更多...
抖音视频评论抓取软件|视频批量下载

抖音视频评论抓取软件|视频批量下载

抖音视频评论采集软件是一款基于C#开发的高效、便捷的工具&#xff0c;旨在为用户提供全面的数据采集和分析服务。该软件不仅支持通过关键词进行搜索抓取&#xff0c;还能够通过分享链接进行单个视频的抓取和下载&#xff0c;让用户轻松获取抖音视频评论数据。 &#x1f50d; …
阅读更多...
文章总结(拉钩教育)

文章总结(拉钩教育)

方法论 那对于我们专栏来说&#xff0c;在面对复杂的检索知识的时候&#xff0c;我更建议你通过理解记忆的方式进行学习。具体的方式有啥呢&#xff1f;我比较推荐问答的方式。也就是说&#xff0c;在学习每个知识点的时候&#xff0c;你可以一直问自己几个问题&#xff0c;比…
阅读更多...
【Vue】组件通信2

【Vue】组件通信2

&#x1f4dd;个人主页&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;Vue ⛺️稳中求进&#xff0c;晒太阳 v-model原理 原理&#xff1a; v-model本质是一个语法糖&#xff0c;例如在输入输入框上&#xff0c;就是value属性和input数据的合写&#xff08;注…
阅读更多...
如何战胜人性弱点，克服频繁交易？

如何战胜人性弱点，克服频繁交易？

巴菲特曾说过&#xff0c;如果商学院的学生毕业后&#xff0c;拿一张卡片来打洞&#xff0c;买一只打一孔洞&#xff0c;那么&#xff0c;经过一生&#xff0c;卡片上的洞洞最少的同学最有可能成为巨富。 “钱在这里从活跃的投资者流向有耐心的投资者。许多精力旺盛的有进取心投…
阅读更多...
袁庭新ES系列12节 | Elasticsearch高级查询操作

袁庭新ES系列12节 | Elasticsearch高级查询操作

前言 上篇文章讲了关于Elasticsearch的基本查询操作。接下来袁老师为大家带来Elasticsearch高级查询部分相关的内容。Elasticsearch是基于JSON提供完整的查询DSL&#xff08;Domain Specific Language&#xff1a;领域特定语言&#xff09;来定义查询。因此&#xff0c;我们有…
阅读更多...
Unity零基础到进阶 | Unity中的 RectTransformUtility 方法整理汇总

Unity零基础到进阶 | Unity中的 RectTransformUtility 方法整理汇总

Unity零基础到进阶 ☀️| RectTransformUtility 方法整理汇总一、RectTransformUtility 官方文档1.1 RectTransformUtility.CalculateRelativeRectTransformBounds&#xff08;重&#xff09;1.2 RectTransformUtility.FlipLayoutAxes1.3 RectTransformUtility.FlipLayoutOnAxi…
阅读更多...
前端-Vue3递归组件自定义Tree

前端-Vue3递归组件自定义Tree

需求 PS&#xff1a;写在前面&#xff0c;需求想要一个Tree 形结构展示当前的组织机构&#xff0c;最末层节点可以选择&#xff0c;层级明确。第一选择网上npm官网或者github 找找成型的东西 element-ui Tree 没有组织结构线js-tree 好看&#xff0c;但是适配Vue3 有点费劲&a…
阅读更多...
等时圈API对比

等时圈API对比

有时候&#xff0c;我们用地图是为了查路线&#xff0c;以及了解到目的地所需要的时间。等时地图可以让你很清楚地了解到路上需要多长时间。 等时地图用不同的颜色表示从固定位置出发需要的时间范围&#xff0c;比如绿色表示10分钟、黄色表示10-20分钟等等。 这种地图一目了然…
阅读更多...
卡玛网52. 携带研究材料（第七期模拟笔试）

卡玛网52. 携带研究材料（第七期模拟笔试）

题目&#xff1a; 代码(首刷看解析&#xff09;&#xff1a; #include<bits/stdc.h> using namespace std;int help(int N, int bagSize, vector<vector<int>>& materals) {vector<int> dp(bagSize 1, 0);for (int i 0; i < N; i) {for (int…
阅读更多...
【数据结构】线性表 顺序表（动态、静态分配，插入删除查找基本操作）解析+完整代码

【数据结构】线性表 顺序表（动态、静态分配，插入删除查找基本操作）解析+完整代码

1.线性表的基本概念 定义 线性表&#xff08;Linear List&#xff09;是具有相同数据类型的n个数据元素的有限序列。 n为表长&#xff0c;n0时线性表是个空表 前驱、后继 前驱&#xff1a;其中一个数据元素的前一个元素。第一个元素没有前驱。后继&#xff1a;其中一个数据元素…
阅读更多...
Internet协议

Internet协议

文章目录 Internet协议网络层协议IPV4协议IP地址&#xff1a;IPv4数据报格式IP数据报的封装和分片 Internet路由协议路由信息协议RIP开放最短路径优先协议OSPF外部网关协议BGP组播协议PIM和MOSPF ARP和RARPARP协议&#xff1a;RARP协议&#xff1a; Internet控制报文协议ICMPIP…
阅读更多...
redis八股

redis八股

文章目录 数据类型字符串实现使用场景 List 列表实现使用场景 Hash 哈希实现使用场景 Set 集合实现使用场景 ZSet 有序集合实现使用场景 BitMap实现使用场景 Stream使用场景pubsub为什么不能作为消息队列 数据结构机制SDS 简单动态字符串压缩列表哈希表整数集合跳表quicklistli…
阅读更多...
数学建模论文、代码百度网盘链接

数学建模论文、代码百度网盘链接

1.[2018中国大数据年终总决赛冠军] 金融市场板块划分与轮动规律挖掘与可视化问题 2.[2019第九届MathorCup数模二等奖] 数据驱动的城市轨道交通网络优化策略 3.[2019电工杯一等奖] 露天停车场停车位的优化设计 4.[2019数学中国网络数模一等奖] 基于机器学习的保险业数字化变革…
阅读更多...
MapGIS农业信息化解决方案（2）

MapGIS农业信息化解决方案（2）

农业资源采集与调查 农业各项生产活动与农业资源息息相关，对农业资源进行调查，摸清农业家底， 为构筑农业“一张图”核心数据库奠定数据基础。MapGIS 农业资源采集与调查系统集成遥感、手持终端等调查技术，为农业资源采集提供实用、简捷的采集调查和信息录入工具，实现农田…
阅读更多...
线激光转台拼接重建

线激光转台拼接重建

单线激光在进行三维重建的时候每次只能重建一条激光线,为了得到一个完整的物体需要借助外部结构。而基于转台的方式可以很好的完成这一操作。整个系统包括了相机标定、激光线标定与重建、转台标定、转台拼接。将相机和激光器固定在特定位置&#xff0c;然后让转台带动物体进行旋…
阅读更多...
消息中间件篇之Kafka-数据清理机制

消息中间件篇之Kafka-数据清理机制

一、Kafka文件存储机制 Kafka文件存储结构&#xff1a;一个Topic有多个分区。每一个分区都有多个段&#xff0c;每个段都有三个文件。 为什么要分段&#xff1f;1. 删除无用文件方便&#xff0c;提高磁盘利用率。 2. 查找数据便捷。 二、数据清理机制 1.日志的清理策略方案1 根…
阅读更多...
运维管理制度优化：确保IT系统稳定运行的关键策略

运维管理制度优化：确保IT系统稳定运行的关键策略

1、总则 第一条&#xff1a;为保障公司信息系统软硬件设备的良好运行&#xff0c;使员工的运维工作制度化、流程化、规范化&#xff0c;特制订本制度。 第二条&#xff1a;运维工作总体目标&#xff1a;立足根本促发展&#xff0c;开拓运维新局面。在企业发展壮大时期&#x…
阅读更多...
服务器被黑该如何查找入侵痕迹以及如何防御攻击

服务器被黑该如何查找入侵痕迹以及如何防御攻击

当公司的网站服务器被黑&#xff0c;被入侵导致整个网站&#xff0c;以及业务系统瘫痪&#xff0c;给企业带来的损失无法估量&#xff0c;但是当发生服务器被攻击的情况&#xff0c;作为服务器的维护人员应当在第一时间做好安全响应&#xff0c;对服务器以及网站应以最快的时间…
阅读更多...
最新文章

Copyright @ 2022~2023