chiyi/image2api
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(ui): 换用 Memphis/neo-brutalism 视觉风格

Browse Source 
参考 skills.yangsir.net：粗墨描边 + 硬偏移投影 + 平涂蜡笔色（橙/黄/粉/蓝/薄荷），
替换原二次元粉紫渐变体系。设计令牌集中在 style.css 的 --ink/--shadow-ink/
--m-* 变量，共享组件 .card/.btn-*/.field 与新工具类 (.memphis-dots/.ink-card/
.memphis-press) 使全站统一；暗色模式反转为浅色描边版本。

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
This commit is contained in:
chiyi
2026-10-08 16:58:14 +08:00
co-authored by Devin
parent 910651ddba
commit 313d54a5ec
9 changed files with 507 additions and 362 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/AnnouncementModal.vue
+10 -10
View File
@@ -13,22 +13,22 @@ const html = computed(() => marked.parse(announcement.content.trim() || '暂无
<div v-if="announcement.show"
class="fixed inset-0 z-[80] bg-slate-950/70 backdrop-blur-sm flex items-center justify-center p-4"
@click.self="dismissAnnouncement">
<div class="w-full max-w-lg rounded-2xl bg-white text-slate-800 shadow-2xl overflow-hidden flex flex-col max-h-[80vh]">
<div class="px-6 py-4 border-b border-slate-100 flex items-center justify-between gap-3 shrink-0">
<div class="w-full max-w-lg rounded-xl bg-white text-slate-800 border-[3px] border-[#111] shadow-[8px_8px_0_#111] overflow-hidden flex flex-col max-h-[80vh]">
<div class="px-6 py-4 border-b-[2.5px] border-b-[#111] flex items-center justify-between gap-3 shrink-0">
<div class="flex items-center gap-2">
<span class="w-7 h-7 rounded-lg bg-violet-500/15 text-violet-600 grid place-items-center">
<span class="w-7 h-7 rounded-lg bg-[#fef08a] text-[#111] border-2 border-[#111] grid place-items-center">
<Icon name="spark" class="w-4 h-4" />
</span>
<h2 class="text-base font-semibold">公告</h2>
<h2 class="text-base font-extrabold">公告</h2>
</div>
<button @click="dismissAnnouncement" class="text-slate-400 hover:text-slate-700 transition-colors">
<Icon name="close" class="w-5 h-5" />
</button>
</div>
<div class="ann-body px-6 py-5 overflow-y-auto" v-html="html"></div>
<div class="px-6 py-4 border-t border-slate-100 flex justify-end shrink-0">
<div class="px-6 py-4 border-t-[2.5px] border-t-[#111] flex justify-end shrink-0">
<button @click="dismissAnnouncement"
class="rounded-lg bg-slate-900 text-white hover:bg-slate-700 px-5 py-2 text-sm font-medium transition-colors">
class="rounded-lg bg-[#ec5b13] text-white border-[2.5px] border-[#111] shadow-[3px_3px_0_#111] hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[4px_4px_0_#111] active:translate-y-0.5 active:shadow-none px-5 py-2 text-sm font-extrabold transition-all">
我知道了
</button>
</div>
@@ -51,12 +51,12 @@ const html = computed(() => marked.parse(announcement.content.trim() || '暂无
.ann-body :deep(ul) { list-style: disc; }
.ann-body :deep(ol) { list-style: decimal; }
.ann-body :deep(li) { margin: 0.2em 0; }
.ann-body :deep(a) { color: rgb(124 58 237); text-decoration: underline; }
.ann-body :deep(a) { color: var(--m-orange); text-decoration: underline; }
.ann-body :deep(strong) { font-weight: 700; color: rgb(15 23 42); }
.ann-body :deep(code) { background: rgb(241 245 249); padding: 0.1em 0.35em; border-radius: 0.3rem; font-size: 0.85em; }
.ann-body :deep(pre) { background: rgb(241 245 249); padding: 0.8em; border-radius: 0.5rem; overflow-x: auto; margin: 0.6em 0; }
.ann-body :deep(code) { background: rgb(254 240 138 / 0.5); padding: 0.1em 0.35em; border-radius: 0.3rem; font-size: 0.85em; }
.ann-body :deep(pre) { background: #111; color: #f5f5f5; padding: 0.8em; border-radius: 0.5rem; overflow-x: auto; margin: 0.6em 0; }
.ann-body :deep(pre code) { background: none; padding: 0; }
.ann-body :deep(blockquote) { border-left: 3px solid rgb(196 181 253); padding-left: 0.9em; color: rgb(100 116 139); margin: 0.6em 0; }
.ann-body :deep(blockquote) { border-left: 3px solid var(--m-orange); padding-left: 0.9em; color: rgb(100 116 139); margin: 0.6em 0; }
.ann-body :deep(hr) { border: none; border-top: 1px solid rgb(226 232 240); margin: 1em 0; }
.ann-body :deep(img) { max-width: 100%; border-radius: 0.5rem; margin: 0.5em 0; }
</style>