fix(user): rebuild badge modal ajax flow
This commit is contained in:
@@ -1,10 +1,7 @@
|
||||
/* ============================================================
|
||||
* 徽章弹窗(zibll medal 1:1 风格)
|
||||
* ------------------------------------------------------------
|
||||
* 共享于两个入口:
|
||||
* 1. 用户中心「我的徽章」弹窗(.uc-badges-modal,JS 渲染)
|
||||
* 2. 远程弹窗徽章明细/单卡(.medal-modal,PHP 渲染)
|
||||
* 加载条件与 user-badges.js 一致(badge surface 页面)。
|
||||
* 共享于用户中心与公开主页的服务端 HTML 徽章弹窗。
|
||||
* ============================================================ */
|
||||
|
||||
/* ---------- 顶部资料卡入口(zibll user-medal-info parity) ---------- */
|
||||
@@ -109,6 +106,11 @@
|
||||
gap: 8px 4px;
|
||||
}
|
||||
|
||||
.medal-list-box--grant { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.medal-grant-item { min-width: 0; }
|
||||
.medal-grant-item .medal-card { height: 100%; }
|
||||
.medal-grant-item > .but { display: block; width: 100%; }
|
||||
|
||||
.medal-list {
|
||||
display: block;
|
||||
min-width: 0;
|
||||
@@ -304,104 +306,6 @@
|
||||
}
|
||||
.medal-modal__back:hover { color: var(--focus-color); }
|
||||
|
||||
/* ---------- 用户中心「我的徽章」弹窗 ---------- */
|
||||
.uc-badges-dialog {
|
||||
max-width: 560px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.uc-badges-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 16px 46px 12px 18px;
|
||||
border-bottom: 1px solid var(--main-border-color, var(--color-line));
|
||||
}
|
||||
.uc-badges-head__icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
flex: none;
|
||||
font-size: 16px;
|
||||
color: var(--focus-color);
|
||||
background: var(--focus-color-opacity1);
|
||||
border-radius: 10px;
|
||||
}
|
||||
.uc-badges-head__title {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.uc-badges-head__count {
|
||||
margin-left: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: var(--muted-2-color, var(--color-ink-4));
|
||||
}
|
||||
.uc-badges-head__wear { flex: none; }
|
||||
.uc-badges-head__wear-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
max-width: 140px;
|
||||
padding: 3px 10px;
|
||||
font-size: 12px;
|
||||
color: var(--focus-color);
|
||||
background: var(--focus-color-opacity1);
|
||||
border-radius: 100px;
|
||||
}
|
||||
.uc-badges-head__wear-tag .medal-icon {
|
||||
width: auto;
|
||||
height: 18px;
|
||||
object-fit: contain;
|
||||
}
|
||||
.uc-badges-head__wear-name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.uc-badges-body {
|
||||
max-height: 56vh;
|
||||
max-height: 56dvh;
|
||||
overflow-y: auto;
|
||||
padding: 16px 14px 18px;
|
||||
}
|
||||
.uc-badges-loading,
|
||||
.uc-badges-error {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
padding: 32px 0;
|
||||
}
|
||||
|
||||
/* 详情视图 */
|
||||
.uc-badges-view--detail { padding: 8px 16px 18px; }
|
||||
.uc-badges-detail__head { margin-bottom: 6px; }
|
||||
.uc-badges-back {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 4px 10px 4px 6px;
|
||||
border: 0;
|
||||
background: none;
|
||||
font: inherit;
|
||||
font-size: 13px;
|
||||
color: var(--muted-2-color, var(--color-ink-4));
|
||||
cursor: pointer;
|
||||
border-radius: var(--mini-radius, 6px);
|
||||
transition: color 0.15s ease, background-color 0.15s ease;
|
||||
}
|
||||
.uc-badges-back:hover {
|
||||
color: var(--focus-color);
|
||||
background: var(--focus-color-opacity1);
|
||||
}
|
||||
|
||||
/* ---------- 细滚动条(zibll .mini-scrollbar) ---------- */
|
||||
.mini-scrollbar { scrollbar-width: thin; scrollbar-color: var(--muted-border-color, rgba(136, 136, 136, 0.3)) transparent; }
|
||||
.mini-scrollbar::-webkit-scrollbar { width: 5px; height: 5px; }
|
||||
@@ -411,11 +315,10 @@
|
||||
/* ---------- 响应式(zibll: 桌面 5 列 / 移动 4 列) ---------- */
|
||||
@media (max-width: 768px) {
|
||||
.medal-list-box { grid-template-columns: repeat(4, 1fr); }
|
||||
.medal-list-box--grant { grid-template-columns: 1fr; }
|
||||
.medal-card .medal-icon { height: 55px; }
|
||||
.medal-card .medal-icon--fa { width: 44px; height: 55px; font-size: 26px; }
|
||||
.medal-single-card .medal-icon { height: 96px; }
|
||||
.uc-badges-dialog { max-width: 100%; }
|
||||
.uc-badges-body { max-height: 62vh; max-height: 62dvh; }
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
|
||||
Reference in New Issue
Block a user