【需求 20331】 styles: 优化样式

src/views/questionDetail/index.vue

@@ -334,7 +334,7 @@
             </div>
 
             <button
-              class="flex items-center gap-1.5 text-slate-500 hover:text-slate-800 transition-colors text-sm cursor-pointer"
+              class="comment-btn flex items-center gap-1.5 text-slate-500 hover:text-slate-800 transition-colors text-sm cursor-pointer"
               @click="handleComment(answer, index)"
             >
               <el-icon class="text-base"><IEpChatRound /></el-icon>
@@ -507,4 +507,22 @@ onMounted(() => {
 .fade-leave-active {
   transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
+.comment-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: #64748b;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  transition:
+    color 0.15s,
+    background-color 0.15s;
+  &:hover {
+    color: #1e293b;
+    background-color: #f1f5f9;
+  }
+}
 </style>