v10: 修影院编辑回填布尔化 bug；评分改 10 星制；观影人改弹窗+拼音首字母联想；豆瓣自动补充迁移（movie_details.douban_meta，schema v10）
This commit is contained in:
+102
-14
@@ -954,19 +954,106 @@ textarea.input { min-height: 76px; resize: vertical; }
|
||||
.rv-form-inline { padding: 12px 14px; }
|
||||
.rv-rating-row { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; margin-bottom: 12px; }
|
||||
.rv-rating-label { font-size: 14px; font-weight: 600; color: var(--ink); }
|
||||
.rv-scale { display: flex; gap: 6px; flex-wrap: wrap; }
|
||||
.rv-num { position: relative; }
|
||||
.rv-num input { position: absolute; width: 1px; height: 1px; opacity: 0; }
|
||||
.rv-num span {
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
min-width: 34px; height: 34px; padding: 0 6px;
|
||||
border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
|
||||
color: var(--muted); font-size: 14px; font-weight: 600;
|
||||
cursor: pointer; user-select: none;
|
||||
/* ---- 10 星评分（v10）：空心 ☆ 灰、点亮 ★ 金黄。
|
||||
DOM 按 10..1 倒序渲染 + row-reverse，视觉即 1..10 从左到右；
|
||||
「点亮的星星」由 JS 加 .lit（含悬停预览），.no-js 兜底用 :has() 只亮已选中那一档。 ---- */
|
||||
.rv-scale { display: flex; gap: 2px; }
|
||||
.rv-stars { flex-direction: row-reverse; justify-content: flex-end; }
|
||||
.rv-star { position: relative; cursor: pointer; line-height: 1; }
|
||||
.rv-star input { position: absolute; width: 1px; height: 1px; opacity: 0; }
|
||||
.rv-star .st-glyph { font-size: 28px; line-height: 1; }
|
||||
.rv-star .st-off { color: #c9cdd4; }
|
||||
.rv-star .st-on { display: none; color: #f5b301; }
|
||||
.rv-star.lit .st-on { display: inline; }
|
||||
.rv-star.lit .st-off { display: none; }
|
||||
.rv-star:hover .st-off { color: #aeb4be; }
|
||||
.rv-star:focus-within { outline: 2px solid var(--brand); outline-offset: 1px; border-radius: 4px; }
|
||||
/* 无 JS 兜底：至少选中的那一档及其左边（视觉）会亮 */
|
||||
.rv-stars.no-js .rv-star:has(input:checked) .st-on,
|
||||
.rv-stars.no-js .rv-star:has(input:checked) ~ .rv-star .st-on { display: inline; }
|
||||
.rv-stars.no-js .rv-star:has(input:checked) .st-off,
|
||||
.rv-stars.no-js .rv-star:has(input:checked) ~ .rv-star .st-off { display: none; }
|
||||
/* 评价列表里的静态星级展示 */
|
||||
.stars-disp { display: inline-flex; gap: 1px; font-size: 17px; line-height: 1; vertical-align: -2px; }
|
||||
.stars-disp .d-on { color: #f5b301; }
|
||||
.stars-disp .d-off { color: #d3d7de; }
|
||||
/* ---- 同行观影人选择（v10）：chips + 弹窗 + 拼音首字母联想 ---- */
|
||||
.att-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
|
||||
.att-chips:empty { display: none; }
|
||||
.att-chip {
|
||||
display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 10px;
|
||||
border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
|
||||
font-size: 13px;
|
||||
}
|
||||
.rv-num:hover span { border-color: var(--brand); color: var(--brand); }
|
||||
.rv-num input:checked + span { background: var(--brand); border-color: transparent; color: #fff; }
|
||||
.rv-num:focus-within span { outline: 2px solid var(--brand); outline-offset: 1px; }
|
||||
.att-chip .att-x {
|
||||
border: 0; background: none; color: var(--muted); font-size: 15px;
|
||||
line-height: 1; padding: 0 2px; cursor: pointer;
|
||||
}
|
||||
.att-chip .att-x:hover { color: #c0392b; }
|
||||
.att-modal {
|
||||
position: fixed; inset: 0; z-index: 60; display: flex; align-items: center;
|
||||
justify-content: center; background: rgba(0, 0, 0, .35); padding: 16px;
|
||||
}
|
||||
.att-modal[hidden] { display: none; }
|
||||
.att-modal-box {
|
||||
background: var(--surface); border-radius: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, .2);
|
||||
width: min(420px, 100%); max-height: 70vh; display: flex; flex-direction: column;
|
||||
padding: 14px 16px; box-sizing: border-box;
|
||||
}
|
||||
.att-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
|
||||
.att-close {
|
||||
border: 0; background: none; font-size: 20px; line-height: 1;
|
||||
color: var(--muted); cursor: pointer; padding: 2px 6px;
|
||||
}
|
||||
.att-modal-box .input { margin-bottom: 8px; }
|
||||
.att-list { overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; }
|
||||
.att-item {
|
||||
display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer;
|
||||
border-bottom: 1px solid var(--line-2); font-size: 14px;
|
||||
}
|
||||
.att-item:last-child { border-bottom: 0; }
|
||||
.att-item:hover { background: var(--line-2); }
|
||||
.att-item input { accent-color: var(--brand); }
|
||||
.att-item .att-initials { margin-left: auto; color: var(--muted); font-size: 12px; }
|
||||
.att-empty { padding: 10px 12px; color: var(--muted); font-size: 13px; }
|
||||
/* ---- 豆瓣自动补充（v10）：片名行 + 下拉候选 + 海报预览 ---- */
|
||||
.db-title-row { display: flex; gap: 8px; align-items: center; }
|
||||
.db-title-row .input { flex: 1 1 auto; }
|
||||
.db-title-row .btn { flex: 0 0 auto; white-space: nowrap; }
|
||||
.db-suggest {
|
||||
margin-top: 6px; border: 1px solid var(--line); border-radius: 10px;
|
||||
background: var(--surface); overflow: hidden; max-height: 300px; overflow-y: auto;
|
||||
}
|
||||
.db-suggest[hidden] { display: none; }
|
||||
.db-item {
|
||||
display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px;
|
||||
border: 0; border-bottom: 1px solid var(--line-2); background: none;
|
||||
text-align: left; cursor: pointer; font: inherit; color: var(--ink);
|
||||
}
|
||||
.db-item:last-child { border-bottom: 0; }
|
||||
.db-item:hover { background: var(--line-2); }
|
||||
.db-item img { width: 32px; height: 45px; object-fit: cover; border-radius: 4px; background: var(--line-2); flex: 0 0 auto; }
|
||||
.db-item-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
|
||||
.db-item-tx b { font-size: 14px; }
|
||||
.db-item-tx small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.db-poster-preview { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
|
||||
.db-poster-preview[hidden] { display: none; }
|
||||
.db-poster-preview img {
|
||||
width: 60px; height: 90px; object-fit: cover; border-radius: 6px;
|
||||
border: 1px solid var(--line); background: var(--line-2);
|
||||
}
|
||||
/* 详情页英雄区里的豆瓣信息块 */
|
||||
.db-meta {
|
||||
display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline;
|
||||
margin: 8px 0 2px; padding: 8px 12px; border-radius: 10px;
|
||||
background: var(--line-2); font-size: 13px; color: var(--ink);
|
||||
}
|
||||
.db-meta .db-rating { color: #f5b301; font-weight: 600; }
|
||||
.db-meta .db-rating b { font-size: 16px; }
|
||||
.db-meta .db-line { display: inline-flex; gap: 6px; align-items: baseline; min-width: 0; }
|
||||
.db-meta .db-label { color: var(--muted); flex: 0 0 auto; }
|
||||
.db-meta .db-link { margin-left: auto; color: var(--brand); text-decoration: none; white-space: nowrap; }
|
||||
.db-meta .db-link:hover { text-decoration: underline; }
|
||||
.rv-word { font-size: 13px; color: var(--muted); }
|
||||
.rv-word.is-set { color: var(--brand); font-weight: 600; }
|
||||
.rv-textarea {
|
||||
@@ -1000,8 +1087,9 @@ textarea.input { min-height: 76px; resize: vertical; }
|
||||
color: #fff; border-radius: 6px; padding: 0 6px;
|
||||
}
|
||||
.rv-time { display: block; font-size: 12px; color: var(--muted); }
|
||||
.rv-score { flex: 0 0 auto; font-size: 20px; font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; }
|
||||
.rv-score-max { font-size: 12px; font-weight: 500; color: var(--muted); }
|
||||
.rv-score { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; }
|
||||
.rv-score .stars-disp { font-size: 16px; }
|
||||
.rv-score-max { font-size: 12px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
|
||||
.rv-del { margin-left: auto; }
|
||||
.rv-del-btn {
|
||||
background: none; border: none; cursor: pointer; color: var(--muted);
|
||||
|
||||
Reference in New Issue
Block a user