diff --git a/.gitignore b/.gitignore
index 958c4ab65bb307f6535275716ffb1596fb327388..16fa6b5fb2cbd3416e83bd644ba7a85e0b15240c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,4 +2,5 @@ node_modules/
 unpackage/ 
 config/halo.config.js
 config/ad.config.js
+config/love.config.js
 package-lock.json
\ No newline at end of file
diff --git a/components/article-card/article-card.vue b/components/article-card/article-card.vue
index 2e09444963a409374f0f5f45aad40828dfa6caa4..77255c51fc4986661fc325fff6aed7d1793ba0c5 100644
--- a/components/article-card/article-card.vue
+++ b/components/article-card/article-card.vue
@@ -157,7 +157,7 @@ export default {
 	}
 	&.tb_image_text {
 		flex-direction: column;
-		padding: 0;
+		padding: 24rpx;
 		.left {
 			width: 100%;
 			height: 340rpx;
@@ -169,7 +169,8 @@ export default {
 		}
 		.right {
 			padding-left: 0;
-			padding: 24rpx;
+			padding: 24rpx 0;
+			padding-bottom: 0;
 			width: 100%;
 			.foot {
 				justify-content: flex-start;
diff --git a/components/cache-image/cache-image.vue b/components/cache-image/cache-image.vue
index 8ef7a02a002a4f87e3ee0d7f17eb806536b57859..7ef442983a3cf7c2314e7f5df45aacf63a1435bb 100644
--- a/components/cache-image/cache-image.vue
+++ b/components/cache-image/cache-image.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="cache-image">
+	<view class="cache-image-wrap">
 		<view v-if="loadStatus == 'loading'" class="img-loading" :style="[imgStyle, loadStyle]">
 			<!-- <text class="img-load-icon iconfont icon-loading"></text>
 			<text class="img-load-text">{{ loadText }}</text> -->
@@ -145,7 +145,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.cache-image {
+.cache-image-wrap {
 	width: 100%;
 	height: 100%;
 }
diff --git a/components/category-mini-card/category-mini-card.vue b/components/category-mini-card/category-mini-card.vue
index ca7021eb16d7046c74ef96824a147fe33dc2de71..8e301dd26037b46570580787654f38554007c4d1 100644
--- a/components/category-mini-card/category-mini-card.vue
+++ b/components/category-mini-card/category-mini-card.vue
@@ -1,6 +1,5 @@
 <template>
 	<view class="category-mini-card">
-		<!-- 	<image class="img" lazy-load :src="$utils.checkThumbnailUrl(category.thumbnail)" mode="aspectFill"></image> -->
 		<cache-image
 			class="img"
 			height="120rpx"
@@ -35,12 +34,13 @@ export default {
 	border-radius: 12rpx;
 	background-color: #fff;
 	overflow: hidden;
-	// border: 2rpx solid #f7f7f7;
 	box-shadow: 0rpx 2rpx 24rpx rgba(0, 0, 0, 0.03);
+	position: relative;
 	.img {
 		width: 100%;
 		height: 120rpx;
 		border: 6rpx 6rpx 0 0;
+		overflow: hidden;
 	}
 	.label {
 		position: absolute;
@@ -55,9 +55,13 @@ export default {
 		padding-right: 24rpx;
 	}
 	.name {
+		position: absolute;
+		bottom: 16rpx;
+		left: 0;
+		right: 0;
 		font-size: 24rpx;
 		text-align: center;
-		color: var(--main-text-color);
+		color: #333;
 	}
 }
 </style>
diff --git a/components/scroll-btn/scroll-btn.vue b/components/scroll-btn/scroll-btn.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d321b1f43f7372c96074803d98d3ff22d03c0cd4
--- /dev/null
+++ b/components/scroll-btn/scroll-btn.vue
@@ -0,0 +1,79 @@
+<template>
+	<view class="scroll-btn" :style="{ bottom: bottom }" @click.stop="fnScroll()">
+		<text v-if="_scrollTop >= 180" class="iconfont icon-long-arrow-up"></text>
+		<text v-else class="iconfont icon-long-arrow-down"></text>
+	</view>
+</template>
+
+<script>
+import throttle from '@/utils/throttle.js';
+export default {
+	name: 'scroll-btn',
+	props: {
+		bottom: {
+			type: String,
+			default: '180rpx'
+		},
+		scrollTop: {
+			type: Number,
+			default: 0
+		}
+	},
+	data() {
+		return { _scrollTop: 0 };
+	},
+	watch: {
+		scrollTop(val) {
+			this._scrollTop = val;
+			console.log('监听1：', val);
+			this.$forceUpdate();
+		}
+	},
+	created() {
+		this._scrollTop = this.scrollTop;
+	},
+	methods: {
+		fnScroll() {
+			throttle(() => {
+				const isTop = this._scrollTop >= 180;
+				this._scrollTop = isTop ? 0 : 999999;
+				uni.pageScrollTo({
+					duration: 500,
+					scrollTop: this._scrollTop
+				});
+				this.$emit('update:scrollTop', this._scrollTop);
+			});
+		}
+	}
+};
+</script>
+
+<style scoped lang="scss">
+.scroll-btn {
+	position: fixed;
+	// bottom: 200rpx;
+	// right: -90rpx;
+	right: 52rpx;
+	width: 80rpx;
+	height: 80rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	box-sizing: border-box;
+	border-radius: 50%;
+	border: 4rpx solid #ffffff;
+	background-color: #bfe9ef;
+	box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.1);
+	z-index: 99;
+	transition: right 0.5s ease-in-out;
+
+	&.is-show {
+		right: 52rpx;
+	}
+
+	.iconfont {
+		font-size: 36rpx;
+		color: #555;
+	}
+}
+</style>
diff --git a/config/love.config.js b/config/love.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..5c220e835bae4cccb7151b22c6082cc12a816f30
--- /dev/null
+++ b/config/love.config.js
@@ -0,0 +1,148 @@
+/**
+ * 恋爱日记配置
+ */
+export default {
+	waveImageUrl: 'https://b.925i.cn/uni_halo/uni_halo_about_wave.gif', // 波浪图片地址
+	bgImageUrl: 'https://b.925i.cn/uni_halo_love/love_bg1.png', // 背景图片
+	loveImageUrl: 'https://b.925i.cn/uni_halo_love/like.png', // 爱心图片
+
+	boy: {
+		name: '未知男主',
+		avatar: 'https://b.925i.cn/uni_halo_love/love_boy.png',
+		birthday: '2022-09-25', // 生日
+	},
+
+	girl: {
+		name: '未知女主',
+		avatar: 'https://b.925i.cn/uni_halo_love/love_girl.png',
+		birthday: '2022-07-25', // 生日
+	},
+	timeTitle: '这是我们一起走过的',
+	loveStartDate: '2022-05-20 13:14:20', // 恋爱开始时间 
+
+	nav: [{
+			key: 'journey',
+			use: true,
+			iconImageUrl: 'https://b.925i.cn/uni_halo_love/diandian.png',
+			title: '关于我们',
+			desc: '我们一起度过的那些经历'
+		},
+		{
+			key: 'album',
+			use: true,
+			iconImageUrl: 'https://b.925i.cn/uni_halo_love/diandian.png',
+			title: '恋爱相册',
+			desc: '定格了我们的那些小美好'
+		},
+		{
+			key: 'list',
+			use: true,
+			iconImageUrl: 'https://b.925i.cn/uni_halo_love/diandian.png',
+			title: '恋爱清单',
+			desc: '你我之间的约定我们都在努力实现'
+		},
+	],
+
+	// 关于我们：支持富文本内容
+	journey: `
+		准备晚安啦,睡觉前讲个故事吧~<p>槐树庄的村口有一棵大槐树，树下的村口第一家就是猫奶奶的家。</p><p>猫奶奶是一位孤寡老人，因为她经常收留和救治周围的流浪猫，所以村民就都管她叫“猫奶奶”。</p><p>一个月圆之夜，猫奶奶走到院门口，忽然发现门口石级上放着一个红毯子，里面包着一个啼（tí）哭的女婴。</p><p>猫奶奶找不到女婴的父母，只好收留了她，并给她起了个名字叫樱红。</p><p>猫奶奶辛苦地抚育着樱红成长，转眼之间，樱红已经九岁，上小学三年级了。</p><p>从樱红懂事起，猫奶奶就爱给她讲一个睡前故事，那是当地一个古老的传说。</p><p>在浓郁的树影深处有一个百花园，百花园里生长着奇花异草，还住了一个会唱歌的花仙子。花仙子的歌声美丽动人，能治百病。但是那里有一条奇怪的规矩，寻找花仙子的人在进入百花园后，见到花仙子之前，都不能发出一点声音，不然花仙子就不会出来见他。</p><p>受这个故事的影响，樱红特别喜欢唱歌。</p><p>这天晚上，樱红放学回家，家家户户炊烟袅（niǎo）袅，而自家烟囱却连一丝一缕（lǚ）的炊烟都没有。</p><p>樱红一惊，冲进院门一看，果然出事了！只见猫奶奶呻吟着倒在灶台前，双目紧闭，两只小脚也在不停地抽搐（chù）。</p><p>樱红慌了，好在有邻居的帮助，猫奶奶被送到了医院。经过抢救，猫奶奶总算醒过来，但是却半身不遂（suí），说话也不利落了。</p><p>猫奶奶不能下地行走做家务，小小的樱红，一夜之间就挑起了家庭的重担。</p><p>樱红一面求助于村委会，四处寻医问药，让猫奶奶获得进一步的治疗；一面在课余学做家务，悉心照顾猫奶奶，端水喂饭，不辞辛苦。</p><p>自从猫奶奶病倒以后，樱红每天早晨推开院门就会看见门前放着一朵小花，有时还会有一两尾鲜活的鲑（guī）鱼。</p><p>这样过了三个月，好奇的樱红在一个夜晚悄悄躲在院门的后面，想看看到底是谁。</p><p>到了午夜十二点，只见一只花猫衔着一棵风铃草来到院门前，把风铃草放下，转身就走。（浪漫童话小故事）樱红认出这只小花猫曾经被猫奶奶救助过，于是，她悄悄地尾随小花猫往前走。</p><p>不一会儿，她就发现自己进入了一个从未见过的世界：蔚蓝的天空飘着七色的云，阳光千丝万缕地落下来，鲜花盛开，彩蝶飞舞，百鸟齐鸣。</p><p>这到底是什么地方？她忽然想起了那个传说，这该不会就是花仙子住的百花园吧？</p><p>樱红几乎惊叫起来，但她立即想起了那条在见到花仙子之前，不能发出一点声音的规矩。于是她捂紧了嘴巴。</p><p>这时，她发现百花园里除了自己还有一个面色苍白的男孩子，闭着眼睛，右手攥着一根竹竿摸索着前行，应该是眼睛看不见了。</p><p>只见男孩子慢慢地偏离了路径，马上就要掉进路边的水沟里了。</p><p>樱红下意识地大声呼喊：“站住，小心脚底下！”一张口，樱红才想起来，自己已经坏了规矩！</p><p>此时，“轰隆”一声巨响后，眼前的一切都消失了，樱红仍然站在自家院门前的大槐树下。</p><p>真遗憾啊！樱红深深叹了口气，可为了救人，她并不觉得后悔。</p><p>第二天早上，樱红被一种美妙的歌声唤醒。</p><p>唱歌的人就是美丽的花仙子，她乘坐着奇花异草编成的花篮，飘进了她家的院子里。</p><p>奇迹发生了，只见猫奶奶起身下床，像健康人一样走出房门。</p><p>猫奶奶看到了花仙子，不敢相信地揉着眼睛说：“你就是传说中的花仙子吗？是你治好了我的病？”</p><p>花仙子说：“是的！是这个小女孩的善良打动了我，连我那不能出声的规矩都要为她破例了。”</p><p>樱红高兴地看着猫奶奶。从此，她和猫奶奶继续幸福地生活着。</p>
+	`,
+	// 恋爱相册
+	albumKeyName: '恋爱相册', // 对应后台的图库分组名称
+	// 恋爱清单
+	loveList: {
+		useApi: false, // 是否启用api接口
+		api: '', // api 接口（如果使用api接口的方式，则下方的data可以留空，但是api接口必须按照对应的数据格式返回）
+		data: [{
+				index: 0, // 序号
+				finish: true, // 是否已完成
+				title: '偷偷记录对方熟睡的模样', // 事件名称
+				desc: '偷偷观察对方熟睡的模样，记录下来', // 事件描述
+				detail: {
+					start: '2022年05月20日', // 计划开始时间
+					desc: '偷偷观察对方熟睡的模样，记录下来', // 事件详细描述
+					end: '每天', // 完成时间，
+					moment: '', // 完成瞬间的记录
+					other: '', // 其他说明
+				}
+			}, {
+				index: 1,
+				finish: false,
+				title: '陪对方过生日',
+				desc: '陪对方一起过生日',
+				detail: {
+					start: '2023年05月20日',
+					desc: '陪对方一起过生日，他和我的生日',
+					end: '',
+					moment: '',
+					other: '他 生日5月20日 我生日9月25日',
+				}
+			},
+			{
+				index: 2,
+				finish: false,
+				title: '一起去旅行',
+				desc: '一起来一场说走就走的旅行，希望去的是大理',
+				detail: {
+					start: '',
+					desc: '',
+					end: '',
+					moment: '一起来一场说走就走的旅行，希望去的是大理',
+					other: '',
+				}
+			},
+			{
+				index: 3,
+				finish: false,
+				title: '一起穿情侣装逛街',
+				desc: '一起穿情侣装逛街',
+				detail: {
+					start: '',
+					desc: '',
+					end: '',
+					moment: '',
+					other: '',
+				}
+			},
+			{
+				index: 4,
+				finish: false,
+				title: '一起看日出',
+				desc: '一起看日出',
+				detail: {
+					start: '',
+					desc: '',
+					end: '',
+					moment: '',
+					other: '',
+				}
+			},
+			{
+				index: 5,
+				finish: false,
+				title: '一起看日落',
+				desc: '一起看日落',
+				detail: {
+					start: '',
+					desc: '',
+					end: '',
+					moment: '',
+					other: '', // 其他说明
+				}
+			},
+			{
+				index: 6,
+				finish: false,
+				title: '一起买菜、做饭、刷碗',
+				desc: '一起买菜、做饭、刷碗',
+				detail: {
+					start: '',
+					desc: '',
+					end: '',
+					moment: '',
+					other: '',
+				}
+			}
+		],
+	}
+}
diff --git a/config/love.config.template.js b/config/love.config.template.js
new file mode 100644
index 0000000000000000000000000000000000000000..86daecb6df38d9039085464d3807d8e8cac0df3f
--- /dev/null
+++ b/config/love.config.template.js
@@ -0,0 +1,150 @@
+/**
+ * 恋爱日记配置
+ */
+export default {
+	waveImageUrl: 'https://b.925i.cn/uni_halo/uni_halo_about_wave.gif', // 波浪图片地址
+	bgImageUrl: 'https://b.925i.cn/uni_halo_love/love_bg1.png', // 背景图片
+	loveImageUrl: 'https://b.925i.cn/uni_halo_love/like.png', // 爱心图片
+
+	boy: {
+		name: '未知男主',
+		avatar: 'https://b.925i.cn/uni_halo_love/love_boy.png',
+		birthday: '2022-09-25', // 生日
+	},
+
+	girl: {
+		name: '未知女主',
+		avatar: 'https://b.925i.cn/uni_halo_love/love_girl.png',
+		birthday: '2022-07-25', // 生日
+	},
+
+	timeTitle: '这是我们一起走过的', // 恋爱时间标题
+	loveStartDate: '2022-05-20 13:14:20', // 恋爱开始时间 
+
+	// 恋爱日记首页导航（除了 key 以外都可以修改）
+	nav: [{
+			key: 'journey',
+			use: true,
+			iconImageUrl: 'https://b.925i.cn/uni_halo_love/diandian.png',
+			title: '关于我们',
+			desc: '我们一起度过的那些经历'
+		},
+		{
+			key: 'album',
+			use: true,
+			iconImageUrl: 'https://b.925i.cn/uni_halo_love/diandian.png',
+			title: '恋爱相册',
+			desc: '定格了我们的那些小美好'
+		},
+		{
+			key: 'list',
+			use: true,
+			iconImageUrl: 'https://b.925i.cn/uni_halo_love/diandian.png',
+			title: '恋爱清单',
+			desc: '你我之间的约定我们都在努力实现'
+		},
+	],
+
+	// 关于我们：支持富文本内容
+	journey: `
+		    <p>有一只马，它的邻居是一只驴。</p><p>有一天，马和驴都被主人牵到外面晒太阳，马和驴聊起了天。</p><p>马说：“我叫马，你呢？”</p><p>驴说：“我叫驴。（哄小宝贝睡觉的甜甜睡前故事）”</p><p>马说：“为什么我俩的名字不一样呢？”</p><p>驴说：“因为我和你不一样。”</p><p>马说：“我们俩什么地方不一样呢？”</p><p>驴说：“我身材小巧，而你却比较粗壮，不如我耐看。”马看了看比自已矮小很多的驴，认为驴说的话有点道理。</p><p>马说：“我们俩除了身材不一样，还有什么不同呢？”</p><p>驴说：“我们俩的声音不一样，我的声音多动听呀！”说着驴伸长脖子叫了两声。“不信，你也叫两声试试。”马也伸长脖子嘶鸣了两声，的确和驴的声音有点不同，马不好意思地低下了头。</p><p>过了一会儿，马又说：“我们俩除了身材和声音不一样外，还有什么不同呢？”</p><p>驴说：“我的步伐多么优雅呀。”说着，驴迈开蹄子走了两步，“而你呢，却昂首阔步，一点儿也不优雅，（如何哄女朋友睡觉的睡前故事爱情浪漫）不信你走两步试试。”</p><p>马听驴这么一说，就高昂着头走了两步，旋即，马飞奔了起来，转了一圈回来后，驴得意地说：“怎么样，我没说错罢，你就是急性子，和优雅不沾边。”马听了驴的话，有点感到惭愧。</p><p>最后，马又鼓起勇气说：“我们俩还有什么不同呢？”</p><p>驴说：“我的家庭意识比你强，主人抽我一鞭子，我就跟着主人回家，而你呢？恐怕不会吧……”</p><p>马还没有来得及回答，马和驴的主人同时来到了马和驴的身边。只见驴的主人抽了驴一鞭子后，驴乖乖地跟着主人回家了。马把这一切都看在了眼里，它为自已和驴的诸多不同而感到惭愧，只见马的主人也抽了马一鞭子，马犹豫了一下，终于象驴一样乖乖地跟着主人回了家。</p><p>一个伯乐站在远处看到了这一幕后，叹口气离开了。</p>
+	`,
+	// 恋爱相册
+	albumKeyName: '恋爱相册', // 对应后台的图库分组名称
+	// 恋爱清单
+	loveList: {
+		useApi: false, // 是否启用api接口
+		api: '', // api 接口（如果使用api接口的方式，则下方的data可以留空，但是api接口必须按照对应的数据格式返回）
+		data: [{
+				index: 0, // 序号
+				finish: true, // 是否已完成
+				title: '偷偷记录对方熟睡的模样', // 事件名称
+				desc: '偷偷观察对方熟睡的模样，记录下来', // 事件描述
+				detail: {
+					start: '2022年05月20日', // 计划开始时间
+					desc: '偷偷观察对方熟睡的模样，记录下来', // 事件详细描述
+					end: '每天', // 完成时间，
+					moment: '', // 完成瞬间的记录
+					other: '', // 其他说明
+				}
+			}, {
+				index: 1,
+				finish: false,
+				title: '陪对方过生日',
+				desc: '陪对方一起过生日',
+				detail: {
+					start: '2023年05月20日',
+					desc: '陪对方一起过生日，他和我的生日',
+					end: '',
+					moment: '',
+					other: '他 生日5月20日 我生日9月25日',
+				}
+			},
+			{
+				index: 2,
+				finish: false,
+				title: '一起去旅行',
+				desc: '一起来一场说走就走的旅行，希望去的是大理',
+				detail: {
+					start: '',
+					desc: '',
+					end: '',
+					moment: '一起来一场说走就走的旅行，希望去的是大理',
+					other: '',
+				}
+			},
+			{
+				index: 3,
+				finish: false,
+				title: '一起穿情侣装逛街',
+				desc: '一起穿情侣装逛街',
+				detail: {
+					start: '',
+					desc: '',
+					end: '',
+					moment: '',
+					other: '',
+				}
+			},
+			{
+				index: 4,
+				finish: false,
+				title: '一起看日出',
+				desc: '一起看日出',
+				detail: {
+					start: '',
+					desc: '',
+					end: '',
+					moment: '',
+					other: '',
+				}
+			},
+			{
+				index: 5,
+				finish: false,
+				title: '一起看日落',
+				desc: '一起看日落',
+				detail: {
+					start: '',
+					desc: '',
+					end: '',
+					moment: '',
+					other: '', // 其他说明
+				}
+			},
+			{
+				index: 6,
+				finish: false,
+				title: '一起买菜、做饭、刷碗',
+				desc: '一起买菜、做饭、刷碗',
+				detail: {
+					start: '',
+					desc: '',
+					end: '',
+					moment: '',
+					other: '',
+				}
+			}
+		],
+	}
+}
diff --git a/package.json b/package.json
index dcd929cec69d093c50ce7329fdea2aea8687a1b4..6ac0716342c63091fb0a65a13822ce190474feae 100644
--- a/package.json
+++ b/package.json
@@ -1,9 +1,23 @@
 {
-  "devDependencies": {
-    "vue-i18n": "^9.1.10"
-  },
-  "dependencies": {
-    "uni-read-pages": "^1.0.5",
-    "uni-simple-router": "^2.0.8-beta.4"
-  }
+	"name": "uni-halo",
+	"version": "1.0.0",
+	"description": "<p align=\"center\">\r     <img alt=\"logo\" src=\"https://b.925i.cn/uni_halo/uni_halo_logo.png\" width=\"120\" height=\"120\" style=\"margin-bottom: 10px;\">\r </p>\r <h3 align=\"center\" style=\"margin: 30px 0 30px;font-weight: bold;font-size:40px;\">uni-halo</h3>\r <h3 align=\"center\">uni-halo 基于Halo一款现代化的开源博客/CMS系统API开发的可多端编译应用</h3>",
+	"repository": {
+		"type": "git",
+		"url": "git+https://gitee.com/ialley-workshop-open/uni-halo.git"
+	},
+	"keywords": ["uni-halo", "小莫唐尼", "巷子工坊"],
+	"author": "巷子工坊丨小莫唐尼",
+	"license": "AGPL-3.0",
+	"bugs": {
+		"url": "https://gitee.com/ialley-workshop-open/uni-halo/issues"
+	},
+	"homepage": "https://uni-halo.925i.cn",
+	"devDependencies": {
+		"vue-i18n": "^9.1.10"
+	},
+	"dependencies": {
+		"uni-read-pages": "^1.0.5",
+		"uni-simple-router": "^2.0.8-beta.4"
+	}
 }
diff --git a/pages.json b/pages.json
index 898b07289595cfa884ebc4ac305f0a263875d679..5952fb2fdadc39d96301ed312c26b6a5770e61d6 100644
--- a/pages.json
+++ b/pages.json
@@ -110,8 +110,9 @@
 			}, {
 				"path": "love/love",
 				"style": {
-					"navigationBarTitleText": "",
-					"enablePullDownRefresh": true,
+					"navigationBarTitleText": "恋爱日记",
+					"navigationStyle": "custom",
+					"enablePullDownRefresh": false,
 					"app-plus": {
 						"pullToRefresh": {
 							"color": "#03a9f4",
@@ -119,7 +120,33 @@
 						}
 					}
 				}
+			}, {
+				"path": "love/list",
+				"style": {
+					"navigationBarTitleText": "恋爱清单",
+					"enablePullDownRefresh": false,
+					"navigationStyle": "custom"
+				}
 
+			}, {
+				"path": "love/album",
+				"style": {
+					"navigationBarTitleText": "恋爱相册",
+					"enablePullDownRefresh": true,
+					"app-plus": {
+						"pullToRefresh": {
+							"color": "#03a9f4",
+							"style": "circle"
+						}
+					}
+				}
+			}, {
+				"path": "love/journey",
+				"style": {
+					"navigationBarTitleText": "我们的故事",
+					"navigationStyle": "custom",
+					"enablePullDownRefresh": false
+				}
 			}, {
 				"path": "archives/archives",
 				"style": {
diff --git a/pages/tabbar/gallery/gallery.vue b/pages/tabbar/gallery/gallery.vue
index 5f19cc5ccc64b24a87c717ae13e2f2934ee2e33e..7f6cba4e7f3d06ceed182f5cb526711189614cb1 100644
--- a/pages/tabbar/gallery/gallery.vue
+++ b/pages/tabbar/gallery/gallery.vue
@@ -78,7 +78,7 @@
 					<block v-for="(item, index) in dataList" :key="index">
 						<tm-translate animation-name="fadeUp" :wait="(index + 1) * 50">
 							<view class="round-3 shadow-2 overflow white mb-24">
-								<tm-images :previmage="false" :src="item.image" @click="fnPreview(item, index)"></tm-images>
+								<tm-images :previmage="false" :src="item.image" @click="fnPreview(item)"></tm-images>
 								<view class="pa-24 text-size-m">
 									<view class="text-overflow-2">
 										<tm-tags :shadow="0" :dense="true" color="bg-gradient-amber-accent" size="s" model="fill">{{ item.team }}</tm-tags>
@@ -281,13 +281,11 @@ export default {
 			console.log('点击数据', data);
 		},
 		// 预览
-		fnPreview(item, index) {
-			if (!index) {
-				index = this.dataList.findIndex(x => x.id == item.id);
-			}
+		fnPreview(item) {
+			const index = this.cache.dataList.findIndex(x => x.id == item.id);
 			uni.previewImage({
 				current: index,
-				urls: this.dataList.map(x => x.image),
+				urls: this.cache.dataList.map(x => x.image),
 				indicator: 'number',
 				loop: true
 			});
diff --git a/pagesA/love/album.vue b/pagesA/love/album.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a2deb3306811ad2114cdc8ce9bfea61c75d22cf6
--- /dev/null
+++ b/pagesA/love/album.vue
@@ -0,0 +1,376 @@
+<template>
+	<view class="app-page">
+		<view v-if="loading != 'success'" class="loading-wrap">
+			<view v-if="loading == 'loading'" class="loading">
+				<view class="loading-icon flex flex-center"><text class="e-loading-icon iconfont icon-loading"></text></view>
+				<view class="loadig-text ">相册正在努力加载中啦~</view>
+			</view>
+			<tm-empty v-else icon="icon-shiliangzhinengduixiang-" color="red" label="啊偶,加载失败了呢~">
+				<tm-button theme="red" :shadow="0" size="m" @click="fnRefresh()">刷新试试</tm-button>
+			</tm-empty>
+		</view>
+		<!-- 内容区域 -->
+		<view v-else class="app-page-content">
+			<view v-if="dataList.length == 0" color="light-blue" class="content-empty flex flex-center">
+				<tm-empty icon="icon-shiliangzhinengduixiang-" label="相册暂时还没有数据~">
+					<tm-button :shadow="0" size="m" theme="light-blue" @click="fnRefresh()">刷新试试</tm-button>
+				</tm-empty>
+			</view>
+			<block v-else>
+				<swiper
+					class="swiper-album"
+					:current="swiperIndex"
+					:acceleration="true"
+					:circular="true"
+					:vertical="false"
+					:indicator-dots="false"
+					:autoplay="false"
+					@change="fnOnChange"
+				>
+					<block v-for="(item, index) in dataList" :key="index">
+						<swiper-item class="swiper-album-item">
+							<view class="scroll-wrap">
+								<view class="card">
+									<cache-image
+										class="card-image"
+										width="100%"
+										height="46vh"
+										radius="12rpx"
+										:url="item.image"
+										:fileMd5="item.image"
+										mode="aspectFill"
+										@on-click="fnOnPreview(item)"
+									></cache-image>
+									<view v-if="item.description" class="card-desc">{{ item.description }}</view>
+									<view v-else class="card-desc is-empty flex flex-col">
+										<view class="text-grey-darken-1">该照片没有记录任何信息</view>
+										<view class="text-size-m mt-24 text-grey-darken-1">记录一下拍照的瞬间，会更精彩哟</view>
+									</view>
+								</view>
+							</view>
+						</swiper-item>
+					</block>
+				</swiper>
+				<view class="tabbar">
+					<view class="pre" @click="fnChange(false)">
+						<text class="icon"><text class="iconfont icon-arrow-left"></text></text>
+						<text class="text">上一张</text>
+					</view>
+					<view class="refresh" @click="fnRefresh()">
+						<text class="refresh-text">点击</text>
+						<text class="refresh-heart iconfont icon-diagnose"></text>
+						<text class="refresh-text">刷新</text>
+					</view>
+					<view class="next" @click="fnChange(true)">
+						<text class="text">下一张</text>
+						<text class="icon"><text class="iconfont icon-arrow-right"></text></text>
+					</view>
+				</view>
+			</block>
+		</view>
+	</view>
+</template>
+
+<script>
+import LoveConfig from '@/config/love.config.js';
+import throttle from '@/utils/throttle.js';
+import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
+import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
+import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
+import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
+
+export default {
+	components: {
+		tmButton,
+		tmFlotbutton,
+		tmTranslate,
+		tmEmpty
+	},
+	data() {
+		return {
+			loading: 'loading',
+			loveConfig: LoveConfig,
+			queryParams: {
+				size: 99,
+				page: 0,
+				sort: 'takeTime',
+				team: LoveConfig.albumKeyName
+			},
+			result: {},
+			dataList: [],
+			cache: {
+				dataList: [],
+				total: 0
+			},
+			swiperIndex: 0,
+			tabbar: {
+				list: []
+			}
+		};
+	},
+
+	onLoad() {
+		this.fnSetPageTitle('恋爱相册');
+	},
+	created() {
+		this.fnGetData();
+	},
+	onPullDownRefresh() {
+		this.fnRefresh();
+	},
+
+	methods: {
+		fnRefresh() {
+			this.queryParams.page = 0;
+			this.fnGetData();
+		},
+		fnGetData() {
+			this.loading = 'loading';
+			this.$httpApi
+				.getPhotoListByPage(this.queryParams)
+				.then(res => {
+					if (res.status == 200) {
+						this.loading = 'success';
+						if (res.data.content.length != 0) {
+							const _list = res.data.content.map((item, index) => {
+								item['image'] = this.$utils.checkImageUrl(item.thumbnail);
+								item['takeTime'] = this.$tm.dayjs(item['takeTime']).format('DD/MM/YYYY');
+								return item;
+							});
+							this.dataList = _list;
+							this.swiperIndex = 0;
+						}
+					} else {
+						this.loading = 'error';
+						uni.$tm.toast('加载失败，请下拉刷新重试！');
+					}
+				})
+				.catch(err => {
+					console.error(err);
+					this.loading = 'error';
+					uni.$tm.toast('加载失败，请下拉刷新重试！');
+				})
+				.finally(() => {
+					setTimeout(() => {
+						uni.stopPullDownRefresh();
+					}, 200);
+				});
+		},
+		// 缓存数据
+		fnCacheDataList(dataList) {
+			if (this.queryParams.page == 0) {
+				this.cache.dataList = dataList;
+			} else {
+				this.cache.dataList = [...this.cache.dataList, ...dataList];
+			}
+		},
+		fnOnPreview(item) {
+			uni.previewImage({
+				current: item.image,
+				urls: this.dataList.map(x => x.image)
+			});
+		},
+		fnOnChange(e) {
+			this.swiperIndex = e.detail.current;
+		},
+		fnChange(isNext) {
+			throttle(() => {
+				if (isNext) {
+					if (this.swiperIndex == this.dataList.length - 1) {
+						this.swiperIndex = 0;
+					} else {
+						this.swiperIndex += 1;
+					}
+				} else {
+					if (this.swiperIndex == 0) {
+						this.swiperIndex = this.dataList.length - 1;
+					} else {
+						this.swiperIndex -= 1;
+					}
+				}
+			});
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.app-page {
+	width: 100vw;
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+	box-sizing: border-box;
+	padding: 24rpx 0;
+	padding-bottom: 144rpx;
+	background: linear-gradient(
+		-135deg,
+		rgba(247, 149, 51, 0.1),
+		rgba(243, 112, 85, 0.1) 15%,
+		rgba(239, 78, 123, 0.1) 30%,
+		rgba(161, 102, 171, 0.1) 44%,
+		rgba(80, 115, 184, 0.1) 58%,
+		rgba(16, 152, 173, 0.1) 72%,
+		rgba(7, 179, 155, 0.1) 86%,
+		rgba(109, 186, 130, 0.1)
+	);
+}
+.app-page-content {
+}
+.loading-wrap {
+	width: 100vw;
+	height: 60vh;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	box-sizing: border-box;
+	padding: 36rpx;
+
+	::v-deep {
+		.tm-icons {
+			margin-right: -20rpx;
+		}
+	}
+}
+.e-loading-icon {
+	font-size: 120rpx;
+	// color: #f88ca2;
+	color: #56bbf9;
+}
+
+.loadig-text {
+	margin-top: 28rpx;
+	font-size: 28rpx;
+	// color: #f88ca2;
+	color: #56bbf9;
+}
+.content-empty {
+	width: 100%;
+	height: 60vh;
+}
+
+.swiper-album {
+	width: 100vw;
+	height: calc(100vh - 24rpx - 144rpx);
+}
+.swiper-album-item {
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	box-sizing: border-box;
+	padding: 36rpx;
+	/* #ifdef H5 */
+	padding-bottom: 110rpx;
+	/* #endif */
+	/* #ifndef H5 */
+	padding-bottom: 60rpx;
+	/* #endif */
+}
+.scroll-wrap {
+	width: 100%;
+	height: 100%;
+	box-sizing: border-box;
+	padding: 36rpx;
+	background-color: #ffffff;
+	border-radius: 12rpx;
+	box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.03);
+}
+.card {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	// height: 65vh;
+	height: 100%;
+	max-height: 100%;
+	border-radius: 12rpx;
+	background-color: #ffffff;
+	box-sizing: border-box;
+	// box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.03);
+	overflow: hidden;
+	overflow-y: auto;
+	::v-deep {
+		.cache-image {
+			height: initial !important;
+		}
+	}
+	&-image {
+		width: 100%;
+		height: initial !important;
+		border-radius: 12rpx;
+	}
+	&-desc {
+		margin-top: 24rpx;
+		line-height: 1.6;
+		font-size: 28rpx;
+		&.is-empty {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			flex-grow: 1;
+			font-size: 32rpx;
+		}
+	}
+}
+.tabbar {
+	width: 90vw;
+	position: fixed;
+	left: 50%;
+	bottom: 40rpx;
+	transform: translateX(-50%);
+	border-radius: 25rpx;
+	box-sizing: border-box;
+	padding: 24rpx;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	// background-color: rgba(0, 0, 0, 0.5);
+	background-color: #ffffff;
+	color: #333;
+	box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.05);
+	.refresh {
+		animation: refreshAni 6s ease-in-out infinite;
+		color: #56bbf9;
+		&-heart {
+			font-size: 42rpx;
+			color: inherit;
+			margin: 0 6rpx;
+		}
+		&-text {
+			font-size: 24rpx;
+		}
+	}
+	.pre {
+		color: #56bbf9;
+		transition: transform 0.1s ease-in-out;
+		&:hover {
+			transform: scale(1.05);
+		}
+		.text {
+			padding-left: 12rpx;
+		}
+	}
+	.next {
+		color: #f88ca2;
+		transition: transform 0.1s ease-in-out;
+		&:hover {
+			transform: scale(1.03);
+		}
+		.text {
+			padding-right: 12rpx;
+		}
+	}
+}
+@keyframes refreshAni {
+	0% {
+		color: #f88ca2;
+	}
+	50% {
+		color: #56bbf9;
+	}
+	100% {
+		color: #f88ca2;
+	}
+}
+</style>
diff --git a/pagesA/love/journey.vue b/pagesA/love/journey.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b7c19e98d0763c717351d8ad2356cdd0e6e5006f
--- /dev/null
+++ b/pagesA/love/journey.vue
@@ -0,0 +1,91 @@
+<template>
+	<view class="app-page">
+		<view class="page-title">我们的故事</view>
+		<view class="html-typed" v-html="html">内容渲染</view>
+
+		<scroll-btn bottom="60rpx" :scrollTop.sync="scrollTop"></scroll-btn>
+	</view>
+</template>
+
+<script>
+import LoveConfig from '@/config/love.config.js';
+import ScrollBtn from '@/components/scroll-btn/scroll-btn.vue';
+export default {
+	components: { ScrollBtn },
+	data() {
+		return {
+			scrollTop: 0,
+			html: '',
+			timer: null
+		};
+	},
+	created() {
+		this.fnInit();
+	},
+	onPageScroll(e) {
+		this.scrollTop = e.scrollTop;
+	},
+	onBackPress() {
+		clearTimeout(this.timer);
+	},
+	methods: {
+		fnInit() {
+			clearTimeout(this.timer);
+			const _html = LoveConfig.journey;
+			let _index = 0;
+			const _typing = () => {
+				this.timer = setTimeout(() => {
+					if (_index >= _html.length) {
+						clearTimeout(this.timer);
+					} else {
+						this.html += _html.substring(_index, _index + 1);
+						_index += 1;
+						_typing();
+					}
+				}, 100);
+			};
+			_typing();
+		}
+	}
+};
+</script>
+
+<style scoped lang="scss">
+.app-page {
+	width: 100vw;
+	min-height: 100vh;
+	box-sizing: border-box;
+	padding: 36rpx;
+	/* #ifdef APP-PLUS */
+	padding-top: 100rpx;
+	/* #endif */
+	/* #ifdef H5 */
+	padding-top: 80rpx;
+	/* #endif */
+	/* #ifdef MP-WEIXIN */
+	padding-top: 120rpx;
+	/* #endif */
+	background: linear-gradient(
+		-45deg,
+		rgba(247, 149, 51, 0.1),
+		rgba(243, 112, 85, 0.1) 15%,
+		rgba(239, 78, 123, 0.1) 30%,
+		rgba(161, 102, 171, 0.1) 44%,
+		rgba(80, 115, 184, 0.1) 58%,
+		rgba(16, 152, 173, 0.1) 72%,
+		rgba(7, 179, 155, 0.1) 86%,
+		rgba(109, 186, 130, 0.1)
+	);
+}
+.page-title {
+	font-size: 42rpx;
+	font-weight: bold;
+	text-align: center;
+	text-shadow: 0rpx 4rpx 24rpx #bfe9ef;
+}
+.html-typed {
+	margin-top: 52rpx;
+	line-height: 1.8;
+	font-size: 30rpx;
+}
+</style>
diff --git a/pagesA/love/list.vue b/pagesA/love/list.vue
new file mode 100644
index 0000000000000000000000000000000000000000..eac3cbc663aaf4e41a0a2a45c54197c77c44fee2
--- /dev/null
+++ b/pagesA/love/list.vue
@@ -0,0 +1,406 @@
+<template>
+	<view class="app-page">
+		<view class="love-card">
+			<view class="head">
+				<image class="avatar" :src="loveConfig.boy.avatar" mode="scaleToFill"></image>
+				<view class="love-days">
+					<view class="tip-text">相恋</view>
+					<view class="number">
+						<text class="boy">-</text>
+						<text class="days">{{ calcLoveDays }}</text>
+						<text class="girl">-</text>
+					</view>
+					<view class="tip-text">天</view>
+				</view>
+				<image class="avatar" :src="loveConfig.girl.avatar" mode="scaleToFill"></image>
+			</view>
+			<view class="foot">
+				<view class="text" v-if="false">
+					我们已经相恋
+					<text class="number">- {{ calcLoveDays }} -</text>
+					天啦
+				</view>
+				看看我们的恋爱清单都完成了哪些吧
+			</view>
+		</view>
+		<view v-if="list.length == 0" class="list empty">
+			<view class="card">
+				<image class="empty-image" :src="loveConfig.loveImageUrl" mode="scaleToFill"></image>
+				<view class="empty-text">暂时还没有恋爱清单，快去制定你们的恋爱清单吧~</view>
+			</view>
+		</view>
+		<view v-else class="list">
+			<block v-for="(item, index) in list" :key="index">
+				<view class="card" :style="{ '--delay': calcCardDelay(index) }">
+					<view class="head">
+						<view class="status">
+							<view v-if="!item.finish" class="text">进行中</view>
+							<view v-else class="text finish">已完成</view>
+						</view>
+						<view class="title">
+							<view class="title-name">{{ item.title }}</view>
+							<view class="title-desc">{{ item.desc }}</view>
+						</view>
+						<view class="actions" @click="fnOnItemOpen(item)">
+							<text class="icon">{{ item.open ? '-' : '+' }}</text>
+						</view>
+					</view>
+					<view v-if="item.open" class="body">
+						<view class="desc">
+							<view class="desc-label">开始时间：</view>
+							<view class="desc-value">{{ item.detail.start || '暂无计划' }}</view>
+						</view>
+						<view class="desc" v-if="item.detail.desc">
+							<view class="desc-label">事件描述：</view>
+							<view class="desc-value">{{ item.detail.desc }}</view>
+						</view>
+						<view class="desc">
+							<view class="desc-label">完成时间：</view>
+							<view class="desc-value">{{ item.detail.end || '未开始或正在进行中...' }}</view>
+						</view>
+						<view class="desc">
+							<view class="desc-label">完成打卡：</view>
+							<view class="desc-value">{{ item.detail.moment || '未开始或正在进行中...' }}</view>
+						</view>
+						<view class="desc" v-if="item.detail.other">
+							<view class="desc-label">爱心备注：</view>
+							<view class="desc-value">{{ item.detail.other }}</view>
+						</view>
+					</view>
+				</view>
+			</block>
+		</view>
+		<scroll-btn :scrollTop.sync="scrollTop"></scroll-btn>
+	</view>
+</template>
+
+<script>
+import LoveConfig from '@/config/love.config.js';
+import ScrollBtn from '@/components/scroll-btn/scroll-btn.vue';
+export default {
+	components: { ScrollBtn },
+	data() {
+		return {
+			scrollTop: 0,
+			loveConfig: LoveConfig,
+			list: []
+		};
+	},
+	computed: {
+		calcLoveDays() {
+			const start = new Date(this.loveConfig.loveStartDate),
+				now = new Date();
+			const T = now.getTime() - start.getTime();
+			const i = 24 * 60 * 60 * 1000;
+			const d = T / i;
+			const D = Math.floor(d);
+			return D;
+		},
+		calcCardDelay() {
+			return index => {
+				return Math.random() * index + 1 + 's';
+			};
+		}
+	},
+	created() {
+		this.fnGetList();
+	},
+	onPageScroll(e) {
+		this.scrollTop = e.scrollTop;
+	},
+	methods: {
+		fnGetList() {
+			if (LoveConfig.loveList.useApi && LoveConfig.loveList.api) {
+				uni.request({
+					url: LoveConfig.loveList.api,
+					header: {
+						ContentType: 'application/json'
+					},
+					method: 'GET',
+					dataType: 'json',
+					success: res => {
+						if (res.statusCode == 200 && res.data.status == 200) {
+							this.list = res.data.data.map(item => {
+								item['open'] = false;
+								return item;
+							});
+						} else {
+							uni.$tm.toast('数据请求失败，请检查接口！');
+						}
+					},
+					fail: err => {
+						uni.$tm.toast('数据请求失败，请检查接口！');
+					}
+				});
+			} else {
+				this.list = LoveConfig.loveList.data.map(item => {
+					item['open'] = false;
+					return item;
+				});
+			}
+		},
+		fnOnItemOpen(item) {
+			item.open = !item.open;
+			this.$forceUpdate();
+		}
+	}
+};
+</script>
+
+<style scoped lang="scss">
+.app-page {
+	width: 100vw;
+	min-height: 100vh;
+	box-sizing: border-box;
+	padding: 36rpx;
+	/* #ifdef H5 */
+	padding-top: 60rpx;
+	/* #endif */
+	/* #ifndef H5 */
+	padding-top: 180rpx;
+	/* #endif */
+
+	background: linear-gradient(
+		135deg,
+		rgba(247, 149, 51, 0.1),
+		rgba(243, 112, 85, 0.1) 15%,
+		rgba(239, 78, 123, 0.1) 30%,
+		rgba(161, 102, 171, 0.1) 44%,
+		rgba(80, 115, 184, 0.1) 58%,
+		rgba(16, 152, 173, 0.1) 72%,
+		rgba(7, 179, 155, 0.1) 86%,
+		rgba(109, 186, 130, 0.1)
+	);
+}
+
+.love-card {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	box-sizing: border-box;
+	padding: 0 24rpx;
+	padding-top: 66rpx;
+	padding-bottom: 52rpx;
+	border-radius: 50rpx;
+	border: 4rpx solid rgba(96, 77, 68, 0.9);
+	border-color: #faf8eb;
+	background-color: rgba(255, 199, 184, 0.9);
+	margin-bottom: 52rpx;
+	box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.1);
+	animation: loveCardAni 3s ease-in-out infinite;
+
+	.head {
+		display: flex;
+		.avatar {
+			width: 150rpx;
+			height: 150rpx;
+			box-sizing: border-box;
+			border-radius: 50%;
+			border: 6rpx solid rgba(255, 255, 255, 0.7);
+
+			&.boy {
+				border-color: #56bbf9;
+			}
+			&.girl {
+				border-color: #f88ca2;
+			}
+		}
+		.love-days {
+			margin: 0 12rpx;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			font-size: 26rpx;
+			.tip-text {
+				color: #333;
+			}
+			.number {
+				font-size: 46rpx;
+				padding: 12rpx 0;
+				> .boy {
+					color: #56bbf9;
+					margin-right: 12rpx;
+				}
+				> .girl {
+					color: #f88ca2;
+					margin-left: 12rpx;
+				}
+			}
+			.days {
+				animation: daysAni 6s ease-in-out infinite;
+				font-weight: bold;
+			}
+		}
+	}
+	.foot {
+		display: none;
+		margin-top: 36rpx;
+		font-size: 24rpx;
+	}
+}
+@keyframes daysAni {
+	0% {
+		color: #f88ca2;
+	}
+	50% {
+		color: #56bbf9;
+	}
+	100% {
+		color: #f88ca2;
+	}
+}
+@keyframes loveCardAni {
+	0% {
+		transform: scale(1);
+	}
+	50% {
+		transform: scale(1.03);
+	}
+	100% {
+		transform: scale(1);
+	}
+}
+.list {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	box-sizing: border-box;
+}
+.empty {
+	height: calc(100vh - 180rpx - 280rpx - 36rpx);
+	.card {
+		height: 100%;
+		padding: 100rpx;
+		margin-bottom: 0;
+		text-align: center;
+		justify-content: center;
+		color: rgba(96, 77, 68, 0.9);
+	}
+	&-image {
+		width: 300rpx;
+		height: 300rpx;
+	}
+	&-text {
+		margin-top: 36rpx;
+		line-height: 50rpx;
+	}
+}
+.card {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	box-sizing: border-box;
+	padding: 24rpx;
+	border-radius: 50rpx;
+	border: 4rpx solid rgba(96, 77, 68, 0.9);
+	border-color: #fff;
+	// background-color: #faf8eb;
+	background-color: #ffffff;
+	margin-bottom: 36rpx;
+	box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.05);
+	animation: cardAni 3s ease-in-out infinite;
+	animation-delay: var(--delay);
+	.head {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		box-sizing: border-box;
+		.status {
+			width: 100rpx;
+			display: flex;
+			.text {
+				width: 100rpx;
+				height: 100rpx;
+				border-radius: 50%;
+				background-color: #ffc6ba;
+				font-size: 24rpx;
+				line-height: 100rpx;
+				text-align: center;
+				color: #55423b;
+				&.finish {
+					background-color: #bfe9ef;
+				}
+			}
+		}
+		.title {
+			width: 0;
+			flex-grow: 1;
+			box-sizing: border-box;
+			padding-left: 30rpx;
+			padding-right: 24rpx;
+			&-name {
+				font-weight: bold;
+				font-size: 30rpx;
+				color: #333;
+			}
+			&-desc {
+				margin-top: 8rpx;
+				font-size: 26rpx;
+				color: #555;
+				text-overflow: ellipsis;
+				overflow: hidden;
+				white-space: nowrap;
+			}
+		}
+		.actions {
+			width: 50rpx;
+			.icon {
+				display: inline-block;
+				width: 45rpx;
+				height: 45rpx;
+				background-color: rgba(96, 77, 68, 0.2);
+				border-radius: 50%;
+				text-align: center;
+				line-height: 45rpx;
+				font-size: 32rpx;
+				font-weight: bold;
+			}
+		}
+	}
+
+	.body {
+		margin-top: 24rpx;
+		width: 100%;
+		background-color: #ffffff;
+		// background-color: #faf8eb;
+		background-color: rgba(96, 77, 68, 0.05);
+		border-radius: 24rpx;
+		box-sizing: border-box;
+		padding: 24rpx;
+		padding-bottom: 12rpx;
+		font-size: 26rpx;
+	}
+}
+@keyframes cardAni {
+	0% {
+		transform: translateY(0rpx);
+	}
+
+	50% {
+		transform: translateY(-10rpx);
+	}
+
+	100% {
+		transform: translateY(0rpx);
+	}
+}
+.desc {
+	display: flex;
+	margin-bottom: 12rpx;
+	&-label {
+		color: #333;
+		width: 140rpx;
+		// font-weight: bold;
+	}
+	&-value {
+		width: 0;
+		flex-grow: 1;
+		line-height: 1.5;
+		color: #333;
+	}
+}
+</style>
diff --git a/pagesA/love/love.vue b/pagesA/love/love.vue
index f55979091304db720dd50f7c59b9fe0adc18a60a..5d901e2d36c7548490ddf45117ce154c32ada0c6 100644
--- a/pagesA/love/love.vue
+++ b/pagesA/love/love.vue
@@ -1,22 +1,357 @@
 <template>
-	<view class="app-page bg-white flex flex-center"><text class="text-bg-gradient-red-accent-b">祝有情人👩‍❤‍👨终成眷属</text></view>
+	<view class="app-page bg-white">
+		<!-- 情侣信息 -->
+		<view class="lover-wrap" :style="[loveWrapStyle]">
+			<view class="lover-card">
+				<view class="boy">
+					<image class="avatar" :src="loveConfig.boy.avatar" mode="aspectFit"></image>
+					<view class="name">{{ loveConfig.boy.name }}</view>
+				</view>
+				<image class="like" :src="loveConfig.loveImageUrl" mode="scaleToFill"></image>
+				<view class="girl">
+					<image class="avatar" :src="loveConfig.girl.avatar" mode="aspectFit"></image>
+					<view class="name">{{ loveConfig.girl.name }}</view>
+				</view>
+			</view>
+			<image class="wave-image" :src="loveConfig.waveImageUrl" mode="scaleToFill"></image>
+		</view>
+		<!-- 恋爱记时 -->
+		<view class="love-time-wrap">
+			<view class="title">{{ loveConfig.timeTitle }}</view>
+			<view class="content">
+				<text class="text">
+					第
+					<text class="number">{{ loveDayCount.d }}</text>
+					天
+				</text>
+				<text class="text">
+					<text class="number">{{ loveDayCount.h }}</text>
+					小时
+				</text>
+				<text class="text">
+					<text class="number">{{ loveDayCount.m }}</text>
+					分钟
+				</text>
+				<text class="text">
+					<text class="number">{{ loveDayCount.s }}</text>
+					秒
+				</text>
+			</view>
+		</view>
+		<!-- 功能导航 -->
+		<view class="list-wrap">
+			<block v-for="(nav, index) in loveConfig.nav" :key="index">
+				<view v-if="nav.use" class="list-item" @click="fnToPage(nav.key)">
+					<view class="left"><image class="icon" :src="nav.iconImageUrl" mode="aspectFit"></image></view>
+					<view class="right">
+						<view class="name">{{ nav.title }}</view>
+						<view class="desc">{{ nav.desc }}</view>
+					</view>
+				</view>
+			</block>
+		</view>
+	</view>
 </template>
 
 <script>
+import LoveConfig from '@/config/love.config.js';
 export default {
 	data() {
-		return {};
+		return {
+			loveConfig: LoveConfig,
+			loveDayTimer: null,
+			loveDayCount: {
+				d: 0,
+				h: 0,
+				m: 0,
+				s: 0
+			}
+		};
+	},
+	computed: {
+		loveWrapStyle() {
+			return {
+				backgroundImage: `url(${this.loveConfig.bgImageUrl})`
+			};
+		}
 	},
 	onLoad() {
 		this.fnSetPageTitle('恋爱日记');
+		this.fnInitLoveDayCount();
 	},
-	methods: {}
+	methods: {
+		fnInitLoveDayCount() {
+			clearTimeout(this.loveDayTimer);
+			const _countDownFn = () => {
+				this.loveDayTimer = setTimeout(_countDownFn, 1000);
+				const start = new Date(this.loveConfig.loveStartDate),
+					now = new Date();
+				const T = now.getTime() - start.getTime();
+				const i = 24 * 60 * 60 * 1000;
+				const d = T / i;
+				const D = Math.floor(d);
+				const h = (d - D) * 24;
+				const H = Math.floor(h);
+				const m = (h - H) * 60;
+				const M = Math.floor(m);
+				const s = (m - M) * 60;
+				const S = Math.floor(s);
+				this.loveDayCount = {
+					d: D,
+					h: H,
+					m: M,
+					s: S
+				};
+			};
+			_countDownFn();
+		},
+		fnToPage(pageName) {
+			uni.navigateTo({
+				url: `/pagesA/love/${pageName}`
+			});
+		}
+	}
 };
 </script>
 
 <style scoped lang="scss">
 .app-page {
 	width: 100vw;
-	height: 100vh;
+	min-height: 100vh;
+	background: linear-gradient(
+		-45deg,
+		rgba(247, 149, 51, 0.1),
+		rgba(243, 112, 85, 0.1) 15%,
+		rgba(239, 78, 123, 0.1) 30%,
+		rgba(161, 102, 171, 0.1) 44%,
+		rgba(80, 115, 184, 0.1) 58%,
+		rgba(16, 152, 173, 0.1) 72%,
+		rgba(7, 179, 155, 0.1) 86%,
+		rgba(109, 186, 130, 0.1)
+	);
+}
+
+.lover-wrap {
+	position: relative;
+	width: 100vw;
+	height: 50vh;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background-size: cover;
+	background-repeat: no-repeat;
+	background-position: 50% 50%;
+
+	&::before {
+		position: absolute;
+		left: 0;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		content: '';
+		background-color: rgba(255, 255, 255, 0.1);
+		background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAKUlEQVQImU3IMREAIAgAwJfNkQCEsH8cijjpMf6vnXlQaIiJFx+omEBfmqIEZLe2jzcAAAAASUVORK5CYII=);
+		z-index: 0;
+		backdrop-filter: blur(4rpx);
+		overflow: hidden;
+	}
+	&::after {
+		content: '';
+		position: absolute;
+		left: 0;
+		bottom: -60rpx;
+		width: 100vw;
+		height: 60rpx;
+		background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
+	}
+	.lover-card {
+		position: absolute;
+		left: 50%;
+		top: 58%;
+		transform: translate(-50%, -50%);
+		width: 90vw;
+		display: flex;
+		align-items: center;
+		justify-content: space-around;
+		border-radius: 12rpx;
+		z-index: 2;
+		.avatar {
+			width: 180rpx;
+			height: 180rpx;
+			border-radius: 50%;
+			box-sizing: border-box;
+			// border: 8rpx solid transparent;
+			// border: 8rpx solid rgba(255, 255, 255, 0.7) !important;
+			border: 8rpx solid rgba(255, 255, 255, 1) !important;
+		}
+		.name {
+			font-size: 32rpx;
+			font-weight: bold;
+			color: #ffffff;
+			text-align: center;
+			letter-spacing: 2rpx;
+		}
+		.boy {
+			color: #3ab8e4;
+			.avatar {
+				border-color: rgba(58, 184, 228, 0.7);
+			}
+		}
+		.girl {
+			color: #f57ab3;
+			.avatar {
+				border-color: rgba(245, 122, 179, 0.7);
+			}
+		}
+
+		.like {
+			width: 120rpx;
+			height: 120rpx;
+			animation: likeani 1s ease-in-out infinite;
+		}
+	}
+	.wave-image {
+		width: 100%;
+		height: 120rpx;
+		position: absolute;
+		left: 0;
+		bottom: 0;
+		mix-blend-mode: screen;
+	}
+}
+
+.love-time-wrap {
+	margin-top: 80rpx;
+	width: 100vw;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+
+	.title {
+		font-size: 46rpx;
+		letter-spacing: 4rpx;
+		// background-image: linear-gradient(270deg, #ff4500, #ffa500, #ffd700, #90ee90, #00ffff, #1e90ff, #9370db, #ff69b4, #ff4500);
+		// -webkit-background-clip: text;
+		// color: #000;
+		color: #333;
+		font-size: 42rpx;
+		font-weight: bold;
+		// animation: loveTimeTitleAni 80s linear infinite;
+	}
+	.content {
+		margin-top: 24rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		.text {
+			font-size: 28rpx;
+		}
+		.number {
+			margin: 0 8rpx;
+			font-size: 46rpx;
+			// color: #ff69b4;
+			color: #f83856;
+			font-weight: bold;
+		}
+	}
+}
+
+.list-wrap {
+	margin-top: 75rpx;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	box-sizing: border-box;
+	padding: 0 36rpx;
+
+	.list-item {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: space-around;
+		box-sizing: border-box;
+		padding: 28rpx 32rpx;
+		background-color: #ffffff;
+		border-radius: 50rpx;
+		margin-bottom: 32rpx;
+		box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.03);
+
+		&:nth-child(1) {
+			animation: listItemAni1 3s ease-in-out infinite;
+		}
+		&:nth-child(2) {
+			animation: listItemAni1 3s ease-in-out infinite;
+			animation-delay: 1.5s;
+		}
+		&:nth-child(3) {
+			animation: listItemAni1 3s ease-in-out infinite;
+			animation-delay: 2s;
+		}
+		.left {
+			width: 120rpx;
+			height: 120rpx;
+			.icon {
+				width: 100%;
+				height: 100%;
+			}
+		}
+		.right {
+			flex-grow: 1;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			box-sizing: border-box;
+			padding-left: 40rpx;
+			.name {
+				font-size: 32rpx;
+				font-weight: bold;
+				color: #333333;
+			}
+			.desc {
+				margin-top: 8px;
+				font-size: 26rpx;
+				color: #777777;
+			}
+		}
+	}
+}
+
+@keyframes likeani {
+	0% {
+		transform: scale(1);
+	}
+	25% {
+		transform: scale(1.2);
+	}
+	50% {
+		transform: scale(1.1);
+	}
+	75% {
+		transform: scale(1.3);
+	}
+	100% {
+		transform: scale(1);
+	}
+}
+@keyframes loveTimeTitleAni {
+	to {
+		background-position: -200rem;
+	}
+}
+@keyframes listItemAni1 {
+	0% {
+		transform: translateY(0rpx);
+	}
+
+	50% {
+		transform: translateY(-10rpx);
+	}
+
+	100% {
+		transform: translateY(0rpx);
+	}
 }
 </style>