148 lines
2.7 KiB
Vue
148 lines
2.7 KiB
Vue
<template>
|
||
<view class="page-wrapper">
|
||
<!-- 背景装饰 - 与原始设计一致 -->
|
||
<view class="bg-decoration">
|
||
<view class="orb orb-1"></view>
|
||
<view class="orb orb-2"></view>
|
||
</view>
|
||
|
||
<!-- 顶部背景图（模糊处理） -->
|
||
<view class="page-bg">
|
||
<image class="bg-image" :src="coverUrl" mode="aspectFill" />
|
||
<view class="bg-mask"></view>
|
||
</view>
|
||
|
||
<!-- 主要内容区域 -->
|
||
<scroll-view
|
||
class="main-scroll"
|
||
scroll-y
|
||
:enhanced="true"
|
||
:bounces="true"
|
||
:show-scrollbar="false"
|
||
:fast-deceleration="false"
|
||
>
|
||
<!-- 头部插槽 -->
|
||
<slot name="header"></slot>
|
||
|
||
<!-- 主内容插槽 -->
|
||
<slot name="content"></slot>
|
||
<slot></slot>
|
||
|
||
<!-- 底部垫高 -->
|
||
<view :style="{ height: bottomPadding }"></view>
|
||
</scroll-view>
|
||
|
||
<!-- 底部操作栏插槽 -->
|
||
<slot name="footer"></slot>
|
||
|
||
<!-- 弹窗插槽 -->
|
||
<slot name="modals"></slot>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
defineProps({
|
||
coverUrl: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
bottomPadding: {
|
||
type: String,
|
||
default: '180rpx'
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
/* ============================================
|
||
页面框架 - 与原始设计完全一致
|
||
============================================ */
|
||
|
||
.page-wrapper {
|
||
min-height: 100vh;
|
||
background: $bg-page;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 背景装饰 */
|
||
.bg-decoration {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 0;
|
||
pointer-events: none;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.orb {
|
||
position: absolute;
|
||
border-radius: 50%;
|
||
filter: blur(80rpx);
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.orb-1 {
|
||
width: 500rpx;
|
||
height: 500rpx;
|
||
background: radial-gradient(circle, rgba($brand-primary, 0.2) 0%, transparent 70%);
|
||
top: -100rpx;
|
||
left: -100rpx;
|
||
}
|
||
|
||
.orb-2 {
|
||
width: 600rpx;
|
||
height: 600rpx;
|
||
background: radial-gradient(circle, rgba($accent-gold, 0.15) 0%, transparent 70%);
|
||
bottom: -100rpx;
|
||
right: -100rpx;
|
||
}
|
||
|
||
/* 顶部背景 */
|
||
.page-bg {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 900rpx;
|
||
z-index: 1;
|
||
}
|
||
|
||
.bg-image {
|
||
width: 115%;
|
||
height: 115%;
|
||
max-width: 115%;
|
||
max-height: 115%;
|
||
position: absolute;
|
||
top: -7.5%;
|
||
left: -7.5%;
|
||
filter: blur(40rpx) brightness(0.85) saturate(1.1);
|
||
}
|
||
|
||
.bg-mask {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
/* 6段式平滑过渡，模拟ease-out曲线 */
|
||
background:
|
||
linear-gradient(180deg,
|
||
rgba($bg-page, 0) 0%,
|
||
rgba($bg-page, 0.05) 15%,
|
||
rgba($bg-page, 0.2) 35%,
|
||
rgba($bg-page, 0.5) 55%,
|
||
rgba($bg-page, 0.8) 70%,
|
||
$bg-page 82%
|
||
);
|
||
}
|
||
|
||
.main-scroll {
|
||
position: relative;
|
||
z-index: 2;
|
||
height: 100vh;
|
||
}
|
||
</style>
|