压缩状态设置弹窗布局

This commit is contained in:
2026-04-24 23:29:48 +08:00
parent 9f8b5e7524
commit b2b91b9238
@@ -213,30 +213,26 @@ $welcomeMessages = [
style="display:none;position:fixed;inset:0;z-index:10030;background:rgba(15,23,42,.45);backdrop-filter:blur(2px);">
<div id="daily-status-editor"
onclick="event.stopPropagation()"
style="position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92vw,620px);max-height:min(78vh,680px);overflow-y:auto;padding:14px;background:linear-gradient(180deg,#eef2ff 0%,#f8fafc 100%);border:1px solid #c7d2fe;border-radius:14px;box-shadow:0 18px 40px rgba(15,23,42,.28);">
<div style="display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:4px 4px 12px;">
<div>
<div style="font-size:22px;font-weight:bold;color:#312e81;line-height:1.2;">设个状态</div>
<div style="font-size:12px;color:#6366f1;margin-top:4px;">朋友当天内可见,次日自动失效</div>
style="position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(94vw,720px);max-height:min(88vh,720px);overflow-y:auto;padding:10px 12px;background:linear-gradient(180deg,#eef2ff 0%,#f8fafc 100%);border:1px solid #c7d2fe;border-radius:14px;box-shadow:0 18px 40px rgba(15,23,42,.28);">
<div style="display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 2px 8px;border-bottom:1px solid #dbeafe;">
<div style="min-width:0;">
<div style="font-size:20px;font-weight:bold;color:#312e81;line-height:1.15;">设个状态</div>
<div style="font-size:11px;color:#6366f1;margin-top:2px;">朋友当天内可见,次日自动失效</div>
</div>
<button type="button" onclick="clearDailyStatus()"
style="flex:none;font-size:11px;padding:5px 10px;background:#fff7ed;color:#c2410c;border:1px solid #fdba74;border-radius:999px;cursor:pointer;">
♻️ 清除状态
</button>
<button type="button" onclick="closeDailyStatusEditor()"
style="width:28px;height:28px;border:none;border-radius:999px;background:#e0e7ff;color:#4338ca;font-size:18px;cursor:pointer;line-height:1;">×</button>
</div>
<div
style="display:flex;flex-wrap:wrap;gap:8px;padding:0 4px 12px;margin-bottom:12px;border-bottom:1px solid #dbeafe;">
<button type="button" onclick="clearDailyStatus()"
style="font-size:12px;padding:7px 12px;background:#fff7ed;color:#c2410c;border:1px solid #fdba74;border-radius:999px;cursor:pointer;">
♻️ 清除状态
</button>
</div>
@foreach ($dailyStatusCatalog as $group)
<div style="padding:0 4px 14px;">
<div style="font-size:15px;font-weight:bold;color:#475569;margin-bottom:10px;">
<div style="padding:8px 2px 2px;">
<div style="font-size:13px;font-weight:bold;color:#475569;margin-bottom:6px;">
{{ $group['group'] }}
</div>
<div style="display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;">
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:6px;">
@foreach ($group['items'] as $item)
<button type="button"
class="daily-status-item"
@@ -245,9 +241,9 @@ $welcomeMessages = [
data-status-icon="{{ $item['icon'] }}"
data-status-active="{{ $currentDailyStatusKey === $item['key'] ? '1' : '0' }}"
onclick="updateDailyStatus('{{ $item['key'] }}')"
style="display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:82px;padding:10px 6px;background:#ffffffcc;border:1px solid #e5e7eb;border-radius:12px;cursor:pointer;transition:all .15s ease;color:#334155;">
<span style="font-size:24px;line-height:1;">{{ $item['icon'] }}</span>
<span style="font-size:12px;line-height:1.25;text-align:center;">{{ $item['label'] }}</span>
style="display:flex;align-items:center;justify-content:center;gap:6px;min-height:52px;padding:7px 8px;background:#ffffffcc;border:1px solid #e5e7eb;border-radius:10px;cursor:pointer;transition:all .15s ease;color:#334155;">
<span style="font-size:20px;line-height:1;flex:none;">{{ $item['icon'] }}</span>
<span style="font-size:12px;line-height:1.2;text-align:left;white-space:normal;word-break:keep-all;">{{ $item['label'] }}</span>
</button>
@endforeach
</div>