youzitree/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 更新主题配色为暖红色系

Browse Source
This commit is contained in:
youzi
2026-08-06 18:49:58 +08:00
parent 2c69b3f1c3
commit bd37926295
20 changed files with 155 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/base.less
+1 -1
View File
@@ -53,7 +53,7 @@ samp,
/* 添加渐变背景色 */
#nprogress .bar {
background: linear-gradient(to right, #ec66ab, #f78c6c, #7ed6df);
background: linear-gradient(to right, #D71A44, #DB5F51, #DED9B2);
}
/* 添加平滑过渡效果 */
src/assets/index.less
+5 -5
View File
@@ -1,9 +1,9 @@
@primary: #ec66ab;
@primary: #D71A44;
@orange: #ffa500;
@blue: #409eff;
@dp: #f2e8fc;
@ps:0 2px 12px 0 #5C169F10;
@dp: #FDE6E6;
@ps:0 2px 12px 0 #8A1A3310;
//#BE8AEF #B172EC #A45BE9 #9744E5 #8A2BE2 #7B1DD3 #6C19B9 #5C169F
//#BE8AEF #B172EC #A45BE9 #9744E5 #8A2BE2 #7B1DD3 #6C19B9 #8A1A33
@jb: linear-gradient(90deg, #be8aef, #409eff, #8a2be2);
@jb: linear-gradient(90deg, #D71A44, #DB5F51, #DED9B2);
src/components/Login.vue
+5 -5
View File
@@ -1,5 +1,5 @@
<template>
<div class="w-[500px] rounded-[28px] border border-white/80 bg-[radial-gradient(circle_at_top_left,rgba(255,199,132,0.16),transparent_34%),radial-gradient(circle_at_top_right,rgba(136,203,255,0.14),transparent_28%),linear-gradient(180deg,rgba(255,255,255,0.84),rgba(242,247,251,0.78))] p-8 shadow-[0_28px_60px_rgba(75,96,120,0.18)] backdrop-blur-[20px]">
<div class="w-[500px] rounded-[28px] border border-white/80 bg-[radial-gradient(circle_at_top_left,rgba(219,95,81,0.07),transparent_34%),radial-gradient(circle_at_top_right,rgba(249,154,159,0.06),transparent_28%),linear-gradient(180deg,rgba(255,255,255,0.84),rgba(255,239,234,0.78))] p-8 shadow-[0_28px_60px_rgba(128,118,126,0.18)] backdrop-blur-[20px]">
<n-tabs class="bg-transparent" v-model:value="tid" justify-content="space-evenly" animated>
<n-tab-pane name="tab1" tab="登录">
<n-form ref="formLogin" layout="vertical" :model="loginData" :rules="rules">
@@ -24,7 +24,7 @@
重置
</n-button>
<n-button
class="flex-1 !h-9 !rounded-full !border !border-[#f4a9b8]/60 !bg-[linear-gradient(135deg,#ec66ab,#f48a6f)] !text-[14px] !font-semibold !tracking-[0.03em]"
class="flex-1 !h-9 !rounded-full !border !border-[#e8a0a3]/60 !bg-[linear-gradient(135deg,#D71A44,#DB5F51)] !text-[14px] !font-semibold !tracking-[0.03em]"
type="primary"
@click="login"
>
@@ -62,7 +62,7 @@
重置
</n-button>
<n-button
class="flex-1 !h-9 !rounded-full !border !border-[#f4a9b8]/60 !bg-[linear-gradient(135deg,#ec66ab,#f48a6f)] !text-[14px] !font-semibold !tracking-[0.03em]"
class="flex-1 !h-9 !rounded-full !border !border-[#e8a0a3]/60 !bg-[linear-gradient(135deg,#D71A44,#DB5F51)] !text-[14px] !font-semibold !tracking-[0.03em]"
type="primary"
@click="register"
>
@@ -238,11 +238,11 @@ function validatePassword(_rule: unknown, value: string) {
:deep(.n-tabs-tab.n-tabs-tab--active) {
color: #ec66ab !important;
color: #D71A44 !important;
}
:deep(.n-tabs-bar) {
background: linear-gradient(135deg, #ec66ab, #f48a6f) !important;
background: linear-gradient(135deg, #D71A44, #DB5F51) !important;
}
src/components/aplayer.vue
+2 -2
View File
@@ -29,8 +29,8 @@ const data: any = reactive({
onMounted(async () => {
try {
const server = 'tencent'
const gdid = '7567066822'
const res = await fetch(`https://met.hxyouzi.com/api?server=${server}&type=playlist&id=${gdid}`)
const gdid = '7681108669'
const res = await fetch(`https://meting.mikus.ink/api?server=${server}&type=playlist&id=${gdid}`)
const mlist: any = await res.json()
data.audio = []
mlist.forEach((i: any) => {
src/components/homeSide.vue
+12 -12
View File
@@ -15,7 +15,7 @@
<div class="flex items-center justify-between gap-3">
<div class="min-w-0">
<div
class="text-3xl font-[yj] font-[500] leading-[1.15] tracking-[0.04em] text-[#ec66ab] drop-shadow-[0_8px_20px_rgba(236,102,171,0.14)]"
class="text-3xl font-[yj] font-[500] leading-[1.15] tracking-[0.04em] text-[#D71A44] drop-shadow-[0_8px_20px_rgba(215,26,68,0.14)]"
>
{{ t }}
</div>
@@ -40,10 +40,10 @@
<span>{{ yearProgress }}%</span>
</div>
<div
class="mt-1 h-1 overflow-hidden rounded-full bg-white/70 shadow-[inset_0_1px_2px_rgba(97,121,146,0.14)]"
class="mt-1 h-1 overflow-hidden rounded-full bg-white/70 shadow-[inset_0_1px_2px_rgba(128,118,126,0.14)]"
>
<div
class="h-full rounded-full bg-[linear-gradient(90deg,#f2b077,#ec66ab)] shadow-[0_0_10px_rgba(236,102,171,0.4)] transition-[width] duration-700"
class="h-full rounded-full bg-[linear-gradient(90deg,#DB5F51,#D71A44)] shadow-[0_0_10px_rgba(215,26,68,0.4)] transition-[width] duration-700"
:style="{ width: yearProgress + '%' }"
></div>
</div>
@@ -65,7 +65,7 @@
<template #default>
<div class="py-1" v-for="i in bdNews" :key="i.id">
<a
class="group flex items-center justify-between gap-2 rounded-xl border border-transparent px-2 py-0.5 text-[#526ecc] no-underline transition-[background-color,border-color,box-shadow,transform] duration-200 hover:-translate-y-px hover:border-white/80 hover:bg-white/65 hover:shadow-[0_2px_8px_rgba(97,121,146,0.08),inset_0_1px_0_rgba(255,255,255,0.6)]"
class="group flex items-center justify-between gap-2 rounded-xl border border-transparent px-2 py-0.5 text-[#D71A44] no-underline transition-[background-color,border-color,box-shadow,transform] duration-200 hover:-translate-y-px hover:border-white/80 hover:bg-white/65 hover:shadow-[0_2px_8px_rgba(128,118,126,0.08),inset_0_1px_0_rgba(255,255,255,0.6)]"
:href="i.url"
target="_blank"
>
@@ -73,7 +73,7 @@
<span
class="mr-2 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-md text-[11px] font-bold"
:class="i.index <= 3
? 'bg-[linear-gradient(135deg,#ec66ab,#f48a6f)] text-white shadow-[0_3px_8px_rgba(236,102,171,0.28)]'
? 'bg-[linear-gradient(135deg,#D71A44,#DB5F51)] text-white shadow-[0_3px_8px_rgba(215,26,68,0.28)]'
: 'bg-slate-700/6 text-slate-400'"
>{{ i.index }}</span>
<span class="truncate transition-colors duration-200 group-hover:text-primary">{{ i.title }}</span>
@@ -83,16 +83,16 @@
</a>
</div>
<div class="mt-1.5 flex items-center justify-between">
<div class="h-px w-2/5 bg-gradient-to-r from-transparent via-[#ec66ab] to-[#ec66ab]/40"></div>
<div class="h-px w-2/5 bg-gradient-to-r from-transparent via-[#D71A44] to-[#D71A44]/40"></div>
<a
class="flex items-center font-medium text-[#ec66ab] no-underline transition-transform duration-200 hover:scale-105"
class="flex items-center font-medium text-[#D71A44] no-underline transition-transform duration-200 hover:scale-105"
href="https://www.baidu.com/s?ie=utf-8&wd=百度新闻"
target="_blank"
>
更多
<icon-right class="ml-1 inline-block w-4 text-primary"></icon-right>
</a>
<div class="h-px w-2/5 bg-gradient-to-l from-transparent via-[#ec66ab] to-[#ec66ab]/40"></div>
<div class="h-px w-2/5 bg-gradient-to-l from-transparent via-[#D71A44] to-[#D71A44]/40"></div>
</div>
</template>
</n-card>
@@ -106,12 +106,12 @@
<div class="flex items-center font-semibold text-slate-700">
<icon-date class="mr-2 h-[20px] w-5"></icon-date>
农历节气
<div class="ml-8 font-semibold text-[#ec66ab]">{{ jq.yearTips }}年 {{ jq.lunarCalendar }}</div>
<div class="ml-8 font-semibold text-[#D71A44]">{{ jq.yearTips }}年 {{ jq.lunarCalendar }}</div>
</div>
</template>
<template #default>
<div class="mx-1 flex items-center gap-1.5 text-sm text-slate-600">
<icon-star class="w-4 shrink-0 text-[#7fb69a]"></icon-star>
<icon-star class="w-4 shrink-0 text-[#DB5F51]"></icon-star>
<span class="truncate">宜：{{ jq.suit }}</span>
</div>
<div class="mx-1 mt-1.5 flex items-center gap-1.5 text-sm text-slate-600">
@@ -120,7 +120,7 @@
</div>
<div class="flex w-full justify-center">
<img
class="mt-2 w-[82%] rounded-2xl border border-white/80 bg-white/70 shadow-[0_1px_3px_rgba(97,121,146,0.05),0_10px_22px_rgba(97,121,146,0.1),0_28px_54px_rgba(178,128,88,0.07),inset_0_1px_0_rgba(255,255,255,0.7)]"
class="mt-2 w-[82%] rounded-2xl border border-white/80 bg-white/70 shadow-[0_1px_3px_rgba(128,118,126,0.05),0_10px_22px_rgba(128,118,126,0.1),0_28px_54px_rgba(215,26,68,0.07),inset_0_1px_0_rgba(255,255,255,0.7)]"
:src="jqImg"
alt="节气图"
>
@@ -128,7 +128,7 @@
<div class="mt-1.5 text-center font-medium text-slate-600">{{ jq.solarTerms }}</div>
<div
v-if="holiName && holiDays !== null"
class="mx-auto mt-2 flex w-fit items-center gap-1.5 rounded-full border border-white/70 bg-[linear-gradient(135deg,rgba(255,240,246,0.85),rgba(255,233,223,0.8))] px-3.5 py-0.5 text-[13px] font-medium text-[#c2558e] shadow-[0_2px_8px_rgba(236,102,171,0.12),inset_0_1px_0_rgba(255,255,255,0.7)]"
class="mx-auto mt-2 flex w-fit items-center gap-1.5 rounded-full border border-white/70 bg-[linear-gradient(135deg,rgba(255,240,246,0.85),rgba(255,233,223,0.8))] px-3.5 py-0.5 text-[13px] font-medium text-[#D71A44] shadow-[0_2px_8px_rgba(215,26,68,0.12),inset_0_1px_0_rgba(255,255,255,0.7)]"
>
<icon-date class="w-3.5"></icon-date>
距 <b class="font-bold">{{ holiName }}</b> 还有
src/components/mask.vue
+1 -1
View File
@@ -6,7 +6,7 @@
<slot></slot>
<div
@click.prevent="handdleClose"
class="absolute right-4 top-4 z-[1] flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-white/92 text-[#ec66ab] shadow-[0_8px_18px_rgba(89,108,130,0.14)] backdrop-blur-[8px]"
class="absolute right-4 top-4 z-[1] flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-white/92 text-[#D71A44] shadow-[0_8px_18px_rgba(128,118,126,0.14)] backdrop-blur-[8px]"
>
X
</div>
src/components/menuH.vue
+17 -17
View File
@@ -1,13 +1,13 @@
<template>
<div
ref="nav"
class="relative hidden items-center justify-between bg-[radial-gradient(circle_at_12%_18%,rgba(215,177,123,0.18),transparent_24%),radial-gradient(circle_at_86%_12%,rgba(120,162,182,0.14),transparent_24%),linear-gradient(180deg,rgba(239,231,218,0.82)_0%,rgba(232,240,239,0.68)_46%,rgba(243,241,232,0.28)_100%)] px-4 py-1.5 shadow-[0_6px_16px_rgba(110,124,112,0.05)] backdrop-blur-[14px] after:pointer-events-none after:absolute after:inset-x-0 after:bottom-[-28px] after:h-[34px] after:bg-[linear-gradient(180deg,rgba(240,236,226,0.58),rgba(232,240,239,0.22),transparent)] after:content-[''] lg:flex"
class="relative hidden items-center justify-between bg-[radial-gradient(circle_at_12%_18%,rgba(219,95,81,0.08),transparent_24%),radial-gradient(circle_at_86%_12%,rgba(249,154,159,0.06),transparent_24%),linear-gradient(180deg,rgba(242,232,214,0.82)_0%,rgba(244,222,218,0.68)_46%,rgba(251,231,232,0.28)_100%)] px-4 py-1.5 shadow-[0_6px_16px_rgba(128,118,126,0.05)] backdrop-blur-[14px] after:pointer-events-none after:absolute after:inset-x-0 after:bottom-[-28px] after:h-[34px] after:bg-[linear-gradient(180deg,rgba(240,236,226,0.58),rgba(244,222,218,0.22),transparent)] after:content-[''] lg:flex"
>
<div
class="menu-pill-glass flex ml-4 cursor-pointer items-center rounded-full px-4 py-1 transition-colors duration-200"
@click="goHome"
>
<img :src="logo" alt="柚子的网站" class="h-9 align-middle drop-shadow-[0_6px_14px_rgba(236,102,171,0.15)]" />
<img :src="logo" alt="柚子的网站" class="h-9 align-middle drop-shadow-[0_6px_14px_rgba(215,26,68,0.15)]" />
</div>
<div class="menu-pill-glass flex h-[42px] items-center rounded-full px-1 py-0.5">
@@ -15,18 +15,18 @@
</div>
<div
class="menu-pill-glass flex cursor-pointer items-center rounded-full px-4 py-1.5 text-[#ec66ab] transition-colors duration-200"
class="menu-pill-glass flex cursor-pointer items-center rounded-full px-4 py-1.5 text-[#D71A44] transition-colors duration-200"
@click="gotoHf"
>
<span class="flex items-center truncate text-[15px] font-medium text-slate-600">
<n-icon class="mr-1 text-[#ec66ab]">
<n-icon class="mr-1 text-[#D71A44]">
<icon-loc class="w-[26px] h-[26px]"></icon-loc>
</n-icon>
{{ locationInfo }}
</span>
<span class="mx-3 text-slate-300">|</span>
<span class="mr-2 truncate text-[15px] text-slate-500">{{ wea }}</span>
<i :class="'qiIcon qi-' + weaIcon + '-fill'" class="text-[#ec66ab]"></i>
<i :class="'qiIcon qi-' + weaIcon + '-fill'" class="text-[#D71A44]"></i>
<span class="ml-4 text-[15px] font-semibold text-slate-700">{{ temp }}&deg;C</span>
</div>
@@ -53,7 +53,7 @@
<n-button
size="small"
type="primary"
class="!h-8 !rounded-full !border-none !bg-[linear-gradient(135deg,#ec66ab,#f48a6f)] px-5 !font-semibold shadow-[0_12px_24px_rgba(236,102,171,0.24)]"
class="!h-8 !rounded-full !border-none !bg-[linear-gradient(135deg,#D71A44,#DB5F51)] px-5 !font-semibold shadow-[0_12px_24px_rgba(215,26,68,0.24)]"
@click="toLogin"
>
登录
@@ -66,9 +66,9 @@
</masked>
</div>
<div class="relative flex items-center justify-between bg-[radial-gradient(circle_at_12%_18%,rgba(215,177,123,0.18),transparent_24%),radial-gradient(circle_at_86%_12%,rgba(120,162,182,0.14),transparent_24%),linear-gradient(180deg,rgba(239,231,218,0.84)_0%,rgba(232,240,239,0.68)_46%,rgba(243,241,232,0.32)_100%)] px-3 py-2 shadow-[0_6px_16px_rgba(110,124,112,0.05)] backdrop-blur-[14px] after:pointer-events-none after:absolute after:inset-x-0 after:bottom-[-24px] after:h-[30px] after:bg-[linear-gradient(180deg,rgba(240,236,226,0.58),rgba(232,240,239,0.22),transparent)] after:content-[''] lg:hidden">
<div class="relative flex items-center justify-between bg-[radial-gradient(circle_at_12%_18%,rgba(219,95,81,0.08),transparent_24%),radial-gradient(circle_at_86%_12%,rgba(249,154,159,0.06),transparent_24%),linear-gradient(180deg,rgba(242,232,214,0.84)_0%,rgba(244,222,218,0.68)_46%,rgba(251,231,232,0.32)_100%)] px-3 py-2 shadow-[0_6px_16px_rgba(128,118,126,0.05)] backdrop-blur-[14px] after:pointer-events-none after:absolute after:inset-x-0 after:bottom-[-24px] after:h-[30px] after:bg-[linear-gradient(180deg,rgba(240,236,226,0.58),rgba(244,222,218,0.22),transparent)] after:content-[''] lg:hidden">
<div class="menu-pill-glass flex items-center rounded-full px-3 py-1">
<img :src="logo" alt="柚子的网站" class="h-9 align-middle drop-shadow-[0_6px_14px_rgba(236,102,171,0.15)]" />
<img :src="logo" alt="柚子的网站" class="h-9 align-middle drop-shadow-[0_6px_14px_rgba(215,26,68,0.15)]" />
</div>
<div class="flex items-center mr-2 cursor-pointer">
@@ -81,7 +81,7 @@
<n-button
type="primary"
size="small"
class="!h-8 !rounded-full !border-none !bg-[linear-gradient(135deg,#ec66ab,#f48a6f)] px-5 !font-semibold shadow-[0_12px_24px_rgba(236,102,171,0.24)]"
class="!h-8 !rounded-full !border-none !bg-[linear-gradient(135deg,#D71A44,#DB5F51)] px-5 !font-semibold shadow-[0_12px_24px_rgba(215,26,68,0.24)]"
@click="toLogin"
>
登录
@@ -91,7 +91,7 @@
</div>
<masked v-if="usrLog.isLogin" :visible="editModal" :setVisible="handdleItemCancel">
<div class="w-[500px] rounded-[28px] border border-white/80 bg-[radial-gradient(circle_at_top_left,rgba(255,199,132,0.16),transparent_34%),radial-gradient(circle_at_top_right,rgba(136,203,255,0.14),transparent_28%),linear-gradient(180deg,rgba(255,255,255,0.84),rgba(242,247,251,0.78))] p-8 shadow-[0_28px_60px_rgba(75,96,120,0.18)] backdrop-blur-[20px]">
<div class="w-[500px] rounded-[28px] border border-white/80 bg-[radial-gradient(circle_at_top_left,rgba(219,95,81,0.07),transparent_34%),radial-gradient(circle_at_top_right,rgba(249,154,159,0.06),transparent_28%),linear-gradient(180deg,rgba(255,255,255,0.84),rgba(255,239,234,0.78))] p-8 shadow-[0_28px_60px_rgba(128,118,126,0.18)] backdrop-blur-[20px]">
<div class="mb-8 text-center text-xl font-bold tracking-[0.02em] text-slate-800">修改头像</div>
<n-upload
@@ -104,13 +104,13 @@
accept="image/*"
>
<div class="flex flex-col justify-center items-center">
<n-avatar :size="80" :src="userinfo?.ava_url" round class="cursor-pointer ring-4 ring-white/80 shadow-[0_16px_30px_rgba(102,129,156,0.16)]" alt="用户头像" />
<n-avatar :size="80" :src="userinfo?.ava_url" round class="cursor-pointer ring-4 ring-white/80 shadow-[0_16px_30px_rgba(158,110,104,0.16)]" alt="用户头像" />
<em class="mt-4 cursor-pointer text-sm text-slate-500">点击头像上传不超过 3M 的图片</em>
</div>
</n-upload>
<div class="mt-8 flex justify-between">
<n-button class="w-[98%] !h-11 !rounded-full !border-none !bg-white/90 !font-bold !tracking-[0.04em] !text-slate-600 shadow-[0_12px_24px_rgba(89,108,130,0.12)]" secondary @click="handdleItemCancel">取消</n-button>
<n-button class="w-[98%] !h-11 !rounded-full !border-none !bg-white/90 !font-bold !tracking-[0.04em] !text-slate-600 shadow-[0_12px_24px_rgba(128,118,126,0.12)]" secondary @click="handdleItemCancel">取消</n-button>
</div>
</div>
</masked>
@@ -204,8 +204,8 @@ const dropdownThemeOverrides = {
optionColorHover: 'transparent',
optionColorActive: 'transparent',
optionTextColor: '#526377',
optionTextColorHover: '#ec66ab',
optionTextColorActive: '#ec66ab',
optionTextColorHover: '#D71A44',
optionTextColorActive: '#D71A44',
peerOverrides: {
Popover: {
color: 'transparent',
@@ -230,7 +230,7 @@ function renderDropdownLabel(option: DropdownOption) {
return h(
'div',
{
class: 'flex w-full items-center justify-center rounded-[18px] border border-white/0 bg-[linear-gradient(180deg,rgba(255,255,255,0.18),rgba(255,255,255,0.06))] px-5 py-3.5 text-[14px] font-semibold text-slate-700 transition-all duration-300 group-hover:border-white/85 group-hover:bg-[linear-gradient(180deg,rgba(255,255,255,0.82),rgba(255,248,244,0.62))] group-hover:text-[#ec66ab] group-hover:shadow-[0_14px_28px_rgba(102,129,156,0.16)]'
class: 'flex w-full items-center justify-center rounded-[18px] border border-white/0 bg-[linear-gradient(180deg,rgba(255,255,255,0.18),rgba(255,255,255,0.06))] px-5 py-3.5 text-[14px] font-semibold text-slate-700 transition-all duration-300 group-hover:border-white/85 group-hover:bg-[linear-gradient(180deg,rgba(255,255,255,0.82),rgba(255,248,244,0.62))] group-hover:text-[#D71A44] group-hover:shadow-[0_14px_28px_rgba(158,110,104,0.16)]'
},
labelText
)
@@ -540,11 +540,11 @@ onUnmounted(() => {
:deep(.n-menu--horizontal .n-menu-item-content:hover) {
background: rgba(255, 255, 255, 0.72) !important;
color: #ec66ab !important;
color: #D71A44 !important;
}
:deep(.n-menu--horizontal .n-menu-item-content.n-menu-item-content--selected) {
background: linear-gradient(135deg, rgba(236, 102, 171, 0.14), rgba(244, 138, 111, 0.12)) !important;
color: #ec66ab !important;
color: #D71A44 !important;
}
</style>
src/icon/author.svg
+1 -1
View File
@@ -1 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1767228361426" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9819" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M789.504 890.368H319.488c-18.432 0-33.28 14.848-33.28 33.28s14.848 33.28 33.28 33.28h470.016c18.432 0 33.28-14.848 33.28-33.28s-14.848-33.28-33.28-33.28z" fill="#ec66ab" p-id="9820"></path><path d="M731.648 392.192c68.096-118.272 79.36-283.136 79.872-289.792 1.024-12.288-5.632-24.576-16.384-30.72-10.752-6.144-24.064-6.144-34.816 0.512-24.576 15.872-241.152 156.16-287.744 235.52-68.096 114.688-235.52 420.864-237.056 423.936-1.536 2.56-2.048 5.12-3.072 7.68l-91.648 158.72c-9.216 15.872-3.584 36.352 12.288 45.568 5.12 3.072 10.752 4.608 16.384 4.608 11.264 0 22.528-6.144 28.672-16.896L291.84 769.536c58.368-39.936 371.2-258.048 439.808-377.344z m-201.728-51.2c23.04-39.424 122.368-115.2 206.336-173.056-9.216 54.272-27.648 130.56-61.952 190.976-39.936 68.608-190.976 189.952-310.272 278.016 54.272-98.816 126.464-229.376 165.888-295.936z" fill="#ec66ab" p-id="9821"></path></svg>
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1767228361426" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9819" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M789.504 890.368H319.488c-18.432 0-33.28 14.848-33.28 33.28s14.848 33.28 33.28 33.28h470.016c18.432 0 33.28-14.848 33.28-33.28s-14.848-33.28-33.28-33.28z" fill="#D71A44" p-id="9820"></path><path d="M731.648 392.192c68.096-118.272 79.36-283.136 79.872-289.792 1.024-12.288-5.632-24.576-16.384-30.72-10.752-6.144-24.064-6.144-34.816 0.512-24.576 15.872-241.152 156.16-287.744 235.52-68.096 114.688-235.52 420.864-237.056 423.936-1.536 2.56-2.048 5.12-3.072 7.68l-91.648 158.72c-9.216 15.872-3.584 36.352 12.288 45.568 5.12 3.072 10.752 4.608 16.384 4.608 11.264 0 22.528-6.144 28.672-16.896L291.84 769.536c58.368-39.936 371.2-258.048 439.808-377.344z m-201.728-51.2c23.04-39.424 122.368-115.2 206.336-173.056-9.216 54.272-27.648 130.56-61.952 190.976-39.936 68.608-190.976 189.952-310.272 278.016 54.272-98.816 126.464-229.376 165.888-295.936z" fill="#D71A44" p-id="9821"></path></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

src/icon/backtop.svg
+1 -1
View File
@@ -1 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1767098232410" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11412" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M552.96 875.229867c0 37.034667-40.96 94.685867-40.96 94.685866s-40.96-61.44-40.96-94.685866a41.915733 41.915733 0 1 1 81.92-18.3808 43.349333 43.349333 0 0 1 0 18.3808m14.609067-441.326934a82.3808 82.3808 0 1 0-116.258134-5.256533l0.1024 0.1024a82.5344 82.5344 0 0 0 116.155734 5.12M799.914667 743.406933v15.36l-177.493334-35.9424c-11.434667 38.3488-57.326933 67.822933-111.018666 67.822934s-99.6352-29.474133-111.121067-69.051734L224.085333 756.053333v-15.36c0-87.04 24.2688-149.589333 79.172267-202.0864C284.125867 290.56 395.144533 133.12 504.951467 69.188267l6.3488-3.7376 6.3488 3.7376C627.5584 133.12 737.1776 290.56 719.325867 538.7776c56.32 52.394667 80.4864 115.080533 80.5888 204.629333" p-id="11413" fill="#ec66ab"></path></svg>
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1767098232410" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11412" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M552.96 875.229867c0 37.034667-40.96 94.685867-40.96 94.685866s-40.96-61.44-40.96-94.685866a41.915733 41.915733 0 1 1 81.92-18.3808 43.349333 43.349333 0 0 1 0 18.3808m14.609067-441.326934a82.3808 82.3808 0 1 0-116.258134-5.256533l0.1024 0.1024a82.5344 82.5344 0 0 0 116.155734 5.12M799.914667 743.406933v15.36l-177.493334-35.9424c-11.434667 38.3488-57.326933 67.822933-111.018666 67.822934s-99.6352-29.474133-111.121067-69.051734L224.085333 756.053333v-15.36c0-87.04 24.2688-149.589333 79.172267-202.0864C284.125867 290.56 395.144533 133.12 504.951467 69.188267l6.3488-3.7376 6.3488 3.7376C627.5584 133.12 737.1776 290.56 719.325867 538.7776c56.32 52.394667 80.4864 115.080533 80.5888 204.629333" p-id="11413" fill="#D71A44"></path></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

src/icon/date.svg
+1 -1
View File
@@ -1 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1767228343993" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8778" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M810.666667 170.666667h-134.4V149.333333c0-12.8-8.533333-21.333333-21.333334-21.333333h-42.666666c-12.8 0-21.333333 8.533333-21.333334 21.333333v21.333334h-170.666666V149.333333c0-12.8-8.533333-21.333333-21.333334-21.333333h-42.666666c-12.8 0-21.333333 8.533333-21.333334 21.333333v21.333334H213.333333c-46.933333 0-85.333333 38.4-85.333333 85.333333v554.666667c0 46.933333 38.4 85.333333 85.333333 85.333333h597.333334c46.933333 0 85.333333-38.4 85.333333-85.333333V256c0-46.933333-38.4-85.333333-85.333333-85.333333z m0 597.333333c0 23.466667-19.2 42.666667-42.666667 42.666667H256c-23.466667 0-42.666667-19.2-42.666667-42.666667V469.333333c0-23.466667 19.2-42.666667 42.666667-42.666666h512c23.466667 0 42.666667 19.2 42.666667 42.666666v298.666667z m0-448c0 12.8-8.533333 21.333333-21.333334 21.333333H234.666667c-12.8 0-21.333333-8.533333-21.333334-21.333333v-42.666667c0-12.8 8.533333-21.333333 21.333334-21.333333h100.266666v21.333333c0 12.8 8.533333 21.333333 21.333334 21.333334h42.666666c12.8 0 21.333333-8.533333 21.333334-21.333334v-21.333333h170.666666v21.333333c0 12.8 8.533333 21.333333 21.333334 21.333334h42.666666c12.8 0 21.333333-8.533333 21.333334-21.333334v-21.333333H789.333333c12.8 0 21.333333 8.533333 21.333334 21.333333v42.666667z" fill="#ec66ab" p-id="8779"></path><path d="M298.666667 503.466667h42.666666c12.8 0 21.333333 10.666667 21.333334 21.333333v42.666667c0 12.8-10.666667 21.333333-21.333334 21.333333h-42.666666c-12.8 0-21.333333-10.666667-21.333334-21.333333v-42.666667c0-10.666667 10.666667-21.333333 21.333334-21.333333z" fill="#ec66ab" p-id="8780"></path><path d="M298.666667 648.533333h42.666666c12.8 0 21.333333 10.666667 21.333334 21.333334v42.666666c0 12.8-10.666667 21.333333-21.333334 21.333334h-42.666666c-12.8 0-21.333333-10.666667-21.333334-21.333334v-42.666666c0-10.666667 10.666667-21.333333 21.333334-21.333334zM426.666667 503.466667h42.666666c12.8 0 21.333333 10.666667 21.333334 21.333333v42.666667c0 12.8-10.666667 21.333333-21.333334 21.333333h-42.666666c-12.8 0-21.333333-10.666667-21.333334-21.333333v-42.666667c0-10.666667 10.666667-21.333333 21.333334-21.333333z" fill="#ec66ab" p-id="8781"></path><path d="M554.666667 503.466667h42.666666c12.8 0 21.333333 10.666667 21.333334 21.333333v42.666667c0 12.8-10.666667 21.333333-21.333334 21.333333h-42.666666c-12.8 0-21.333333-10.666667-21.333334-21.333333v-42.666667c0-10.666667 10.666667-21.333333 21.333334-21.333333z" fill="#ec66ab" p-id="8782"></path><path d="M682.666667 503.466667h42.666666c12.8 0 21.333333 10.666667 21.333334 21.333333v42.666667c0 12.8-10.666667 21.333333-21.333334 21.333333h-42.666666c-12.8 0-21.333333-10.666667-21.333334-21.333333v-42.666667c0-10.666667 10.666667-21.333333 21.333334-21.333333z" fill="#ec66ab" p-id="8783"></path><path d="M426.666667 648.533333h42.666666c12.8 0 21.333333 10.666667 21.333334 21.333334v42.666666c0 12.8-10.666667 21.333333-21.333334 21.333334h-42.666666c-12.8 0-21.333333-10.666667-21.333334-21.333334v-42.666666c0-10.666667 10.666667-21.333333 21.333334-21.333334z" fill="#ec66ab" p-id="8784"></path><path d="M554.666667 648.533333h42.666666c12.8 0 21.333333 10.666667 21.333334 21.333334v42.666666c0 12.8-10.666667 21.333333-21.333334 21.333334h-42.666666c-12.8 0-21.333333-10.666667-21.333334-21.333334v-42.666666c0-10.666667 10.666667-21.333333 21.333334-21.333334z" fill="#ec66ab" p-id="8785"></path><path d="M682.666667 648.533333h42.666666c12.8 0 21.333333 10.666667 21.333334 21.333334v42.666666c0 12.8-10.666667 21.333333-21.333334 21.333334h-42.666666c-12.8 0-21.333333-10.666667-21.333334-21.333334v-42.666666c0-10.666667 10.666667-21.333333 21.333334-21.333334z" fill="#ec66ab" p-id="8786"></path></svg>
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1767228343993" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8778" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M810.666667 170.666667h-134.4V149.333333c0-12.8-8.533333-21.333333-21.333334-21.333333h-42.666666c-12.8 0-21.333333 8.533333-21.333334 21.333333v21.333334h-170.666666V149.333333c0-12.8-8.533333-21.333333-21.333334-21.333333h-42.666666c-12.8 0-21.333333 8.533333-21.333334 21.333333v21.333334H213.333333c-46.933333 0-85.333333 38.4-85.333333 85.333333v554.666667c0 46.933333 38.4 85.333333 85.333333 85.333333h597.333334c46.933333 0 85.333333-38.4 85.333333-85.333333V256c0-46.933333-38.4-85.333333-85.333333-85.333333z m0 597.333333c0 23.466667-19.2 42.666667-42.666667 42.666667H256c-23.466667 0-42.666667-19.2-42.666667-42.666667V469.333333c0-23.466667 19.2-42.666667 42.666667-42.666666h512c23.466667 0 42.666667 19.2 42.666667 42.666666v298.666667z m0-448c0 12.8-8.533333 21.333333-21.333334 21.333333H234.666667c-12.8 0-21.333333-8.533333-21.333334-21.333333v-42.666667c0-12.8 8.533333-21.333333 21.333334-21.333333h100.266666v21.333333c0 12.8 8.533333 21.333333 21.333334 21.333334h42.666666c12.8 0 21.333333-8.533333 21.333334-21.333334v-21.333333h170.666666v21.333333c0 12.8 8.533333 21.333333 21.333334 21.333334h42.666666c12.8 0 21.333333-8.533333 21.333334-21.333334v-21.333333H789.333333c12.8 0 21.333333 8.533333 21.333334 21.333333v42.666667z" fill="#D71A44" p-id="8779"></path><path d="M298.666667 503.466667h42.666666c12.8 0 21.333333 10.666667 21.333334 21.333333v42.666667c0 12.8-10.666667 21.333333-21.333334 21.333333h-42.666666c-12.8 0-21.333333-10.666667-21.333334-21.333333v-42.666667c0-10.666667 10.666667-21.333333 21.333334-21.333333z" fill="#D71A44" p-id="8780"></path><path d="M298.666667 648.533333h42.666666c12.8 0 21.333333 10.666667 21.333334 21.333334v42.666666c0 12.8-10.666667 21.333333-21.333334 21.333334h-42.666666c-12.8 0-21.333333-10.666667-21.333334-21.333334v-42.666666c0-10.666667 10.666667-21.333333 21.333334-21.333334zM426.666667 503.466667h42.666666c12.8 0 21.333333 10.666667 21.333334 21.333333v42.666667c0 12.8-10.666667 21.333333-21.333334 21.333333h-42.666666c-12.8 0-21.333333-10.666667-21.333334-21.333333v-42.666667c0-10.666667 10.666667-21.333333 21.333334-21.333333z" fill="#D71A44" p-id="8781"></path><path d="M554.666667 503.466667h42.666666c12.8 0 21.333333 10.666667 21.333334 21.333333v42.666667c0 12.8-10.666667 21.333333-21.333334 21.333333h-42.666666c-12.8 0-21.333333-10.666667-21.333334-21.333333v-42.666667c0-10.666667 10.666667-21.333333 21.333334-21.333333z" fill="#D71A44" p-id="8782"></path><path d="M682.666667 503.466667h42.666666c12.8 0 21.333333 10.666667 21.333334 21.333333v42.666667c0 12.8-10.666667 21.333333-21.333334 21.333333h-42.666666c-12.8 0-21.333333-10.666667-21.333334-21.333333v-42.666667c0-10.666667 10.666667-21.333333 21.333334-21.333333z" fill="#D71A44" p-id="8783"></path><path d="M426.666667 648.533333h42.666666c12.8 0 21.333333 10.666667 21.333334 21.333334v42.666666c0 12.8-10.666667 21.333333-21.333334 21.333334h-42.666666c-12.8 0-21.333333-10.666667-21.333334-21.333334v-42.666666c0-10.666667 10.666667-21.333333 21.333334-21.333334z" fill="#D71A44" p-id="8784"></path><path d="M554.666667 648.533333h42.666666c12.8 0 21.333333 10.666667 21.333334 21.333334v42.666666c0 12.8-10.666667 21.333333-21.333334 21.333334h-42.666666c-12.8 0-21.333333-10.666667-21.333334-21.333334v-42.666666c0-10.666667 10.666667-21.333333 21.333334-21.333334z" fill="#D71A44" p-id="8785"></path><path d="M682.666667 648.533333h42.666666c12.8 0 21.333333 10.666667 21.333334 21.333334v42.666666c0 12.8-10.666667 21.333333-21.333334 21.333334h-42.666666c-12.8 0-21.333333-10.666667-21.333334-21.333334v-42.666666c0-10.666667 10.666667-21.333333 21.333334-21.333334z" fill="#D71A44" p-id="8786"></path></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 3.9 KiB

src/icon/loc.svg
+1 -1
View File
@@ -1 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1766884807799" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10346" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M774.826667 365.226667c0 117.76-194.56 392.533333-245.76 464.213333-6.826667 8.533333-18.773333 8.533333-25.6 0C450.56 757.76 256 482.986667 256 365.226667 256 230.4 372.053333 119.466667 515.413333 119.466667s259.413333 110.933333 259.413334 245.76z" fill="#ec66ab" p-id="10347"></path><path d="M208.213333 841.386667a307.2 76.8 0 1 0 614.4 0 307.2 76.8 0 1 0-614.4 0Z" fill="#ec66ab" opacity=".5" p-id="10348"></path></svg>
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1766884807799" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10346" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M774.826667 365.226667c0 117.76-194.56 392.533333-245.76 464.213333-6.826667 8.533333-18.773333 8.533333-25.6 0C450.56 757.76 256 482.986667 256 365.226667 256 230.4 372.053333 119.466667 515.413333 119.466667s259.413333 110.933333 259.413334 245.76z" fill="#D71A44" p-id="10347"></path><path d="M208.213333 841.386667a307.2 76.8 0 1 0 614.4 0 307.2 76.8 0 1 0-614.4 0Z" fill="#D71A44" opacity=".5" p-id="10348"></path></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 759 B

After

Width:  |  Height:  |  Size: 759 B

src/icon/pen.svg
+1 -1
View File
@@ -1 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1767229323466" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11396" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M531.4 114.8L414.1 365l97.9 70.1L627.2 512l87.2-68.3L826 313.4z" fill="#ec66ab" p-id="11397"></path><path d="M831 282.1L565.1 98.7c-10.7-7.4-24.1-9.6-36.7-5.9-12.6 3.7-22.7 12.7-27.8 24.7L381.8 399.6c-4.3 10.1-10.9 19.2-19.3 26.2l-87 73.2c-28.7 24.2-44.9 60.9-43.2 98.4l9.2 209.4-37.6 54.4c-11.7 2.2-22.4 10.2-27.3 23.1-4.8 12.6-1.7 27.5 7.6 37.2 6.6 6.9 14.9 10.4 23.2 11.2v0.3h448.4v-51.5H252.4l31.4-45.5 199-65.7c35.6-11.8 64.3-39.9 76.7-75.4L597 587.6c3.6-10.3 9.7-19.7 17.6-27.3l221.6-211.2c9.5-9 14.3-21.7 13.3-34.7-1-13.1-7.8-24.8-18.5-32.3zM548.4 570.6L510.9 678c-7.1 20.4-23.7 36.7-44.2 43.5l-134.4 44.4 131.8-191c11.7-2.2 22.4-10.2 27.3-23.1 4.8-12.6 1.7-27.5-7.6-37.2-16.5-17.3-43.5-14.4-56.3 4.2-5.6 8.2-7.4 17.8-5.8 26.9l-131.8 191-6.2-141.4c-0.9-21.6 8.4-42.8 24.9-56.8l87-73.2c14.6-12.3 26.2-28 33.6-45.6l4.8-11.5 151.5 108.7-6.5 6.2c-13.7 13.1-24.3 29.5-30.6 47.5z m75.1-89.9L454.6 359.5l89.6-212.7 249.2 172-169.9 161.9z" fill="#ec66ab" p-id="11398"></path></svg>
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1767229323466" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11396" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M531.4 114.8L414.1 365l97.9 70.1L627.2 512l87.2-68.3L826 313.4z" fill="#D71A44" p-id="11397"></path><path d="M831 282.1L565.1 98.7c-10.7-7.4-24.1-9.6-36.7-5.9-12.6 3.7-22.7 12.7-27.8 24.7L381.8 399.6c-4.3 10.1-10.9 19.2-19.3 26.2l-87 73.2c-28.7 24.2-44.9 60.9-43.2 98.4l9.2 209.4-37.6 54.4c-11.7 2.2-22.4 10.2-27.3 23.1-4.8 12.6-1.7 27.5 7.6 37.2 6.6 6.9 14.9 10.4 23.2 11.2v0.3h448.4v-51.5H252.4l31.4-45.5 199-65.7c35.6-11.8 64.3-39.9 76.7-75.4L597 587.6c3.6-10.3 9.7-19.7 17.6-27.3l221.6-211.2c9.5-9 14.3-21.7 13.3-34.7-1-13.1-7.8-24.8-18.5-32.3zM548.4 570.6L510.9 678c-7.1 20.4-23.7 36.7-44.2 43.5l-134.4 44.4 131.8-191c11.7-2.2 22.4-10.2 27.3-23.1 4.8-12.6 1.7-27.5-7.6-37.2-16.5-17.3-43.5-14.4-56.3 4.2-5.6 8.2-7.4 17.8-5.8 26.9l-131.8 191-6.2-141.4c-0.9-21.6 8.4-42.8 24.9-56.8l87-73.2c14.6-12.3 26.2-28 33.6-45.6l4.8-11.5 151.5 108.7-6.5 6.2c-13.7 13.1-24.3 29.5-30.6 47.5z m75.1-89.9L454.6 359.5l89.6-212.7 249.2 172-169.9 161.9z" fill="#D71A44" p-id="11398"></path></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

src/icon/tag.svg
+1 -1
View File
@@ -1 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1767094212200" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5845" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M788.48 629.418667c0-17.066667-5.802667-31.744-17.749333-44.714667L421.205333 235.861333c-12.288-12.288-29.354667-22.869333-49.834667-31.744-21.162667-8.874667-39.936-12.970667-57.002667-12.970667L110.933333 191.146667c-17.066667 0-31.744 6.485333-44.032 18.773333-12.288 12.288-18.773333 26.965333-18.773333 44.032l0 202.752c0 17.066667 4.096 36.522667 12.970667 57.002667 8.874667 21.162667 18.773333 37.546667 31.744 49.834667l349.525333 349.525333c12.288 12.288 26.965333 17.749333 44.032 17.749333 17.066667 0 31.744-5.802667 44.714667-17.749333l239.616-239.616C781.994667 661.162667 788.48 646.485333 788.48 629.418667L788.48 629.418667 788.48 629.418667zM248.490667 392.192c-12.288 12.288-26.965333 18.090667-44.032 18.090667-17.066667 0-31.744-5.802667-44.032-18.090667-12.288-12.288-18.090667-26.965333-18.090667-44.032 0-17.066667 5.802667-31.744 18.090667-44.032 12.288-12.288 26.965333-18.090667 44.032-18.090667 17.066667 0 31.744 5.802667 44.032 18.090667C260.778667 316.416 266.24 331.093333 266.24 348.16 267.264 365.568 260.778667 379.904 248.490667 392.192L248.490667 392.192 248.490667 392.192zM958.122667 584.362667 608.597333 235.861333c-12.288-12.288-29.354667-22.869333-49.834667-31.744C537.6 195.242667 518.826667 191.146667 501.76 191.146667l-109.909333 0c17.066667 0 36.522667 4.096 57.002667 12.970667 21.162667 8.874667 37.546667 18.773333 49.834667 31.744l349.525333 348.501333c12.288 12.970667 18.090667 27.648 18.090667 44.714667s-5.802667 31.744-18.090667 44.032l-229.034667 229.717333c9.898667 9.898667 18.773333 17.066667 25.941333 21.845333 7.168 4.778667 17.066667 6.485333 28.672 6.485333 17.066667 0 31.744-5.802667 44.714667-18.090667l239.616-240.298667c12.288-12.288 17.749333-26.965333 17.749333-44.032S970.069333 597.674667 958.122667 584.362667L958.122667 584.362667 958.122667 584.362667zM958.122667 584.362667" fill="#ec66ab" p-id="5846"></path></svg>
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1767094212200" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5845" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M788.48 629.418667c0-17.066667-5.802667-31.744-17.749333-44.714667L421.205333 235.861333c-12.288-12.288-29.354667-22.869333-49.834667-31.744-21.162667-8.874667-39.936-12.970667-57.002667-12.970667L110.933333 191.146667c-17.066667 0-31.744 6.485333-44.032 18.773333-12.288 12.288-18.773333 26.965333-18.773333 44.032l0 202.752c0 17.066667 4.096 36.522667 12.970667 57.002667 8.874667 21.162667 18.773333 37.546667 31.744 49.834667l349.525333 349.525333c12.288 12.288 26.965333 17.749333 44.032 17.749333 17.066667 0 31.744-5.802667 44.714667-17.749333l239.616-239.616C781.994667 661.162667 788.48 646.485333 788.48 629.418667L788.48 629.418667 788.48 629.418667zM248.490667 392.192c-12.288 12.288-26.965333 18.090667-44.032 18.090667-17.066667 0-31.744-5.802667-44.032-18.090667-12.288-12.288-18.090667-26.965333-18.090667-44.032 0-17.066667 5.802667-31.744 18.090667-44.032 12.288-12.288 26.965333-18.090667 44.032-18.090667 17.066667 0 31.744 5.802667 44.032 18.090667C260.778667 316.416 266.24 331.093333 266.24 348.16 267.264 365.568 260.778667 379.904 248.490667 392.192L248.490667 392.192 248.490667 392.192zM958.122667 584.362667 608.597333 235.861333c-12.288-12.288-29.354667-22.869333-49.834667-31.744C537.6 195.242667 518.826667 191.146667 501.76 191.146667l-109.909333 0c17.066667 0 36.522667 4.096 57.002667 12.970667 21.162667 8.874667 37.546667 18.773333 49.834667 31.744l349.525333 348.501333c12.288 12.970667 18.090667 27.648 18.090667 44.714667s-5.802667 31.744-18.090667 44.032l-229.034667 229.717333c9.898667 9.898667 18.773333 17.066667 25.941333 21.845333 7.168 4.778667 17.066667 6.485333 28.672 6.485333 17.066667 0 31.744-5.802667 44.714667-18.090667l239.616-240.298667c12.288-12.288 17.749333-26.965333 17.749333-44.032S970.069333 597.674667 958.122667 584.362667L958.122667 584.362667 958.122667 584.362667zM958.122667 584.362667" fill="#D71A44" p-id="5846"></path></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

src/util/theme.ts
+4 -4
View File
@@ -4,10 +4,10 @@
*/
const themeOverrides = {
common: {
primaryColor: "#ec66ab",
primaryColorHover: "#ec66ab",
primaryColorPressed: "#ec66ab",
primaryColorSuppl: "#ec66ab",
primaryColor: "#D71A44",
primaryColorHover: "#e02a54",
primaryColorPressed: "#b21238",
primaryColorSuppl: "#e02a54",
},
// ...
};
src/views/Gallery.vue
+9 -9
View File
@@ -1,11 +1,11 @@
<template>
<div
class="relative overflow-hidden bg-[radial-gradient(circle_at_12%_18%,rgba(215,177,123,0.24),transparent_24%),radial-gradient(circle_at_86%_12%,rgba(120,162,182,0.18),transparent_24%),radial-gradient(circle_at_50%_100%,rgba(176,198,172,0.14),transparent_28%),linear-gradient(180deg,#efe7da_0%,#e8f0ef_44%,#f3f1e8_100%)]">
class="relative overflow-hidden bg-[radial-gradient(circle_at_12%_18%,rgba(219,95,81,0.10),transparent_24%),radial-gradient(circle_at_86%_12%,rgba(249,154,159,0.08),transparent_24%),radial-gradient(circle_at_50%_100%,rgba(222,217,178,0.06),transparent_28%),linear-gradient(180deg,#faf6ee_0%,#f9f1ef_44%,#fdf7f6_100%)]">
<div
class="pointer-events-none absolute left-[-5rem] top-6 h-80 w-80 rounded-full bg-[rgba(234,176,107,0.45)] opacity-48 blur-[88px]">
class="pointer-events-none absolute left-[-5rem] top-6 h-80 w-80 rounded-full bg-[rgba(219,95,81,0.20)] opacity-48 blur-[88px]">
</div>
<div
class="pointer-events-none absolute right-[-5rem] top-32 h-[22rem] w-[22rem] rounded-full bg-[rgba(118,176,214,0.32)] opacity-48 blur-[88px]">
class="pointer-events-none absolute right-[-5rem] top-32 h-[22rem] w-[22rem] rounded-full bg-[rgba(222,217,178,0.15)] opacity-48 blur-[88px]">
</div>
<div
class="pointer-events-none absolute inset-0 opacity-14 [background-image:linear-gradient(rgba(255,255,255,0.18)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.18)_1px,transparent_1px)] [background-size:36px_36px] [mask-image:linear-gradient(180deg,rgba(0,0,0,0.8),transparent_85%)]">
@@ -13,7 +13,7 @@
<n-scrollbar ref="virtualListInst" class="relative z-[1] py-6" :style="boxStyle" @scroll="handleScroll">
<section
class="relative mx-auto w-[82%] rounded-[28px] border border-white/62 bg-[linear-gradient(145deg,rgba(255,251,246,0.68),rgba(237,246,244,0.56))] p-6 shadow-[0_1px_3px_rgba(97,121,146,0.05),0_16px_38px_rgba(97,121,146,0.09),0_44px_84px_rgba(178,128,88,0.07),inset_0_1px_0_rgba(255,255,255,0.7)] backdrop-blur-[20px] after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:bg-[linear-gradient(120deg,rgba(255,255,255,0.24),transparent_45%)] after:content-['']">
class="relative mx-auto w-[82%] rounded-[28px] border border-white/62 bg-[linear-gradient(145deg,rgba(255,251,246,0.68),rgba(237,246,244,0.56))] p-6 shadow-[0_1px_3px_rgba(128,118,126,0.05),0_16px_38px_rgba(128,118,126,0.09),0_44px_84px_rgba(215,26,68,0.07),inset_0_1px_0_rgba(255,255,255,0.7)] backdrop-blur-[20px] after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:bg-[linear-gradient(120deg,rgba(255,255,255,0.24),transparent_45%)] after:content-['']">
<div class="max-w-[48rem]">
<h1 class="m-0 text-[clamp(1.8rem,2.5vw,2.8rem)] leading-[1.2] text-[#2c3a4a]">
把喜欢的画面收进一片更柔和的光里
@@ -37,19 +37,19 @@
</section>
<section
class="mx-auto mt-6 w-[82%] rounded-[30px] border border-white/62 bg-white/42 p-6 shadow-[0_1px_3px_rgba(97,121,146,0.05),0_14px_30px_rgba(97,121,146,0.09),0_36px_72px_rgba(178,128,88,0.07),inset_0_1px_0_rgba(255,255,255,0.7)] backdrop-blur-[18px]">
class="mx-auto mt-6 w-[82%] rounded-[30px] border border-white/62 bg-white/42 p-6 shadow-[0_1px_3px_rgba(128,118,126,0.05),0_14px_30px_rgba(128,118,126,0.09),0_36px_72px_rgba(215,26,68,0.07),inset_0_1px_0_rgba(255,255,255,0.7)] backdrop-blur-[18px]">
<div class="mb-5 flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
<div>
<div class="text-[1.6rem] font-semibold text-[#2f4050]">图片列表</div>
<div class="text-[1.6rem] font-semibold text-[#5c3d46]">图片列表</div>
<div class="mt-1 flex items-center gap-2 text-[13px] text-slate-500">
<span v-if="searchKeyword" class="inline-flex items-center rounded-full bg-[rgba(236,102,171,0.1)] px-2.5 py-0.5 font-semibold text-[rgb(212,88,154)]">
<span v-if="searchKeyword" class="inline-flex items-center rounded-full bg-[rgba(215,26,68,0.1)] px-2.5 py-0.5 font-semibold text-[rgb(215,26,68)]">
关键词：{{ searchKeyword }}
</span>
<span>{{ galleryStats.status }}</span>
</div>
</div>
<div class="inline-flex items-center gap-2 self-start rounded-full bg-white/68 px-5 py-2 text-[#526376] shadow-[0_2px_8px_rgba(97,121,146,0.08),inset_0_1px_0_rgba(255,255,255,0.7)]">
<span class="inline-block h-2 w-2 rounded-full" :class="loading ? 'animate-pulse bg-[#ec66ab]' : 'bg-[#7fb69a]'"></span>
<div class="inline-flex items-center gap-2 self-start rounded-full bg-white/68 px-5 py-2 text-[#72515a] shadow-[0_2px_8px_rgba(128,118,126,0.08),inset_0_1px_0_rgba(255,255,255,0.7)]">
<span class="inline-block h-2 w-2 rounded-full" :class="loading ? 'animate-pulse bg-[#D71A44]' : 'bg-[#DB5F51]'"></span>
{{ galleryStats.loaded }} 张
</div>
</div>
src/views/Plink.vue
+19 -19
View File
@@ -1,12 +1,12 @@
<template>
<div
class="relative overflow-hidden bg-[radial-gradient(circle_at_12%_18%,rgba(215,177,123,0.24),transparent_24%),radial-gradient(circle_at_86%_12%,rgba(120,162,182,0.18),transparent_24%),radial-gradient(circle_at_50%_100%,rgba(176,198,172,0.14),transparent_28%),linear-gradient(180deg,#efe7da_0%,#e8f0ef_44%,#f3f1e8_100%)]"
class="relative overflow-hidden bg-[radial-gradient(circle_at_12%_18%,rgba(219,95,81,0.10),transparent_24%),radial-gradient(circle_at_86%_12%,rgba(249,154,159,0.08),transparent_24%),radial-gradient(circle_at_50%_100%,rgba(222,217,178,0.06),transparent_28%),linear-gradient(180deg,#faf6ee_0%,#f9f1ef_44%,#fdf7f6_100%)]"
:style="boxStyle">
<div
class="pointer-events-none absolute left-[-5rem] top-6 h-80 w-80 rounded-full bg-[rgba(234,176,107,0.45)] opacity-48 blur-[88px]">
class="pointer-events-none absolute left-[-5rem] top-6 h-80 w-80 rounded-full bg-[rgba(219,95,81,0.20)] opacity-48 blur-[88px]">
</div>
<div
class="pointer-events-none absolute right-[-5rem] top-32 h-[22rem] w-[22rem] rounded-full bg-[rgba(118,176,214,0.32)] opacity-48 blur-[88px]">
class="pointer-events-none absolute right-[-5rem] top-32 h-[22rem] w-[22rem] rounded-full bg-[rgba(222,217,178,0.15)] opacity-48 blur-[88px]">
</div>
<div
class="pointer-events-none absolute inset-0 opacity-14 [background-image:linear-gradient(rgba(255,255,255,0.18)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.18)_1px,transparent_1px)] [background-size:36px_36px] [mask-image:linear-gradient(180deg,rgba(0,0,0,0.8),transparent_85%)]">
@@ -16,11 +16,11 @@
<aside class="hidden w-[25rem] shrink-0 xl:block">
<div class="sticky top-4">
<section
class="relative rounded-[28px] border border-white/62 bg-[linear-gradient(145deg,rgba(255,251,246,0.68),rgba(237,246,244,0.56))] p-5 shadow-[0_20px_50px_rgba(110,124,112,0.11)] backdrop-blur-[20px] after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:bg-[linear-gradient(120deg,rgba(255,255,255,0.24),transparent_45%)] after:content-['']">
class="relative rounded-[28px] border border-white/62 bg-[linear-gradient(145deg,rgba(255,251,246,0.68),rgba(237,246,244,0.56))] p-5 shadow-[0_20px_50px_rgba(128,118,126,0.11)] backdrop-blur-[20px] after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:bg-[linear-gradient(120deg,rgba(255,255,255,0.24),transparent_45%)] after:content-['']">
<div class="relative z-[1]">
<h1 class="mt-2 text-[1.65rem] leading-[1.2] text-[#2c3a4a]">留下你的站点名片</h1>
<section
class="mt-4 rounded-[24px] border border-white/72 bg-white/58 p-4 shadow-[0_14px_32px_rgba(112,128,118,0.1)]">
class="mt-4 rounded-[24px] border border-white/72 bg-white/58 p-4 shadow-[0_14px_32px_rgba(128,118,126,0.1)]">
<div class="mb-3 flex items-center justify-between gap-3 text-primary">
<div class="flex items-center gap-2">
<icon-loading class="zhuan h-4 w-4" />
@@ -35,7 +35,7 @@
require-mark-placement="right-hanging" size="small">
<n-form-item v-for="field in formFields" :key="field.key" :path="field.key">
<template #label>
<div class="flex items-center gap-2 text-sm font-medium text-[#526376]">
<div class="flex items-center gap-2 text-sm font-medium text-[#72515a]">
<component :is="field.icon" class="h-4 w-4" />
{{ field.label }}
</div>
@@ -47,7 +47,7 @@
<div class="!mb-0 btn">
<n-button
class="!h-10 !w-full !rounded-full !border-none !bg-[linear-gradient(135deg,#ec66ab,#f48a6f)] !text-sm !font-semibold shadow-[0_14px_28px_rgba(236,102,171,0.24)]"
class="!h-10 !w-full !rounded-full !border-none !bg-[linear-gradient(135deg,#D71A44,#DB5F51)] !text-sm !font-semibold shadow-[0_14px_28px_rgba(215,26,68,0.24)]"
type="primary" @click="submitPut">
提交友链申请
</n-button>
@@ -55,7 +55,7 @@
</n-form>
</section>
<p class="mt-3 text-right text-[12px] leading-5 text-[#7a8797]">
<p class="mt-3 text-right text-[12px] leading-5 text-[#8a6267]">
如果暂未显示，通常是因为还在审核中...
</p>
</div>
@@ -64,7 +64,7 @@
</aside>
<section
class="min-w-0 flex-1 overflow-hidden rounded-[30px] border border-white/70 bg-transparent p-4 ring-1 ring-inset ring-[rgba(255,255,255,0.38)] shadow-[0_20px_46px_rgba(109,126,117,0.1)] sm:p-6">
class="min-w-0 flex-1 overflow-hidden rounded-[30px] border border-white/70 bg-transparent p-4 ring-1 ring-inset ring-[rgba(255,255,255,0.38)] shadow-[0_20px_46px_rgba(128,118,126,0.1)] sm:p-6">
<n-scrollbar :style="contentStyle" trigger="none" class="pr-1">
<div class="space-y-5 pr-1">
@@ -73,27 +73,27 @@
<div class="mb-5 flex items-center justify-between">
<div>
<div class="text-[0.82rem] font-semibold tracking-[0.16em] text-[#718195]">已通过友链</div>
<h3 class="mt-2 text-[1.4rem] font-semibold text-[#2f4050]">一起逛逛这些站点</h3>
<h3 class="mt-2 text-[1.4rem] font-semibold text-[#5c3d46]">一起逛逛这些站点</h3>
</div>
<div
class="rounded-full border border-white/70 bg-white/42 px-4 py-2 text-sm text-[#526376] shadow-[0_8px_18px_rgba(112,128,118,0.08)]">
class="rounded-full border border-white/70 bg-white/42 px-4 py-2 text-sm text-[#72515a] shadow-[0_8px_18px_rgba(128,118,126,0.08)]">
共 {{ pList.length }} 个站点
</div>
</div>
<div class="grid grid-cols-1 gap-5 md:grid-cols-2 2xl:grid-cols-3">
<article v-for="p in pList" :key="p.pid"
class="cursor-pointer rounded-[26px] border border-white/72 bg-[linear-gradient(145deg,rgba(255,251,246,0.78),rgba(237,246,244,0.62))] p-6 shadow-[0_16px_34px_rgba(116,132,124,0.12)] backdrop-blur-[18px] transition-[transform,box-shadow,border-color] duration-[320ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)] hover:-translate-y-1 hover:border-white/90 hover:shadow-[0_22px_42px_rgba(102,123,112,0.16)]"
class="cursor-pointer rounded-[26px] border border-white/72 bg-[linear-gradient(145deg,rgba(255,251,246,0.78),rgba(237,246,244,0.62))] p-6 shadow-[0_16px_34px_rgba(128,118,126,0.12)] backdrop-blur-[18px] transition-[transform,box-shadow,border-color] duration-[320ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)] hover:-translate-y-1 hover:border-white/90 hover:shadow-[0_22px_42px_rgba(128,118,126,0.16)]"
@click="gotoWebsite(p.url)">
<div class="flex items-center gap-8">
<n-avatar round :size="56" :src="p.avater"
class="shrink-0 ring-2 ring-white/80 shadow-[0_10px_22px_rgba(88,108,125,0.14)]" />
class="shrink-0 ring-2 ring-white/80 shadow-[0_10px_22px_rgba(128,118,126,0.14)]" />
<div class="min-w-0 flex-1">
<div
class="inline-flex items-center rounded-full bg-[rgba(250,239,220,0.92)] px-3 py-1 text-sm text-primary">
{{ p.name }}
</div>
<h4 class="mt-3 truncate text-[1.3rem] font-semibold text-[#2f4050]">
<h4 class="mt-3 truncate text-[1.3rem] font-semibold text-[#5c3d46]">
{{ p.title }}
</h4>
<p class="mt-2 line-clamp-2 min-h-10 text-sm text-[#6a7a88]">
@@ -104,7 +104,7 @@
<div class="mt-5 flex flex-wrap gap-3 justify-center">
<div v-for="tag in getTags(p.tagname)" :key="tag" :style="{ backgroundColor: getTagColor(tag) }"
class="inline-flex items-center gap-1 rounded-full px-3 py-1 text-sm text-white shadow-[0_8px_20px_rgba(88,108,125,0.16)]">
class="inline-flex items-center gap-1 rounded-full px-3 py-1 text-sm text-white shadow-[0_8px_20px_rgba(128,118,126,0.16)]">
<icon-tag2 class="h-4 w-4" />
{{ tag }}
</div>
@@ -112,13 +112,13 @@
</article>
</div>
<div v-if="!pList.length" class="py-14 text-center text-[#7a8797]">
<div v-if="!pList.length" class="py-14 text-center text-[#8a6267]">
暂无友链数据，等你来留下第一张站点名片。
</div>
</section>
<section
class="rounded-[26px] border border-white/66 bg-transparent p-5 ring-1 ring-inset ring-[rgba(255,255,255,0.32)] shadow-[0_16px_34px_rgba(116,132,124,0.09)] xl:hidden">
class="rounded-[26px] border border-white/66 bg-transparent p-5 ring-1 ring-inset ring-[rgba(255,255,255,0.32)] shadow-[0_16px_34px_rgba(128,118,126,0.09)] xl:hidden">
<div class="mb-4 flex items-center gap-3 text-primary">
<icon-loading class="zhuan h-5 w-5" />
<span class="text-base font-semibold">申请友链</span>
@@ -128,7 +128,7 @@
require-mark-placement="right-hanging">
<n-form-item v-for="field in formFields" :key="field.key" :path="field.key">
<template #label>
<div class="flex items-center gap-2 text-sm font-medium text-[#526376]">
<div class="flex items-center gap-2 text-sm font-medium text-[#72515a]">
<component :is="field.icon" class="h-4 w-4" />
{{ field.label }}
</div>
@@ -140,7 +140,7 @@
<n-form-item class="btn">
<n-button
class="!h-11 !w-full !rounded-full !border-none !bg-[linear-gradient(135deg,#ec66ab,#f48a6f)] !font-semibold shadow-[0_14px_28px_rgba(236,102,171,0.24)]"
class="!h-11 !w-full !rounded-full !border-none !bg-[linear-gradient(135deg,#D71A44,#DB5F51)] !font-semibold shadow-[0_14px_28px_rgba(215,26,68,0.24)]"
type="primary" @click="submitPut">
提交友链申请
</n-button>
src/views/blog/[bid].vue
+27 -27
View File
@@ -1,12 +1,12 @@
<template>
<div
class="relative overflow-hidden bg-[radial-gradient(circle_at_12%_18%,rgba(215,177,123,0.24),transparent_24%),radial-gradient(circle_at_86%_12%,rgba(120,162,182,0.18),transparent_24%),radial-gradient(circle_at_50%_100%,rgba(176,198,172,0.14),transparent_28%),linear-gradient(180deg,#efe7da_0%,#e8f0ef_44%,#f3f1e8_100%)]"
class="relative overflow-hidden bg-[radial-gradient(circle_at_12%_18%,rgba(219,95,81,0.10),transparent_24%),radial-gradient(circle_at_86%_12%,rgba(249,154,159,0.08),transparent_24%),radial-gradient(circle_at_50%_100%,rgba(222,217,178,0.06),transparent_28%),linear-gradient(180deg,#faf6ee_0%,#f9f1ef_44%,#fdf7f6_100%)]"
:style="boxStyle">
<div
class="pointer-events-none absolute left-[-5rem] top-6 h-80 w-80 rounded-full bg-[rgba(234,176,107,0.45)] opacity-48 blur-[88px]">
class="pointer-events-none absolute left-[-5rem] top-6 h-80 w-80 rounded-full bg-[rgba(219,95,81,0.20)] opacity-48 blur-[88px]">
</div>
<div
class="pointer-events-none absolute right-[-5rem] top-32 h-[22rem] w-[22rem] rounded-full bg-[rgba(118,176,214,0.32)] opacity-48 blur-[88px]">
class="pointer-events-none absolute right-[-5rem] top-32 h-[22rem] w-[22rem] rounded-full bg-[rgba(222,217,178,0.15)] opacity-48 blur-[88px]">
</div>
<div
class="pointer-events-none absolute inset-0 opacity-14 [background-image:linear-gradient(rgba(255,255,255,0.18)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.18)_1px,transparent_1px)] [background-size:36px_36px] [mask-image:linear-gradient(180deg,rgba(0,0,0,0.8),transparent_85%)]">
@@ -15,7 +15,7 @@
<!-- 阅读进度条 -->
<div class="pointer-events-none absolute inset-x-0 top-0 z-[60] h-[3px] bg-white/10">
<div
class="h-full rounded-r-full bg-gradient-to-r from-[#ec66ab] via-[#c98a5d] to-[#76b0d6] transition-[width] duration-150 ease-out"
class="h-full rounded-r-full bg-gradient-to-r from-[#D71A44] via-[#DB5F51] to-[#DED9B2] transition-[width] duration-150 ease-out"
:style="{ width: `${progress}%` }"></div>
</div>
@@ -25,24 +25,24 @@
<section class="blog-detail-card p-6">
<div class="relative z-[1]">
<h1 class="mt-3 text-center text-[2rem] leading-[1.2] text-[#2c3a4a]">阅读目录</h1>
<div class="mx-auto mt-2 h-1 w-16 rounded-full bg-gradient-to-r from-[#ec66ab] via-[#c98a5d] to-[#76b0d6] opacity-70">
<div class="mx-auto mt-2 h-1 w-16 rounded-full bg-gradient-to-r from-[#D71A44] via-[#DB5F51] to-[#DED9B2] opacity-70">
</div>
<div class="blog-detail-card-soft mt-6 p-4">
<div class="mb-3 flex items-center justify-between">
<span class="text-sm font-semibold text-[#526376]">目录</span>
<span class="text-sm font-semibold text-[#72515a]">目录</span>
<span class="rounded-full cursor-pointer bg-primary px-3 py-1 text-xs text-white">正文导航</span>
</div>
<div class="toc-list text-[13px] leading-5 text-[#526376]">
<div class="toc-list text-[13px] leading-5 text-[#72515a]">
<template v-for="item in tocItems" :key="item.id">
<details v-if="item.children.length" class="group" :open="item.open">
<summary
class="flex cursor-pointer list-none items-center gap-2 rounded-lg py-1 text-[#526376] marker:hidden select-none">
class="flex cursor-pointer list-none items-center gap-2 rounded-lg py-1 text-[#72515a] marker:hidden select-none">
<span
class="text-[11px] text-[#8a98a1] transition-transform duration-200 group-open:rotate-90">▶</span>
<span class="truncate transition-colors duration-200"
:class="isNodeActive(item) ? 'text-primary font-semibold' : 'hover:text-[#2f4050]'"
:class="isNodeActive(item) ? 'text-primary font-semibold' : 'hover:text-[#5c3d46]'"
@click.stop="scrollToHeading(item.id)">
{{ item.text }}
</span>
@@ -51,7 +51,7 @@
<div v-for="child in item.children" :key="child.id" class="py-1"
:style="{ paddingLeft: `${Math.min(child.level - 2, 3) * 10}px` }">
<div class="toc-child cursor-pointer truncate rounded-md transition-colors duration-200"
:class="activeHeadingId === child.id ? 'toc-active text-primary font-semibold' : 'text-[#687983] hover:text-[#2f4050]'"
:class="activeHeadingId === child.id ? 'toc-active text-primary font-semibold' : 'text-[#687983] hover:text-[#5c3d46]'"
@click="scrollToHeading(child.id)">
{{ child.text }}
</div>
@@ -60,13 +60,13 @@
</details>
<div v-else class="toc-leaf cursor-pointer rounded-md py-1 transition-colors duration-200"
:class="activeHeadingId === item.id ? 'toc-active text-primary font-semibold' : 'text-[#526376] hover:text-[#2f4050]'"
:class="activeHeadingId === item.id ? 'toc-active text-primary font-semibold' : 'text-[#72515a] hover:text-[#5c3d46]'"
@click="scrollToHeading(item.id)">
{{ item.text }}
</div>
</template>
<div v-if="tocItems.length === 0" class="px-3 py-2 text-sm text-[#7a8797]">
<div v-if="tocItems.length === 0" class="px-3 py-2 text-sm text-[#8a6267]">
暂无可生成的目录
</div>
</div>
@@ -109,10 +109,10 @@
<!-- 加载失败 -->
<div v-else-if="loadError" class="flex h-full flex-col items-center justify-center gap-4 text-center">
<div class="blog-detail-card px-10 py-12">
<div class="text-[1.2rem] font-semibold text-[#2f4050]">文章加载失败</div>
<div class="text-[1.2rem] font-semibold text-[#5c3d46]">文章加载失败</div>
<p class="mt-2 text-sm text-[#8a98a1]">{{ loadError }}</p>
<button type="button" @click="reload"
class="mt-6 cursor-pointer rounded-full bg-primary px-6 py-2 text-sm text-white shadow-[0_10px_24px_rgba(88,108,125,0.24)] transition-transform hover:-translate-y-0.5">
class="mt-6 cursor-pointer rounded-full bg-primary px-6 py-2 text-sm text-white shadow-[0_10px_24px_rgba(128,118,126,0.24)] transition-transform hover:-translate-y-0.5">
重新加载
</button>
</div>
@@ -127,14 +127,14 @@
<div class="min-w-0">
<div class="text-[0.82rem] font-semibold tracking-[0.16em] text-[#718195]">文章详情</div>
<h1
class="my-4 text-center text-[1.9rem] font-semibold leading-[1.3] text-[#2f4050] sm:text-[2.15rem]">
class="my-4 text-center text-[1.9rem] font-semibold leading-[1.3] text-[#5c3d46] sm:text-[2.15rem]">
{{ blogData.title || '文章内容' }}
</h1>
<div
class="mx-auto mb-1 h-1 w-24 rounded-full bg-gradient-to-r from-[#ec66ab] via-[#c98a5d] to-[#76b0d6] opacity-70">
class="mx-auto mb-1 h-1 w-24 rounded-full bg-gradient-to-r from-[#D71A44] via-[#DB5F51] to-[#DED9B2] opacity-70">
</div>
</div>
<n-breadcrumb class="shrink-0 rounded-full border border-white/52 bg-white/16 px-4 text-[#526376]"
<n-breadcrumb class="shrink-0 rounded-full border border-white/52 bg-white/16 px-4 text-[#72515a]"
separator="|">
<n-breadcrumb-item href="/blog/blog">文章</n-breadcrumb-item>
<n-breadcrumb-item>{{ blogData.title }}</n-breadcrumb-item>
@@ -143,7 +143,7 @@
<div
class="mt-2 flex flex-wrap items-center justify-center gap-x-5 gap-y-2 text-sm text-[#708091]">
<em
class="flex items-center gap-1.5 rounded-full bg-white/46 px-3 py-1 not-italic text-primary shadow-[0_4px_12px_rgba(88,108,125,0.08)]">
class="flex items-center gap-1.5 rounded-full bg-white/46 px-3 py-1 not-italic text-primary shadow-[0_4px_12px_rgba(128,118,126,0.08)]">
<n-icon><icon-author /></n-icon>
{{ blogData.nickname }}
</em>
@@ -155,7 +155,7 @@
<div class="mt-5 flex flex-wrap justify-center gap-3">
<div v-for="(item, index) in tags" :key="index" :style="{ backgroundColor: getTagColor(item) }"
class="inline-flex cursor-pointer items-center gap-1 rounded-full px-3 py-1 text-sm text-white shadow-[0_8px_20px_rgba(88,108,125,0.16)] transition-all duration-300 hover:-translate-y-0.5 hover:shadow-[0_12px_26px_rgba(88,108,125,0.28)]">
class="inline-flex cursor-pointer items-center gap-1 rounded-full px-3 py-1 text-sm text-white shadow-[0_8px_20px_rgba(128,118,126,0.16)] transition-all duration-300 hover:-translate-y-0.5 hover:shadow-[0_12px_26px_rgba(128,118,126,0.28)]">
<n-icon><icon-tag /></n-icon>
{{ item }}
</div>
@@ -169,12 +169,12 @@
<template #header>
<div class="flex items-center gap-2.5">
<div
class="flex h-8 w-8 items-center justify-center rounded-xl bg-gradient-to-br from-[#ec66ab] to-[#c98a5d] text-white shadow-[0_6px_14px_rgba(236,102,171,0.28)]">
class="flex h-8 w-8 items-center justify-center rounded-xl bg-gradient-to-br from-[#D71A44] to-[#DB5F51] text-white shadow-[0_6px_14px_rgba(215,26,68,0.28)]">
<n-icon :class="aiState === 'loading' || aiState === 'streaming' ? 'animate-spin' : ''">
<icon-star class="h-4 w-4" />
</n-icon>
</div>
<div class="text-[20px] font-bold text-[#2f4050]">AI 摘要</div>
<div class="text-[20px] font-bold text-[#5c3d46]">AI 摘要</div>
</div>
</template>
<template #header-extra>
@@ -218,7 +218,7 @@
<!-- 完成后重新生成 -->
<div v-if="aiState === 'done' && aiMsg" class="mt-3 flex justify-end">
<n-button @click="triggerAi"
class="cursor-pointer rounded-full bg-white/60 px-4 py-1 text-xs text-[#7a8797] shadow-[0_8px_20px_rgba(88,108,125,0.1)] transition-all hover:text-primary">
class="cursor-pointer rounded-full bg-white/60 px-4 py-1 text-xs text-[#8a6267] shadow-[0_8px_20px_rgba(128,118,126,0.1)] transition-all hover:text-primary">
重新生成
</n-button>
</div>
@@ -229,7 +229,7 @@
<section class="blog-detail-card px-5 py-6 sm:px-8 sm:py-8">
<div
class="pointer-events-none absolute inset-x-10 top-0 h-[3px] rounded-b-full bg-gradient-to-r from-[#ec66ab] via-[#c98a5d] to-[#76b0d6] opacity-60">
class="pointer-events-none absolute inset-x-10 top-0 h-[3px] rounded-b-full bg-gradient-to-r from-[#D71A44] via-[#DB5F51] to-[#DED9B2] opacity-60">
</div>
<MdPreview class="relative article-preview !bg-transparent" :modelValue="markdown"
:onHtmlChanged="scheduleSyncHeadings" />
@@ -238,7 +238,7 @@
</n-scrollbar>
<button v-show="showBackToTop" type="button" aria-label="回到顶部"
class="absolute bottom-6 right-6 z-[3] flex h-11 w-11 items-center justify-center rounded-full outline-none border-none bg-white/24 text-primary shadow-[0_16px_28px_rgba(109,126,117,0.14),inset_0_1px_0_rgba(255,255,255,0.24)] backdrop-blur-[16px] transition-all duration-300 hover:-translate-y-1 hover:bg-white/36 hover:shadow-[0_20px_36px_rgba(109,126,117,0.22),inset_0_1px_0_rgba(255,255,255,0.32)]"
class="absolute bottom-6 right-6 z-[3] flex h-11 w-11 items-center justify-center rounded-full outline-none border-none bg-white/24 text-primary shadow-[0_16px_28px_rgba(128,118,126,0.14),inset_0_1px_0_rgba(255,255,255,0.24)] backdrop-blur-[16px] transition-all duration-300 hover:-translate-y-1 hover:bg-white/36 hover:shadow-[0_20px_36px_rgba(128,118,126,0.22),inset_0_1px_0_rgba(255,255,255,0.32)]"
@click="scrollToTop">
<icon-backtop class="h-5 w-5" />
</button>
@@ -772,7 +772,7 @@ onBeforeUnmount(() => {
width: 3px;
height: 0;
border-radius: 9999px;
background: #ec66ab;
background: #D71A44;
transform: translateY(-50%);
transition: height 0.25s ease;
}
@@ -815,7 +815,7 @@ onBeforeUnmount(() => {
height: 1.1em;
margin-left: 2px;
vertical-align: -2px;
background: #ec66ab;
background: #D71A44;
animation: ai-cursor-blink 0.9s steps(2, start) infinite;
}
@@ -871,7 +871,7 @@ onBeforeUnmount(() => {
:deep(.article-preview h4),
:deep(.article-preview h5),
:deep(.article-preview h6) {
color: #2f4050;
color: #5c3d46;
font-weight: 700;
line-height: 1.35;
margin-top: 1.6em;
src/views/blog/index.vue
+13 -13
View File
@@ -1,12 +1,12 @@
<template>
<div
class="relative overflow-hidden bg-[radial-gradient(circle_at_12%_18%,rgba(215,177,123,0.24),transparent_24%),radial-gradient(circle_at_86%_12%,rgba(120,162,182,0.18),transparent_24%),radial-gradient(circle_at_50%_100%,rgba(176,198,172,0.14),transparent_28%),linear-gradient(180deg,#efe7da_0%,#e8f0ef_44%,#f3f1e8_100%)]"
class="relative overflow-hidden bg-[radial-gradient(circle_at_12%_18%,rgba(219,95,81,0.10),transparent_24%),radial-gradient(circle_at_86%_12%,rgba(249,154,159,0.08),transparent_24%),radial-gradient(circle_at_50%_100%,rgba(222,217,178,0.06),transparent_28%),linear-gradient(180deg,#faf6ee_0%,#f9f1ef_44%,#fdf7f6_100%)]"
:style="boxStyle">
<div
class="pointer-events-none absolute left-[-5rem] top-6 h-80 w-80 rounded-full bg-[rgba(234,176,107,0.45)] opacity-48 blur-[88px]">
class="pointer-events-none absolute left-[-5rem] top-6 h-80 w-80 rounded-full bg-[rgba(219,95,81,0.20)] opacity-48 blur-[88px]">
</div>
<div
class="pointer-events-none absolute right-[-5rem] top-32 h-[22rem] w-[22rem] rounded-full bg-[rgba(118,176,214,0.32)] opacity-48 blur-[88px]">
class="pointer-events-none absolute right-[-5rem] top-32 h-[22rem] w-[22rem] rounded-full bg-[rgba(222,217,178,0.15)] opacity-48 blur-[88px]">
</div>
<div
class="pointer-events-none absolute inset-0 opacity-14 [background-image:linear-gradient(rgba(255,255,255,0.18)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.18)_1px,transparent_1px)] [background-size:36px_36px] [mask-image:linear-gradient(180deg,rgba(0,0,0,0.8),transparent_85%)]">
@@ -88,12 +88,12 @@
</aside>
<section class="blog-list-panel min-w-0 flex h-full flex-1 flex-col p-4 sm:p-6">
<div class="pointer-events-none absolute right-[-4rem] top-12 h-40 w-40 rounded-full bg-[rgba(236,102,171,0.16)] blur-[88px]"></div>
<div class="pointer-events-none absolute left-[-3rem] bottom-10 h-36 w-36 rounded-full bg-[rgba(118,176,214,0.14)] blur-[82px]"></div>
<div class="pointer-events-none absolute right-[-4rem] top-12 h-40 w-40 rounded-full bg-[rgba(219,95,81,0.07)] blur-[88px]"></div>
<div class="pointer-events-none absolute left-[-3rem] bottom-10 h-36 w-36 rounded-full bg-[rgba(249,154,159,0.06)] blur-[82px]"></div>
<div class="mb-5 flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
<div class="relative z-[1]">
<div class="text-[0.82rem] font-semibold tracking-[0.16em] text-[#718195]">文章列表</div>
<div class="mt-2 text-[1.6rem] font-semibold text-[#2f4050]">{{ currentCateLabel }}</div>
<div class="mt-2 text-[1.6rem] font-semibold text-[#5c3d46]">{{ currentCateLabel }}</div>
</div>
<div class="blog-stat-card relative z-[1] min-w-[126px] text-right">
<div class="relative z-[1] flex items-end justify-end">
@@ -120,7 +120,7 @@
<div class="blog-scroll-panel min-h-full">
<div class="space-y-5">
<div v-if="blogList.length === 0"
class="rounded-[24px] border border-dashed border-white/46 bg-white/20 px-6 py-16 text-center text-[#7a8797] backdrop-blur-[16px]">
class="rounded-[24px] border border-dashed border-white/46 bg-white/20 px-6 py-16 text-center text-[#8a6267] backdrop-blur-[16px]">
暂时还没有相关文章。
</div>
@@ -128,17 +128,17 @@
class="blog-list-card blog-card-animate group cursor-pointer"
:style="{ animationDelay: `${index * 90}ms` }" @click="$router.push(`/blog/${item.aid}`)">
<div
class="pointer-events-none absolute -right-10 top-[-2rem] h-28 w-28 rounded-full bg-[rgba(236,102,171,0.18)] transition duration-500 group-hover:scale-125 group-hover:opacity-100">
class="pointer-events-none absolute -right-10 top-[-2rem] h-28 w-28 rounded-full bg-[rgba(219,95,81,0.08)] transition duration-500 group-hover:scale-125 group-hover:opacity-100">
</div>
<div
class="pointer-events-none absolute -left-8 bottom-[-2rem] h-24 w-24 rounded-full bg-[rgba(104,170,201,0.16)] transition duration-500 group-hover:translate-x-2">
class="pointer-events-none absolute -left-8 bottom-[-2rem] h-24 w-24 rounded-full bg-[rgba(219,95,81,0.07)] transition duration-500 group-hover:translate-x-2">
</div>
<div class="pointer-events-none absolute inset-x-6 top-0 h-18 bg-[linear-gradient(180deg,rgba(255,255,255,0.24),transparent)] opacity-80 "></div>
<div class="relative z-[1]">
<div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
<div
class="inline-flex w-fit items-center rounded-full border border-white/58 bg-white/22 px-3 py-1 text-[0.72rem] font-semibold tracking-[0.18em] text-[#7a8797] shadow-[0_8px_16px_rgba(102,123,112,0.08)] backdrop-blur-[14px]">
class="inline-flex w-fit items-center rounded-full border border-white/58 bg-white/22 px-3 py-1 text-[0.72rem] font-semibold tracking-[0.18em] text-[#8a6267] shadow-[0_8px_16px_rgba(128,118,126,0.08)] backdrop-blur-[14px]">
ARTICLE {{ String(index + 1).padStart(2, '0') }}
</div>
@@ -168,14 +168,14 @@
<div class="flex flex-wrap gap-3">
<div v-for="(tag, tagIdx) in getTags(item.tags)" :key="tag"
:style="{ backgroundColor: getTagColor(tag), animationDelay: `${index * 90 + tagIdx * 60 + 140}ms` }"
class="blog-chip-animate inline-flex items-center gap-1 rounded-full px-3 py-1 text-sm text-white shadow-[0_8px_20px_rgba(88,108,125,0.16)]">
class="blog-chip-animate inline-flex items-center gap-1 rounded-full px-3 py-1 text-sm text-white shadow-[0_8px_20px_rgba(128,118,126,0.16)]">
<icon-tag2 class="h-4 w-4" />
{{ tag }}
</div>
</div>
<span
class="inline-flex items-center gap-2 rounded-full border border-white/52 bg-white/24 px-4 py-2 text-sm font-semibold text-[#5e6f82] shadow-[0_10px_18px_rgba(102,123,112,0.08)] backdrop-blur-[16px] transition-all duration-300 group-hover:translate-x-1 group-hover:text-primary">
class="inline-flex items-center gap-2 rounded-full border border-white/52 bg-white/24 px-4 py-2 text-sm font-semibold text-[#77535c] shadow-[0_10px_18px_rgba(128,118,126,0.08)] backdrop-blur-[16px] transition-all duration-300 group-hover:translate-x-1 group-hover:text-primary">
阅读全文
<span class="text-base leading-none">+</span>
</span>
@@ -185,7 +185,7 @@
</div>
<div v-if="blogList.length > page_size"
class="mt-8 flex justify-center rounded-[22px] border border-white/44 bg-white/18 px-4 py-5 shadow-[0_10px_24px_rgba(116,132,124,0.08)] backdrop-blur-[14px]">
class="mt-8 flex justify-center rounded-[22px] border border-white/44 bg-white/18 px-4 py-5 shadow-[0_10px_24px_rgba(128,118,126,0.08)] backdrop-blur-[14px]">
<n-pagination v-model:page="page_num" :page-count="total" :page-slot="5" @update:page="getBlogList" />
</div>
</div>
src/views/index.vue
+19 -19
View File
@@ -1,10 +1,10 @@
<template>
<div
class="relative overflow-hidden bg-[radial-gradient(circle_at_12%_18%,rgba(215,177,123,0.24),transparent_24%),radial-gradient(circle_at_86%_12%,rgba(120,162,182,0.18),transparent_24%),radial-gradient(circle_at_50%_100%,rgba(176,198,172,0.14),transparent_28%),linear-gradient(180deg,#efe7da_0%,#e8f0ef_44%,#f3f1e8_100%)]"
class="relative overflow-hidden bg-[radial-gradient(circle_at_12%_18%,rgba(219,95,81,0.10),transparent_24%),radial-gradient(circle_at_86%_12%,rgba(249,154,159,0.08),transparent_24%),radial-gradient(circle_at_50%_100%,rgba(222,217,178,0.06),transparent_28%),linear-gradient(180deg,#faf6ee_0%,#f9f1ef_44%,#fdf7f6_100%)]"
:style="contentStyle"
>
<div class="pointer-events-none absolute left-[-5rem] top-6 h-80 w-80 rounded-full bg-[rgba(234,176,107,0.45)] opacity-48 blur-[88px]"></div>
<div class="pointer-events-none absolute right-[-5rem] top-32 h-[22rem] w-[22rem] rounded-full bg-[rgba(118,176,214,0.32)] opacity-48 blur-[88px]"></div>
<div class="pointer-events-none absolute left-[-5rem] top-6 h-80 w-80 rounded-full bg-[rgba(219,95,81,0.20)] opacity-48 blur-[88px]"></div>
<div class="pointer-events-none absolute right-[-5rem] top-32 h-[22rem] w-[22rem] rounded-full bg-[rgba(222,217,178,0.15)] opacity-48 blur-[88px]"></div>
<div class="pointer-events-none absolute inset-y-0 left-5 right-5 opacity-14 [background-image:linear-gradient(rgba(255,255,255,0.18)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.18)_1px,transparent_1px)] [background-position:18px_0,18px_0] [background-size:36px_36px] [mask-image:linear-gradient(180deg,rgba(0,0,0,0.8),transparent_85%)]"></div>
<n-layout has-sider>
<n-layout-content class="relative !bg-transparent">
@@ -50,8 +50,8 @@
:key="idx"
class="search-suggest-item relative z-[1] flex items-center truncate rounded-[18px] border border-transparent p-3.5 pr-6 text-slate-500 transition-[transform,background-color,color,box-shadow,border-color] duration-200"
:class="selecedIdx === idx
? 'bg-[linear-gradient(135deg,#ec66ab,#f48a6f)] text-white shadow-[0_4px_10px_rgba(236,102,171,0.16),0_14px_28px_rgba(236,102,171,0.2)]'
: 'hover:-translate-y-0.5 hover:border-white/55 hover:bg-white/62 hover:text-slate-700 hover:shadow-[0_2px_6px_rgba(97,121,146,0.06),0_12px_24px_rgba(97,121,146,0.1)]'"
? 'bg-[linear-gradient(135deg,#D71A44,#DB5F51)] text-white shadow-[0_4px_10px_rgba(215,26,68,0.16),0_14px_28px_rgba(215,26,68,0.2)]'
: 'hover:-translate-y-0.5 hover:border-white/55 hover:bg-white/62 hover:text-slate-700 hover:shadow-[0_2px_6px_rgba(128,118,126,0.06),0_12px_24px_rgba(128,118,126,0.1)]'"
:style="{ marginTop: idx === 0 ? '0' : '0.45rem' }"
@click="goExtra(item.menu_link)"
@keyup.enter="goExtra(item.menu_link)"
@@ -60,7 +60,7 @@
class="mr-2 inline-flex h-6 shrink-0 items-center rounded-full px-2.5 text-[11px] font-semibold tracking-[0.04em]"
:class="selecedIdx === idx
? 'bg-white/18 text-white'
: idx ? 'bg-slate-700/8 text-slate-500' : 'bg-[rgba(236,102,171,0.12)] text-[rgb(212,88,154)]'"
: idx ? 'bg-slate-700/8 text-slate-500' : 'bg-[rgba(215,26,68,0.12)] text-[rgb(215,26,68)]'"
>
{{ idx ? '导航' : '搜索' }}
</span>
@@ -135,13 +135,13 @@
<div
v-if="item.icon_error"
:style="{ background: getItemColor(item) }"
class="grid-image flex h-10 w-10 items-center justify-center rounded-2xl border border-white/95 bg-[linear-gradient(180deg,rgba(255,255,255,0.96),rgba(234,242,249,0.92))] p-[0.2rem] text-white shadow-[0_2px_6px_rgba(97,121,146,0.06),0_10px_20px_rgba(97,121,146,0.1),inset_0_1px_0_rgba(255,255,255,0.95)] transition-transform duration-[350ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]"
class="grid-image flex h-10 w-10 items-center justify-center rounded-2xl border border-white/95 bg-[linear-gradient(180deg,rgba(255,255,255,0.96),rgba(234,242,249,0.92))] p-[0.2rem] text-white shadow-[0_2px_6px_rgba(128,118,126,0.06),0_10px_20px_rgba(128,118,126,0.1),inset_0_1px_0_rgba(255,255,255,0.95)] transition-transform duration-[350ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]"
>
{{ item.first }}
</div>
<img
v-else
class="grid-image h-10 w-10 rounded-2xl border border-white/95 bg-[linear-gradient(180deg,rgba(255,255,255,0.96),rgba(234,242,249,0.92))] p-[0.2rem] object-cover shadow-[0_2px_6px_rgba(97,121,146,0.06),0_10px_20px_rgba(97,121,146,0.1),inset_0_1px_0_rgba(255,255,255,0.95)] transition-transform duration-[350ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]"
class="grid-image h-10 w-10 rounded-2xl border border-white/95 bg-[linear-gradient(180deg,rgba(255,255,255,0.96),rgba(234,242,249,0.92))] p-[0.2rem] object-cover shadow-[0_2px_6px_rgba(128,118,126,0.06),0_10px_20px_rgba(128,118,126,0.1),inset_0_1px_0_rgba(255,255,255,0.95)] transition-transform duration-[350ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]"
:key="item.menu_icon"
:src="item.menu_icon"
:alt="item.menu_name"
@@ -165,7 +165,7 @@
<div @click="addNav" class="w-full h-full flex flex-col items-center justify-center cursor-pointer">
<div
:style="{ background: addCardColor }"
class="add-card-plus flex h-10 w-10 items-center justify-center rounded-2xl border border-white/95 bg-[linear-gradient(180deg,rgba(255,255,255,0.96),rgba(234,242,249,0.92))] p-[0.2rem] text-2xl text-white shadow-[0_2px_6px_rgba(97,121,146,0.06),0_10px_20px_rgba(97,121,146,0.1),inset_0_1px_0_rgba(255,255,255,0.95)] transition-transform duration-300 [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]"
class="add-card-plus flex h-10 w-10 items-center justify-center rounded-2xl border border-white/95 bg-[linear-gradient(180deg,rgba(255,255,255,0.96),rgba(234,242,249,0.92))] p-[0.2rem] text-2xl text-white shadow-[0_2px_6px_rgba(128,118,126,0.06),0_10px_20px_rgba(128,118,126,0.1),inset_0_1px_0_rgba(255,255,255,0.95)] transition-transform duration-300 [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]"
>
+
</div>
@@ -184,7 +184,7 @@
<maskX :visible="visible" :setVisible="navCancel">
<n-form
class="w-[500px] rounded-[28px] border border-white/80 bg-[radial-gradient(circle_at_top_left,rgba(255,199,132,0.16),transparent_34%),radial-gradient(circle_at_top_right,rgba(136,203,255,0.14),transparent_28%),linear-gradient(180deg,rgba(255,255,255,0.84),rgba(242,247,251,0.78))] p-8 shadow-[0_4px_12px_rgba(75,96,120,0.08),0_20px_44px_rgba(75,96,120,0.12),0_64px_120px_rgba(178,128,88,0.08)] backdrop-blur-[20px]"
class="w-[500px] rounded-[28px] border border-white/80 bg-[radial-gradient(circle_at_top_left,rgba(219,95,81,0.07),transparent_34%),radial-gradient(circle_at_top_right,rgba(249,154,159,0.06),transparent_28%),linear-gradient(180deg,rgba(255,255,255,0.84),rgba(255,239,234,0.78))] p-8 shadow-[0_4px_12px_rgba(128,118,126,0.08),0_20px_44px_rgba(128,118,126,0.12),0_64px_120px_rgba(215,26,68,0.08)] backdrop-blur-[20px]"
ref="formNav"
layout="vertical"
:data="navData"
@@ -226,8 +226,8 @@
<div v-else class="ml-5 w-[30px] h-[30px]"></div>
</n-form-item>
<div class="mt-14 flex justify-between">
<n-button class="w-[48%] !h-11 !rounded-full !border-none !bg-white/90 !font-bold !tracking-[0.04em] !text-slate-600 shadow-[0_3px_8px_rgba(89,108,130,0.07),0_12px_24px_rgba(89,108,130,0.09)]" secondary variant="solid" @click="navCancel">取消</n-button>
<n-button class="w-[48%] !h-11 !rounded-full !border-none !bg-[linear-gradient(135deg,#ec66ab,#f48a6f)] !font-bold !tracking-[0.04em] shadow-[0_4px_10px_rgba(236,102,171,0.18),0_14px_28px_rgba(236,102,171,0.2)]" type="primary" variant="solid" @click="navSubmit">确定</n-button>
<n-button class="w-[48%] !h-11 !rounded-full !border-none !bg-white/90 !font-bold !tracking-[0.04em] !text-slate-600 shadow-[0_3px_8px_rgba(128,118,126,0.07),0_12px_24px_rgba(128,118,126,0.09)]" secondary variant="solid" @click="navCancel">取消</n-button>
<n-button class="w-[48%] !h-11 !rounded-full !border-none !bg-[linear-gradient(135deg,#D71A44,#DB5F51)] !font-bold !tracking-[0.04em] shadow-[0_4px_10px_rgba(215,26,68,0.18),0_14px_28px_rgba(215,26,68,0.2)]" type="primary" variant="solid" @click="navSubmit">确定</n-button>
</div>
</n-form>
</maskX>
@@ -264,7 +264,7 @@
</contextMenu>
<maskX :visible="editModal" :setVisible="handleItemCancel">
<div class="w-[500px] rounded-[28px] border border-white/80 bg-[radial-gradient(circle_at_top_left,rgba(255,199,132,0.16),transparent_34%),radial-gradient(circle_at_top_right,rgba(136,203,255,0.14),transparent_28%),linear-gradient(180deg,rgba(255,255,255,0.84),rgba(242,247,251,0.78))] p-8 shadow-[0_4px_12px_rgba(75,96,120,0.08),0_20px_44px_rgba(75,96,120,0.12),0_64px_120px_rgba(178,128,88,0.08)] backdrop-blur-[20px]">
<div class="w-[500px] rounded-[28px] border border-white/80 bg-[radial-gradient(circle_at_top_left,rgba(219,95,81,0.07),transparent_34%),radial-gradient(circle_at_top_right,rgba(249,154,159,0.06),transparent_28%),linear-gradient(180deg,rgba(255,255,255,0.84),rgba(255,239,234,0.78))] p-8 shadow-[0_4px_12px_rgba(128,118,126,0.08),0_20px_44px_rgba(128,118,126,0.12),0_64px_120px_rgba(215,26,68,0.08)] backdrop-blur-[20px]">
<div class="mb-8 flex items-center justify-center gap-2 text-center text-xl font-bold tracking-[0.02em] text-slate-800">
<icon-pen class="w-5 text-primary" />
修改导航内容
@@ -277,8 +277,8 @@
</div>
<n-input class="modal-input" v-model:value="editInput" placeholder="请输入修改内容" @keyup.enter="handleItemSubmit" />
<div class="mt-8 flex justify-between">
<n-button class="w-[48%] !h-11 !rounded-full !border-none !bg-white/90 !font-bold !tracking-[0.04em] !text-slate-600 shadow-[0_3px_8px_rgba(89,108,130,0.07),0_12px_24px_rgba(89,108,130,0.09)]" secondary @click="handleItemCancel">取消</n-button>
<n-button class="w-[48%] !h-11 !rounded-full !border-none !bg-[linear-gradient(135deg,#ec66ab,#f48a6f)] !font-bold !tracking-[0.04em] shadow-[0_4px_10px_rgba(236,102,171,0.18),0_14px_28px_rgba(236,102,171,0.2)]" type="primary" @click="handleItemSubmit">确定</n-button>
<n-button class="w-[48%] !h-11 !rounded-full !border-none !bg-white/90 !font-bold !tracking-[0.04em] !text-slate-600 shadow-[0_3px_8px_rgba(128,118,126,0.07),0_12px_24px_rgba(128,118,126,0.09)]" secondary @click="handleItemCancel">取消</n-button>
<n-button class="w-[48%] !h-11 !rounded-full !border-none !bg-[linear-gradient(135deg,#D71A44,#DB5F51)] !font-bold !tracking-[0.04em] shadow-[0_4px_10px_rgba(215,26,68,0.18),0_14px_28px_rgba(215,26,68,0.2)]" type="primary" @click="handleItemSubmit">确定</n-button>
</div>
</div>
</maskX>
@@ -1461,7 +1461,7 @@ watch(searchBox, (visible) => {
}
.glass-nav-card:hover .card-name {
background: linear-gradient(135deg, #ec66ab, #f48a6f);
background: linear-gradient(135deg, #D71A44, #DB5F51);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
@@ -1556,7 +1556,7 @@ watch(searchBox, (visible) => {
.menu-item:hover {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.45));
color: #ec66ab;
color: #D71A44;
padding-left: 1.2rem;
}
@@ -1632,7 +1632,7 @@ watch(searchBox, (visible) => {
.quick-tag:hover {
transform: translateY(-1px);
border-color: rgba(236, 102, 171, 0.55);
color: #ec66ab;
color: #D71A44;
box-shadow:
0 2px 6px rgba(236, 102, 171, 0.1),
0 6px 14px rgba(236, 102, 171, 0.08);
@@ -1641,7 +1641,7 @@ watch(searchBox, (visible) => {
.quick-tag--active {
color: #fff;
border-color: transparent;
background: linear-gradient(135deg, #ec66ab, #f48a6f);
background: linear-gradient(135deg, #D71A44, #DB5F51);
box-shadow:
0 3px 8px rgba(236, 102, 171, 0.2),
0 10px 18px rgba(236, 102, 171, 0.14);
uno.config.ts
+15 -15
View File
@@ -3,24 +3,24 @@ import { defineConfig, presetUno } from "unocss";
export default defineConfig({
presets: [presetUno()],
shortcuts: {
"blog-glass-panel": "relative overflow-hidden rounded-[30px] border border-white/62 bg-[linear-gradient(145deg,rgba(255,251,246,0.68),rgba(237,246,244,0.56))] shadow-[0_20px_50px_rgba(110,124,112,0.11)] backdrop-blur-[20px] after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:bg-[linear-gradient(120deg,rgba(255,255,255,0.24),transparent_45%)] after:content-['']",
"blog-glass-panel": "relative overflow-hidden rounded-[30px] border border-white/62 bg-[linear-gradient(145deg,rgba(255,251,246,0.68),rgba(237,246,244,0.56))] shadow-[0_20px_50px_rgba(128,118,126,0.11)] backdrop-blur-[20px] after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:bg-[linear-gradient(120deg,rgba(255,255,255,0.24),transparent_45%)] after:content-['']",
"blog-filter-btn": "relative flex h-full min-h-0 w-full items-center justify-between gap-3 overflow-hidden rounded-[22px] border-none px-4 py-3 text-left outline-none ring-0 backdrop-blur-[26px] transition-[transform,box-shadow,background-color,color] duration-350 [transition-timing-function:cubic-bezier(0.22,1,0.36,1)] before:pointer-events-none before:absolute before:inset-[1px] before:rounded-[20px] before:border-0 before:content-[''] after:pointer-events-none after:absolute after:inset-0 after:bg-[radial-gradient(circle_at_top_left,rgba(255,255,255,0.28),transparent_42%)] after:opacity-80 after:content-['']",
"blog-filter-btn-idle": "bg-[linear-gradient(135deg,rgba(255,255,255,0.5),rgba(255,255,255,0.18))] text-[#435468] shadow-[0_14px_30px_rgba(112,128,118,0.1)] hover:-translate-y-1 hover:translate-x-1 hover:bg-[linear-gradient(135deg,rgba(255,255,255,0.68),rgba(244,248,247,0.3))] hover:shadow-[0_20px_36px_rgba(112,128,118,0.14)]",
"blog-filter-btn-active": "bg-[linear-gradient(135deg,rgba(236,102,171,0.96),rgba(244,138,111,0.88))] text-white shadow-[0_18px_38px_rgba(236,102,171,0.28)]",
"blog-stat-card": "relative overflow-hidden rounded-[22px] border border-white/52 bg-[linear-gradient(135deg,rgba(255,255,255,0.28),rgba(240,247,247,0.14))] px-4 py-3 shadow-[0_18px_34px_rgba(112,128,118,0.12),inset_0_1px_0_rgba(255,255,255,0.2)] backdrop-blur-[24px] before:pointer-events-none before:absolute before:inset-0 before:bg-[linear-gradient(135deg,rgba(255,255,255,0.28),transparent_42%,rgba(151,197,224,0.1))] before:content-[''] after:pointer-events-none after:absolute after:inset-[1px] after:rounded-[20px] after:border after:border-white/18 after:content-['']",
"blog-filter-btn-idle": "bg-[linear-gradient(135deg,rgba(255,255,255,0.5),rgba(255,255,255,0.18))] text-[#6d4a52] shadow-[0_14px_30px_rgba(128,118,126,0.1)] hover:-translate-y-1 hover:translate-x-1 hover:bg-[linear-gradient(135deg,rgba(255,255,255,0.68),rgba(244,248,247,0.3))] hover:shadow-[0_20px_36px_rgba(128,118,126,0.14)]",
"blog-filter-btn-active": "bg-[linear-gradient(135deg,rgba(215,26,68,0.96),rgba(219,95,81,0.88))] text-white shadow-[0_18px_38px_rgba(215,26,68,0.28)]",
"blog-stat-card": "relative overflow-hidden rounded-[22px] border border-white/52 bg-[linear-gradient(135deg,rgba(255,255,255,0.28),rgba(240,247,247,0.14))] px-4 py-3 shadow-[0_18px_34px_rgba(128,118,126,0.12),inset_0_1px_0_rgba(255,255,255,0.2)] backdrop-blur-[24px] before:pointer-events-none before:absolute before:inset-0 before:bg-[linear-gradient(135deg,rgba(255,255,255,0.28),transparent_42%,rgba(222,217,178,0.1))] before:content-[''] after:pointer-events-none after:absolute after:inset-[1px] after:rounded-[20px] after:border after:border-white/18 after:content-['']",
"blog-filter-total": "relative z-[1] flex min-w-[72px] shrink-0 flex-col items-center justify-center rounded-[18px] border-none px-3 py-2 text-center shadow-[inset_0_1px_0_rgba(255,255,255,0.18)]",
"blog-list-panel": "relative overflow-hidden rounded-[30px] border border-white/54 bg-[linear-gradient(145deg,rgba(255,255,255,0.28),rgba(240,247,247,0.14))] shadow-[0_24px_60px_rgba(109,126,117,0.12)] backdrop-blur-[28px] before:pointer-events-none before:absolute before:inset-0 before:bg-[linear-gradient(135deg,rgba(255,255,255,0.24),transparent_38%,rgba(151,197,224,0.08))] before:content-[''] after:pointer-events-none after:absolute after:inset-[1px] after:rounded-[28px] after:border after:border-white/22 after:content-['']",
"blog-list-panel": "relative overflow-hidden rounded-[30px] border border-white/54 bg-[linear-gradient(145deg,rgba(255,255,255,0.28),rgba(240,247,247,0.14))] shadow-[0_24px_60px_rgba(128,118,126,0.12)] backdrop-blur-[28px] before:pointer-events-none before:absolute before:inset-0 before:bg-[linear-gradient(135deg,rgba(255,255,255,0.24),transparent_38%,rgba(222,217,178,0.08))] before:content-[''] after:pointer-events-none after:absolute after:inset-[1px] after:rounded-[28px] after:border after:border-white/22 after:content-['']",
"blog-scroll-panel": "relative overflow-hidden rounded-[24px] border border-white/36 bg-[linear-gradient(180deg,rgba(255,255,255,0.16),rgba(255,255,255,0.07))] p-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.24)] backdrop-blur-[18px]",
"blog-detail-card": "relative overflow-hidden rounded-[28px] border border-white/54 bg-[linear-gradient(145deg,rgba(255,255,255,0.32),rgba(240,247,247,0.14))] shadow-[0_18px_42px_rgba(109,126,117,0.12),inset_0_1px_0_rgba(255,255,255,0.24)] backdrop-blur-[24px] before:pointer-events-none before:absolute before:inset-0 before:bg-[linear-gradient(135deg,rgba(255,255,255,0.24),transparent_44%,rgba(151,197,224,0.1))] before:content-[''] after:pointer-events-none after:absolute after:inset-[1px] after:rounded-[26px] after:border after:border-white/18 after:content-['']",
"blog-detail-card-soft": "relative overflow-hidden rounded-[22px] border border-white/46 bg-[linear-gradient(145deg,rgba(255,255,255,0.24),rgba(244,248,247,0.12))] shadow-[0_14px_28px_rgba(109,126,117,0.09),inset_0_1px_0_rgba(255,255,255,0.2)] backdrop-blur-[18px] before:pointer-events-none before:absolute before:inset-0 before:bg-[radial-gradient(circle_at_top_left,rgba(255,255,255,0.24),transparent_44%)] before:content-['']",
"blog-list-card": "relative overflow-hidden rounded-[28px] border border-white/52 bg-[linear-gradient(145deg,rgba(255,255,255,0.34),rgba(240,247,247,0.16))] p-6 shadow-[0_18px_40px_rgba(116,132,124,0.14),inset_0_1px_0_rgba(255,255,255,0.26)] backdrop-blur-[24px] before:pointer-events-none before:absolute before:inset-0 before:bg-[linear-gradient(135deg,rgba(255,255,255,0.28),transparent_48%,rgba(151,197,224,0.1))] before:content-[''] after:pointer-events-none after:absolute after:inset-[1px] after:rounded-[26px] after:border after:border-white/18 after:content-[''] transition-[transform,box-shadow,border-color] duration-[320ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)] hover:-translate-y-2 hover:border-white/72 hover:shadow-[0_28px_52px_rgba(102,123,112,0.18),inset_0_1px_0_rgba(255,255,255,0.32)]",
"blog-detail-card": "relative overflow-hidden rounded-[28px] border border-white/54 bg-[linear-gradient(145deg,rgba(255,255,255,0.32),rgba(240,247,247,0.14))] shadow-[0_18px_42px_rgba(128,118,126,0.12),inset_0_1px_0_rgba(255,255,255,0.24)] backdrop-blur-[24px] before:pointer-events-none before:absolute before:inset-0 before:bg-[linear-gradient(135deg,rgba(255,255,255,0.24),transparent_44%,rgba(222,217,178,0.1))] before:content-[''] after:pointer-events-none after:absolute after:inset-[1px] after:rounded-[26px] after:border after:border-white/18 after:content-['']",
"blog-detail-card-soft": "relative overflow-hidden rounded-[22px] border border-white/46 bg-[linear-gradient(145deg,rgba(255,255,255,0.24),rgba(244,248,247,0.12))] shadow-[0_14px_28px_rgba(128,118,126,0.09),inset_0_1px_0_rgba(255,255,255,0.2)] backdrop-blur-[18px] before:pointer-events-none before:absolute before:inset-0 before:bg-[radial-gradient(circle_at_top_left,rgba(255,255,255,0.24),transparent_44%)] before:content-['']",
"blog-list-card": "relative overflow-hidden rounded-[28px] border border-white/52 bg-[linear-gradient(145deg,rgba(255,255,255,0.34),rgba(240,247,247,0.16))] p-6 shadow-[0_18px_40px_rgba(128,118,126,0.14),inset_0_1px_0_rgba(255,255,255,0.26)] backdrop-blur-[24px] before:pointer-events-none before:absolute before:inset-0 before:bg-[linear-gradient(135deg,rgba(255,255,255,0.28),transparent_48%,rgba(222,217,178,0.1))] before:content-[''] after:pointer-events-none after:absolute after:inset-[1px] after:rounded-[26px] after:border after:border-white/18 after:content-[''] transition-[transform,box-shadow,border-color] duration-[320ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)] hover:-translate-y-2 hover:border-white/72 hover:shadow-[0_28px_52px_rgba(128,118,126,0.18),inset_0_1px_0_rgba(255,255,255,0.32)]",
"blog-card-animate": "opacity-0 [will-change:transform,opacity] motion-safe:[animation:blog-card-in_720ms_cubic-bezier(0.22,1,0.36,1)_both]",
"blog-chip-animate": "opacity-0 [will-change:transform,opacity] motion-safe:[animation:blog-chip-in_560ms_cubic-bezier(0.2,0.8,0.2,1)_both]",
"blog-mobile-filter-pill": "rounded-full border border-white/72 bg-white/58 px-4 py-2 text-sm font-semibold text-[#526376] shadow-[0_10px_22px_rgba(112,128,118,0.08)] backdrop-blur-[14px] transition-[transform,box-shadow,border-color,background-color,color] duration-250 hover:-translate-y-0.5 hover:border-white/90 hover:bg-white/74",
"blog-mobile-filter-pill-active": "border-transparent bg-[linear-gradient(135deg,#ec66ab,#f48a6f)] text-white shadow-[0_12px_24px_rgba(236,102,171,0.22)]",
"home-glass-surface": "relative border border-white/58 bg-[linear-gradient(135deg,rgba(255,255,255,0.34),rgba(255,255,255,0.16)),linear-gradient(180deg,rgba(241,248,252,0.2),rgba(224,236,245,0.08))] shadow-[0_18px_38px_rgba(86,111,137,0.12),inset_0_1px_0_rgba(255,255,255,0.68),inset_0_-1px_0_rgba(255,255,255,0.14)] backdrop-blur-[24px] saturate-[165%] before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:bg-[linear-gradient(135deg,rgba(255,255,255,0.34),rgba(255,255,255,0.08)_48%,rgba(151,197,224,0.08)),radial-gradient(circle_at_top_left,rgba(255,255,255,0.45),transparent_42%)] before:opacity-[0.95] before:content-[''] after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:border after:border-white/24 after:bg-[linear-gradient(180deg,rgba(255,255,255,0.14),transparent_36%,rgba(255,255,255,0.08))] after:content-['']",
"home-glass-floating": "shadow-[0_24px_52px_rgba(86,111,137,0.18),inset_0_1px_0_rgba(255,255,255,0.74),inset_0_-1px_0_rgba(255,255,255,0.16)]",
"home-nav-card": "home-glass-surface transition-[transform,box-shadow,border-color] duration-[320ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)] hover:border-white/74 hover:shadow-[0_28px_48px_rgba(86,111,137,0.18),inset_0_1px_0_rgba(255,255,255,0.78),inset_0_-1px_0_rgba(255,255,255,0.2)]",
"blog-mobile-filter-pill": "rounded-full border border-white/72 bg-white/58 px-4 py-2 text-sm font-semibold text-[#72515a] shadow-[0_10px_22px_rgba(128,118,126,0.08)] backdrop-blur-[14px] transition-[transform,box-shadow,border-color,background-color,color] duration-250 hover:-translate-y-0.5 hover:border-white/90 hover:bg-white/74",
"blog-mobile-filter-pill-active": "border-transparent bg-[linear-gradient(135deg,#D71A44,#DB5F51)] text-white shadow-[0_12px_24px_rgba(215,26,68,0.22)]",
"home-glass-surface": "relative border border-white/58 bg-[linear-gradient(135deg,rgba(255,255,255,0.34),rgba(255,255,255,0.16)),linear-gradient(180deg,rgba(241,248,252,0.2),rgba(224,236,245,0.08))] shadow-[0_18px_38px_rgba(128,118,126,0.12),inset_0_1px_0_rgba(255,255,255,0.68),inset_0_-1px_0_rgba(255,255,255,0.14)] backdrop-blur-[24px] saturate-[165%] before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:bg-[linear-gradient(135deg,rgba(255,255,255,0.34),rgba(255,255,255,0.08)_48%,rgba(222,217,178,0.08)),radial-gradient(circle_at_top_left,rgba(255,255,255,0.45),transparent_42%)] before:opacity-[0.95] before:content-[''] after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:border after:border-white/24 after:bg-[linear-gradient(180deg,rgba(255,255,255,0.14),transparent_36%,rgba(255,255,255,0.08))] after:content-['']",
"home-glass-floating": "shadow-[0_24px_52px_rgba(128,118,126,0.18),inset_0_1px_0_rgba(255,255,255,0.74),inset_0_-1px_0_rgba(255,255,255,0.16)]",
"home-nav-card": "home-glass-surface transition-[transform,box-shadow,border-color] duration-[320ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)] hover:border-white/74 hover:shadow-[0_28px_48px_rgba(128,118,126,0.18),inset_0_1px_0_rgba(255,255,255,0.78),inset_0_-1px_0_rgba(255,255,255,0.2)]",
"home-nav-card-warm": "bg-[linear-gradient(135deg,rgba(255,249,242,0.4),rgba(255,245,231,0.2)),linear-gradient(180deg,rgba(255,236,211,0.14),rgba(244,225,204,0.06))]",
"home-search-select": "rounded-full bg-transparent px-0.5 py-0 min-h-[2.5rem] relative before:pointer-events-none before:absolute before:inset-[1px] before:rounded-[9999px] before:bg-[linear-gradient(135deg,rgba(255,255,255,0.28),rgba(255,255,255,0.08))] before:shadow-[inset_0_1px_0_rgba(255,255,255,0.36),inset_-1px_0_0_rgba(255,255,255,0.1)] before:content-['']",
"home-search-panel-animate": "overflow-auto origin-top motion-safe:[animation:home-search-panel-enter_180ms_cubic-bezier(0.22,1,0.36,1)_both]",
@@ -68,8 +68,8 @@ export default defineConfig({
],
theme: {
colors: {
primary: "#ec66ab",
deepp: "#a7415d",
primary: "#D71A44",
deepp: "#b21238",
},
},
});