info

2025-03-12 20:11:03 +08:00
commit 70b7c82c97
1178 changed files with 148185 additions and 0 deletions
@@ -0,0 +1,601 @@
+<template>
+	<view class="hb-comment">
+		<!-- 阅读数-start -->
+<!-- 		<view>
+			<img style="width: 14px; height: 14px;"
+				src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAA0tJREFUWEftVk2IHUUQ/qp311NOksRT8JBDkARCfrxEDyLK+pe/DQkmJpBlZ7ofDwQ15iRocjYSSWAzU/OWd4hCMJiQH43xBz2YXCRivIgHQQ8SRPGUU/btfNLPnuU5O7OZlWz2kobh8aq/qvq6qrq6BEu8ZIn94wGBBUWg3W6v6vV62wFsILlGRNYA6AH4AcCPJH8mebPT6dxomtpGBJxz4wD2kny2oWHN81ybEJmXQKvVWpfn+VsAXi45vgPgj/D5rUfC91AJ54m83el0PLZy1RKw1u4GkAB4OGj+LSJXRORMkiSXq6xFUfSUiHi93SKyImB+BeBU9fMqnUoCcRy/IiIfFAoicp7kYVX9pUkKrLWrReRdkjsLvNfPsuxYWX8OAWvtOwCODACPqOrRJo7LmApbe1T17CDuPwSccy2SpwZYj2VZdr7K+fj4+IqRkZFVIjJD8ndV/asKdzcSswTiON4iIlcBLPOGROTFNE0/rTHqQ3motHdWVffU1YYx5utizxjzXJIk3te/nbDdbi/r9XpesCWAasNureV86VDVurqKRUSD7k8zMzPPT01N/dYHW2uPA3gtnDxL09TWnPwjX+F+j+Q1EfkCwC0ALwHYGnTeU9U3q/Sdc0oyDnvnVHWXOOdeIPlJEN4E8ExVPq21ywH8GXCXVHXboJM4jr8VkSe8bHp6emW32y2ws7Bg40sA68NhD3gCXZIHA2q07r4659aT9C3XL3+vi3D2BaVi26Sq31dFIY7jgyLSDXs3xFp7rci9MebJJEn8/zlrMQj00+ic20/ydAjJhTRNd9Tk/56ngOT2ogg/BjAWHB9X1TfuQxG+r6qv9wlMTEw8OjQ0dAXAY8HxYl/D68PDw6OTk5O3Z+9sq9UazfP8s+Lki9iIbpMczbLsej/tg6F2zr1K8kQhI3n/WnHhdDEfI5L7syz7cPDQlW2zHIl78RwDqCzu2oEkiqKnjTFfDbD9vwOJb9vHsiw7XHWz5h3JoijaZIzxz/PjJeVGIxnJb4wxJ9M0PVflfE4R1oGcc2Mk9wHYVYcpyS8BuKiqnbvhG03FhRHn3GaSG0muM8as9b8AjB/HRcR/35G8oKr+hWy0FkSgkcUFgh4QWPII/ANy0cUvD9WbkgAAAABJRU5ErkJggg==" />
+			<span class="top-read">{{commentData.readNumer}}</span>
+		</view> -->
+		<!-- 阅读数-end -->
+		<!-- 阅读数下边那条线-start -->
+		<view class="seg_line_box">
+			<view class="seg_line"></view>
+			<view class="seg_dot"></view>
+			<view class="seg_line"></view>
+		</view>
+		<!-- 阅读数下边那条线-end -->
+		<!-- 评论主体-start -->
+		<view class="comment-list" v-if="commentData.comment.length != 0">
+			<!-- 评论主体-顶部数量及发表评论按钮-start -->
+			<view class="comment-num">
+				<view>共 {{commentData.commentSize}} 条评论</view>
+				<view class="add-btn">
+					<button type="primary" size="mini" @click="commentInput_">发表评论</button>
+				</view>
+			</view>
+			<!-- 评论主体-顶部数量及发表评论按钮-end -->
+			<!-- 评论列表-start -->
+			<view class="comment-box" v-for="(item, index) in commentData.comment" :key="index">
+				<view class="comment-box-item">
+					<view>
+						<cloud-image v-if="item.avatarUrl" 
+						height="70rpx"
+						width="70rpx"
+						borderRadius="50%"
+						:src="item.avatarUrl.url"></cloud-image>
+						<image class="avatar" 
+						:src="emptyAvatar"
+						mode="" 
+						v-else></image>
+					</view>
+					<view class="comment-main">
+						<!-- 父评论体-start -->
+						<view class="comment-main-top">
+							<view class="nick-name-box">
+								<view class="comLogo com4" >{{index + 1}}楼</view>
+								<view class="nick-name">{{item.nickName}}</view>
+							</view>
+							<view class="zan-box" @click="like(item)">
+								<span :class="item.hasLike ? 'isLike' : 'notLike'">{{item.likeNum == 0 ? '抢首赞' : item.likeNum}}</span>
+								<img style="width: 14px; height: 14px;" v-if="!item.hasLike"
+									src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAApVJREFUWEfFlz9oFEEUxr93SWEhFkIaBUljo4WgATEaiI0GwVLBQg2EzLd3hSBqLI2lRgWLY+ftSSQgggoWNv5pImLUwjQBg1goqCCIIBqwueSeTLg7Ln9Mcmdub7vdnZnvN9+8fe+toMWXtFgfDQGMjo52zM7OHgMwIyLTg4ODk41upG4A7/0OEbkPYGdFVEQuOOeuNQJRN4CqBvGw+3dm9kZEBsrCPSRf1gvRCIAFETPrjqLodZIkY2Z2SkQmnHMHUgMgOQ8fx3FvJpMZB/CDZEfqACEgi8XidwA/SW5uKkCN2AzJTYscmCTZ1VQA7/2AiNwSkefOuYNBLEmSnJnlATwgebypAKr6CMBRANdJng9i3vu8iORE5Mrc3NyTlQDM7HMul/tYO2bNX0GhUDhRKpXumtlvAPuiKJouOzBuZr117HyBU6sCqOpeAH0AhssiwyQvVwTjOO5va2s7vRaAGtCrJC+GOVUAVb1UTjDVDLd4URHJOuf8WsSWG5MkSbeZTYR3lc+4CpAkyUpWht3fI/m+UfEwL5/Pb2xvb59ZFkBV5zNchazsSBBeYPn/ABQKhZ5SqfQCwBTJXYuPoOkAqnoGwE0Ad0ieTB3Ae39bRPoBDJEcSR1AVd8C2CMifc65p6kCmJkkSfIHwAYAW0h+SxVAVXcDmDSzL1EUbasEc20eaGoQVuoIgMckj6QOoKo3AJwFMEJyqBUAIegOAegnOdYKgK8AtmYyma7aLjqVGPDebxeRDwB+AeggWUzVAVV1ABTAK5L7l+0HVPUTgM7Q7VQGhPJZe99oHagpw4dJPvsXQPixONeoyErzRGTKzB7W9hFLjiA8iOO4M7iw3hDZbLbq6pIeY73F6l1v1Zas3gXrHf8XhhNvMGSmtPYAAAAASUVORK5CYII=" />
+								<img style="width: 14px; height: 14px;" v-else
+									src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAfVJREFUWEfFl79LHEEUx7/vclr4g51TLFQQW9FNDFhFBDvjtcF0gXSp5eYuWJlUAW9NIP9BIFUEOxFtTKF2FrezKFgkkEBS3h4SAtHbJ6vu5W5d1F3cm20WZt+b7+e9mTfzlqD5Ic36SATw+OPJQP2ft+ABJwQ+VFIcJA0kEYBpVfcAehKIMqHoFISVBCI2wOS76mi9g76HxTLwZiqybzcuRGwAc7WWB/NGWIhBu440ZlIHmFitLRPzm+tC9EtJY1gjAP9VMtelEQC2kuJR6gCm5X4BsBAWImDdluJZqgBjH/4MZr3TYzB6IoRWmHnzJgDK0g+1KL4128SqgnD9x432yn5NSfE88L0VYPx9rS/jYR6EJTCPJxQNu60oKV77gw2Ai/Ly1/ZKRElx8c20XL4n0ZZpgvkbAKbl7gCYDax0ALREmjJAo2SbM9A+AKLPqmC8aNkD4bVOMwPEKNlFUdYGkAE9rUhjSxvA2YOOoaPF7t+6AH4qKUauHURt3AObSoq8NgAGyo4UJW0ABH5py9wnbQAAppq76HYfRLXOXmPg4BWdasoA7yuZm47sB0zL9Vvt0TQvI/bqc06pfzsS4KHlWgwUUgKwmWjdKRhvI1q5/0P+T8dZ9jILTjH31X9PlKuNKzppXxDMFeV/a0eUVPSuftoBzgHKR/ohZwAugwAAAABJRU5ErkJggg==" />
+							</view>
+
+						</view>
+						<view class="comment-main-content">
+						
+							<view class="">
+								
+							</view>
+								<text>
+									{{ item.content }}
+									
+								</text>
+
+							<!-- {{item.content.length > 60 && !item.hasShowMore ? item.content.slice(0, 59) : item.content}} -->
+<!-- 							<span class="foot-btn" @click="showMore(item.id)">
+								{{item.hasShowMore ? '收起' : '展开'}}
+							</span> -->
+						</view>
+						<view class="comment-main-foot">
+							<view class="foot-time">{{item.createTime}}</view>
+							<view class="foot-btn" @click="reply(item)">回复</view>
+							<view class="foot-btn" v-if="item.owner" @click="confirmDelete(item)">删除</view>
+
+						</view>
+						<view class="" v-if="item.replyCount > 0" @click="getTreeComment(item)">
+							——<text class="font-size-20 color-bule"> 共有{{ item.replyCount }}条评论点击展开</text>
+						</view>
+						<!-- 父评论体-end -->
+						<!-- 子评论列表-start -->
+						<view class="comment-sub-box">
+							<view class="comment-sub-item" v-for="each in item.children">
+								<view>
+									<cloud-image v-if="each.avatarUrl" 
+									height="70rpx"
+									width="70rpx"
+									borderRadius="50%"
+									:src="each.avatarUrl.url"></cloud-image>
+									<image class="avatar" 
+									:src="emptyAvatar"
+									mode="" 
+									v-else></image>
+								</view>
+								<view class="comment-main">
+									<view class="sub-comment-main-top">
+										<view class="nick-name">{{each.nickName}}</view>
+										<view class="zan-box" @click="like(each)">
+											<span :class="each.hasLike ? 'isLike' : 'notLike'">{{each.likeNum == 0 ? '抢首赞' : each.likeNum}}</span>
+											<img style="width: 14px; height: 14px;" v-if="!each.hasLike"
+												src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAApVJREFUWEfFlz9oFEEUxr93SWEhFkIaBUljo4WgATEaiI0GwVLBQg2EzLd3hSBqLI2lRgWLY+ftSSQgggoWNv5pImLUwjQBg1goqCCIIBqwueSeTLg7Ln9Mcmdub7vdnZnvN9+8fe+toMWXtFgfDQGMjo52zM7OHgMwIyLTg4ODk41upG4A7/0OEbkPYGdFVEQuOOeuNQJRN4CqBvGw+3dm9kZEBsrCPSRf1gvRCIAFETPrjqLodZIkY2Z2SkQmnHMHUgMgOQ8fx3FvJpMZB/CDZEfqACEgi8XidwA/SW5uKkCN2AzJTYscmCTZ1VQA7/2AiNwSkefOuYNBLEmSnJnlATwgebypAKr6CMBRANdJng9i3vu8iORE5Mrc3NyTlQDM7HMul/tYO2bNX0GhUDhRKpXumtlvAPuiKJouOzBuZr117HyBU6sCqOpeAH0AhssiwyQvVwTjOO5va2s7vRaAGtCrJC+GOVUAVb1UTjDVDLd4URHJOuf8WsSWG5MkSbeZTYR3lc+4CpAkyUpWht3fI/m+UfEwL5/Pb2xvb59ZFkBV5zNchazsSBBeYPn/ABQKhZ5SqfQCwBTJXYuPoOkAqnoGwE0Ad0ieTB3Ae39bRPoBDJEcSR1AVd8C2CMifc65p6kCmJkkSfIHwAYAW0h+SxVAVXcDmDSzL1EUbasEc20eaGoQVuoIgMckj6QOoKo3AJwFMEJyqBUAIegOAegnOdYKgK8AtmYyma7aLjqVGPDebxeRDwB+AeggWUzVAVV1ABTAK5L7l+0HVPUTgM7Q7VQGhPJZe99oHagpw4dJPvsXQPixONeoyErzRGTKzB7W9hFLjiA8iOO4M7iw3hDZbLbq6pIeY73F6l1v1Zas3gXrHf8XhhNvMGSmtPYAAAAASUVORK5CYII=" />
+											<img style="width: 14px; height: 14px;" v-else
+												src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAfVJREFUWEfFl79LHEEUx7/vclr4g51TLFQQW9FNDFhFBDvjtcF0gXSp5eYuWJlUAW9NIP9BIFUEOxFtTKF2FrezKFgkkEBS3h4SAtHbJ6vu5W5d1F3cm20WZt+b7+e9mTfzlqD5Ic36SATw+OPJQP2ft+ABJwQ+VFIcJA0kEYBpVfcAehKIMqHoFISVBCI2wOS76mi9g76HxTLwZiqybzcuRGwAc7WWB/NGWIhBu440ZlIHmFitLRPzm+tC9EtJY1gjAP9VMtelEQC2kuJR6gCm5X4BsBAWImDdluJZqgBjH/4MZr3TYzB6IoRWmHnzJgDK0g+1KL4128SqgnD9x432yn5NSfE88L0VYPx9rS/jYR6EJTCPJxQNu60oKV77gw2Ai/Ly1/ZKRElx8c20XL4n0ZZpgvkbAKbl7gCYDax0ALREmjJAo2SbM9A+AKLPqmC8aNkD4bVOMwPEKNlFUdYGkAE9rUhjSxvA2YOOoaPF7t+6AH4qKUauHURt3AObSoq8NgAGyo4UJW0ABH5py9wnbQAAppq76HYfRLXOXmPg4BWdasoA7yuZm47sB0zL9Vvt0TQvI/bqc06pfzsS4KHlWgwUUgKwmWjdKRhvI1q5/0P+T8dZ9jILTjH31X9PlKuNKzppXxDMFeV/a0eUVPSuftoBzgHKR/ohZwAugwAAAABJRU5ErkJggg==" />
+										</view>
+									</view>
+									<view class="comment-main-content">
+										{{each.content.length > 60 ? each.content.slice(0, 59) : each.content}}
+										<span v-if="each.content.length > 60">
+											{{each.hasShowMore ? each.content.slice(59) : '...'}}
+											<span class="foot-btn" @click="showMore(each.id)">
+												{{each.hasShowMore ? '收起' : '展开'}}
+											</span>
+										</span>
+									</view>
+									<view class="comment-main-foot">
+										<view class="foot-time">{{each.createTime}}</view>
+										<view class="foot-btn" @click="reply(each)">
+											回复</view>
+										<view class="foot-btn" v-if="each.owner" @click="confirmDelete(each)">删除
+										</view>
+									</view>
+								</view>
+							</view>
+						</view>
+						<!-- 子评论列表-end -->
+					</view>
+				</view>
+			</view>
+			<!-- 评论列表-end -->
+		</view>
+		<!-- 评论主体-end -->
+		<!-- 无评论-start -->
+		<view class="comment-none" v-else>
+			暂无评论，<span @click="commentInput" style="color: #007AFF;">抢沙发</span>
+		</view>
+		<!-- 无评论-end -->
+		<!-- 新增评论-start -->
+		<view class="comment-submit-box" v-if="submit" @click="closeInput">
+			<!-- 下边的click.stop.prevent用于让上边的click不传下去，以防点到下边的空白处触发closeInput方法 -->
+			<view class="comment-add" @click.stop.prevent="stopPrevent" :style="'bottom:' + KeyboardHeight + 'px'">
+				<view class="comment-submit">
+					<view class="btn-click cancel" @click="closeInput">取消</view>
+					<view>
+						<view class="replayTag" v-if="showTag">
+							<view>回复在 {{pUser}} 的评论下</view>
+							<view @click="tagClose" class="replyTagClose">×</view>
+						</view>
+					</view>
+					<view>
+						<view class="btn-click" @click="selectAdd()">发布</view>
+					</view>
+				</view>
+				<textarea class="textarea" 
+				v-model="commentReq.content" 
+				:placeholder="placeholder" 
+				:adjust-position="false" 
+				:show-confirm-bar="false"
+					@blur="blur" @focus="focusOn" :focus="focus" maxlength="800"></textarea>
+			</view>
+		</view>
+		<!-- 新增评论-end -->
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'hb-comment',
+		props: {
+			cmData: {
+				type: Object,
+				default: () => {
+					return null;
+				}
+			},
+			
+			articlesData: {
+				type: Object,
+				default: () => {
+					return{};
+				}
+			},
+			deleteTip: {
+				type: String,
+				default: () => {
+					return '操作不可逆，如果评论下有子评论，也将被一并删除，确认？';
+				}
+			},
+		},
+		watch: {
+			cmData: {
+				handler: function(newVal, oldVal) {
+					this.init(newVal);
+				},
+				immediate: true
+			}
+		},
+		data() {
+			return {
+				"emptyAvatar": "https://env-00jxt5y29hrd.normal.cloudstatic.cn/static/center/avatar.png?expire_at=1741157497&er_sign=9b8381ae7875137d28c57d502762691b",
+				"commentData": null,
+				"placeholder": "请输入评论",
+				"commentReq": {
+					"pId": null, // 评论父id
+					"content": null, // 评论内容
+					"root_id": null
+				},
+				"pUser": null, // 标签-回复人
+				"showTag": false, // 标签展示与否
+				"focus": false, // 输入框自动聚焦
+				"submit": false, // 弹出评论
+				"KeyboardHeight": 0 // 键盘高度
+			};
+		},
+		mounted: function() {
+			uni.onKeyboardHeightChange(res => {
+				this.KeyboardHeight = res.height;
+			})
+		},
+		methods: {
+
+			commentInput_() {
+				this.commentReq = {
+					"pId": null, // 评论父id
+					"content": null, // 评论内容
+					"root_id": null
+				};
+				this.showTag = false;
+				this.commentInput();
+			},
+			selectAdd() {
+				if (this.showTag === true) {
+					this.replyAdd()
+				} else {
+					this.add();
+				}
+			},
+			async replyAdd(reply_comment) {
+				if (this.commentReq.content == null || this.commentReq.content.length < 0) {
+					uni.showToast({
+						title: '评论内容不能为空',
+						duration: 2000
+					});
+					return
+				}
+				
+				this.$emit('replyAdd', this.commentReq);
+				this.closeInput();
+			},
+			// 初始化评论
+			init(cmData) {
+				this.commentData = cmData;
+			},
+			// 没用，但不要删
+			stopPrevent() {},
+			// 回复评论
+			reply(comment) {
+				
+				this.pUser = comment.nickName;
+				this.commentReq.pId = comment.id;
+				this.commentReq.root_id = comment.root_id === 0? comment.id : comment.root_id;
+				console.log(this.commentReq);
+				if (comment.nickName) {
+					this.commentReq.content = '@' + comment.nickName + ' ';
+				} else {
+					this.commentReq.content = '';
+				}
+				this.showTag = true;
+				this.commentInput();
+			},
+			// 删除评论前确认
+			confirmDelete(item) {
+				var that = this;
+				uni.showModal({
+					title: '警告',
+					content: that.deleteTip,
+					confirmText: '确认删除',
+					success: function(res) {
+						if (res.confirm) {
+							that.$emit('del', item);
+						}
+					}
+				});
+			},
+			// 新增评论
+			add() {
+				if (this.commentReq.content == null || this.commentReq.content.length < 0) {
+					uni.showToast({
+						title: '评论内容不能为空',
+						duration: 2000
+					});
+					return
+				}
+				
+				this.$emit('add', this.commentReq.content);
+				this.closeInput();
+			},
+			// 获取父评论下的子评论
+			async getTreeComment(item) {
+				this.$emit('getTreeComment', item.id);
+				
+				
+			},
+			like(comment) {
+				if (comment.hasLike === true) {
+					console.log(1)
+					this.$emit('relike', comment);
+				} else {
+					this.$emit('like', comment);
+				}
+
+			},
+			// 新增完成
+			addComplete() {
+				this.commentReq.content = null;
+				this.tagClose();
+				this.closeInput();
+			},
+			// 点赞完成-本地修改点赞结果
+			likeComplete(comment) {
+				comment.hasLike = !comment.hasLike;
+				comment.likeNum += comment.hasLike ? 1 : -1;
+				
+			},
+			// 删除完成-本地删除评论
+			deleteComplete(commentId) {
+				for (var i in this.commentData.comment) {
+					for (var j in this.commentData.comment[i].children) {
+						if (this.commentData.comment[i].children[j].id == commentId) {
+							this.commentData.comment[i].children.splice(Number(j), 1);
+							return
+						}
+					}
+					if (this.commentData.comment[i].id == commentId) {
+						this.commentData.comment.splice(Number(i), 1);
+						return
+					}
+				}
+			},
+			// 展开评论
+			showMore(commentId) {
+				for (var i in this.commentData.comment) {
+					if (this.commentData.comment[i].id == commentId) {
+						this.commentData.comment[i].hasShowMore = !this.commentData.comment[i].hasShowMore;
+						this.$forceUpdate();
+						return
+					}
+					for (var j in this.commentData.comment[i].children) {
+						if (this.commentData.comment[i].children[j].id == commentId) {
+							this.commentData.comment[i].children[j].hasShowMore = !this.commentData.comment[i].children[j].hasShowMore;
+							this.$forceUpdate();
+							return
+						}
+					}
+				}
+			},
+			// 输入框失去焦点
+			blur() {
+				this.focus = false;
+			},
+			// 输入框聚焦
+			focusOn() {
+				this.$emit('focusOn');
+			},
+			// 标签关闭
+			tagClose() {
+				this.showTag = false;
+				this.pUser = null;
+				this.commentReq.pId = null;
+			},
+			// 输入评论
+			commentInput() {
+				// TODO 调起键盘方法
+				this.submit = true;
+				setTimeout(() => {
+					this.focus = true;
+				}, 50)
+			},
+			// 关闭输入评论
+			closeInput() {
+				this.focus = false;
+				this.submit = false;
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	.hb-comment {
+		padding: 10rpx;
+	}
+
+	.top-read {
+		font-size: 28rpx;
+		padding-left: 10rpx;
+		color: #999999;
+	}
+
+	.seg_line_box {
+		display: flex;
+		height: 5rpx;
+		justify-content: space-between;
+		margin: 5rpx 0;
+	}
+
+	.seg_line {
+		width: 45%;
+		border-bottom: 1rpx solid #e1e1e1;
+	}
+
+	.seg_dot {
+		width: 8%;
+		border-bottom: 5rpx dotted #dbdbdb;
+	}
+
+	.comment-num {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 20rpx 0;
+	}
+
+	.comment-box {
+		padding: 10rpx 0;
+	}
+
+	.comment-box-item {
+		display: flex;
+	}
+
+	.comment-main {
+		padding-left: 20rpx;
+		padding-right: 30rpx;
+	}
+
+	.comment-main-top {
+		width: 600rpx;
+		padding-top: 6rpx;
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.sub-comment-main-top {
+		width: 510rpx;
+		padding-top: 6rpx;
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.avatar {
+		width: 70rpx;
+		height: 70rpx;
+		border-radius: 50%;
+	}
+
+	.nick-name-box {
+		display: flex;
+		align-items: center;
+	}
+
+	.comLogo {
+		margin-right: 18rpx;
+		font-size: 22rpx;
+		border-radius: 10rpx;
+		padding: 5rpx 15rpx;
+		color: #FFFFFF;
+	}
+
+	.com1 {
+		background-color: #d218b1;
+	}
+
+	.com2 {
+		background-color: #f19c0b;
+	}
+
+	.com3 {
+		background-color: #c8da85;
+	}
+
+	.com4 {
+		background-color: #bfd0da;
+	}
+
+	.nick-name {
+		color: #2d8cf0;
+	}
+
+	.isLike {
+		font-size: 28rpx;
+		padding-right: 10rpx;
+		color: #2d8cf0;
+	}
+
+	.notLike {
+		font-size: 28rpx;
+		padding-right: 10rpx;
+		color: #999999;
+	}
+
+	.comment-main-content {
+		padding: 10rpx 10rpx 10rpx 0;
+	}
+
+	.comment-main-foot {
+		display: flex;
+		font-size: 22rpx;
+	}
+
+	.replayTag {
+		color: #909399;
+		margin-bottom: 5px;
+		border: 1px solid #c8c9cc;
+		background-color: #f4f4f5;
+		border-radius: 3px;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		font-size: 16rpx;
+		padding: 5px 10px;
+	}
+
+	.replyTagClose {
+		font-size: 20px;
+		line-height: 12px;
+		padding: 0 0 2px 5px;
+	}
+
+	.foot-btn {
+		padding-left: 10rpx;
+		color: #007AFF;
+	}
+
+	.comment-sub-box {
+		padding: 20rpx 0;
+	}
+
+	.comment-sub-item {
+		display: flex;
+	}
+
+	.comment-none {
+		padding: 20rpx;
+		width: 100%;
+		text-align: center;
+		color: #999999;
+	}
+
+	.comment-submit-box {
+		position: fixed;
+		display: flex;
+		align-items: flex-end;
+		z-index: 9900;
+		left: 0;
+		top: var(--window-top);
+		bottom: 0;
+		background-color: rgba($color: #000000, $alpha: 0.5);
+		width: 100%;
+	}
+
+	.comment-add {
+		position: fixed;
+		background-color: #FFFFFF;
+		width: 100%;
+		padding: 5rpx;
+		border: 1px solid #ddd;
+		transition: .3s;
+		-webkit-transition: .3s;
+	}
+
+	.btn-click {
+		color: #007AFF;
+		font-size: 28rpx;
+		padding: 10rpx;
+	}
+
+	.cancel {
+		color: #606266;
+	}
+
+	.textarea {
+		height: 100px;
+		padding: 16rpx;
+		width: 100%;
+	}
+
+	.comment-submit {
+		padding: 5rpx 20rpx 0 20rpx;
+		border-bottom: 1px dashed #ddd;
+		width: calc(100% - 40rpx);
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+	.font-size-20 {
+		font-size: 33rpx;
+	}
+	.color-bule {
+		color: #333;
+	}
+</style>