任选一张，自动进入画图工作台并预填提示词。
@@ -320,7 +323,7 @@ function useExample(ex) {
- 作品
+ 作品
精选公开作品，点开即用同一条提示词继续创作。
@@ -340,7 +343,7 @@ function useExample(ex) {
- 模型
+ 模型
每个模型的分辨率、时长与参考图能力都写在卡片上，选之前就知道能做什么。
@@ -668,27 +671,82 @@ html.dark .model-card { background: rgb(255 255 255 / 0.05); }
.model-tag.is-image { background: var(--m-mint); color: #065f46; }
.model-tag.is-video { background: var(--m-blue); color: #075985; }
-/* ---------- hero band + mascot aura ---------- */
+/* ---------- hero band + memphis deco ---------- */
.hero-band {
border-radius: 2rem;
}
-.mascot-aura {
+/* Floating crayon chips scattered around the headline — each is a small
+ ink-outlined tile with a hard shadow and its own idle animation. */
+.deco {
position: absolute;
- left: 50%;
- top: 50%;
- width: 260px;
- height: 260px;
- transform: translate(-50%, -50%);
- border-radius: 50%;
- background: radial-gradient(circle, rgb(254 240 138 / 0.9), rgb(236 91 19 / 0.2) 55%, transparent 72%);
- filter: blur(14px);
- animation: auraPulse 5s ease-in-out infinite;
- pointer-events: none;
+ display: grid;
+ place-items: center;
+ border: 3px solid var(--ink);
+ box-shadow: 5px 5px 0 var(--shadow-ink);
+ font-weight: 900;
+ color: #111;
}
-@keyframes auraPulse {
- 0%, 100% { opacity: 0.8; transform: translate(-50%, -50%) scale(1); }
- 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
+.deco-a {
+ left: 7%; top: 22%;
+ width: 3.6rem; height: 3.6rem;
+ border-radius: 0.9rem;
+ background: var(--m-yellow);
+ font-size: 1.5rem;
+ transform: rotate(-8deg);
+ animation: memphis-float 6s ease-in-out infinite;
}
+.deco-b {
+ right: 8%; top: 16%;
+ width: 3rem; height: 3rem;
+ border-radius: 999px;
+ background: var(--m-pink);
+ font-size: 1.2rem;
+ transform: rotate(6deg);
+ animation: memphis-wiggle 3.5s ease-in-out infinite;
+}
+.deco-c {
+ left: 13%; bottom: 16%;
+ width: 3.2rem; height: 2.4rem;
+ border-radius: 0.6rem;
+ background: var(--m-blue);
+ font-size: 0.95rem;
+ letter-spacing: 0.05em;
+ transform: rotate(9deg);
+ animation: memphis-float 7s ease-in-out infinite reverse;
+}
+.deco-d {
+ right: 13%; bottom: 20%;
+ width: 3.4rem; height: 2.6rem;
+ border-radius: 0.7rem;
+ background: var(--m-mint);
+ font-size: 1.15rem;
+ transform: rotate(-7deg);
+ animation: memphis-bounce 4s ease-in-out infinite;
+}
+.deco-star {
+ left: 22%; top: 10%;
+ border: none;
+ box-shadow: none;
+ font-size: 1.7rem;
+ color: var(--m-orange);
+ animation: memphis-wiggle 4s ease-in-out infinite;
+}
+.deco-star-2 {
+ left: auto; right: 22%; top: auto; bottom: 10%;
+ font-size: 1.3rem;
+ color: var(--m-pink);
+ animation: memphis-wiggle 5s ease-in-out infinite reverse;
+}
+@media (prefers-reduced-motion: reduce) { .deco { animation: none; } }
+
+/* KPI tiles — flat crayon fills, dark ink type (readable in both themes). */
+.kpi-card {
+ border: 2.5px solid var(--ink);
+ border-radius: 1rem;
+ box-shadow: 5px 5px 0 var(--shadow-ink);
+ transition: transform 0.18s ease, box-shadow 0.18s ease;
+}
+.kpi-card:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--shadow-ink); }
/* ---------- gallery marquee ---------- */
.marquee-mask {
@@ -724,6 +782,5 @@ html.dark .model-card { background: rgb(255 255 255 / 0.05); }
}
@media (prefers-reduced-motion: reduce) {
.marquee { animation: none; }
- .mascot-aura { animation: none; }
}
diff --git a/frontend/src/views/InviteView.vue b/frontend/src/views/InviteView.vue
index 2ae2c64..4479404 100644
--- a/frontend/src/views/InviteView.vue
+++ b/frontend/src/views/InviteView.vue
@@ -7,7 +7,6 @@ import { auth, refreshMe } from '../auth'
import { api } from '../api'
import { fmtIso } from '../utils/format'
import Icon from '../components/Icon.vue'
-import Mascot from '../components/Mascot.vue'
// Reward per completed invite — comes from the backend (credits.invite_reward),
// falling back to 3 until the response lands.
@@ -86,34 +85,34 @@ function toast(m) {
好友用你的链接注册,并完成首次生图后,你得 {{ INVITE_REWARD }} 积分。
-
-
-
+
+
+
+
-
-
-
{{ inviteCount }}
-
已邀请
+
+
+
{{ inviteCount }}
+
已邀请
-
-
{{ inviteEarned.toLocaleString('en-US') }}
-
累计积分
+
+
{{ inviteEarned.toLocaleString('en-US') }}
+
累计积分
-
-
+
+
@@ -134,7 +133,7 @@ function toast(m) {
加载中…
diff --git a/frontend/src/views/OrdersView.vue b/frontend/src/views/OrdersView.vue
index 7561577..17d3d8a 100644
--- a/frontend/src/views/OrdersView.vue
+++ b/frontend/src/views/OrdersView.vue
@@ -8,7 +8,6 @@ import { api, jsonBody } from '../api'
import { openPayment } from '../payment'
import { refreshMe } from '../auth'
import Icon from '../components/Icon.vue'
-import Mascot from '../components/Mascot.vue'
const router = useRouter()
const items = ref([])
@@ -118,7 +117,7 @@ async function cont(o) {
加载中…
diff --git a/frontend/src/views/UserLogsTableView.vue b/frontend/src/views/UserLogsTableView.vue
index 72d90bc..df7981c 100644
--- a/frontend/src/views/UserLogsTableView.vue
+++ b/frontend/src/views/UserLogsTableView.vue
@@ -11,7 +11,6 @@ import { copyText } from '../utils/clipboard'
import { points } from '../credits'
import Icon from '../components/Icon.vue'
import MediaLightbox from '../components/MediaLightbox.vue'
-import Mascot from '../components/Mascot.vue'
const router = useRouter()
const items = ref([]) // current server page
@@ -184,7 +183,7 @@ const params = (e) => {
加载中…
diff --git a/frontend/src/views/UserLogsView.vue b/frontend/src/views/UserLogsView.vue
index dc42715..b2908f5 100644
--- a/frontend/src/views/UserLogsView.vue
+++ b/frontend/src/views/UserLogsView.vue
@@ -7,7 +7,6 @@ import { copyText } from '../utils/clipboard'
import { zipSync } from 'fflate'
import Icon from '../components/Icon.vue'
import MediaLightbox from '../components/MediaLightbox.vue'
-import Mascot from '../components/Mascot.vue'
const router = useRouter()
@@ -277,7 +276,7 @@ onUnmounted(() => {
-
+
✦
还没有创作记录，画一张试试吧～