94 lines
2.5 KiB
Vue
94 lines
2.5 KiB
Vue
<script setup lang="ts">
|
||
/**
|
||
* 页面氛围底：柔和色斑 + 渐变，让毛玻璃卡片「透」出设计感
|
||
* 作为壳层放在页面最外层，业务内容用 slot；禁止各页再各自画背景斑
|
||
* 同时承担主题作用域：根节点是 wd-config-provider（wot 官方深色方案），
|
||
* 生成的 .wot-theme-* 类同时驱动 wot 组件配色与业务 --nl-* token
|
||
*/
|
||
import { useThemeShell } from '@/composables/useThemeShell'
|
||
|
||
withDefaults(
|
||
defineProps<{
|
||
/** warm 橙暖（默认）/ cool 中性灰 */
|
||
tone?: 'warm' | 'cool'
|
||
}>(),
|
||
{ tone: 'warm' },
|
||
)
|
||
|
||
const { wotTheme } = useThemeShell()
|
||
</script>
|
||
|
||
<template>
|
||
<wd-config-provider :theme="wotTheme">
|
||
<view class="atm" :class="`is-${tone}`">
|
||
<view class="atm__blob atm__blob--a" />
|
||
<view class="atm__blob atm__blob--b" />
|
||
<view class="atm__blob atm__blob--c" />
|
||
<view class="atm__content">
|
||
<slot />
|
||
</view>
|
||
</view>
|
||
</wd-config-provider>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
.atm {
|
||
position: relative;
|
||
min-height: 100vh;
|
||
overflow: hidden;
|
||
box-sizing: border-box;
|
||
/* 整条渐变走主题变量，暗色时自动切换为深底（见 app.scss） */
|
||
background: var(--nl-atm-warm, linear-gradient(165deg, #fff4ea 0%, #f3f0ec 42%, #eef1f6 100%));
|
||
}
|
||
|
||
.atm.is-cool {
|
||
background: var(--nl-atm-cool, linear-gradient(165deg, #f4f6f9 0%, #f3f0ec 50%, #e8ecf2 100%));
|
||
}
|
||
|
||
.atm__blob {
|
||
position: absolute;
|
||
border-radius: 50%;
|
||
filter: blur(2px);
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
/* 暗色下色斑压暗一档，避免黑底上色斑过跳 */
|
||
opacity: var(--nl-atm-blob-opacity, 1);
|
||
}
|
||
|
||
/* 卡片提实到 0.8+ 后氛围主要从卡片边缘/间隙透出，色斑整体加强一档保住玻璃感 */
|
||
.atm__blob--a {
|
||
width: 420rpx;
|
||
height: 420rpx;
|
||
top: -80rpx;
|
||
right: -100rpx;
|
||
background: radial-gradient(circle, rgba(255, 107, 0, 0.32) 0%, rgba(255, 107, 0, 0) 70%);
|
||
}
|
||
|
||
.atm__blob--b {
|
||
width: 360rpx;
|
||
height: 360rpx;
|
||
top: 38%;
|
||
left: -140rpx;
|
||
background: radial-gradient(circle, rgba(255, 170, 80, 0.26) 0%, rgba(255, 170, 80, 0) 70%);
|
||
}
|
||
|
||
.atm__blob--c {
|
||
width: 480rpx;
|
||
height: 480rpx;
|
||
bottom: 8%;
|
||
right: -160rpx;
|
||
background: radial-gradient(circle, rgba(120, 160, 220, 0.18) 0%, rgba(120, 160, 220, 0) 70%);
|
||
}
|
||
|
||
.atm.is-cool .atm__blob--a {
|
||
background: radial-gradient(circle, rgba(100, 130, 180, 0.2) 0%, rgba(100, 130, 180, 0) 70%);
|
||
}
|
||
|
||
.atm__content {
|
||
position: relative;
|
||
z-index: 1;
|
||
min-height: 100vh;
|
||
box-sizing: border-box;
|
||
}
|
||
</style>
|