新增：文章详情评论弹幕设置功能

components/article-card/article-card.vue

@@ -12,7 +12,7 @@
 		</view>
 		<view class="right">
 			<view class="title">
-				<text class="is-top" v-if="article.topped">置顶</text>
+				<text class="is-top bg-gradient-blue-accent" v-if="article.topped">置顶</text>
 				<text class="title-text text-overflow">{{ article.title }}</text>
 			</view>
 			<view class="content text-overflow-2">{{ article.summary }}</view>
@@ -33,8 +33,10 @@
 </template>
 
 <script>
+import tmTags from '@/tm-vuetify/components/tm-tags/tm-tags.vue';
 export default {
 	name: 'article-card',
+	components: { tmTags },
 	props: {
 		from: {
 			type: String,
@@ -253,6 +255,7 @@ export default {
 		box-sizing: border-box;
 		.title {
 			display: flex;
+			align-items: center;
 			font-size: 30rpx;
 			color: var(--main-text-color);
 			.is-top {
@@ -264,8 +267,9 @@ export default {
 				white-space: nowrap;
 				vertical-align: 4rpx;
 				color: #fff;
-				background-image: -webkit-linear-gradient(0deg, #3ca5f6 0, #a86af9 100%);
-				border-radius: 4rpx 12rpx;
+				// background-image: -webkit-linear-gradient(0deg, #3ca5f6 0, #a86af9 100%);
+				border-radius: 6rpx 12rpx;
+				box-shadow: none !important;
 			}
 			&-text {
 				color: #303133;

components/barrage/barrage.vue

@@ -14,7 +14,7 @@
 <script>
 export default {
 	props: {
-		//rightToLeft leftToRight leftBottom
+		// rightToLeft leftToRight leftBottom
 		type: {
 			type: String,
 			default: 'rightToLeft'
@@ -53,6 +53,7 @@ export default {
 			listData: []
 		};
 	},
+
 	mounted() {
 		//leftBottom 使用参数
 		if (this.type === 'leftBottom') {
@@ -61,7 +62,6 @@ export default {
 	},
 	methods: {
 		add(obj) {
-			console.log('加载弹幕中...');
 			this.isShow = true;
 			this.showFlag = true;
 			let data = {
@@ -71,7 +71,6 @@ export default {
 				type: this.type
 			};
 			if (this.type === 'leftBottom') {
-				console.log('leftBottom，加载弹幕中...');
 				let objData = {
 					item: data,
 					type: 'leftBottomEnter',
@@ -110,7 +109,7 @@ export default {
 				}
 			} else if (this.type === 'rightToLeft') {
 				let objData = {
-					item: data.item,
+					item: data,
 					type: 'rightToLeft',
 					style: {
 						animationDuration: `${data.time}s`,
@@ -130,6 +129,16 @@ export default {
 			}
 		},
 		async remove(options = {}) {
+			if (this.type == 'rightToLeft') {
+				if (this.listData.length != 0) {
+					const last = this.listData[this.listData.length - 1];
+					setTimeout(() => {
+						this.listData = [];
+					}, last.item.time * 1200 + 1000);
+				}
+				return;
+			}
+
 			options = Object.assign(
 				{},
 				{
@@ -142,8 +151,8 @@ export default {
 			const _fnHandleRemove = item => {
 				return new Promise(resolve => {
 					setTimeout(() => {
-						item['type'] = 'leftBottomExitLeft';
-						// this.$forceUpdate();
+						// item['type'] = 'leftBottomExitLeft';
+						item['type'] = 'is-hide';
 						resolve();
 					}, options.speed);
 				});
@@ -162,7 +171,7 @@ export default {
 			await _fnHandleLoop();
 			setTimeout(() => {
 				this.listData = [];
-			}, 100);
+			}, options.duration + 200);
 		},
 		repaint(index, type) {
 			setTimeout(() => {
@@ -203,9 +212,12 @@ export default {
 		transform: translateX(0%);
 		opacity: 1;
 	}
-
+	50% {
+		transform: translateX(-50%);
+		opacity: 1;
+	}
 	100% {
-		transform: translateX(-200%);
+		transform: translateX(-100%);
 		opacity: 0;
 	}
 }
@@ -238,7 +250,12 @@ export default {
 	transition: all 1s ease-in-out;
 	&.leftBottom {
 		top: initial;
+		/* #ifdef H5 */
 		bottom: 130rpx;
+		/* #endif */
+		/* #ifndef H5 */
+		bottom: 36rpx;
+		/* #endif */
 	}
 }
 .danmu-li {
@@ -246,10 +263,11 @@ export default {
 	width: 100%;
 	transform: translateX(100%);
 	animation-timing-function: linear;
-	transition: transform 0.5s ease-in-out;
-
+	transition: all 0.5s ease-in-out;
+	opacity: 1;
 	&.is-hide {
-		transform: translateX(-100%) !important;
+		opacity: 0;
+		// transform: translateX(-100%) !important;
 	}
 	&.leftBottom {
 		left: 24rpx;

components/comment-list/comment-list.vue

@@ -34,14 +34,13 @@
 					:shadow="0"
 					label="Ծ‸Ծ博主已设置该文章禁止评论!"
 					:round="3"
-					close
 				></tm-alerts>
 				<view class="empty pt-50" v-if="dataList.length == 0">
 					<tm-empty v-if="disallowComment" icon="icon-shiliangzhinengduixiang-" label="暂无评论">
 						<text class="text-red text-size-s">- 文章已开启禁止评论 -</text>
 					</tm-empty>
 					<tm-empty v-else icon="icon-shiliangzhinengduixiang-" label="暂无评论">
-						<tm-button theme="bg-gradient-light-blue-accent" size="m" @click="fnToComment(null)">抢沙发</tm-button>
+						<tm-button theme="light-blue" :dense="true" :shadow="0" size="m" @click="fnToComment(null)">抢沙发</tm-button>
 					</tm-empty>
 				</view>
 				<block v-else>