From 9573b303e20c0d235ae7386bbd4400581ccfa340 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E8=8E=AB=E5=94=90=E5=B0=BC?= <1431128779@qq.com>
Date: Mon, 12 Dec 2022 23:03:48 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=EF=BC=9A=E6=96=87=E7=AB=A0?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E9=A1=B5=E9=9D=A2=E6=B7=BB=E5=8A=A0=E5=BC=B9?=
 =?UTF-8?q?=E5=B9=95=E5=8A=9F=E8=83=BD=EF=BC=9B=20=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=EF=BC=9A=E4=BF=AE=E5=A4=8D=E5=8F=8B=E9=93=BE=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E5=8D=95=E5=88=86=E7=BB=84=E6=98=BE=E7=A4=BA=E9=97=AE=E9=A2=98?=
 =?UTF-8?q?=EF=BC=9B=20=E4=BC=98=E5=8C=96=EF=BC=9B=E5=AF=B9=E6=81=8B?=
 =?UTF-8?q?=E7=88=B1=E6=97=A5=E8=AE=B0=E6=B8=85=E5=8D=95=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E8=BF=9B=E8=A1=8C=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 common/markdown/markdown.config.js            |   6 +-
 .../lff-barrage.vue => barrage/barrage.vue}   | 171 +++++++++++++-----
 components/comment-list/comment-list.vue      |   1 +
 components/lff-barrage/markdown.md            |  15 --
 components/scroll-btn/scroll-btn.vue          |  14 +-
 config/love.config.js                         |   4 +-
 pages/tabbar/about/about.vue                  |   2 +-
 pages/tabbar/links/links.vue                  |  36 +++-
 pagesA/article-detail/article-detail.vue      |  56 +++++-
 pagesA/love/album.vue                         |   3 +-
 pagesA/love/list.vue                          |  26 ++-
 pagesA/setting/setting.vue                    |   4 +
 utils/app.js                                  |   5 +
 13 files changed, 250 insertions(+), 93 deletions(-)
 rename components/{lff-barrage/lff-barrage.vue => barrage/barrage.vue} (57%)
 delete mode 100644 components/lff-barrage/markdown.md

diff --git a/common/markdown/markdown.config.js b/common/markdown/markdown.config.js
index d0e07fc..fa39ea5 100644
--- a/common/markdown/markdown.config.js
+++ b/common/markdown/markdown.config.js
@@ -65,14 +65,14 @@ export default {
 		    line-height: 24px;
 		    margin-bottom: 18px;
 		    position: relative;
-			font-size: 1.2em;
+			font-size: 1.12em;
 		`,
 		h5: `
 			color: var(--main);
 		    line-height: 24px;
 		    margin-bottom: 14px;
 		    position: relative;
-			font-size: 16px;
+			font-size: 1.1em;
 		`,
 		h6: `
 			color: #303133;
@@ -90,7 +90,7 @@ export default {
 		strong: 'font-weight: 700;color: rgb(248, 57, 41);',
 		video: 'width: 100%',
 	},
-	containStyle: 'font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, "PingFang SC", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;padding:12px;font-size: 16px;color: #606266;word-spacing: 0.8px;letter-spacing: 0.8px;border-radius: 6px;background-color:#FFFFFF;',
+	containStyle: 'font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, "PingFang SC", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;padding:12px;font-size: 14px;color: #606266;word-spacing: 0.8px;letter-spacing: 0.8px;border-radius: 6px;background-color:#FFFFFF;',
 
 	loadingGif: HaloConfig.loadingGifUrl,
 	emptyGif: HaloConfig.loadingEmptyUrl,
diff --git a/components/lff-barrage/lff-barrage.vue b/components/barrage/barrage.vue
similarity index 57%
rename from components/lff-barrage/lff-barrage.vue
rename to components/barrage/barrage.vue
index 881ae98..361917c 100644
--- a/components/lff-barrage/lff-barrage.vue
+++ b/components/barrage/barrage.vue
@@ -1,15 +1,11 @@
 <template>
-	<view style="overflow: hidden;position: fixed;width: 100%;height: 100%;pointer-events: none; top: 0;">
-		<view class="danmu-li" v-for="(item, index) in listData" :class="item.type" :style="item.style" :key="index">
+	<view class="barrage-wrap" :class="[type]">
+		<view class="danmu-li" v-for="(item, index) in listData" :class="[type, item.type]" :style="[item.style]" :key="index">
 			<view class="danmu-inner">
 				<view class="user-box">
-					<view class="user-img">
-						<view class="img-box">
-							<image :src="item.avatar || 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=317894666,3379114684&fm=26&gp=0.jpg'"></image>
-						</view>
-					</view>
-					<view class="user-text cl1">{{ item.nickName }}</view>
-					<view class="user-status cl1">{{ item.text }}</view>
+					<view class="user-img"><image class="avatar" :src="item.item.avatar"></image></view>
+					<view class="user-text cl1">{{ item.item.author }}</view>
+					<view class="user-status cl1">{{ item.item.content }}</view>
 				</view>
 			</view>
 		</view>
@@ -23,6 +19,12 @@ export default {
 			type: String,
 			default: 'rightToLeft'
 		},
+		list: {
+			type: Array,
+			default() {
+				return [];
+			}
+		},
 		minTime: {
 			type: Number,
 			default: 4
@@ -43,34 +45,35 @@ export default {
 			//轨道高度
 			type: Number,
 			default: 40
-		},
-		noStacked: {
-			//不允许堆叠(暂不可用)
-			type: Array,
-			default() {
-				return [];
-			}
 		}
 	},
 	data() {
 		return {
+			closeTimer: null,
 			listData: []
 		};
 	},
 	mounted() {
-		this.hrackNum = Math.floor((this.maxTop - this.minTop) / this.hrackH);
+		//leftBottom 使用参数
+		if (this.type === 'leftBottom') {
+			this.hrackNum = Math.floor(this.maxTop / this.hrackH);
+		}
 	},
 	methods: {
 		add(obj) {
+			console.log('加载弹幕中...');
+			this.isShow = true;
+			this.showFlag = true;
 			let data = {
-				item: obj.item,
+				...obj,
 				id: Date.parse(new Date()),
 				time: Math.ceil(Math.floor(Math.random() * (this.maxTime - this.minTime + 1) + this.minTime)),
 				type: this.type
 			};
 			if (this.type === 'leftBottom') {
+				console.log('leftBottom，加载弹幕中...');
 				let objData = {
-					item: data.item,
+					item: data,
 					type: 'leftBottomEnter',
 					style: {
 						transition: `all 0.5s`,
@@ -88,7 +91,7 @@ export default {
 					} else if (this.listData[i].status === 'reset') {
 						//重置
 						this.listData[i].style.transition = 'none';
-						this.listData[i].style.bottom = 0;
+						this.listData[i].style.bottom = '6px';
 						this.listData[i].status = 'reuse';
 					} else if (this.listData[i].status === 'recycle') {
 						//回收
@@ -105,8 +108,16 @@ export default {
 				if (listLen < hrackNum + 2) {
 					this.listData.push(objData);
 				}
-			} else if (this.type === 'rightToLeft' || this.type === 'leftToRight') {
-				let objData = this.horStacked(data);
+			} else if (this.type === 'rightToLeft') {
+				let objData = {
+					item: data.item,
+					type: 'rightToLeft',
+					style: {
+						animationDuration: `${data.time}s`,
+						top: `${Math.ceil(Math.random() * (this.maxTop - this.minTop + 1) + this.minTop)}px`
+					},
+					delTime: Date.parse(new Date()) + data.time * 1200
+				};
 				for (let i in this.listData) {
 					if (this.listData[i].delTime <= Date.parse(new Date())) {
 						this.repaint(i, objData.type);
@@ -118,16 +129,40 @@ export default {
 				this.listData.push(objData);
 			}
 		},
-		horStacked(data) {
-			return {
-				item: data.item,
-				type: this.type,
-				style: {
-					animationDuration: `${data.time}s`,
-					top: `${Math.ceil(Math.random() * (this.maxTop - this.minTop + 1) + this.minTop)}px`
+		async remove(options = {}) {
+			options = Object.assign(
+				{},
+				{
+					duration: 5000, // 延迟关闭的时间
+					speed: 1000 // 弹幕消失的速度
 				},
-				delTime: Date.parse(new Date()) + data.time * 1200
+				options
+			);
+
+			const _fnHandleRemove = item => {
+				return new Promise(resolve => {
+					setTimeout(() => {
+						item['type'] = 'leftBottomExitLeft';
+						// this.$forceUpdate();
+						resolve();
+					}, options.speed);
+				});
 			};
+			const _fnHandleLoop = item => {
+				return new Promise(resolve => {
+					setTimeout(async () => {
+						for (var i = 0; i < this.listData.length; i++) {
+							await _fnHandleRemove(this.listData[i]);
+						}
+						resolve();
+					}, options.duration);
+				});
+			};
+
+			await _fnHandleLoop();
+			setTimeout(() => {
+				this.listData = [];
+			}, 100);
 		},
 		repaint(index, type) {
 			setTimeout(() => {
@@ -137,8 +172,8 @@ export default {
 	}
 };
 </script>
-<style></style>
-<style lang="scss">
+
+<style lang="scss" scoped>
 @keyframes leftBottomEnter {
 	0% {
 		transform: translateY(100%);
@@ -163,6 +198,17 @@ export default {
 	}
 }
 
+@keyframes leftBottomExitLeft {
+	0% {
+		transform: translateX(0%);
+		opacity: 1;
+	}
+
+	100% {
+		transform: translateX(-200%);
+		opacity: 0;
+	}
+}
 @keyframes leftToRight {
 	0% {
 		transform: translateX(-100%);
@@ -182,13 +228,32 @@ export default {
 		transform: translateX(-100%);
 	}
 }
-
+.barrage-wrap {
+	position: fixed;
+	width: 100%;
+	height: 100%;
+	pointer-events: none;
+	top: 0;
+	z-index: 99;
+	transition: all 1s ease-in-out;
+	&.leftBottom {
+		top: initial;
+		bottom: 130rpx;
+	}
+}
 .danmu-li {
 	position: absolute;
 	width: 100%;
 	transform: translateX(100%);
 	animation-timing-function: linear;
+	transition: transform 0.5s ease-in-out;
 
+	&.is-hide {
+		transform: translateX(-100%) !important;
+	}
+	&.leftBottom {
+		left: 24rpx;
+	}
 	&.leftBottomEnter {
 		animation-name: leftBottomEnter;
 	}
@@ -196,53 +261,59 @@ export default {
 		animation-name: leftBottomExit;
 		animation-fill-mode: forwards;
 	}
-
+	&.leftBottomExitLeft {
+		animation-name: leftBottomExitLeft;
+		animation-fill-mode: forwards;
+	}
 	&.rightToLeft {
 		animation-name: rightToLeft;
 	}
 
 	&.leftToRight {
-		animation-name: leftToRight;
+		animation-name: rightToLeft;
 	}
 
 	.danmu-inner {
 		display: inline-block;
-
+		font-size: 24rpx;
 		.user-box {
 			display: flex;
-			padding: 3rpx 40rpx 3rpx 10rpx;
+			padding: 6rpx 40rpx 6rpx 10rpx;
 			background: rgba(0, 0, 0, 0.3);
 			border-radius: 32rpx;
 			align-items: center;
 
 			.user-img {
-				.img-box {
-					display: flex;
-
-					image {
-						width: 58rpx;
-						height: 58rpx;
-						background: rgba(55, 55, 55, 1);
-						border-radius: 50%;
-					}
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				.avatar {
+					width: 42rpx;
+					height: 42rpx;
+					background: rgba(55, 55, 55, 1);
+					border-radius: 50%;
 				}
 			}
 
 			.user-status {
 				margin-left: 10rpx;
 				white-space: nowrap;
-				font-size: 28rpx;
 				font-weight: 400;
 				color: rgba(255, 255, 255, 1);
+				max-width: 320rpx;
+				text-overflow: ellipsis;
+				overflow: hidden;
+				white-space: nowrap;
 			}
 
 			.user-text {
+				max-width: 100rpx;
 				margin-left: 10rpx;
-				// white-space: nowrap;
-				font-size: 28rpx;
 				font-weight: 400;
-				width: 80rpx;
 				color: rgba(255, 255, 255, 1);
+				text-overflow: ellipsis;
+				overflow: hidden;
+				white-space: nowrap;
 			}
 		}
 	}
diff --git a/components/comment-list/comment-list.vue b/components/comment-list/comment-list.vue
index 744fe06..aa294fc 100644
--- a/components/comment-list/comment-list.vue
+++ b/components/comment-list/comment-list.vue
@@ -143,6 +143,7 @@ export default {
 						this.result = res.data;
 						this.dataList = res.data.content;
 						this.loading = 'success';
+						this.$emit('on-loaded', this.dataList);
 					} else {
 						this.loading = 'error';
 					}
diff --git a/components/lff-barrage/markdown.md b/components/lff-barrage/markdown.md
deleted file mode 100644
index e709651..0000000
--- a/components/lff-barrage/markdown.md
+++ /dev/null
@@ -1,15 +0,0 @@
-#如何使用
-###js
-```javascript
-import lffBarrage from '@/components/lff-barrage/lff-barrage.vue'
-components:{lffBarrage},
-methods:{
-	colrdo(){ //插入一条弹幕
-		this.$refs.lffBarrage.add({item:'你好呀小伙子'});
-	}
-}
-```
-###HTML
-```html
-<lff-barrage ref="lffBarrage"></lff-barrage>
-```
\ No newline at end of file
diff --git a/components/scroll-btn/scroll-btn.vue b/components/scroll-btn/scroll-btn.vue
index d321b1f..79a2df7 100644
--- a/components/scroll-btn/scroll-btn.vue
+++ b/components/scroll-btn/scroll-btn.vue
@@ -20,12 +20,11 @@ export default {
 		}
 	},
 	data() {
-		return { _scrollTop: 0 };
+		return { timer: null, _scrollTop: 0 };
 	},
 	watch: {
 		scrollTop(val) {
 			this._scrollTop = val;
-			console.log('监听1：', val);
 			this.$forceUpdate();
 		}
 	},
@@ -35,11 +34,18 @@ export default {
 	methods: {
 		fnScroll() {
 			throttle(() => {
+				this.$emit('on-status', false);
 				const isTop = this._scrollTop >= 180;
-				this._scrollTop = isTop ? 0 : 999999;
+				this._scrollTop = isTop ? 0 : 999999999999;
 				uni.pageScrollTo({
 					duration: 500,
-					scrollTop: this._scrollTop
+					scrollTop: this._scrollTop,
+					success: () => {
+						clearTimeout(this.timer);
+						this.timer = setTimeout(() => {
+							this.$emit('on-status', true);
+						}, 500);
+					}
 				});
 				this.$emit('update:scrollTop', this._scrollTop);
 			});
diff --git a/config/love.config.js b/config/love.config.js
index 5c220e8..cc161e3 100644
--- a/config/love.config.js
+++ b/config/love.config.js
@@ -15,10 +15,10 @@ export default {
 	girl: {
 		name: '未知女主',
 		avatar: 'https://b.925i.cn/uni_halo_love/love_girl.png',
-		birthday: '2022-07-25', // 生日
+		birthday: '2022-04-19', // 生日
 	},
 	timeTitle: '这是我们一起走过的',
-	loveStartDate: '2022-05-20 13:14:20', // 恋爱开始时间 
+	loveStartDate: '2022-04-10 13:14:20', // 恋爱开始时间 
 
 	nav: [{
 			key: 'journey',
diff --git a/pages/tabbar/about/about.vue b/pages/tabbar/about/about.vue
index 6c58e8e..e56f978 100644
--- a/pages/tabbar/about/about.vue
+++ b/pages/tabbar/about/about.vue
@@ -2,7 +2,7 @@
 	<view class="app-page pb-24">
 		<!-- 博主信息 -->
 		<view class="blogger-info" :style="[calcProfileStyle]">
-			<image class="avatar" :src="$utils.checkAvatarUrl(bloggerInfo.avatar)" mode="aspectFill" @click="miniProfileCard.show = true"></image>
+			<image class="avatar" :src="$utils.checkAvatarUrl(bloggerInfo.avatar)" mode="aspectFill"></image>
 			<view class="profile">
 				<view class="author mt-24 text-size-g text-weight-b">{{ bloggerInfo.nickname }}</view>
 				<view class="desc mt-24 text-size-m">{{ bloggerInfo.description || '这个博主很懒，竟然没写介绍~' }}</view>
diff --git a/pages/tabbar/links/links.vue b/pages/tabbar/links/links.vue
index f494a74..606095c 100644
--- a/pages/tabbar/links/links.vue
+++ b/pages/tabbar/links/links.vue
@@ -13,16 +13,34 @@
 
 			<!-- 如果只有一个分组：使用列表的形式 result.length == 1 -->
 			<view v-else-if="result.length == 1" class="flex flex-col pb-24">
-				<block v-for="(item, index) in result[0].children" :key="index">
+				<block v-for="(link, index) in result[0].children" :key="index">
 					<tm-translate animation-name="fadeUp" :wait="(index + 1) * 50">
-						<view class="link-card one round-a-6 flex ma-24 mb-0 pa-24" @click="fnOnLinkEvent(item)">
-							<cache-image class="logo shadow-2" radius="12rpx" width="80rpx" height="80rpx" :url="item.logo" :fileMd5="item.logo" mode="aspectFill"></cache-image>
+						<!-- 色彩版本 -->
+						<view
+							v-if="!globalAppSettings.links.useSimple"
+							class="info flex pt-24 pb-24 pl-12 pr-12 border-b-1"
+							:class="{ 'border-b-1': index != team.children.length - 1 }"
+							@click="fnOnLinkEvent(link)"
+						>
+							<view class="link-logo"><cache-image class="link-logo_img" radius="12rpx" :url="link.logo" :fileMd5="link.logo" mode="aspectFill"></cache-image></view>
+							<view class="flex flex-col pl-30 info-detail">
+								<view class="link-card_name text-size-l text-weight-b text-red">{{ link.name }}</view>
+								<view class="poup-tag ml--10 mt-6">
+									<tm-tags color="bg-gradient-amber-accent" :shadow="0" size="s" model="fill">ID：{{ link.id }}</tm-tags>
+									<tm-tags color=" bg-gradient-light-blue-lighten" :shadow="0" size="s" model="fill">{{ link.team || '暂未分组' }}</tm-tags>
+								</view>
+								<view class="link-card_desc text-overflow text-size-s mt-4">博客简介：{{ link.description || '这个博主很懒，没写简介~' }}</view>
+							</view>
+						</view>
+						<!-- 简洁版本 -->
+						<view v-else class="link-card flex ml-24 mr-24 pt-24 pb-24" @click="fnOnLinkEvent(link)">
+							<image class="logo shadow-6" :src="link.logo" mode="aspectFill"></image>
 							<view class="info pl-24">
-								<view class="name text-size-g">{{ item.name }}</view>
-								<view class="desc mt-12 text-size-s text-grey-darken-1">{{ item.description }}</view>
-								<view class="link mt-12 text-size-m text-grey-darken-1">
+								<view class="name text-size-g">{{ link.name }}</view>
+								<view class="desc mt-12 text-size-s text-grey-darken-1">{{ link.description }}</view>
+								<view v-if="false" class="link mt-12 text-size-m text-grey-darken-1">
 									<text class="iconfont icon-link mr-6 text-size-s"></text>
-									{{ item.url }}
+									{{ link.url }}
 								</view>
 							</view>
 						</view>
@@ -51,7 +69,7 @@
 										<view class="link-card_name text-size-l text-weight-b text-red">{{ link.name }}</view>
 										<view class="poup-tag ml--10 mt-6">
 											<tm-tags color="bg-gradient-amber-accent" :shadow="0" size="s" model="fill">ID：{{ link.id }}</tm-tags>
-											<tm-tags color=" bg-gradient-light-blue-lighten" :shadow="0" size="s" model="fill">{{ link.team }}</tm-tags>
+											<tm-tags color=" bg-gradient-light-blue-lighten" :shadow="0" size="s" model="fill">{{ link.team || '暂未分组' }}</tm-tags>
 										</view>
 										<view class="link-card_desc text-overflow text-size-s mt-4">博客简介：{{ link.description || '这个博主很懒，没写简介~' }}</view>
 									</view>
@@ -86,7 +104,7 @@
 							<view class="poup-name text-size-lg text-weight-b">{{ detail.data.name }}</view>
 							<view class="poup-tag ml--10">
 								<tm-tags color="bg-gradient-amber-accent" size="n" model="fill">ID：{{ detail.data.id }}</tm-tags>
-								<tm-tags color="bg-gradient-light-blue-lighten" size="n" model="fill">{{ detail.data.team }}</tm-tags>
+								<tm-tags color="bg-gradient-light-blue-lighten" size="n" model="fill">{{ detail.data.team || '暂未分组' }}</tm-tags>
 							</view>
 							<view class="poup-link text-size-m" @click="fnCopyLink(detail.data)">
 								<text class="text-orange">{{ detail.data.url }}</text>
diff --git a/pagesA/article-detail/article-detail.vue b/pagesA/article-detail/article-detail.vue
index cc6ef58..65715e2 100644
--- a/pagesA/article-detail/article-detail.vue
+++ b/pagesA/article-detail/article-detail.vue
@@ -105,10 +105,18 @@
 
 				<!-- 评论展示区域 -->
 				<view class="comment-wrap bg-white mt-24 pa-24 round-4">
-					<commentList :disallowComment="result.disallowComment" :postId="result.id" :post="result" @on-comment-detail="fnOnShowCommentDetail"></commentList>
+					<commentList
+						:disallowComment="result.disallowComment"
+						:postId="result.id"
+						:post="result"
+						@on-comment-detail="fnOnShowCommentDetail"
+						@on-loaded="fnOnCommentLoaded"
+					></commentList>
 				</view>
 			</view>
 
+			<!-- 弹幕效果 -->
+			<barrage ref="barrage" :maxTop="240" type="leftBottom"></barrage>
 			<!-- 返回顶部 -->
 			<tm-flotbutton :offset="[16, 80]" icon="icon-angle-up" color="bg-gradient-light-blue-accent" @click="fnToTopPage()"></tm-flotbutton>
 			<tm-flotbutton :actions="btnOption.actions" actions-pos="left" :show-text="true" color="bg-gradient-orange-accent" @change="fnOnFlotButtonChange"></tm-flotbutton>
@@ -190,6 +198,7 @@ import commentList from '@/components/comment-list/comment-list.vue';
 import commentItem from '@/components/comment-item/comment-item.vue';
 
 import rCanvas from '@/components/r-canvas/r-canvas.vue';
+import barrage from '@/components/barrage/barrage.vue';
 export default {
 	components: {
 		tmSkeleton,
@@ -200,7 +209,8 @@ export default {
 		mpHtml,
 		commentList,
 		commentItem,
-		rCanvas
+		rCanvas,
+		barrage
 	},
 	data() {
 		return {
@@ -629,6 +639,48 @@ export default {
 			uni.navigateTo({
 				url: `/pagesA/tag-detail/tag-detail?id=${tag.id}&slug=${tag.slug}&name=${tag.name}`
 			});
+		},
+		async fnOnCommentLoaded(data) {
+			const _list = [];
+			const _handleData = list => {
+				return new Promise(resolve => {
+					if (list.length == 0) {
+						resolve();
+					} else {
+						list.forEach(item => {
+							_list.push(item);
+							if (item.children && item.children.length != 0) {
+								_handleData(item.children);
+							}
+							resolve();
+						});
+					}
+				});
+			};
+			await _handleData(data);
+			if (this.globalAppSettings.barrage.use) {
+				this.$nextTick(() => {
+					_handleAddBarrage();
+				});
+			}
+			const _handleRemove = () => {
+				this.$refs['barrage'].remove({
+					duration: 5000, // 延迟关闭的时间
+					speed: 1000 // 弹幕消失的速度
+				});
+			};
+			let index = 0;
+			const _handleAddBarrage = () => {
+				setTimeout(() => {
+					this.$refs['barrage'].add(_list[index]);
+					index += 1;
+					if (index < _list.length - 1) {
+						_handleAddBarrage();
+					} else {
+						_handleRemove();
+					}
+				}, 1000);
+			};
 		}
 	}
 };
diff --git a/pagesA/love/album.vue b/pagesA/love/album.vue
index a2deb33..c50d90d 100644
--- a/pagesA/love/album.vue
+++ b/pagesA/love/album.vue
@@ -303,7 +303,8 @@ export default {
 	&-desc {
 		margin-top: 24rpx;
 		line-height: 1.6;
-		font-size: 28rpx;
+		font-size: 30rpx;
+		color: rgba(26, 26, 26, 0.9);
 		&.is-empty {
 			display: flex;
 			align-items: center;
diff --git a/pagesA/love/list.vue b/pagesA/love/list.vue
index eac3cbc..40d6803 100644
--- a/pagesA/love/list.vue
+++ b/pagesA/love/list.vue
@@ -1,6 +1,6 @@
 <template>
-	<view class="app-page">
-		<view class="love-card">
+	<view class="app-page" @touchstart="fnOnTouchstart" @touchend="fnOnTouchend" @touchcancel="fnOnTouchend">
+		<view class="love-card" :class="{ ani: isDoAni }">
 			<view class="head">
 				<image class="avatar" :src="loveConfig.boy.avatar" mode="scaleToFill"></image>
 				<view class="love-days">
@@ -31,7 +31,7 @@
 		</view>
 		<view v-else class="list">
 			<block v-for="(item, index) in list" :key="index">
-				<view class="card" :style="{ '--delay': calcCardDelay(index) }">
+				<view class="card" :class="{ ani: isDoAni }" :style="{ '--delay': calcCardDelay(index) }">
 					<view class="head">
 						<view class="status">
 							<view v-if="!item.finish" class="text">进行中</view>
@@ -70,7 +70,7 @@
 				</view>
 			</block>
 		</view>
-		<scroll-btn :scrollTop.sync="scrollTop"></scroll-btn>
+		<scroll-btn :scrollTop.sync="scrollTop" @on-status="fnOnScrollStatus"></scroll-btn>
 	</view>
 </template>
 
@@ -81,6 +81,7 @@ export default {
 	components: { ScrollBtn },
 	data() {
 		return {
+			isDoAni: true,
 			scrollTop: 0,
 			loveConfig: LoveConfig,
 			list: []
@@ -142,6 +143,15 @@ export default {
 		fnOnItemOpen(item) {
 			item.open = !item.open;
 			this.$forceUpdate();
+		},
+		fnOnScrollStatus(isEnd) {
+			this.isDoAni = isEnd;
+		},
+		fnOnTouchstart() {
+			this.isDoAni = false;
+		},
+		fnOnTouchend() {
+			this.isDoAni = true;
 		}
 	}
 };
@@ -188,7 +198,9 @@ export default {
 	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;
+	&.ani {
+		animation: loveCardAni 3s ease-in-out infinite;
+	}
 
 	.head {
 		display: flex;
@@ -302,8 +314,10 @@ export default {
 	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);
+	&.ani {
+		animation: cardAni 3s ease-in-out infinite;
+	}
 	.head {
 		width: 100%;
 		display: flex;
diff --git a/pagesA/setting/setting.vue b/pagesA/setting/setting.vue
index bdc4ec1..3e35073 100644
--- a/pagesA/setting/setting.vue
+++ b/pagesA/setting/setting.vue
@@ -78,6 +78,10 @@
 						<text class="text-size-m ">友链简洁模式</text>
 						<tm-switch v-model="appSettings.links.useSimple" color="light-blue" :text="['是', '否']"></tm-switch>
 					</view>
+					<view class="mx-32 my-24 border-b-1  pb-24 flex-between">
+						<text class="text-size-m">启用评论弹幕</text>
+						<tm-switch v-model="appSettings.barrage.use" color="light-blue" :text="['是', '否']"></tm-switch>
+					</view>
 					<view class="mx-32 my-24 border-b-1  pb-24 flex-between">
 						<text class="text-size-m">是否圆形头像</text>
 						<tm-switch v-model="appSettings.isAvatarRadius" color="light-blue" :text="['是', '否']"></tm-switch>
diff --git a/utils/app.js b/utils/app.js
index 42a2360..f9d16d7 100644
--- a/utils/app.js
+++ b/utils/app.js
@@ -35,6 +35,11 @@ export const _DefaultAppSettings = {
 		timeout: 3, // 屏蔽广告时长，时间到后自动恢复展示（单位小时）
 		disabled: false, // 是否屏蔽广告（看广告可以关闭应用内设置的广告）
 	},
+	// 评论弹幕（文章详情）
+	barrage: {
+		use: true, // 是否启用
+		type: 'leftBottom' // 弹幕类型
+	},
 	gallery: {
 		// 是否使用瀑布流
 		useWaterfull: true