小程序实现对话框回复

miniprogram/pages/articledetail/articledetail.wxss

@@ -563,52 +563,108 @@
     font-size: 22rpx;
   }
 
-
-  /* 新增：回复输入框容器（固定在底部，全屏宽度） */
-.reply-input-container {
+  .reply-input-container {
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
-    height: 80rpx;
-    background-color: #fff;
-    border-top: 1rpx solid #f5f5f5;
+    background-color: #FFFFFF;
+    border-top: 1rpx solid #EFEFEF;
     display: flex;
     align-items: center;
-    padding: 0 20rpx;
+    padding: 16rpx 24rpx;
+    /* 关键：为全面屏手机底部安全区域留出空间 */
+    padding-bottom: calc(16rpx + constant(safe-area-inset-bottom));
+    padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
     box-sizing: border-box;
-    z-index: 999; /* 提高层级，确保在所有内容上方 */
-    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05); /* 增加阴影，突出“弹出”感 */
+    z-index: 999;
+    
+    /* 初始状态在屏幕下方 */
+    transform: translateY(100%); 
+    /* 柔和的阴影 */
+    box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.04);
+    /* 动画效果：持续0.3秒的缓入缓出动画 */
+    transition: transform 0.3s ease-in-out;
+  }
+  
+  /* 当容器有 'visible' 类时，滑入屏幕内 */
+  .reply-input-container.visible {
+    transform: translateY(0);
   }
   
   /* 输入框样式 */
   .reply-input {
-    flex: 1; /* 占满剩余宽度 */
-    height: 56rpx;
-    background-color: #f5f5f5;
-    border-radius: 28rpx; /* 圆角，更美观 */
-    padding: 0 20rpx;
+    flex: 1;
+    height: 72rpx; /* 增加高度，更大气 */
+    background-color: #f4f5f7;
+    border-radius: 36rpx;
+    padding: 0 30rpx;
     box-sizing: border-box;
-    font-size: 24rpx;
+    font-size: 28rpx;
+    color: #333;
+  }
+  
+  /* 输入框 placeholder 样式 */
+  .reply-input::placeholder {
+    color: #BDBDBD;
   }
   
   /* 提交按钮样式 */
   .reply-submit-btn {
     width: 120rpx;
-    height: 56rpx;
-    line-height: 56rpx;
-    background-color: #4F46E5;
+    height: 72rpx;
+    line-height: 72rpx;
+    background: linear-gradient(90deg, #5A67D8, #4C51BF); /* 使用渐变色 */
     color: #fff;
-    border-radius: 28rpx;
+    border-radius: 36rpx;
     margin-left: 16rpx;
-    font-size: 24rpx;
-    padding: 0; /* 清除默认内边距 */
+    font-size: 28rpx;
+    padding: 0;
+    border: none; /* 移除 button 默认边框 */
+    
+    /* 动画效果：为背景色、透明度和缩放添加过渡 */
+    transition: background-color 0.3s, opacity 0.3s, transform 0.2s;
   }
   
-  /* 提交按钮禁用样式（可选：内容为空时禁用） */
-  .reply-submit-btn:disabled {
-    background-color: #cccccc;
-    color: #888;
+  /* 移除按钮点击时的默认覆盖样式 */
+  .reply-submit-btn::after {
+    display: none;
+  }
+  
+  /* 按钮的禁用样式 */
+  .reply-submit-btn.disabled {
+    background: #E0E0E0; /* 更柔和的禁用灰色 */
+    color: #AFAFAF;
+    /* 禁用时缩小一点点，提供视觉反馈 */
+    transform: scale(0.95);
+    opacity: 0.8;
+  }
+
+
+  .primary-comment-trigger {
+    display: flex;
+    align-items: center;
+    margin-top: 20px;
+    padding: 10px 0;
+    border-top: 1px solid #f0f0f0;
+  }
+  
+  .primary-comment-trigger .avatar {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    margin-right: 12px;
+  }
+  
+  .primary-comment-trigger .fake-input-text {
+    flex: 1;
+    background-color: #f7f7f7;
+    height: 36px;
+    line-height: 36px;
+    border-radius: 18px;
+    padding: 0 15px;
+    color: #aaa;
+    font-size: 14px;
   }
   
   /* 原有样式不变... */