feat: 优化UI

2026-03-05 17:04:40 +08:00
parent 0a61c4ddec
commit 7f51b2a0a8
28 changed files with 1773 additions and 964 deletions
@@ -320,3 +320,150 @@
  background: #FFF8EE;
  border-radius: 5rpx;
 }
+
+/* ── like 状态 ── */
+.like-icon.liked {
+  color: #FF4D6D;
+}
+.top-comment-icon {
+  font-size: 38rpx;
+  line-height: 1;
+}
+
+/* ── 评论弹层 ── */
+.comment-mask {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.5);
+  z-index: 200;
+}
+.comment-sheet {
+  position: fixed;
+  bottom: -100%;
+  left: 0;
+  right: 0;
+  height: 70vh;
+  background: #231808;
+  border-radius: 40rpx 40rpx 0 0;
+  z-index: 201;
+  display: flex;
+  flex-direction: column;
+  padding: 0 0 env(safe-area-inset-bottom);
+  transition: bottom 0.3s cubic-bezier(0.32,0.72,0,1);
+}
+.comment-sheet.sheet-up {
+  bottom: 0;
+}
+.sheet-handle {
+  width: 72rpx;
+  height: 6rpx;
+  background: rgba(255,200,120,0.2);
+  border-radius: 3rpx;
+  margin: 20rpx auto 0;
+}
+.sheet-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 24rpx 40rpx;
+  border-bottom: 1rpx solid rgba(255,200,120,0.08);
+}
+.sheet-title {
+  font-size: 30rpx;
+  font-weight: 700;
+  color: rgba(255,240,210,0.9);
+}
+.sheet-close-icon {
+  font-size: 32rpx;
+  color: rgba(255,200,120,0.4);
+}
+.comment-input-row {
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+  padding: 20rpx 32rpx;
+  border-bottom: 1rpx solid rgba(255,200,120,0.08);
+}
+.comment-input {
+  flex: 1;
+  background: rgba(255,200,120,0.07);
+  border-radius: 40rpx;
+  padding: 16rpx 28rpx;
+  font-size: 28rpx;
+  color: rgba(255,240,210,0.9);
+  min-height: 0;
+}
+.send-btn {
+  background: #FF9D42;
+  border-radius: 32rpx;
+  padding: 14rpx 28rpx;
+}
+.send-btn.sending { opacity: 0.5; }
+.send-text {
+  font-size: 26rpx;
+  font-weight: 700;
+  color: #FFF;
+}
+.comment-list-scroll {
+  flex: 1;
+  padding: 8rpx 0;
+}
+.comment-loading, .comment-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 80rpx 0;
+  gap: 16rpx;
+}
+.comment-loading-text, .comment-empty-text {
+  font-size: 26rpx;
+  color: rgba(255,200,120,0.3);
+}
+.comment-empty-icon { font-size: 60rpx; }
+.comment-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 20rpx;
+  padding: 24rpx 32rpx;
+  border-bottom: 1rpx solid rgba(255,200,120,0.05);
+}
+.comment-avatar {
+  width: 64rpx;
+  height: 64rpx;
+  border-radius: 50%;
+  background: rgba(255,157,66,0.25);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.comment-avatar-text {
+  font-size: 28rpx;
+  color: #FF9D42;
+  font-weight: 700;
+}
+.comment-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 6rpx;
+}
+.comment-author {
+  font-size: 24rpx;
+  font-weight: 600;
+  color: rgba(255,200,120,0.6);
+}
+.comment-text {
+  font-size: 28rpx;
+  color: rgba(255,240,210,0.85);
+  line-height: 1.6;
+}
+.comment-time {
+  font-size: 22rpx;
+  color: rgba(255,200,120,0.3);
+}
+.comment-del {
+  padding: 8rpx;
+}
+.comment-del-icon { font-size: 32rpx; }