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-03-22 21:10:01 +08:00
parent 9586c67a46
commit 112a59360e
7 changed files with 822 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/Gallery.vue
+14 -1
View File
@@ -24,7 +24,7 @@
</div>
<div
class="mt-6 rounded-full border border-white/62 bg-[linear-gradient(135deg,rgba(255,249,241,0.76),rgba(236,245,243,0.72)),radial-gradient(circle_at_top_right,rgba(255,255,255,0.28),transparent_34%)] px-[1.1rem] py-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.55)]">
class="mt-6 rounded-full border border-white/62 bg-[linear-gradient(135deg,rgba(255,249,241,0.76),rgba(236,245,243,0.72)),radial-gradient(circle_at_top_right,rgba(255,255,255,0.28),transparent_34%)] shadow-[inset_0_1px_0_rgba(255,255,255,0.55)]">
<n-input class="gallery-search" round size="large" v-model:value="kw" @keyup.enter="onSearch"
placeholder="请输入关键词，按回车开始搜索">
<template #suffix>
@@ -277,4 +277,17 @@ onUnmounted(() => {
:deep(.n-image img) {
border-radius: 1rem !important;
}
:deep(.n-input) {
--n-border: none !important;
--n-border-hover: none !important;
--n-border-focus: none !important;
--n-box-shadow-focus: none !important;
background: transparent !important;
}
:deep(.n-input__input-el),
:deep(.n-base-selection-label) {
color: #314155 !important;
}
</style>