style(playlist): 优化播放列表详情页评论样式

- 调整评论输入区域的间距和对齐方式
- 移除按钮悬停效果并简化样式
- 更新评论项目的边框和底部间距
- 修改用户名字体颜色和粗细
- 添加子评论列表的缩进和边框样式
- 创建评论底部操作区域的布局结构
- 简化评论操作按钮的过渡效果

music-qianduan/src/views/PlaylistDetail.vue

@@ -901,21 +901,13 @@ onUnmounted(() => {
   margin-bottom: 20px;
   display: flex;
   flex-direction: column;
-  gap: 15px;
+  gap: 10px;
-  align-items: flex-end;
 }
 
-.comment-input .el-button {
+.comment-submit-actions {
-  background-color: #ff6b81;
+  display: flex;
-  color: white;
+  justify-content: flex-end;
-  border-radius: 20px;
+  gap: 10px;
-  padding: 10px 20px;
-  transition: all 0.3s;
-}
-
-.comment-input .el-button:hover {
-  background-color: #ff4757;
-  transform: translateY(-2px);
 }
 
 .comment-list {
@@ -925,15 +917,8 @@ onUnmounted(() => {
 .comment-item {
   display: flex;
   margin-bottom: 20px;
-  padding: 15px;
+  padding-bottom: 20px;
-  background-color: #fff9f9;
+  border-bottom: 1px solid #eee;
-  border-radius: 12px;
-  transition: all 0.3s;
-}
-
-.comment-item:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(255, 107, 129, 0.1);
 }
 
 .comment-avatar {
@@ -952,8 +937,17 @@ onUnmounted(() => {
 }
 
 .comment-user {
-  font-weight: 600;
+  font-weight: bold;
-  color: #ff6b81;
+}
+
+.child-comment-list {
+  margin-top: 15px;
+  padding-left: 15px;
+  border-left: 2px solid #eee;
+}
+
+.child-comment-input {
+  margin-top: 15px;
 }
 
 .comment-text {
@@ -962,18 +956,11 @@ onUnmounted(() => {
   line-height: 1.5;
 }
 
-.comment-time {
+.comment-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   font-size: 0.8rem;
   color: #999;
 }
-
-.comment-actions .el-button {
-  border-radius: 20px;
-  padding: 5px 10px;
-  transition: all 0.3s;
-}
-
-.comment-actions .el-button:hover {
-  transform: scale(1.05);
-}
 </style>