微信小程序页面迁移校验之前 P5任务处理之前

docs/h5_ui/css/task-detail.css

@@ -47,3 +47,84 @@ body {
     padding: 16px;
     margin-top: 8px;
 }
+
+/* ===== 备注弹窗 — 展开评价按钮 ===== */
+.note-expand-btn {
+    font-size: 12px;
+    color: #0052d9;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 2px 0;
+    white-space: nowrap;
+}
+.note-expand-btn:active { opacity: 0.6; }
+
+/* ===== 备注弹窗 — 星星打分组件 ===== */
+.note-rating-group {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    margin-bottom: 20px;
+    padding: 14px 16px;
+    background: #f8f9fb;
+    border-radius: 14px;
+    border: 1px solid #eee;
+}
+.note-rating-label {
+    font-size: 13px;
+    font-weight: 600;
+    color: #393939;
+    line-height: 1.4;
+    white-space: nowrap;
+    flex-shrink: 0;
+    min-width: 48px;
+}
+.note-rating-right {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+}
+.note-rating-row {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    user-select: none;
+    -webkit-user-select: none;
+    touch-action: none;
+}
+.note-rating-row .nr-star {
+    position: relative;
+    width: 32px;
+    height: 32px;
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: transform 0.15s ease;
+}
+.note-rating-row .nr-star:active { transform: scale(0.85); }
+.note-rating-row .nr-star svg {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+}
+.note-rating-row .nr-star .nr-empty { color: #d9d9d9; }
+.note-rating-row .nr-star .nr-filled { color: #faad14; clip-path: inset(0 100% 0 0); transition: clip-path 0.12s ease; }
+.note-rating-row .nr-star.active .nr-filled { clip-path: inset(0 0 0 0); }
+/* 1/3/5 星下方提示文字 */
+.note-rating-hints {
+    display: flex;
+    margin-top: 4px;
+    padding: 0;
+}
+.note-rating-hints span {
+    width: 32px;
+    flex-shrink: 0;
+    font-size: 10px;
+    color: #a6a6a6;
+    text-align: center;
+    line-height: 1;
+}
+.note-rating-hints span + span { margin-left: 6px; }